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 @@ + +
+
+

Inset Filter List View

+
+
+ +
+
+
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", {