From bd068616c69e426f60b1e89f177a4dda6682e644 Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Wed, 18 May 2011 14:59:00 -0700 Subject: [PATCH 1/3] Fix for #1470 Corner styling issue with listview refresh on growing lists --- js/jquery.mobile.listview.js | 11 ++++++++-- tests/unit/listview/index.html | 5 +++++ tests/unit/listview/listview_core.js | 33 ++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index 9fd9a660..f6b8a428 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -43,7 +43,12 @@ $.widget( "mobile.listview", $.mobile.widget, { }); }, - _removeCorners: function( li ) { + _removeCorners: function( li, which ) { + which = which || ["top", "bottom"]; + var classes = { + top: "ui-corner-top ui-corner-tr ui-corner-tl", + bottom: "ui-corner-bottom ui-corner-br ui-corner-bl" + }; li .add( li.find(".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb") ) .removeClass( "ui-corner-top ui-corner-bottom ui-corner-br ui-corner-bl ui-corner-tr ui-corner-tl" ); @@ -163,7 +168,9 @@ $.widget( "mobile.listview", $.mobile.widget, { if(item.prev().prev().length){ self._removeCorners( item.prev() ); - } + } else if (item.prev().length) { + self._removeCorners( item.prev(), ["bottom"]); + } } } diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html index 4a30a43b..83e35328 100644 --- a/tests/unit/listview/index.html +++ b/tests/unit/listview/index.html @@ -223,5 +223,10 @@ + +
+ +
+ diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js index 66132803..54a79601 100644 --- a/tests/unit/listview/listview_core.js +++ b/tests/unit/listview/listview_core.js @@ -306,4 +306,37 @@ }, 1000); }); + module( "Programmatically generated list items", { + setup: function(){ + var item, + data = [ + {id: 1, + label: "Item 1" + }, + {id: 2, + label: "Item 2" + }, + {id: 3, + label: "Item 3" + }, + {id: 4, + label: "Item 4" + } + ]; + + $.testHelper.openPage("#programmatically-generated-list"); + + for (var i = 0, len = data.length; i < len; i++) { + item = $('
  • '); + label = $("" + data[i].label + "").appendTo(item); + $('#programmatically-generated-list-items').append(item); + $('#programmatically-generated-list-items').listview('refresh'); + } + } + }); + + test( "Corner styling issue (#1470)", function() { + ok(!$('#programmatically-generated-list-items li:first-child').hasClass("ui-corner-bottom"), "First list item should not have class ui-corner-bottom"); + }); + })(jQuery); \ No newline at end of file From 4487aba8a0eb38eea6b4dc6992ddc78219d598ee Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Mon, 20 Jun 2011 13:16:09 -0700 Subject: [PATCH 2/3] Fixed test case for programmatically created list items --- tests/unit/listview/listview_core.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js index 2ecb5b13..a4023657 100644 --- a/tests/unit/listview/listview_core.js +++ b/tests/unit/listview/listview_core.js @@ -408,19 +408,27 @@ } ]; - $.testHelper.openPage("#programmatically-generated-list"); + $( "#programmatically-generated-list-items" ).html(""); for (var i = 0, len = data.length; i < len; i++) { item = $('
  • '); - label = $("" + data[i].label + "").appendTo(item); - $('#programmatically-generated-list-items').append(item); - $('#programmatically-generated-list-items').listview('refresh'); + label = $( "" + data[i].label + "").appendTo( item ); + $( "#programmatically-generated-list-items" ).append( item ); } } }); - test( "Corner styling issue (#1470)", function() { - ok(!$('#programmatically-generated-list-items li:first-child').hasClass("ui-corner-bottom"), "First list item should not have class ui-corner-bottom"); + asyncTest( "Corner styling on programmatically created list items", function() { + // https://github.com/jquery/jquery-mobile/issues/1470 + $.testHelper.pageSequence([ + function() { + $.testHelper.openPage( "#programmatically-generated-list" ); + }, + function() { + ok(!$( "#programmatically-generated-list-items li:first-child" ).hasClass( "ui-corner-bottom" ), "First list item should not have class ui-corner-bottom" ); + start(); + } + ]); }); module("Programmatic list items manipulation"); From dabb66aae9bf3b7928067b179bed74132217efb8 Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Mon, 20 Jun 2011 13:17:23 -0700 Subject: [PATCH 3/3] Coding standards --- tests/unit/listview/listview_core.js | 34 ++++++++++++++++------------ 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js index a4023657..bb1612a3 100644 --- a/tests/unit/listview/listview_core.js +++ b/tests/unit/listview/listview_core.js @@ -394,24 +394,28 @@ setup: function(){ var item, data = [ - {id: 1, - label: "Item 1" - }, - {id: 2, - label: "Item 2" - }, - {id: 3, - label: "Item 3" - }, - {id: 4, - label: "Item 4" - } - ]; + { + id: 1, + label: "Item 1" + }, + { + id: 2, + label: "Item 2" + }, + { + id: 3, + label: "Item 3" + }, + { + id: 4, + label: "Item 4" + } + ]; $( "#programmatically-generated-list-items" ).html(""); - for (var i = 0, len = data.length; i < len; i++) { - item = $('
  • '); + for ( var i = 0, len = data.length; i < len; i++ ) { + item = $( '
  • ' ); label = $( "" + data[i].label + "").appendTo( item ); $( "#programmatically-generated-list-items" ).append( item ); }