Permalink
Browse files

Listview: Re-implement recursion limitation

Closes gh-7646
Fixes gh-7644
Re gh-5680
  • Loading branch information...
1 parent 64d71a6 commit 4dbe7453fff965552ff3288368349af2ac60450c @gabrielschulhof gabrielschulhof committed Aug 28, 2014
Showing with 70 additions and 20 deletions.
  1. +27 −20 js/widgets/filterable.backcompat.js
  2. +24 −0 tests/unit/filterable/filterable_core.js
  3. +19 −0 tests/unit/filterable/index.html
@@ -6,7 +6,7 @@
define( [
"jquery",
- "./listview",
+ "./listview.hidedividers",
"./filterable" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -160,6 +160,24 @@ $.widget( "mobile.filterable", $.mobile.filterable, {
return ret;
},
+ // The listview implementation accompanying this filterable backcompat layer will call
+ // filterable.refresh() after it's done refreshing the listview to make sure the filterable
+ // filters out any new items added. However, when the listview refresh has been initiated by
+ // the filterable itself, then such filtering has already taken place, and calling the
+ // filterable's refresh() method will cause an infinite recursion. We stop this by setting a
+ // flag that will cause the filterable's refresh() method to short-circuit.
+ _refreshChildWidget: function() {
+ this._refreshingChildWidget = true;
+ this._superApply( arguments );
+ this._refreshingChildWidget = false;
+ },
+
+ refresh: function() {
+ if ( !this._refreshingChildWidget ) {
+ this._superApply( arguments );
+ }
+ },
+
_destroy: function() {
if ( this._isSearchInternal() ) {
this._search.remove();
@@ -207,29 +225,18 @@ $.widget( "mobile.listview", $.mobile.listview, {
return this._super();
},
- _afterListviewRefresh: function() {
- var filterable = this.element.data( "mobile-filterable" );
-
- if ( this.options.filter === true && filterable ) {
- this._preventRefreshLoop = true;
- filterable.refresh();
- }
- },
-
- // Eliminate infinite recursion caused by the fact that we call filterable.refresh() from
- // _afterListviewRefresh() above, which, in turn, calls _refreshChildWidget(), which, in
- // turn, calls listview refresh(), which would, in turn, calls _afterListviewRefresh()
- // above, if we wouldn't prevent that right here.
refresh: function() {
- var returnValue;
+ var filterable;
- if ( !this._preventRefreshLoop ) {
- returnValue = this._superApply( arguments );
- }
+ this._superApply( arguments );
- this._preventRefreshLoop = false;
+ if ( this.options.filter === true ) {
+ filterable = this.element.data( "mobile-filterable" );
- return returnValue;
+ if ( filterable ) {
+ filterable.refresh();
+ }
+ }
}
});
@@ -71,4 +71,28 @@ test( "Refreshing the listview also refreshes the filterable", function() {
"All list items are hidden after listview refresh" );
});
+asyncTest( "Empty dividers are hidden by default", function() {
+ var input = $( "#hide-empty-dividers-input" ),
+ listview = $( "#hide-empty-dividers" );
+
+ $.testHelper.detailedEventCascade([
+ function() {
+ input.val( "l" ).trigger( "change" );
+ },
+ {
+ filterablefilter: {
+ src: listview,
+ event: "filterablebeforefilter.emptyDividersHidden1"
+ }
+ },
+ function( result ) {
+ deepEqual( result.filterablefilter.timedOut, false,
+ "filterablefilter event was triggered" );
+ deepEqual( $( "#prev-is-hidden" ).prev().hasClass( "ui-screen-hidden" ), true,
+ "Divider for hidden item is hidden" );
+ start();
+ }
+ ]);
+});
+
})( jQuery );
@@ -70,6 +70,25 @@
<li>Item 1</li>
<li>Item 2</li>
</ul>
+ <form class="ui-filterable">
+ <input id="hide-empty-dividers-input" data-nstest-type="search">
+ </form>
+ <ul id="hide-empty-dividers" data-nstest-role="listview" data-nstest-filter="true" data-nstest-input="#hide-empty-dividers-input" data-nstest-autodividers="true" data-nstest-inset="true">
+ <li><a href="#">Adele</a></li>
+ <li><a href="#">Agnes</a></li>
+ <li><a href="#">Albert</a></li>
+ <li><a href="#">Billy</a></li>
+ <li><a href="#">Bob</a></li>
+ <li><a href="#">Calvin</a></li>
+ <li><a href="#">Cameron</a></li>
+ <li><a href="#">Chloe</a></li>
+ <li><a href="#">Christina</a></li>
+ <li id="prev-is-hidden"><a href="#">Diana</a></li>
+ <li><a href="#">Gabriel</a></li>
+ <li><a href="#">Glen</a></li>
+ <li><a href="#">Ralph</a></li>
+ <li><a href="#">Valarie</a></li>
+ </ul>
</div>
</div>
</body>

0 comments on commit 4dbe745

Please sign in to comment.