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

Commit

Permalink
Panel: Bail upon opening animationComplete() if the panel has closed
Browse files Browse the repository at this point in the history 
Hook up animationComplete() to the wrapper, if present, and only otherwise to
the element, because the animation class is only added to the element if there
is no wrapper.

The tests now need to wait for the panel to actually open in order to hit all
the assertions, because some assertions are made only upon panelopen.

(cherry picked from commit 301f124)

Closes gh-7264
Fixes gh-7236
  • Loading branch information
Gabriel Schulhof committed Apr 24, 2014
1 parent ef1abfc commit 5699421
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 85 deletions.
11 changes: 9 additions & 2 deletions js/widgets/panel.js
View file
Expand Up @@ -308,7 +308,8 @@ $.widget( "mobile.panel", {
}

if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.animationComplete( complete, "transition" );
( self._wrapper || self.element )
.animationComplete( complete, "transition" );
} else {
setTimeout( complete, 0 );
}
Expand Down Expand Up @@ -341,6 +342,11 @@ $.widget( "mobile.panel", {
},
complete = function() {

// Bail if the panel was closed before the opening animation has completed
if ( !self._open ) {
return;
}

if ( o.display !== "overlay" ) {
self._wrapper.addClass( o.classes.pageContentPrefix + "-open" );
self._fixedToolbars().addClass( o.classes.pageContentPrefix + "-open" );
Expand Down Expand Up @@ -382,7 +388,8 @@ $.widget( "mobile.panel", {
}

if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.animationComplete( complete, "transition" );
( self._wrapper || self.element )
.animationComplete( complete, "transition" );
} else {
setTimeout( complete, 0 );
}
Expand Down
237 changes: 154 additions & 83 deletions tests/unit/panel/panel_core.js
View file
Expand Up @@ -371,112 +371,183 @@
});
asyncTest( "overlay panel should not call getWrapper", function(){
expect( 5 );
var testPanel = $( "#panel-test-get-wrapper-overlay" );
var eventNs = ".overlayPanelShouldNotCallGetWrapper",
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();
});
});
deepEqual( count, 0, "getWrapper only called once durring create" );

$.testHelper.detailedEventCascade([
function() {
testPanel.panel( "open" );
},
{
panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" }
},
function() {
deepEqual( count, 0, "getWrapper not called on open" );
testPanel.panel( "close" );
},
{
panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" }
},
function() {
deepEqual( count, 0, "getWrapper not called on close" );
$.mobile.changePage( "#page2" );
},
{
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" }
},
function() {
deepEqual( count, 0, "getWrapper not called on pagechange" );
$.mobile.changePage( "#page1" );
},
{
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "4" }
},
function() {
deepEqual( count, 0, "getWrapper not called on pagechange back to initial page" );
start();
}
]);
});
asyncTest( "push should call getWrapper only once on create", function(){

asyncTest( "push panel should call getWrapper only once on create", function(){
expect( 5 );
var testPanel = $( "#panel-test-get-wrapper-push" );
var eventNs = ".pushPanelShouldCallGetWrapperOnlyOnceOnCreate",
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();
});
});

$.testHelper.detailedEventCascade([
function() {
testPanel.panel( "open" );
},
{
panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" }
},
function() {
deepEqual( count, 1, "getWrapper not called on open" );
testPanel.panel( "close" );
},
{
panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" }
},
function() {
deepEqual( count, 1, "getWrapper not called on close" );
$.mobile.changePage( "#page2" );
},
{
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" }
},
function() {
deepEqual( count, 1, "getWrapper not called on pagechange" );
$.mobile.changePage( "#page1" );
},
{
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "4" }
},
function() {
deepEqual( 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" );
var eventNs = ".revealPanelShouldCallGetWrapperOnlyOnceOnCreate",
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" );
deepEqual( count, 1, "getWrapper only called once durring create" );

$.testHelper.detailedEventCascade([
function() {
testPanel.panel( "open" );
},
{
panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" }
},
function(){
deepEqual( count, 1, "getWrapper not called on open" );
testPanel.panel( "close" );
},
{
panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" }
},
function() {
deepEqual( count, 1, "getWrapper not called on close" );
$.mobile.changePage( "#page2" );
},
{
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" }
},
function() {
deepEqual( count, 1, "getWrapper not called on pagechange" );
$.mobile.changePage( "#page1" );
},
{
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "4" }
},
function() {
deepEqual( 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-getWrapper-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();
asyncTest( "external panel should call getWrapper once on create and on page changes",
function(){
expect( 5 );
var eventNs = ".externalPanelShouldCallGetWrapperOnceOnCreateAndOnPageChanges",
testPanel = $( "#external-panel-getWrapper-test" );

testPanel.panel();
deepEqual( count, 1, "getWrapper only called once durring create" );

$.testHelper.detailedEventCascade([
function() {
testPanel.panel( "open" );
},
{
panelopen: { src: testPanel, event: "panelopen" }
},
function() {
deepEqual( count, 1, "getWrapper not called on open" );
testPanel.panel( "close" );
},
{
panelclose: { src: testPanel, event: "panelclose" }
},
function() {
deepEqual( count, 1, "getWrapper not called on close" );
$.mobile.changePage( "#page2" );
},
{
pageshow: { src: $( "body" ), event: "pagecontainershow" }
},
function() {
window.setTimeout( function() {
deepEqual( count, 2, "getWrapper called on pagechange" );
}, 0 );
});
$.mobile.changePage( "#page1" );
});

$( "body" ).one( "pagecontainershow", function() {
window.setTimeout( function() {
deepEqual( count, 3,
"getWrapper called on pagechange back to inital page" );
start();
}, 0 );
});
$.mobile.changePage( "#page1" );
}
]);
});
});

asyncTest( "external panel: test classes during A>B>A transition", function() {
expect( 16 );
Expand Down

0 comments on commit 5699421

Please sign in to comment.