diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js
index 401ca433..ebbcc2bd 100644
--- a/js/jquery.mobile.listview.filter.js
+++ b/js/jquery.mobile.listview.filter.js
@@ -100,6 +100,7 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
//filtervalue is empty => show all
listItems.toggleClass( "ui-screen-hidden", false );
}
+ listview._refreshCorners();
})
.appendTo( wrapper )
.textinput();
diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js
index 5606216e..3a75d457 100644
--- a/js/jquery.mobile.listview.js
+++ b/js/jquery.mobile.listview.js
@@ -65,6 +65,42 @@ $.widget( "mobile.listview", $.mobile.widget, {
}
},
+ _refreshCorners: function() {
+ var $li,
+ $visibleli,
+ $topli,
+ $bottomli;
+
+ if ( this.options.inset ) {
+ $li = this.element.children( "li" );
+ $visibleli = $li.not( ".ui-screen-hidden" );
+
+ this._removeCorners( $li.filter( ".ui-corner-top" ).add( ".ui-corner-bottom" ) );
+
+ // Select the first visible li element
+ $topli = $visibleli.first()
+ .addClass( "ui-corner-top" );
+
+ $topli.add( $topli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-tr" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .addClass( "ui-corner-tl" );
+
+ // Select the last visible li element
+ $bottomli = $visibleli.last()
+ .addClass( "ui-corner-bottom" );
+
+ $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
+ .find( ".ui-li-link-alt" )
+ .addClass( "ui-corner-br" )
+ .end()
+ .find( ".ui-li-thumb" )
+ .addClass( "ui-corner-bl" );
+ }
+ },
+
refresh: function( create ) {
this.parentPage = this.element.closest( ".ui-page" );
this._createSubPages();
@@ -150,40 +186,6 @@ $.widget( "mobile.listview", $.mobile.widget, {
}
}
- if ( o.inset ) {
- if ( pos === 0 ) {
- itemClass += " ui-corner-top";
-
- item.add( item.find( ".ui-btn-inner" ) )
- .find( ".ui-li-link-alt" )
- .addClass( "ui-corner-tr" )
- .end()
- .find( ".ui-li-thumb" )
- .addClass( "ui-corner-tl" );
-
- if ( item.next().next().length ) {
- self._removeCorners( item.next() );
- }
- }
-
- if ( pos === li.length - 1 ) {
- itemClass += " ui-corner-bottom";
-
- item.add( item.find( ".ui-btn-inner" ) )
- .find( ".ui-li-link-alt" )
- .addClass( "ui-corner-br" )
- .end()
- .find( ".ui-li-thumb" )
- .addClass( "ui-corner-bl" );
-
- if ( item.prev().prev().length ) {
- self._removeCorners( item.prev() );
- } else if ( item.prev().length ) {
- self._removeCorners( item.prev(), "bottom" );
- }
- }
- }
-
if ( counter && itemClass.indexOf( "ui-li-divider" ) < 0 ) {
countParent = item.is( ".ui-li-static:first" ) ? item : item.find( ".ui-link-inherit" );
@@ -197,6 +199,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
self._itemApply( $list, item );
}
}
+
+ this._refreshCorners();
},
//create a string for ID/subpage url creation
diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html
index db08f0b2..3db7fea3 100644
--- a/tests/unit/listview/index.html
+++ b/tests/unit/listview/index.html
@@ -242,6 +242,21 @@
+
+
diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js
index 09503f0b..9f7d0d88 100644
--- a/tests/unit/listview/listview_core.js
+++ b/tests/unit/listview/listview_core.js
@@ -296,32 +296,40 @@
asyncTest( "Filter downs results when the user enters information", function() {
var $searchPage = $(searchFilterId);
- $.testHelper.openPage(searchFilterId);
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage(searchFilterId);
+ },
- setTimeout(function(){
- $searchPage.find('input').val('at');
- $searchPage.find('input').trigger('change');
- }, 500);
+ function() {
+ $searchPage.find('input').val('at');
+ $searchPage.find('input').trigger('change');
- setTimeout(function() {
- same($searchPage.find('li.ui-screen-hidden').length, 2);
- start();
- }, 1000);
+ setTimeout(function() {
+ same($searchPage.find('li.ui-screen-hidden').length, 2);
+ start();
+ }, 1000);
+ }
+ ]);
});
asyncTest( "Redisplay results when user removes values", function() {
var $searchPage = $(searchFilterId);
- $.testHelper.openPage(searchFilterId);
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage(searchFilterId);
+ },
- setTimeout(function(){
- $searchPage.find('input').val('a');
- $searchPage.find('input').trigger('change');
- }, 500);
+ function() {
+ $searchPage.find('input').val('a');
+ $searchPage.find('input').trigger('change');
- setTimeout(function() {
- same($searchPage.find("li[style^='display: none;']").length, 0);
- start();
- }, 1000);
+ setTimeout(function() {
+ same($searchPage.find("li[style^='display: none;']").length, 0);
+ start();
+ }, 1000);
+ }
+ ]);
});
test( "Refresh applies thumb styling", function(){
@@ -335,59 +343,115 @@
asyncTest( "Filter downs results and dividers when the user enters information", function() {
var $searchPage = $("#search-filter-with-dividers-test");
- $.testHelper.openPage("#search-filter-with-dividers-test");
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage("#search-filter-with-dividers-test");
+ },
- // wait for the page to become active/enhanced
- setTimeout(function(){
- $searchPage.find('input').val('at');
- $searchPage.find('input').trigger('change');
- }, 500);
+ // wait for the page to become active/enhanced
+ function(){
+ $searchPage.find('input').val('at');
+ $searchPage.find('input').trigger('change');
+ setTimeout(function() {
+ //there should be four hidden list entries
+ same($searchPage.find('li.ui-screen-hidden').length, 4);
- setTimeout(function() {
- //there should be four hidden list entries
- same($searchPage.find('li.ui-screen-hidden').length, 4);
+ //there should be two list entries that are list dividers and hidden
+ same($searchPage.find('li.ui-screen-hidden:jqmData(role=list-divider)').length, 2);
- //there should be two list entries that are list dividers and hidden
- same($searchPage.find('li.ui-screen-hidden:jqmData(role=list-divider)').length, 2);
-
- //there should be two list entries that are not list dividers and hidden
- same($searchPage.find('li.ui-screen-hidden:not(:jqmData(role=list-divider))').length, 2);
- start();
- }, 1000);
+ //there should be two list entries that are not list dividers and hidden
+ same($searchPage.find('li.ui-screen-hidden:not(:jqmData(role=list-divider))').length, 2);
+ start();
+ }, 1000);
+ }
+ ]);
});
asyncTest( "Redisplay results when user removes values", function() {
- $.testHelper.openPage("#search-filter-with-dividers-test");
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage("#search-filter-with-dividers-test");
+ },
- // wait for the page to become active/enhanced
- setTimeout(function(){
- $('.ui-page-active input').val('a');
- $('.ui-page-active input').trigger('change');
- }, 500);
+ function() {
+ $('.ui-page-active input').val('a');
+ $('.ui-page-active input').trigger('change');
- setTimeout(function() {
- same($('.ui-page-active input').val(), 'a');
- same($('.ui-page-active li[style^="display: none;"]').length, 0);
- start();
- }, 1000);
+ setTimeout(function() {
+ same($('.ui-page-active input').val(), 'a');
+ same($('.ui-page-active li[style^="display: none;"]').length, 0);
+ start();
+ }, 1000);
+ }
+ ]);
});
asyncTest( "Dividers are hidden when preceding hidden rows and shown when preceding shown rows", function () {
- $.testHelper.openPage("#search-filter-with-dividers-test");
- var $page = $('.ui-page-active');
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage("#search-filter-with-dividers-test");
+ },
- // wait for the page to become active/enhanced
- setTimeout(function(){
- $page.find('input').val('at');
- $page.find('input').trigger('change');
- }, 500);
+ function() {
+ var $page = $('.ui-page-active');
- setTimeout(function() {
- same($page.find('li:jqmData(role=list-divider):hidden').length, 2);
- same($page.find('li:jqmData(role=list-divider):hidden + li:not(:jqmData(role=list-divider)):hidden').length, 2);
- same($page.find('li:jqmData(role=list-divider):not(:hidden) + li:not(:jqmData(role=list-divider)):not([:hidden)').length, 2);
- start();
- }, 1000);
+ $page.find('input').val('at');
+ $page.find('input').trigger('change');
+
+ setTimeout(function() {
+ same($page.find('li:jqmData(role=list-divider):hidden').length, 2);
+ same($page.find('li:jqmData(role=list-divider):hidden + li:not(:jqmData(role=list-divider)):hidden').length, 2);
+ same($page.find('li:jqmData(role=list-divider):not(:hidden) + li:not(:jqmData(role=list-divider)):not([:hidden)').length, 2);
+ start();
+ }, 1000);
+ }
+ ]);
+ });
+
+ asyncTest( "Inset List View should refresh corner classes after filtering", 4 * 2, function () {
+ var checkClasses = function() {
+ var $page = $( ".ui-page-active" ),
+ $li = $page.find( "li:visible" );
+ ok($li.first().hasClass( "ui-corner-top" ), $li.length+" li elements: First visible element should have class ui-corner-top");
+ ok($li.last().hasClass( "ui-corner-bottom" ), $li.length+" li elements: Last visible element should have class ui-corner-bottom");
+ }
+
+ $.testHelper.pageSequence([
+ function() {
+ $.testHelper.openPage("#search-filter-inset-test");
+ },
+
+ function() {
+ var $page = $('.ui-page-active');
+ $.testHelper.sequence([
+ function() {
+ checkClasses();
+
+ $page.find('input').val('man');
+ $page.find('input').trigger('change');
+ },
+
+ function() {
+ checkClasses();
+
+ $page.find('input').val('at');
+ $page.find('input').trigger('change');
+ },
+
+ function() {
+ checkClasses();
+
+ $page.find('input').val('catwoman');
+ $page.find('input').trigger('change');
+ },
+
+ function() {
+ checkClasses();
+ start();
+ }
+ ], 50);
+ }
+ ]);
});
module( "Programmatically generated list items", {