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

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

Closed
wants to merge 1 commit into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 17 additions & 13 deletions js/widgets/panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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" );
});



Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are unnecessary.

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 ));