Permalink
Browse files

Panel: only call getWrapper on create or when page changes for external

Fixes gh-6885
Fixes gh-6260
Closes gh-7004
  • Loading branch information...
arschmitz committed Jan 24, 2014
1 parent f6bf0d7 commit b003c20f732905725d8354b81ad2b622498b232e
Showing with 155 additions and 17 deletions.
  1. +17 −13 js/widgets/panel.js
  2. +12 −2 tests/unit/panel/index.html
  3. +126 −2 tests/unit/panel/panel_core.js
View
@@ -44,18 +44,19 @@ $.widget( "mobile.panel", {
_create: function() {
var el = this.element,
- parentPage = el.closest( ":jqmData(role='page')" );
+ parentPage = el.closest( ".ui-page, :jqmData(role='page')" );
// expose some private props to other methods
$.extend( this, {
_closeLink: el.find( ":jqmData(rel='close')" ),
_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
@@ -104,14 +105,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( "<div class='" + this.options.classes.pageWrapper + "'></div>" )
.parent();
}
- return wrapper;
+ this._wrapper = wrapper;
},
_getFixedToolbars: function() {
@@ -275,7 +275,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() {
@@ -307,7 +311,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 );
}
@@ -332,7 +336,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 );
}
@@ -346,7 +350,7 @@ $.widget( "mobile.panel", {
complete = function() {
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" );
}
@@ -379,7 +383,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 );
}
@@ -402,12 +406,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 );
}
@@ -442,7 +446,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 ) {
@@ -35,7 +35,7 @@
<div id="qunit"></div>
- <div data-nstest-role="page">
+ <div data-nstest-role="page" id="page1">
<div data-nstest-role="panel" id="panel-test-create">
<p>Contents of a panel.</p>
</div>
@@ -73,6 +73,15 @@
<div data-nstest-role="panel" id="panel-test-id-change">
<p>Contents of a panel.</p>
</div>
+ <div id="panel-test-get-wrapper">
+ <p>Contents of a panel.</p>
+ </div>
+ <div id="panel-test-get-wrapper-overlay">
+ <p>Contents of a panel.</p>
+ </div>
+ <div id="panel-test-get-wrapper-push">
+ <p>Contents of a panel.</p>
+ </div>
<div data-nstest-role="header">
<h1>Panel Test</h1>
</div>
@@ -91,6 +100,7 @@ <h1 id="demo-links">Panels</h1>
<a href="#panel-test-id-change">Open Panel</a>
</div>
</div>
-
+ <div data-nstest-role="page" id="page2"></div>
+ <div id="external-panel-test"></div>
</body>
</html>
@@ -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')" );
@@ -353,5 +355,127 @@
start
]);
});
+ 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 ));

0 comments on commit b003c20

Please sign in to comment.