Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Panel: only call getWrapper on create or when page changes for external
Browse files Browse the repository at this point in the history 
Fixes gh-6885
Fixes gh-6260
  • Loading branch information
@arschmitz
arschmitz committed Jan 30, 2014
1 parent d8375b7 commit 6e05569
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 18 deletions.
30 changes: 17 additions & 13 deletions js/widgets/panel.js
View file
Expand Up @@ -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, {
Expand All @@ -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
Expand Down Expand Up @@ -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( "<div class='" + this.options.classes.pageWrapper + "'></div>" )
.parent();
}

return wrapper;
this._wrapper = wrapper;
},

_getFixedToolbars: function() {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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 );
}

Expand All @@ -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 );
}

Expand All @@ -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" );
}

Expand Down Expand Up @@ -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 );
}

Expand All @@ -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 );
}

Expand Down Expand Up @@ -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 ) {
Expand Down
15 changes: 12 additions & 3 deletions tests/unit/panel/index.html
View file
Expand Up @@ -38,7 +38,7 @@ <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>

<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>
Expand Down Expand Up @@ -70,7 +70,15 @@ <h2 id="qunit-userAgent"></h2>
<p>Contents of a panel.</p>
<a href="#demo-links" data-nstest-rel="close" data-nstest-role="button">Close panel</a>
</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>
Expand All @@ -88,6 +96,7 @@ <h1 id="demo-links">Panels</h1>
<a href="#panel-test-with-close">Open Panel</a>
</div>
</div>

<div data-nstest-role="page" id="page2"></div>
<div id="external-panel-test"></div>
</body>
</html>
132 changes: 130 additions & 2 deletions tests/unit/panel/panel_core.js
View file
Expand Up @@ -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')" );
Expand Down Expand Up @@ -35,6 +37,8 @@
ok( $panel.hasClass( defaults.classes.panelClosed ), "panel is closed by default" );
});



asyncTest( "expected open, close events", function() {

expect( 4 );
Expand Down Expand Up @@ -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 ));

0 comments on commit 6e05569

Please sign in to comment.