Permalink
Browse files

Fix for #1470

Corner styling issue with listview refresh on growing lists
  • Loading branch information...
Ghislain Seguin Ghislain Seguin
Ghislain Seguin authored and Ghislain Seguin committed May 18, 2011
1 parent ae7d62a commit bd068616c69e426f60b1e89f177a4dda6682e644
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
@@ -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"]);
+ }
}
}
@@ -223,5 +223,10 @@ <h1>Split List View</h1>
</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>
@@ -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

This comment has been minimized.

Show comment
Hide comment
@hakanson

hakanson May 19, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin May 19, 2011

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.

Owner

gseguin replied May 19, 2011

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.