From 6e05569c9197beabfd1945ec3059305ddcead1e8 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Fri, 24 Jan 2014 17:39:40 -0500 Subject: [PATCH] Panel: only call getWrapper on create or when page changes for external Fixes gh-6885 Fixes gh-6260 --- js/widgets/panel.js | 30 ++++---- tests/unit/panel/index.html | 15 +++- tests/unit/panel/panel_core.js | 132 ++++++++++++++++++++++++++++++++- 3 files changed, 159 insertions(+), 18 deletions(-) diff --git a/js/widgets/panel.js b/js/widgets/panel.js index f8eba1992ea..88a830cdae4 100644 --- a/js/widgets/panel.js +++ b/js/widgets/panel.js @@ -45,7 +45,7 @@ $.widget( "mobile.panel", { _create: function() { var el = this.element, - parentPage = el.closest( ":jqmData(role='page')" ); + parentPage = el.closest( ":data(mobilePage)" ); // expose some private props to other methods $.extend( this, { @@ -54,10 +54,11 @@ $.widget( "mobile.panel", { _parentPage: ( parentPage.length > 0 ) ? parentPage : false, _page: this._getPage, _panelInner: this._getPanelInner(), - _wrapper: this._getWrapper, _fixedToolbars: this._getFixedToolbars }); - + if ( this.options.display !== "overlay" ){ + this._getWrapper(); + } this._addPanelClasses(); // if animating, add the class to do so @@ -106,14 +107,13 @@ $.widget( "mobile.panel", { _getWrapper: function() { var wrapper = this._page().find( "." + this.options.classes.pageWrapper ); - if ( wrapper.length === 0 ) { wrapper = this._page().children( ".ui-header:not(.ui-header-fixed), .ui-content:not(.ui-popup), .ui-footer:not(.ui-footer-fixed)" ) .wrapAll( "
" ) .parent(); } - return wrapper; + this._wrapper = wrapper; }, _getFixedToolbars: function() { @@ -260,7 +260,11 @@ $.widget( "mobile.panel", { self.close(); } }); - + if ( !this._parentPage && this.options.display !== "overlay" ) { + this._on( this.document, { + "pageshow": "_getWrapper" + }); + } // Clean up open panels after page hide if ( self._parentPage ) { this.document.on( "pagehide", ":jqmData(role='page')", function() { @@ -292,7 +296,7 @@ $.widget( "mobile.panel", { self._page().jqmData( "panel", "open" ); if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) { - self._wrapper().addClass( o.classes.animate ); + self._wrapper.addClass( o.classes.animate ); self._fixedToolbars().addClass( o.classes.animate ); } @@ -317,7 +321,7 @@ $.widget( "mobile.panel", { if ( o.display !== "overlay" ) { self._page().parent().addClass( o.classes.pageContainer ); - self._wrapper().addClass( self._pageContentOpenClasses ); + self._wrapper.addClass( self._pageContentOpenClasses ); self._fixedToolbars().addClass( self._pageContentOpenClasses ); } @@ -332,7 +336,7 @@ $.widget( "mobile.panel", { self.document.off( self._transitionEndEvents, complete ); if ( o.display !== "overlay" ) { - self._wrapper().addClass( o.classes.pageContentPrefix + "-open" ); + self._wrapper.addClass( o.classes.pageContentPrefix + "-open" ); self._fixedToolbars().addClass( o.classes.pageContentPrefix + "-open" ); } @@ -370,7 +374,7 @@ $.widget( "mobile.panel", { self.element.removeClass( o.classes.panelOpen ); if ( o.display !== "overlay" ) { - self._wrapper().removeClass( self._pageContentOpenClasses ); + self._wrapper.removeClass( self._pageContentOpenClasses ); self._fixedToolbars().removeClass( self._pageContentOpenClasses ); } @@ -389,12 +393,12 @@ $.widget( "mobile.panel", { if ( o.display !== "overlay" ) { self._page().parent().removeClass( o.classes.pageContainer ); - self._wrapper().removeClass( o.classes.pageContentPrefix + "-open" ); + self._wrapper.removeClass( o.classes.pageContentPrefix + "-open" ); self._fixedToolbars().removeClass( o.classes.pageContentPrefix + "-open" ); } if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) { - self._wrapper().removeClass( o.classes.animate ); + self._wrapper.removeClass( o.classes.animate ); self._fixedToolbars().removeClass( o.classes.animate ); } @@ -431,7 +435,7 @@ $.widget( "mobile.panel", { // remove the wrapper if not in use by another panel otherPanels = $( "body > :mobile-panel" ).add( $.mobile.activePage.find( ":mobile-panel" ) ); if ( otherPanels.not( ".ui-panel-display-overlay" ).not( this.element ).length === 0 ) { - this._wrapper().children().unwrap(); + this._wrapper.children().unwrap(); } if ( this._open ) { diff --git a/tests/unit/panel/index.html b/tests/unit/panel/index.html index 1bd7a0be617..7a4aac5a79b 100644 --- a/tests/unit/panel/index.html +++ b/tests/unit/panel/index.html @@ -38,7 +38,7 @@

-
+

Contents of a panel.

@@ -70,7 +70,15 @@

Contents of a panel.

Close panel
- +
+

Contents of a panel.

+
+
+

Contents of a panel.

+
+
+

Contents of a panel.

+

Panel Test

@@ -88,6 +96,7 @@

Panels

Open Panel
- +
+
diff --git a/tests/unit/panel/panel_core.js b/tests/unit/panel/panel_core.js index b74581553fc..f8c2791ec05 100644 --- a/tests/unit/panel/panel_core.js +++ b/tests/unit/panel/panel_core.js @@ -5,8 +5,10 @@ (function( $ ){ - var defaults = $.mobile.panel.prototype.options, - classes = defaults.classes; + var count, + defaults = $.mobile.panel.prototype.options, + classes = defaults.classes, + originalWidget = $.mobile.panel.prototype; function getPageFromPanel( $panel ) { return $panel.closest( ":jqmData(role='page')" ); @@ -35,6 +37,8 @@ ok( $panel.hasClass( defaults.classes.panelClosed ), "panel is closed by default" ); }); + + asyncTest( "expected open, close events", function() { expect( 4 ); @@ -284,4 +288,128 @@ $panel.panel( "open" ); }); + module( "wrapper generation", { + setup: function() { + count = 0; + $.widget( "mobile.panel", $.mobile.panel, { + _getWrapper: function() { + this._super(); + count++; + } + }); + }, + teardown: function() { + $.mobile.panel.prototype = originalWidget; + } + }); + asyncTest( "overlay panel should not call getWrapper", function(){ + expect( 5 ); + var testPanel = $( "#panel-test-get-wrapper-overlay" ); + + testPanel.panel({ + "display": "overlay" + }); + ok( count === 0, "getWrapper only called once durring create" ); + testPanel.panel( "open" ); + testPanel.one( "panelopen", function(){ + ok( count === 0, "getWrapper not called on open" ); + }); + testPanel.panel( "close" ); + testPanel.one( "panelclose", function(){ + ok( count === 0, "getWrapper not called on close" ); + $.mobile.changePage( "#page2" ); + }); + $( "body" ).one( "pagechange", function(){ + ok( count === 0, "getWrapper not called on pagechange" ); + $.mobile.changePage( "#page1" ); + $( "body" ).one( "pagechange", function(){ + ok( count === 0, "getWrapper not called on pagechange back to inital page" ); + start(); + }); + }); + + }); + asyncTest( "push should call getWrapper only once on create", function(){ + expect( 5 ); + var testPanel = $( "#panel-test-get-wrapper-push" ); + + testPanel.panel({ + "display": "push" + }); + ok( count === 1, "getWrapper only called once durring create" ); + testPanel.panel( "open" ); + testPanel.one( "panelopen", function(){ + ok( count === 1, "getWrapper not called on open" ); + }); + testPanel.panel( "close" ); + testPanel.one( "panelclose", function(){ + ok( count === 1, "getWrapper not called on close" ); + $.mobile.changePage( "#page2" ); + }); + $( "body" ).one( "pagechange", function(){ + ok( count === 1, "getWrapper not called on pagechange" ); + $.mobile.changePage( "#page1" ); + $( "body" ).one( "pagechange", function(){ + ok( count === 1, "getWrapper not called on pagechange back to inital page" ); + start(); + }); + }); + + }); + asyncTest( "reveal panel should call getWrapper only once on create", function(){ + expect( 5 ); + var testPanel = $( "#panel-test-get-wrapper" ); + + testPanel.panel(); + ok( count === 1, "getWrapper only called once durring create" ); + testPanel.panel( "open" ); + testPanel.one( "panelopen", function(){ + ok( count === 1, "getWrapper not called on open" ); + }); + testPanel.panel( "close" ); + testPanel.one( "panelclose", function(){ + ok( count === 1, "getWrapper not called on close" ); + $.mobile.changePage( "#page2" ); + }); + $( "body" ).one( "pagechange", function(){ + ok( count === 1, "getWrapper not called on pagechange" ); + $.mobile.changePage( "#page1" ); + $( "body" ).one( "pagechange", function(){ + ok( count === 1, "getWrapper not called on pagechange back to inital page" ); + start(); + }); + }); + + }); + asyncTest( "external panel should call panel once on create and on page changes", function(){ + expect( 5 ); + var testPanel = $( "#external-panel-test" ); + + testPanel.panel(); + ok( count === 1, "getWrapper only called once durring create" ); + testPanel.panel( "open" ); + testPanel.one( "panelopen", function(){ + ok( count === 1, "getWrapper not called on open" ); + }); + testPanel.panel( "close" ); + testPanel.one( "panelclose", function(){ + ok( count === 1, "getWrapper not called on close" ); + $.mobile.changePage( "#page2" ); + $( "body" ).one( "pageshow", function(){ + window.setTimeout( function(){ + ok( count === 2, "getWrapper called on pagechange" ); + }, 0 ); + + $( "body" ).one( "pageshow", function(){ + window.setTimeout( function(){ + ok( count === 3, "getWrapper called on pagechange back to inital page" ); + start(); + }, 0 ); + }); + $.mobile.changePage( "#page1" ); + }); + }); + + }); + }( jQuery ));