Skip to content
Browse files

Fix for #1470

Corner styling issue with listview refresh on growing lists
  • Loading branch information...
1 parent ae7d62a commit bd068616c69e426f60b1e89f177a4dda6682e644 Ghislain Seguin committed with Ghislain Seguin May 18, 2011
Showing with 47 additions and 2 deletions.
  1. +9 −2 js/jquery.mobile.listview.js
  2. +5 −0 tests/unit/listview/index.html
  3. +33 −0 tests/unit/listview/listview_core.js
View
11 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"]);
+ }
}
}
View
5 tests/unit/listview/index.html
@@ -223,5 +223,10 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<!-- Programmatically generated list items !-->
+<div data-nstest-role="page" id="programmatically-generated-list">
+ <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
+</div>
+
</body>
</html>
View
33 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 = $('<li id="myItem' + data[i].id + '">');
+ label = $("<strong>" + data[i].label + "</strong>").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);

2 comments on commit bd06861

@hakanson

Can you add thumbnails to this test and also check for $("li:first-child .ui-li-thumb").hasClass("ui-corner-tl")?

A second test could programmatically remove the first li and check again.

@gseguin
Owner

That'll probably require to add a teardown function to the module to remove the programmatically created list items and then create another test. I'll wait until this pull request gets in.

Please sign in to comment.
Something went wrong with that request. Please try again.