mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-31 21:20:23 +00:00
Ghislain Seguin
commit
e0ae323bd8
4 changed files with 176 additions and 92 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -242,6 +242,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search bar filter inset -->
|
||||
<div data-nstest-role="page" id='search-filter-inset-test'>
|
||||
<div data-nstest-role="header" data-nstest-position="inline">
|
||||
<h1>Inset Filter List View</h1>
|
||||
</div>
|
||||
<div data-nstest-role="content">
|
||||
<ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
|
||||
<li>a is for aquaman</li>
|
||||
<li>b is for batman</li>
|
||||
<li>c is for catwoman</li>
|
||||
<li>d is for darkwing</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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", {
|
||||
|
|
|
|||
Loading…
Reference in a new issue