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...
1 parent ab9ab7e commit 2f726f1ae6109d41907a060e0aeacadc41a206c0 @gabrielschulhof gabrielschulhof committed Apr 10, 2014
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.