Permalink
Browse files

Panel: Use .wrapAll() safely

Fixes gh-8248
Closes gh-8249
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Jul 29, 2015
1 parent d0b4d3e commit ae7489eff0fa08e1f1d22e171799e0fa4340731d
Showing with 100 additions and 5 deletions.
  1. +16 −5 js/widgets/panel.js
  2. +35 −0 tests/integration/panel/empty-page-tests.html
  3. +49 −0 tests/integration/panel/empty_page_core.js
View
@@ -100,11 +100,18 @@ return $.widget( "mobile.panel", {
this._bindSwipeEvents();
},
_safelyWrap: function( parent, wrapperHtml, children ) {
return children.length ? children.wrapAll( wrapperHtml ).parent() :
$( wrapperHtml ).appendTo( parent );
},
_getPanelInner: function() {
var panelInner = this.element.find( "." + this.options.classes.panelInner );
if ( panelInner.length === 0 ) {
panelInner = this.element.children().wrapAll( "<div class='" + this.options.classes.panelInner + "' />" ).parent();
panelInner = this._safelyWrap( this.element,
"<div class='" + this.options.classes.panelInner + "'></div>",
this.element.children() );
}
return panelInner;
@@ -128,11 +135,15 @@ return $.widget( "mobile.panel", {
},
_getWrapper: function() {
var wrapper = this._page().find( "." + this.options.classes.pageWrapper );
var thePage,
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();
thePage = this._page();
wrapper = this._safelyWrap( thePage,
"<div class='" + this.options.classes.pageWrapper + "'></div>",
this._page().children( ".ui-header:not(.ui-header-fixed), " +
".ui-content:not(.ui-popup), .ui-footer:not(.ui-footer-fixed)" ) );
}
this._wrapper = wrapper;
@@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Panel Integration Test</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../jquery.testHelper.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad( [
[ "widgets/panel" ],
[ "init" ],
[ "empty_page_core.js" ]
] );
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page" id="empty-page">
<div data-nstest-role="panel" id="empty-page-test"></div>
</div>
</body>
</html>
@@ -0,0 +1,49 @@
( function( QUnit, $ ) {
QUnit.test( "Panel inner wrapper and page wrapper are attached even if they have nothing to wrap",
function( assert ) {
var panel = $( "#empty-page-test" );
assert.strictEqual( panel.children( ".ui-panel-inner" ).length, 1,
"Empty panel contains inner wrapper" );
assert.strictEqual( $( "#empty-page" ).children( ".ui-panel-wrapper" ).length, 1,
"Empty page contains panel wrapper" );
} );
QUnit.test( "Empty panel on empty page opens correctly", function( assert ) {
var eventNs = ".emptyPanelOnEmptyPageOpensCorrectly",
done = assert.async(),
panel = $( "#empty-page-test" );
$.testHelper.detailedEventCascade( [
function() {
panel.panel( "open" );
},
{
panelbeforeopen: { src: panel, event: "panelbeforeopen" + eventNs + "1" },
panelopen: { src: panel, event: "panelopen" + eventNs + "1" }
},
function( result ) {
assert.strictEqual( result.panelbeforeopen.timedOut, false,
"'panelbeforeopen' event received" );
assert.strictEqual( result.panelopen.timedOut, false, "'panelopen' event received" );
assert.strictEqual( result.panelbeforeopen.idx < result.panelopen.idx, true,
"'panelbeforeopen' arrived before 'panelopen'" );
panel.panel( "close" );
},
{
panelbeforeclose: { src: panel, event: "panelbeforeclose" + eventNs + "2" },
panelclose: { src: panel, event: "panelclose" + eventNs + "2" }
},
function( result ) {
assert.strictEqual( result.panelbeforeclose.timedOut, false,
"'panelbeforeclose' event received" );
assert.strictEqual( result.panelclose.timedOut, false, "'panelclose' event received" );
assert.strictEqual( result.panelbeforeclose.idx < result.panelclose.idx, true,
"'panelbeforeclose' arrived before 'panelclose'" );
done();
}
] );
} );
} )( QUnit, jQuery );

0 comments on commit ae7489e

Please sign in to comment.