Permalink
Browse files

Filterable: Instantiate on data-filter="true" listview for backcompat

(cherry picked from commit f2c2128)

Closes gh-7311
Fixes gh-6911
  • Loading branch information...
gabrielschulhof committed Apr 10, 2014
1 parent ab9ab7e commit 2f726f1ae6109d41907a060e0aeacadc41a206c0
Showing with 47 additions and 9 deletions.
  1. +19 −0 js/widgets/filterable.backcompat.js
  2. +27 −8 tests/unit/filterable/filterable_core.js
  3. +1 −1 tests/unit/filterable/index.html
@@ -6,6 +6,7 @@
define( [
"jquery",
"./listview",
"./filterable" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -189,6 +190,24 @@ $.widget( "mobile.filterable", $.mobile.filterable, {
}
});
// Instantiate a filterable on a listview that has the data-filter="true" attribute
// This is not necessary for static content, because the auto-enhance takes care of instantiating
// the filterable upon encountering data-filter="true". However, because of 1.3.x it is expected
// that a listview with data-filter="true" will be filterable even if you just instantiate a
// listview on it. The extension below ensures that this continues to happen in 1.4.x.
$.widget( "mobile.listview", $.mobile.listview, {
options: {
filter: false
},
_create: function() {
if ( this.options.filter === true &&
!this.element.data( "mobile-filterable" ) ) {
this.element.filterable();
}
return this._super();
}
});
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
@@ -4,6 +4,23 @@
( function( $ ){
module( "Filterable tests" );
asyncTest( "filterReveal filterable shows all items when all items match filter text", function() {
var input = $( "#test-filter-reveal-show-all-input" ),
list = $( "#test-filter-reveal-show-all-list" );
expect( 1 );
input.val( "Test" ).trigger( "change" );
setTimeout( function() {
deepEqual( list.children( ".ui-screen-hidden" ).length, 0,
"All items visible when search value matches them all" );
start();
}, 500 );
});
module( "Backwards compatibility tests" );
test( "Listview with filter has hideDividers option set to true", function() {
@@ -27,17 +44,19 @@ test( "Filterable input prevents default on ENTER", function() {
deepEqual( event.isDefaultPrevented(), true, "Subsequent keypress default is also prevented" );
});
asyncTest( "filterReveal filterable shows all items when all items match filter text", function() {
var input = $( "#test-filter-reveal-show-all-input" ),
list = $( "#test-filter-reveal-show-all-list" );
expect( 1 );
asyncTest( "Working filterable is instantiated on dynamic listview when data-filter='true'", function() {
var list = $( "<ul data-nstest-filter='true'><li>Chicago</li><li>Berlin</li><li>Windsor</li></ul>" )
.appendTo( "#content" )
.listview(),
input = list.prev().find( "input" );
input.val( "Test" ).trigger( "change" );
expect( 3 );
deepEqual( !!list.data( "mobile-filterable" ), true, "Filterable widget is present on listview" );
input.val( "o" ).trigger( "change" );
setTimeout( function() {
deepEqual( list.children( ".ui-screen-hidden" ).length, 0,
"All items visible when search value matches them all" );
deepEqual( list.children( ".ui-screen-hidden" ).length, 1, "One child was hidden" );
deepEqual( list.children( ".ui-screen-hidden" ).text(), "Berlin", "'Berlin' was hidden" );
start();
}, 500 );
});
@@ -46,7 +46,7 @@
<div id="qunit"></div>
<div data-nstest-role="page">
<div class="ui-content">
<div id="content" class="ui-content">
<div id="hidedividers-option-test" data-nstest-role="listview" data-nstest-filter="true">
</div>
<form id="test-input-preventDefault-form">

0 comments on commit 2f726f1

Please sign in to comment.