Skip to content

Commit b003c20

Browse files
arschmitzarschmitz
committed
Panel: only call getWrapper on create or when page changes for external
Fixes jquery-archivegh-6885 Fixes jquery-archivegh-6260 Closes jquery-archivegh-7004
1 parent f6bf0d7 commit b003c20

File tree

3 files changed

+155
-17
lines changed

3 files changed

+155
-17
lines changed

‎js/widgets/panel.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,19 @@ $.widget( "mobile.panel", {
4444

4545
_create: function() {
4646
var el = this.element,
47-
parentPage = el.closest( ":jqmData(role='page')" );
47+
parentPage = el.closest( ".ui-page, :jqmData(role='page')" );
4848

4949
// expose some private props to other methods
5050
$.extend( this, {
5151
_closeLink: el.find( ":jqmData(rel='close')" ),
5252
_parentPage: ( parentPage.length > 0 ) ? parentPage : false,
5353
_page: this._getPage,
5454
_panelInner: this._getPanelInner(),
55-
_wrapper: this._getWrapper,
5655
_fixedToolbars: this._getFixedToolbars
5756
});
58-
57+
if ( this.options.display !== "overlay" ){
58+
this._getWrapper();
59+
}
5960
this._addPanelClasses();
6061

6162
// if animating, add the class to do so
@@ -104,14 +105,13 @@ $.widget( "mobile.panel", {
104105

105106
_getWrapper: function() {
106107
var wrapper = this._page().find( "." + this.options.classes.pageWrapper );
107-
108108
if ( wrapper.length === 0 ) {
109109
wrapper = this._page().children( ".ui-header:not(.ui-header-fixed), .ui-content:not(.ui-popup), .ui-footer:not(.ui-footer-fixed)" )
110110
.wrapAll( "<div class='" + this.options.classes.pageWrapper + "'></div>" )
111111
.parent();
112112
}
113113

114-
return wrapper;
114+
this._wrapper = wrapper;
115115
},
116116

117117
_getFixedToolbars: function() {
@@ -275,7 +275,11 @@ $.widget( "mobile.panel", {
275275
self.close();
276276
}
277277
});
278-
278+
if ( !this._parentPage && this.options.display !== "overlay" ) {
279+
this._on( this.document, {
280+
"pageshow": "_getWrapper"
281+
});
282+
}
279283
// Clean up open panels after page hide
280284
if ( self._parentPage ) {
281285
this.document.on( "pagehide", ":jqmData(role='page')", function() {
@@ -307,7 +311,7 @@ $.widget( "mobile.panel", {
307311
self._page().jqmData( "panel", "open" );
308312

309313
if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) {
310-
self._wrapper().addClass( o.classes.animate );
314+
self._wrapper.addClass( o.classes.animate );
311315
self._fixedToolbars().addClass( o.classes.animate );
312316
}
313317

@@ -332,7 +336,7 @@ $.widget( "mobile.panel", {
332336

333337
if ( o.display !== "overlay" ) {
334338
self._page().parent().addClass( o.classes.pageContainer );
335-
self._wrapper().addClass( self._pageContentOpenClasses );
339+
self._wrapper.addClass( self._pageContentOpenClasses );
336340
self._fixedToolbars().addClass( self._pageContentOpenClasses );
337341
}
338342

@@ -346,7 +350,7 @@ $.widget( "mobile.panel", {
346350
complete = function() {
347351

348352
if ( o.display !== "overlay" ) {
349-
self._wrapper().addClass( o.classes.pageContentPrefix + "-open" );
353+
self._wrapper.addClass( o.classes.pageContentPrefix + "-open" );
350354
self._fixedToolbars().addClass( o.classes.pageContentPrefix + "-open" );
351355
}
352356

@@ -379,7 +383,7 @@ $.widget( "mobile.panel", {
379383
self.element.removeClass( o.classes.panelOpen );
380384

381385
if ( o.display !== "overlay" ) {
382-
self._wrapper().removeClass( self._pageContentOpenClasses );
386+
self._wrapper.removeClass( self._pageContentOpenClasses );
383387
self._fixedToolbars().removeClass( self._pageContentOpenClasses );
384388
}
385389

@@ -402,12 +406,12 @@ $.widget( "mobile.panel", {
402406

403407
if ( o.display !== "overlay" ) {
404408
self._page().parent().removeClass( o.classes.pageContainer );
405-
self._wrapper().removeClass( o.classes.pageContentPrefix + "-open" );
409+
self._wrapper.removeClass( o.classes.pageContentPrefix + "-open" );
406410
self._fixedToolbars().removeClass( o.classes.pageContentPrefix + "-open" );
407411
}
408412

409413
if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) {
410-
self._wrapper().removeClass( o.classes.animate );
414+
self._wrapper.removeClass( o.classes.animate );
411415
self._fixedToolbars().removeClass( o.classes.animate );
412416
}
413417

@@ -442,7 +446,7 @@ $.widget( "mobile.panel", {
442446
// remove the wrapper if not in use by another panel
443447
otherPanels = $( "body > :mobile-panel" ).add( $.mobile.activePage.find( ":mobile-panel" ) );
444448
if ( otherPanels.not( ".ui-panel-display-overlay" ).not( this.element ).length === 0 ) {
445-
this._wrapper().children().unwrap();
449+
this._wrapper.children().unwrap();
446450
}
447451

448452
if ( this._open ) {

‎tests/unit/panel/index.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
<div id="qunit"></div>
3737

38-
<div data-nstest-role="page">
38+
<div data-nstest-role="page" id="page1">
3939
<div data-nstest-role="panel" id="panel-test-create">
4040
<p>Contents of a panel.</p>
4141
</div>
@@ -73,6 +73,15 @@
7373
<div data-nstest-role="panel" id="panel-test-id-change">
7474
<p>Contents of a panel.</p>
7575
</div>
76+
<div id="panel-test-get-wrapper">
77+
<p>Contents of a panel.</p>
78+
</div>
79+
<div id="panel-test-get-wrapper-overlay">
80+
<p>Contents of a panel.</p>
81+
</div>
82+
<div id="panel-test-get-wrapper-push">
83+
<p>Contents of a panel.</p>
84+
</div>
7685
<div data-nstest-role="header">
7786
<h1>Panel Test</h1>
7887
</div>
@@ -91,6 +100,7 @@ <h1 id="demo-links">Panels</h1>
91100
<a href="#panel-test-id-change">Open Panel</a>
92101
</div>
93102
</div>
94-
103+
<div data-nstest-role="page" id="page2"></div>
104+
<div id="external-panel-test"></div>
95105
</body>
96106
</html>

‎tests/unit/panel/panel_core.js

Lines changed: 126 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@
55

66
(function( $ ){
77

8-
var defaults = $.mobile.panel.prototype.options,
9-
classes = defaults.classes;
8+
var count,
9+
defaults = $.mobile.panel.prototype.options,
10+
classes = defaults.classes,
11+
originalWidget = $.mobile.panel.prototype;
1012

1113
function getPageFromPanel( $panel ) {
1214
return $panel.closest( ":jqmData(role='page')" );
@@ -353,5 +355,127 @@
353355
start
354356
]);
355357
});
358+
module( "wrapper generation", {
359+
setup: function() {
360+
count = 0;
361+
$.widget( "mobile.panel", $.mobile.panel, {
362+
_getWrapper: function() {
363+
this._super();
364+
count++;
365+
}
366+
});
367+
},
368+
teardown: function() {
369+
$.mobile.panel.prototype = originalWidget;
370+
}
371+
});
372+
asyncTest( "overlay panel should not call getWrapper", function(){
373+
expect( 5 );
374+
var testPanel = $( "#panel-test-get-wrapper-overlay" );
375+
376+
testPanel.panel({
377+
"display": "overlay"
378+
});
379+
ok( count === 0, "getWrapper only called once durring create" );
380+
testPanel.panel( "open" );
381+
testPanel.one( "panelopen", function(){
382+
ok( count === 0, "getWrapper not called on open" );
383+
});
384+
testPanel.panel( "close" );
385+
testPanel.one( "panelclose", function(){
386+
ok( count === 0, "getWrapper not called on close" );
387+
$.mobile.changePage( "#page2" );
388+
});
389+
$( "body" ).one( "pagechange", function(){
390+
ok( count === 0, "getWrapper not called on pagechange" );
391+
$.mobile.changePage( "#page1" );
392+
$( "body" ).one( "pagechange", function(){
393+
ok( count === 0, "getWrapper not called on pagechange back to inital page" );
394+
start();
395+
});
396+
});
397+
398+
});
399+
asyncTest( "push should call getWrapper only once on create", function(){
400+
expect( 5 );
401+
var testPanel = $( "#panel-test-get-wrapper-push" );
402+
403+
testPanel.panel({
404+
"display": "push"
405+
});
406+
ok( count === 1, "getWrapper only called once durring create" );
407+
testPanel.panel( "open" );
408+
testPanel.one( "panelopen", function(){
409+
ok( count === 1, "getWrapper not called on open" );
410+
});
411+
testPanel.panel( "close" );
412+
testPanel.one( "panelclose", function(){
413+
ok( count === 1, "getWrapper not called on close" );
414+
$.mobile.changePage( "#page2" );
415+
});
416+
$( "body" ).one( "pagechange", function(){
417+
ok( count === 1, "getWrapper not called on pagechange" );
418+
$.mobile.changePage( "#page1" );
419+
$( "body" ).one( "pagechange", function(){
420+
ok( count === 1, "getWrapper not called on pagechange back to inital page" );
421+
start();
422+
});
423+
});
424+
425+
});
426+
asyncTest( "reveal panel should call getWrapper only once on create", function(){
427+
expect( 5 );
428+
var testPanel = $( "#panel-test-get-wrapper" );
429+
430+
testPanel.panel();
431+
ok( count === 1, "getWrapper only called once durring create" );
432+
testPanel.panel( "open" );
433+
testPanel.one( "panelopen", function(){
434+
ok( count === 1, "getWrapper not called on open" );
435+
});
436+
testPanel.panel( "close" );
437+
testPanel.one( "panelclose", function(){
438+
ok( count === 1, "getWrapper not called on close" );
439+
$.mobile.changePage( "#page2" );
440+
});
441+
$( "body" ).one( "pagechange", function(){
442+
ok( count === 1, "getWrapper not called on pagechange" );
443+
$.mobile.changePage( "#page1" );
444+
$( "body" ).one( "pagechange", function(){
445+
ok( count === 1, "getWrapper not called on pagechange back to inital page" );
446+
start();
447+
});
448+
});
449+
450+
});
451+
asyncTest( "external panel should call panel once on create and on page changes", function(){
452+
expect( 5 );
453+
var testPanel = $( "#external-panel-test" );
454+
455+
testPanel.panel();
456+
ok( count === 1, "getWrapper only called once durring create" );
457+
testPanel.panel( "open" );
458+
testPanel.one( "panelopen", function(){
459+
ok( count === 1, "getWrapper not called on open" );
460+
});
461+
testPanel.panel( "close" );
462+
testPanel.one( "panelclose", function(){
463+
ok( count === 1, "getWrapper not called on close" );
464+
$.mobile.changePage( "#page2" );
465+
$( "body" ).one( "pageshow", function(){
466+
window.setTimeout( function(){
467+
ok( count === 2, "getWrapper called on pagechange" );
468+
}, 0 );
469+
470+
$( "body" ).one( "pageshow", function(){
471+
window.setTimeout( function(){
472+
ok( count === 3, "getWrapper called on pagechange back to inital page" );
473+
start();
474+
}, 0 );
475+
});
476+
$.mobile.changePage( "#page1" );
477+
});
478+
});
479+
});
356480

357481
}( jQuery ));

0 commit comments

Comments
 (0)