diff --git a/js/widgets/panel.js b/js/widgets/panel.js index 8164a4a3377..6e96cbe2cba 100644 --- a/js/widgets/panel.js +++ b/js/widgets/panel.js @@ -28,7 +28,7 @@ // Browser globals factory( jQuery ); } -})( function( $ ) { +} )( function( $ ) { return $.widget( "mobile.panel", { version: "@VERSION", @@ -77,8 +77,8 @@ return $.widget( "mobile.panel", { _page: this._getPage, _panelInner: this._getPanelInner(), _fixedToolbars: this._getFixedToolbars - }); - if ( this.options.display !== "overlay" ){ + } ); + if ( this.options.display !== "overlay" ) { this._getWrapper(); } this._addPanelClasses(); @@ -117,7 +117,7 @@ return $.widget( "mobile.panel", { self._modal = $( "
" ) .on( "mousedown", function() { self.close(); - }) + } ) .appendTo( target ); }, @@ -176,11 +176,11 @@ return $.widget( "mobile.panel", { _bindCloseEvents: function() { this._on( this._closeLink, { "click": "_handleCloseClick" - }); + } ); - this._on({ + this._on( { "click a:jqmData(ajax='false')": "_handleCloseClick" - }); + } ); }, _positionPanel: function( scrollToTop ) { @@ -212,7 +212,7 @@ return $.widget( "mobile.panel", { }, _bindFixListener: function() { - this._on( $( window ), { "throttledresize": "_positionPanel" }); + this._on( $( window ), { "throttledresize": "_positionPanel" } ); }, _unbindFixListener: function() { @@ -234,17 +234,17 @@ return $.widget( "mobile.panel", { _bindUpdateLayout: function() { var self = this; - self.element.on( "updatelayout", function(/* e */) { + self.element.on( "updatelayout", function( /* e */ ) { if ( self._open ) { self._positionPanel(); } - }); + } ); }, _bindLinkListeners: function() { this._on( "body", { "click a": "_handleClick" - }); + } ); }, @@ -260,7 +260,7 @@ return $.widget( "mobile.panel", { link.addClass( $.mobile.activeBtnClass ); this.element.one( "panelopen panelclose", function() { link.removeClass( $.mobile.activeBtnClass ); - }); + } ); } this.toggle(); } @@ -291,20 +291,20 @@ return $.widget( "mobile.panel", { if ( self._open && e.target !== self.element[ 0 ] ) { self.close(); } - }) + } ) // On escape, close? might need to have a target check too... .on( "keyup.panel", function( e ) { if ( e.keyCode === 27 && self._open ) { self.close(); } - }); + } ); if ( !this._parentPage && this.options.display !== "overlay" ) { this._on( this.document, { "pageshow": function() { this._openedPage = null; this._getWrapper(); } - }); + } ); } // Clean up open panels after page hide if ( self._parentPage ) { @@ -312,13 +312,13 @@ return $.widget( "mobile.panel", { if ( self._open ) { self.close( true ); } - }); + } ); } else { this.document.on( "pagebeforehide", function() { if ( self._open ) { self.close( true ); } - }); + } ); } }, @@ -333,7 +333,7 @@ return $.widget( "mobile.panel", { o = self.options, _openPanel = function() { - self._off( self.document , "panelclose" ); + self._off( self.document, "panelclose" ); self._page().jqmData( "panel", "open" ); if ( $.support.cssTransform3d && !!o.animate && o.display !== "overlay" ) { @@ -398,7 +398,7 @@ return $.widget( "mobile.panel", { if ( self._page().jqmData( "panel" ) === "open" ) { self._on( self.document, { "panelclose": _openPanel - }); + } ); } else { _openPanel(); } @@ -485,8 +485,8 @@ return $.widget( "mobile.panel", { _destroy: function() { var otherPanels, - o = this.options, - multiplePanels = ( $( "body > :mobile-panel" ).length + $.mobile.activePage.find( ":mobile-panel" ).length ) > 1; + o = this.options, + multiplePanels = ( $( "body > :mobile-panel" ).length + $.mobile.activePage.find( ":mobile-panel" ).length ) > 1; if ( o.display !== "overlay" ) { @@ -535,6 +535,6 @@ return $.widget( "mobile.panel", { this._modal.remove(); } } -}); +} ); -}); +} ); diff --git a/tests/integration/panel/external_panel_core.js b/tests/integration/panel/external_panel_core.js index b9a6f1814c8..a66db2a1ebc 100644 --- a/tests/integration/panel/external_panel_core.js +++ b/tests/integration/panel/external_panel_core.js @@ -2,101 +2,101 @@ var panel = $( "#wrapper-test-panel" ).panel(), stretchTestPanel = $( "#panel-stretch-test" ).panel(); asyncTest( "External panel updates wrapper correctly", function() { - var otherPageChildren, - thisPage = $( "#start-page" ), - otherPage = $( "#other-page" ), - otherPageLink = $( "#go-to-other-page" ); +var otherPageChildren, + thisPage = $( "#start-page" ), + otherPage = $( "#other-page" ), + otherPageLink = $( "#go-to-other-page" ); - expect( 7 ); +expect( 7 ); - $.testHelper.detailedEventCascade([ - function() { - panel.panel( "open" ); - }, - { - panelopen: { src: panel, event: "panelopen.externalPanelUpdatesWrapperCorrectly1" } - }, - function( result ) { - deepEqual( result.panelopen.timedOut, false, "Panel did open" ); - deepEqual( thisPage.data( $.mobile.ns + "panel" ), "open", - "Data at key 'panel' on opening page present" ); - otherPageLink.click(); - }, - { - panelclose: { src: panel, event: "panelclose.externalPanelUpdatesWrapperCorrectly2" }, - pagecontainerchange: { - src: $( window ), - event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2" - } - }, - function( result ) { - otherPageChildren = otherPage.children(); - deepEqual( result.panelclose.timedOut, false, "Panel did close upon link click" ); - deepEqual( result.pagecontainerchange.timedOut, false, - "pagecontainerchange event received" ); - deepEqual( otherPageChildren.length, 1, "Other page has exactly one child" ); - deepEqual( otherPageChildren.hasClass( "ui-panel-wrapper" ), true, - "Other page child has class 'ui-panel-wrapper'" ); - deepEqual( thisPage.data( $.mobile.ns + "panel" ), undefined, - "Data at key 'panel' on opening page absent" ); - $.mobile.back(); - }, - { - pagecontainerchange: { - src: $( window ), - event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2" - } - }, - start - ]); -}); +$.testHelper.detailedEventCascade( [ + function() { + panel.panel( "open" ); + }, + { + panelopen: { src: panel, event: "panelopen.externalPanelUpdatesWrapperCorrectly1" } + }, + function( result ) { + deepEqual( result.panelopen.timedOut, false, "Panel did open" ); + deepEqual( thisPage.data( $.mobile.ns + "panel" ), "open", + "Data at key 'panel' on opening page present" ); + otherPageLink.click(); + }, + { + panelclose: { src: panel, event: "panelclose.externalPanelUpdatesWrapperCorrectly2" }, + pagecontainerchange: { + src: $( window ), + event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2" + } + }, + function( result ) { + otherPageChildren = otherPage.children(); + deepEqual( result.panelclose.timedOut, false, "Panel did close upon link click" ); + deepEqual( result.pagecontainerchange.timedOut, false, + "pagecontainerchange event received" ); + deepEqual( otherPageChildren.length, 1, "Other page has exactly one child" ); + deepEqual( otherPageChildren.hasClass( "ui-panel-wrapper" ), true, + "Other page child has class 'ui-panel-wrapper'" ); + deepEqual( thisPage.data( $.mobile.ns + "panel" ), undefined, + "Data at key 'panel' on opening page absent" ); + $.mobile.back(); + }, + { + pagecontainerchange: { + src: $( window ), + event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2" + } + }, + start +] ); +} ); asyncTest( "External panel stretches to acommodate page height", function( assert ) { - expect( 4 ); +expect( 4 ); - var eventNs = ".externalPanelStretches"; +var eventNs = ".externalPanelStretches"; - $.testHelper.detailedEventCascade( [ - function() { - $( "body" ).pagecontainer( "change", "#panel-stretch-page" ); - }, - { - pagecontainerchange: { src: $( window ), event: "pagecontainerchange" + eventNs + "1" } - }, - function( result ) { - assert.deepEqual( result.pagecontainerchange.timedOut, false, - "Successfully changed to page '#panel-stretch-page'" ); +$.testHelper.detailedEventCascade( [ + function() { + $( "body" ).pagecontainer( "change", "#panel-stretch-page" ); + }, + { + pagecontainerchange: { src: $( window ), event: "pagecontainerchange" + eventNs + "1" } + }, + function( result ) { + assert.deepEqual( result.pagecontainerchange.timedOut, false, + "Successfully changed to page '#panel-stretch-page'" ); - // Make the page scroll - $( "#panel-stretch-page .ui-content" ).height( $.mobile.getScreenHeight() * 3 ); + // Make the page scroll + $( "#panel-stretch-page .ui-content" ).height( $.mobile.getScreenHeight() * 3 ); - stretchTestPanel.panel( "open" ); - }, - { - panelopen: { src: stretchTestPanel, event: "panelopen" + eventNs + "2" } - }, - function( result ) { + stretchTestPanel.panel( "open" ); + }, + { + panelopen: { src: stretchTestPanel, event: "panelopen" + eventNs + "2" } + }, + function( result ) { - // Making assertions about the document height has to happen immediately after the - // operation that modifies the document height takes place, because the act of - // recording the assertion itself may modify the document height, because QUnit will - // insert new DOM elements to visually record the assertion, and the addition of such - // DOM elements may affect the document height. - assert.deepEqual( stretchTestPanel.outerHeight( true ), $( document ).height(), - "Panel is as tall as the document" ); - assert.deepEqual( result.panelopen.timedOut, false, "Panel opened successfully" ); - stretchTestPanel.panel( "close" ); - }, - { - panelclose: { src: stretchTestPanel, event: "panelclose" + eventNs + "3" } - }, - function( result ) { - assert.deepEqual( result.panelclose.timedOut, false, "Panel closedsuccessfully" ); - $.mobile.back(); - }, - { - pagecontainerchange: { src: $( window ), event: "pagecontainerchange" + eventNs + "4" } - }, - start - ] ); + // Making assertions about the document height has to happen immediately after the + // operation that modifies the document height takes place, because the act of + // recording the assertion itself may modify the document height, because QUnit will + // insert new DOM elements to visually record the assertion, and the addition of such + // DOM elements may affect the document height. + assert.deepEqual( stretchTestPanel.outerHeight( true ), $( document ).height(), + "Panel is as tall as the document" ); + assert.deepEqual( result.panelopen.timedOut, false, "Panel opened successfully" ); + stretchTestPanel.panel( "close" ); + }, + { + panelclose: { src: stretchTestPanel, event: "panelclose" + eventNs + "3" } + }, + function( result ) { + assert.deepEqual( result.panelclose.timedOut, false, "Panel closedsuccessfully" ); + $.mobile.back(); + }, + { + pagecontainerchange: { src: $( window ), event: "pagecontainerchange" + eventNs + "4" } + }, + start +] ); } ); diff --git a/tests/integration/panel/open_click_bubbling_core.js b/tests/integration/panel/open_click_bubbling_core.js index 1156eff1225..a4650ebe81d 100644 --- a/tests/integration/panel/open_click_bubbling_core.js +++ b/tests/integration/panel/open_click_bubbling_core.js @@ -1,31 +1,31 @@ asyncTest( "Click on link that opens panel may bubble and does not cause navigation", function() { - var origHref = location.href, - eventNs = ".clickOnLinkThatOpensPanelMayBubble", - panel = $( "#open-click-bubbling-panel" ), - link = $( "#open-click-bubbling-link" ); +var origHref = location.href, + eventNs = ".clickOnLinkThatOpensPanelMayBubble", + panel = $( "#open-click-bubbling-panel" ), + link = $( "#open-click-bubbling-link" ); - $.testHelper.detailedEventCascade([ - function() { - link.click(); - }, - { - panelopen: { src: panel, event: "panelopen" + eventNs + "1" }, - click: { src: $( document ), event: "click" + eventNs + "1" } - }, - function( result ) { - deepEqual( result.panelopen.timedOut, false, "panelopen event occurred" ); - deepEqual( result.click.timedOut, false, "click propagated to document" ); - }, - { - timeout: { length: 500 } - }, - function() { - deepEqual( location.href, origHref, "opening the panel leaves location.href alone" ); - panel.panel( "close" ); - }, - { - panelclose: { src: panel, event: "panelclose" + eventNs + "2" } - }, - start - ]); -}); +$.testHelper.detailedEventCascade( [ + function() { + link.click(); + }, + { + panelopen: { src: panel, event: "panelopen" + eventNs + "1" }, + click: { src: $( document ), event: "click" + eventNs + "1" } + }, + function( result ) { + deepEqual( result.panelopen.timedOut, false, "panelopen event occurred" ); + deepEqual( result.click.timedOut, false, "click propagated to document" ); + }, + { + timeout: { length: 500 } + }, + function() { + deepEqual( location.href, origHref, "opening the panel leaves location.href alone" ); + panel.panel( "close" ); + }, + { + panelclose: { src: panel, event: "panelclose" + eventNs + "2" } + }, + start +] ); +} ); diff --git a/tests/integration/panel/panel_jump_to_top_core.js b/tests/integration/panel/panel_jump_to_top_core.js index 72f89282274..7eee0e17d23 100644 --- a/tests/integration/panel/panel_jump_to_top_core.js +++ b/tests/integration/panel/panel_jump_to_top_core.js @@ -5,32 +5,32 @@ module( "Panel positioning", { teardown: function() { $( "#body-extender" ).remove(); } -}); +} ); asyncTest( "Panel must not jump to top upon throttledresize", function() { - var eventNs = ".panelMustNotJumpToTop"; +var eventNs = ".panelMustNotJumpToTop"; - $.testHelper.detailedEventCascade([ - function() { - $( "#scroll-to-top-test-link" ).click(); - }, - { - panelopen: { src: $( "#scroll-to-top-test" ), event: "panelopen" + eventNs + "1" } - }, - function( result ) { - deepEqual( result.panelopen.timedOut, false, "Panel did open" ); - window.scrollTo( 0, screen.height ); - $( window ).trigger( "throttledresize" ); - deepEqual( $( window ).scrollTop(), screen.height, - "Triggering throttledresize on panel did not cause it to jump to top" ); - $( "#scroll-to-top-test" ).panel( "close" ); - }, - { - panelclose: { src: $( "#scroll-to-top-test" ), event: "panelclose" + eventNs + "2" } - }, - function( result ) { - deepEqual( result.panelclose.timedOut, false, "Panel did close" ); - start(); - } - ]); -}); +$.testHelper.detailedEventCascade( [ + function() { + $( "#scroll-to-top-test-link" ).click(); + }, + { + panelopen: { src: $( "#scroll-to-top-test" ), event: "panelopen" + eventNs + "1" } + }, + function( result ) { + deepEqual( result.panelopen.timedOut, false, "Panel did open" ); + window.scrollTo( 0, screen.height ); + $( window ).trigger( "throttledresize" ); + deepEqual( $( window ).scrollTop(), screen.height, + "Triggering throttledresize on panel did not cause it to jump to top" ); + $( "#scroll-to-top-test" ).panel( "close" ); + }, + { + panelclose: { src: $( "#scroll-to-top-test" ), event: "panelclose" + eventNs + "2" } + }, + function( result ) { + deepEqual( result.panelclose.timedOut, false, "Panel did close" ); + start(); + } +] ); +} ); diff --git a/tests/integration/panel/panel_stale_height_core.js b/tests/integration/panel/panel_stale_height_core.js index 6461c531ac8..d9dd6f5a0b6 100644 --- a/tests/integration/panel/panel_stale_height_core.js +++ b/tests/integration/panel/panel_stale_height_core.js @@ -1,26 +1,26 @@ asyncTest( "Closing a panel removes the modal's height from its inline CSS", function() { - var eventNs = ".closingAPanelRemovesModalsHeightFromItsInlineCSS", - panel = $( "#stale-height-panel" ), - link = $( "#stale-height-panel-link" ), - modal = $( ".ui-panel-dismiss" ); +var eventNs = ".closingAPanelRemovesModalsHeightFromItsInlineCSS", + panel = $( "#stale-height-panel" ), + link = $( "#stale-height-panel-link" ), + modal = $( ".ui-panel-dismiss" ); - $.testHelper.detailedEventCascade([ - function() { - link.click(); - }, - { - panelopen: { src: panel, event: "panelopen" + eventNs + "1" } - }, - function() { - panel.panel( "close" ); - }, - { - panelclose: { src: panel, event: "panelclose" + eventNs + "2" } - }, - function() { - deepEqual( ( modal.attr( "style" ) || "" ).match( /height:\s*[0-9]/ ), null, - "style attribute does not include a height field" ); - start(); - } - ]); -}); +$.testHelper.detailedEventCascade( [ + function() { + link.click(); + }, + { + panelopen: { src: panel, event: "panelopen" + eventNs + "1" } + }, + function() { + panel.panel( "close" ); + }, + { + panelclose: { src: panel, event: "panelclose" + eventNs + "2" } + }, + function() { + deepEqual( ( modal.attr( "style" ) || "" ).match( /height:\s*[0-9]/ ), null, + "style attribute does not include a height field" ); + start(); + } +] ); +} ); diff --git a/tests/unit/panel/panel_core.js b/tests/unit/panel/panel_core.js index 73aaa6a99d0..8b0a98df377 100644 --- a/tests/unit/panel/panel_core.js +++ b/tests/unit/panel/panel_core.js @@ -3,684 +3,684 @@ */ -(function( $ ){ +( function( $ ) { - var count, - defaults = $.mobile.panel.prototype.options, - classes = defaults.classes, - originalWidget = $.mobile.panel.prototype; +var count, + defaults = $.mobile.panel.prototype.options, + classes = defaults.classes, + originalWidget = $.mobile.panel.prototype; - function getPageFromPanel( $panel ) { - return $panel.closest( ":jqmData(role='page')" ); - } +function getPageFromPanel( $panel ) { + return $panel.closest( ":jqmData(role='page')" ); +} - function getModalFromPanel( $panel ) { - return $panel.data("mobile-panel")._modal; - } +function getModalFromPanel( $panel ) { + return $panel.data( "mobile-panel" )._modal; +} - function getWrapperFromPage( $page ) { - return $page.find( "." + defaults.classes.pageWrapper ); - } +function getWrapperFromPage( $page ) { + return $page.find( "." + defaults.classes.pageWrapper ); +} - module( "stock panel" ); +module( "stock panel" ); - test( "expected classes on create", function() { +test( "expected classes on create", function() { - var $panel = $( "#panel-test-create" ), - $page = getPageFromPanel( $panel ); + var $panel = $( "#panel-test-create" ), + $page = getPageFromPanel( $panel ); - ok( $panel.hasClass( defaults.classes.panel ), "default class is present" ); - ok( $panel.hasClass( "ui-panel-display-" + defaults.display ), "display class is added per the default" ); - ok( $panel.hasClass( "ui-panel-position-" + defaults.position ), "position class is added per the default" ); + ok( $panel.hasClass( defaults.classes.panel ), "default class is present" ); + ok( $panel.hasClass( "ui-panel-display-" + defaults.display ), "display class is added per the default" ); + ok( $panel.hasClass( "ui-panel-position-" + defaults.position ), "position class is added per the default" ); - equal( $panel.hasClass( defaults.classes.animate ), $.support.cssTransform3d, "animate class is present by default when supported" ); - ok( $panel.hasClass( defaults.classes.panelClosed ), "panel is closed by default" ); - }); + equal( $panel.hasClass( defaults.classes.animate ), $.support.cssTransform3d, "animate class is present by default when supported" ); + ok( $panel.hasClass( defaults.classes.panelClosed ), "panel is closed by default" ); +} ); - asyncTest( "expected open, close events", function() { +asyncTest( "expected open, close events", function() { - expect( 4 ); + expect( 4 ); - var $panel = $( "#panel-test-events" ); + var $panel = $( "#panel-test-events" ); - $panel.one( "panelbeforeopen panelopen panelbeforeclose panelclose", function( event ) { - ok( true, event.type + " event." ); - }).one( "panelopen", function() { - $panel.panel( "close" ); - }).one( "panelclose", function() { - start(); - }); + $panel.one( "panelbeforeopen panelopen panelbeforeclose panelclose", function( event ) { + ok( true, event.type + " event." ); + } ).one( "panelopen", function() { + $panel.panel( "close" ); + } ).one( "panelclose", function() { + start(); + } ); - $panel.panel( "open" ); + $panel.panel( "open" ); - }); +} ); - asyncTest( "classes modified by open", function() { - expect( 11 ); - var $panel = $( "#panel-test-open" ), - $page = getPageFromPanel( $panel ); +asyncTest( "classes modified by open", function() { + expect( 11 ); + var $panel = $( "#panel-test-open" ), + $page = getPageFromPanel( $panel ); - $panel.one( "panelopen", function( event ) { - var $wrapper = getWrapperFromPage( $page ), + $panel.one( "panelopen", function( event ) { + var $wrapper = getWrapperFromPage( $page ), $modal = getModalFromPanel( $panel ), $openButton = $page.find( "a[href='\\#panel-test-open']" ); - ok( !$openButton.hasClass( $.mobile.activeBtnClass ), "button doesn't have active class" ); + ok( !$openButton.hasClass( $.mobile.activeBtnClass ), "button doesn't have active class" ); - ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); - ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); + ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); + ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); - equal( $wrapper.length, 1, "wrapper exists." ); + equal( $wrapper.length, 1, "wrapper exists." ); - ok( !$wrapper.hasClass( defaults.classes.contentWrapClosed ), "wrapper not closed class" ); + ok( !$wrapper.hasClass( defaults.classes.contentWrapClosed ), "wrapper not closed class" ); - ok( $wrapper.hasClass( defaults.classes.pageContentPrefix + "-open" ), "wrapper open class" ); + ok( $wrapper.hasClass( defaults.classes.pageContentPrefix + "-open" ), "wrapper open class" ); - var prefix = defaults.classes.pageContentPrefix; - ok( $wrapper.hasClass( prefix + "-position-left" ), "wrapper position class" ); - ok( $wrapper.hasClass( prefix + "-display-reveal" ), "wrapper display type class" ); + var prefix = defaults.classes.pageContentPrefix; + ok( $wrapper.hasClass( prefix + "-position-left" ), "wrapper position class" ); + ok( $wrapper.hasClass( prefix + "-display-reveal" ), "wrapper display type class" ); - ok( $modal.hasClass( defaults.classes.modalOpen ), "modal open class" ); - - prefix = defaults.classes.modal; - ok( $modal.hasClass( prefix + "-position-left" ), "modal position class" ); - ok( $modal.hasClass( prefix + "-display-reveal" ), "modal display type class" ); + ok( $modal.hasClass( defaults.classes.modalOpen ), "modal open class" ); - // TODO test positioning when panel height > screen height - // TODO test rebind resize after complete + prefix = defaults.classes.modal; + ok( $modal.hasClass( prefix + "-position-left" ), "modal position class" ); + ok( $modal.hasClass( prefix + "-display-reveal" ), "modal display type class" ); - $panel.panel( "close" ); - }).one( "panelclose", function() { - start(); - }); + // TODO test positioning when panel height > screen height + // TODO test rebind resize after complete - $panel.panel( "open" ); + $panel.panel( "close" ); + } ).one( "panelclose", function() { + start(); + } ); - }); + $panel.panel( "open" ); - asyncTest( "classes modified by close", function() { - expect( 12 ); +} ); - var $panel = $( "#panel-test-close" ), - $page = getPageFromPanel( $panel ), - $wrapper = getWrapperFromPage( $page ), - $modal = getModalFromPanel( $panel ), - $openButton = $page.find( "a[href='\\#panel-test-close']" ); +asyncTest( "classes modified by close", function() { + expect( 12 ); - $panel.one( "panelopen", function( event ) { - $panel.panel( "close" ); - }).one( "panelclose", function( event ) { - ok( !$openButton.hasClass( $.mobile.activeBtnClass ), "button doesn't have active class" ); - ok( !$panel.hasClass( defaults.classes.panelOpen ), "panel not open class" ); + var $panel = $( "#panel-test-close" ), + $page = getPageFromPanel( $panel ), + $wrapper = getWrapperFromPage( $page ), + $modal = getModalFromPanel( $panel ), + $openButton = $page.find( "a[href='\\#panel-test-close']" ); - ok( !$modal.hasClass( defaults.classes.modalOpen ), "modal without open class" ); - var prefix = defaults.classes.modal; - ok( !$modal.hasClass( prefix + "-position-left" ), "modal without position class" ); - ok( !$modal.hasClass( prefix + "-display-overlay" ), "modal without display type class" ); + $panel.one( "panelopen", function( event ) { + $panel.panel( "close" ); + } ).one( "panelclose", function( event ) { + ok( !$openButton.hasClass( $.mobile.activeBtnClass ), "button doesn't have active class" ); + ok( !$panel.hasClass( defaults.classes.panelOpen ), "panel not open class" ); - ok( !$wrapper.hasClass( defaults.classes.contentWrapOpen ), "wrapper open class" ); - ok( !$wrapper.hasClass( defaults.classes.contentWrapOpenComplete ), "wrapper open complete class" ); + ok( !$modal.hasClass( defaults.classes.modalOpen ), "modal without open class" ); + var prefix = defaults.classes.modal; + ok( !$modal.hasClass( prefix + "-position-left" ), "modal without position class" ); + ok( !$modal.hasClass( prefix + "-display-overlay" ), "modal without display type class" ); - // complete - ok( $panel.hasClass( defaults.classes.panelClosed ), "panel closed class" ); + ok( !$wrapper.hasClass( defaults.classes.contentWrapOpen ), "wrapper open class" ); + ok( !$wrapper.hasClass( defaults.classes.contentWrapOpenComplete ), "wrapper open complete class" ); - prefix = defaults.classes.contentWrap; - ok( !$wrapper.hasClass( prefix + "-position-left" ), "wrapper position class" ); - ok( !$wrapper.hasClass( prefix + "-display-overlay" ), "wrapper display type class" ); + // complete + ok( $panel.hasClass( defaults.classes.panelClosed ), "panel closed class" ); - ok( !$wrapper.hasClass( defaults.classes.pageContentPrefix + "-open" ), "wrapper open class removed" ); - ok( !$page.hasClass( defaults.classes.pageBlock ), "page block class not added to page" ); + prefix = defaults.classes.contentWrap; + ok( !$wrapper.hasClass( prefix + "-position-left" ), "wrapper position class" ); + ok( !$wrapper.hasClass( prefix + "-display-overlay" ), "wrapper display type class" ); - // TODO test positioning when panel height > screen height - // TODO test rebind resize after complete + ok( !$wrapper.hasClass( defaults.classes.pageContentPrefix + "-open" ), "wrapper open class removed" ); + ok( !$page.hasClass( defaults.classes.pageBlock ), "page block class not added to page" ); - start(); - }); + // TODO test positioning when panel height > screen height + // TODO test rebind resize after complete - $panel.panel( "open" ); + start(); + } ); - }); + $panel.panel( "open" ); - asyncTest( "toggle", function() { - expect( 2 ); +} ); - var $panel = $( "#panel-test-toggle" ), - $page = getPageFromPanel( $panel ); +asyncTest( "toggle", function() { + expect( 2 ); - $panel.one( "panelopen", function( event ) { - ok( true, "toggle open" ); - $panel.panel( "close" ); - }).one( "panelclose", function( event ) { - ok( true, "toggle closed" ); - start(); - }); + var $panel = $( "#panel-test-toggle" ), + $page = getPageFromPanel( $panel ); - $panel.panel( "toggle" ); + $panel.one( "panelopen", function( event ) { + ok( true, "toggle open" ); + $panel.panel( "close" ); + } ).one( "panelclose", function( event ) { + ok( true, "toggle closed" ); + start(); + } ); - }); + $panel.panel( "toggle" ); - test( "wrapper exists after create", function() { +} ); - var $page = getPageFromPanel( $( "#panel-test-wrapper" ) ), - $wrapper = getWrapperFromPage( $page ); +test( "wrapper exists after create", function() { - ok( $wrapper.length, "wrapper exists" ); - ok( !$wrapper.hasClass( defaults.classes.pageContentPrefix + "-open" ), "wrapper does not have open class" ); + var $page = getPageFromPanel( $( "#panel-test-wrapper" ) ), + $wrapper = getWrapperFromPage( $page ); - }); + ok( $wrapper.length, "wrapper exists" ); + ok( !$wrapper.hasClass( defaults.classes.pageContentPrefix + "-open" ), "wrapper does not have open class" ); - // TODO _bindPageEvents +} ); - test( "destroy method", function() { +// TODO _bindPageEvents - var $panel = $( "#panel-test-destroy" ), - $page = getPageFromPanel( $panel ), - $wrapper = getWrapperFromPage( $page ); +test( "destroy method", function() { - $panel.panel( "destroy" ); - // test page without sibling panels + var $panel = $( "#panel-test-destroy" ), + $page = getPageFromPanel( $panel ), + $wrapper = getWrapperFromPage( $page ); - ok( !$wrapper.hasClass( defaults.classes.contentWrapOpen ) ); - ok( !$wrapper.hasClass( defaults.classes.contentWrapOpenComplete ) ); + $panel.panel( "destroy" ); + // test page without sibling panels - ok( !$panel.hasClass( defaults.classes.panel ) ); - ok( !$wrapper.hasClass( "ui-panel-position-left" ) ); - ok( !$wrapper.hasClass( "ui-panel-display-overlay" ) ); - ok( !$panel.hasClass( defaults.classes.panelOpen ) ); - ok( !$panel.hasClass( defaults.classes.panelClosed ) ); - ok( !$panel.hasClass( "ui-body-c" ) ); - ok( !$panel.hasClass( defaults.classes.cssTransform3d ) ); + ok( !$wrapper.hasClass( defaults.classes.contentWrapOpen ) ); + ok( !$wrapper.hasClass( defaults.classes.contentWrapOpenComplete ) ); - ok( !$panel.hasClass( [ classes.openComplete, classes.panelUnfixed, classes.panelClosed, classes.panelOpen ].join( " " ) ) ); - ok( !$page.hasClass( classes.pageBlock ) ); + ok( !$panel.hasClass( defaults.classes.panel ) ); + ok( !$wrapper.hasClass( "ui-panel-position-left" ) ); + ok( !$wrapper.hasClass( "ui-panel-display-overlay" ) ); + ok( !$panel.hasClass( defaults.classes.panelOpen ) ); + ok( !$panel.hasClass( defaults.classes.panelClosed ) ); + ok( !$panel.hasClass( "ui-body-c" ) ); + ok( !$panel.hasClass( defaults.classes.cssTransform3d ) ); - $panel.panel(); - }); + ok( !$panel.hasClass( [ classes.openComplete, classes.panelUnfixed, classes.panelClosed, classes.panelOpen ].join( " " ) ) ); + ok( !$page.hasClass( classes.pageBlock ) ); - asyncTest( "panelclose not called on document", function() { - expect( 2 ); - - $( document ).on( "panelopen", "#panel-panelclose-event", function() { - $(this).panel("close"); - }); + $panel.panel(); +} ); - $( document ).on( "panelclose", "#panel-panelclose-event", function() { - ok( true, "document panelclose event emitted" ); - }); +asyncTest( "panelclose not called on document", function() { + expect( 2 ); - $( document.body ).on( "panelclose", "#panel-panelclose-event", function() { - ok( true, "document.body panelclose event emitted" ); - start(); - }); + $( document ).on( "panelopen", "#panel-panelclose-event", function() { + $( this ).panel( "close" ); + } ); - $( "#panel-panelclose-event" ).panel("open"); - - }); + $( document ).on( "panelclose", "#panel-panelclose-event", function() { + ok( true, "document panelclose event emitted" ); + } ); - asyncTest( "should be able to open a second panel", function() { - expect ( 1 ); + $( document.body ).on( "panelclose", "#panel-panelclose-event", function() { + ok( true, "document.body panelclose event emitted" ); + start(); + } ); - $( document ).on( "panelopen", "#panel-opensecond", function() { - ok( true, "second panel opened" ); - start(); - }); + $( "#panel-panelclose-event" ).panel( "open" ); - $( "#panel-openfirst" ).panel( "open" ); - $( "#panel-opensecond" ).panel( "open" ); - }); +} ); - module( "dismissable panel", { - setup: function(){ - $.Event.prototype.originalEvent = { - touches: [{ 'pageX' : 0 }, { 'pageY' : 0 }] - }; - } - }); +asyncTest( "should be able to open a second panel", function() { + expect( 1 ); - test( "dismissable", function() { - var $panel = $( "#panel-test-dismiss" ); - equal( getModalFromPanel( $panel ).length, 1, "modal added to page" ); - }); + $( document ).on( "panelopen", "#panel-opensecond", function() { + ok( true, "second panel opened" ); + start(); + } ); - asyncTest( "click on dismissable modal closes panel", function() { + $( "#panel-openfirst" ).panel( "open" ); + $( "#panel-opensecond" ).panel( "open" ); +} ); - expect( 1 ); - - var $panel = $( "#panel-test-dismiss" ), - $modal = getModalFromPanel( $panel ); +module( "dismissable panel", { + setup: function() { + $.Event.prototype.originalEvent = { + touches: [ { 'pageX': 0 }, { 'pageY': 0 } ] + }; + } +} ); - $panel.one( "panelopen", function() { +test( "dismissable", function() { + var $panel = $( "#panel-test-dismiss" ); + equal( getModalFromPanel( $panel ).length, 1, "modal added to page" ); +} ); - $modal.trigger( "mousedown" ); +asyncTest( "click on dismissable modal closes panel", function() { - }).one( "panelclose", function() { + expect( 1 ); - ok( true, "modal is closed" ); - start(); + var $panel = $( "#panel-test-dismiss" ), + $modal = getModalFromPanel( $panel ); - }); + $panel.one( "panelopen", function() { - $panel.panel( "open" ); + $modal.trigger( "mousedown" ); - }); + } ).one( "panelclose", function() { - asyncTest( "swipe on dismissible panel does not close panel if the default is prevented", - function() { - var panel = $( "#panel-test-dismiss" ), - eventNs = ".swipeDoesNotClosePanel", - input = $( "#dismiss-input" ).one( "swipeleft", function( event ) { - event.preventDefault(); - }); + ok( true, "modal is closed" ); + start(); - expect( 1 ); + } ); - $.testHelper.detailedEventCascade([ - function() { - panel.panel( "open" ); - }, + $panel.panel( "open" ); - { - panelopen: { src: panel, event: "panelopen" + eventNs + "1" } - }, +} ); - function() { - input.trigger( "swipeleft" ); - }, +asyncTest( "swipe on dismissible panel does not close panel if the default is prevented", + function() { + var panel = $( "#panel-test-dismiss" ), + eventNs = ".swipeDoesNotClosePanel", + input = $( "#dismiss-input" ).one( "swipeleft", function( event ) { + event.preventDefault(); + } ); - { - panelclose: { src: panel, event: "panelclose" + eventNs + "2" } - }, + expect( 1 ); - function( result ) { - deepEqual( result.panelclose.timedOut, true, - "panelclose event did not happen in response to swipe on child input" ); - panel.panel( "close" ); - }, + $.testHelper.detailedEventCascade( [ + function() { + panel.panel( "open" ); + }, - { - panelclose: { src: panel, event: "panelclose" + eventNs + "3" } - }, + { + panelopen: { src: panel, event: "panelopen" + eventNs + "1" } + }, - start - ]); - }); + function() { + input.trigger( "swipeleft" ); + }, - asyncTest( "swipe on dismissible modal closes panel", function() { + { + panelclose: { src: panel, event: "panelclose" + eventNs + "2" } + }, - expect( 1 ); + function( result ) { + deepEqual( result.panelclose.timedOut, true, + "panelclose event did not happen in response to swipe on child input" ); + panel.panel( "close" ); + }, - var $panel = $( "#panel-test-dismiss" ), - $modal = getModalFromPanel( $panel ); + { + panelclose: { src: panel, event: "panelclose" + eventNs + "3" } + }, - $panel.one( "panelopen", function() { + start + ] ); + } ); - $modal.trigger( "swipeleft" ); +asyncTest( "swipe on dismissible modal closes panel", function() { - }).one( "panelclose", function() { + expect( 1 ); - ok( true, "modal is closed" ); - start(); + var $panel = $( "#panel-test-dismiss" ), + $modal = getModalFromPanel( $panel ); - }); + $panel.one( "panelopen", function() { - $panel.panel( "open" ); + $modal.trigger( "swipeleft" ); - }); + } ).one( "panelclose", function() { - module( "panel with non-default theme" ); + ok( true, "modal is closed" ); + start(); - test( "expected classes on create", function() { + } ); - var $panel = $( "#panel-test-non-default-theme" ); - ok( $panel.hasClass( "ui-body-" + $panel.jqmData('theme') ), "theme class was added" ); + $panel.panel( "open" ); - }); +} ); - module( "panel with close button" ); +module( "panel with non-default theme" ); - asyncTest( "panel opens, close button hides panel", function() { - expect( 2 ); +test( "expected classes on create", function() { - var $panel = $( "#panel-test-with-close" ), - $page = getPageFromPanel( $panel ), - $closeButton = $panel.find( ":jqmData(rel='close')" ); + var $panel = $( "#panel-test-non-default-theme" ); + ok( $panel.hasClass( "ui-body-" + $panel.jqmData( 'theme' ) ), "theme class was added" ); - $panel.one( "panelopen", function() { +} ); - ok( !$panel.hasClass( defaults.classes.panelClosed ), "wrapper opens" ); - $closeButton.trigger( "click" ); +module( "panel with close button" ); - }).one( "panelclose", function() { +asyncTest( "panel opens, close button hides panel", function() { + expect( 2 ); - ok( $panel.hasClass( defaults.classes.panelClosed ), "wrapper has closed class" ); - start(); - }); + var $panel = $( "#panel-test-with-close" ), + $page = getPageFromPanel( $panel ), + $closeButton = $panel.find( ":jqmData(rel='close')" ); - $panel.panel( "open" ); - }); + $panel.one( "panelopen", function() { - // Test for https://github.com/jquery/jquery-mobile/issues/6693 - asyncTest( "unrelated link does not close the panel", function() { - var panel = $( "#panel-test-ignore-unrelated-link" ), - eventNs = ".ignoreUnrelatedLinkClick"; + ok( !$panel.hasClass( defaults.classes.panelClosed ), "wrapper opens" ); + $closeButton.trigger( "click" ); - $( "#unrelated-link" ).one( "click", function( event ) { - event.preventDefault(); - }); + } ).one( "panelclose", function() { - $.testHelper.detailedEventCascade([ - function() { - panel.panel( "open" ); - }, + ok( $panel.hasClass( defaults.classes.panelClosed ), "wrapper has closed class" ); + start(); + } ); - { - panelopen: { src: panel, event: "panelopen" + eventNs + "1" } - }, + $panel.panel( "open" ); +} ); - function( result ) { - deepEqual( result.panelopen.timedOut, false, - "Panel opened successfully" ); - $( "#unrelated-link" ).click(); - }, +// Test for https://github.com/jquery/jquery-mobile/issues/6693 +asyncTest( "unrelated link does not close the panel", function() { + var panel = $( "#panel-test-ignore-unrelated-link" ), + eventNs = ".ignoreUnrelatedLinkClick"; - { - panelclose: { src: panel, event: "panelclose" + eventNs + "2" } - }, + $( "#unrelated-link" ).one( "click", function( event ) { + event.preventDefault(); + } ); - function( result ) { - deepEqual( result.panelclose.timedOut, true, - "Panel did not close in response to unrelated click" ); - panel.panel( "close" ); - }, + $.testHelper.detailedEventCascade( [ + function() { + panel.panel( "open" ); + }, - { - panelclose: { src: panel, event: "panelclose" + eventNs + "3" } - }, + { + panelopen: { src: panel, event: "panelopen" + eventNs + "1" } + }, - start - ]); - }); + function( result ) { + deepEqual( result.panelopen.timedOut, false, + "Panel opened successfully" ); + $( "#unrelated-link" ).click(); + }, - asyncTest( "Panel still opens after changing its ID", function() { - var eventNs = ".panelStillOpensAfterChangingItsId", - idTestPanel = $( "#panel-test-id-change" ), - idTestLink = $( "a[href='#panel-test-id-change']" ); + { + panelclose: { src: panel, event: "panelclose" + eventNs + "2" } + }, - expect( 1 ); + function( result ) { + deepEqual( result.panelclose.timedOut, true, + "Panel did not close in response to unrelated click" ); + panel.panel( "close" ); + }, - idTestPanel.attr( "id", "something-else" ); - idTestLink.attr( "href", "#something-else" ); + { + panelclose: { src: panel, event: "panelclose" + eventNs + "3" } + }, - $.testHelper.detailedEventCascade([ - function() { - idTestLink.click(); - }, - { - panelopen: { src: idTestPanel, event: "panelopen" + eventNs + "1" } - }, - function( result ) { - deepEqual( result.panelopen.timedOut, false, "Renamed panel has opened" ); - idTestPanel.panel( "close" ); - }, - { - panelclose: { src: idTestPanel, event: "panelclose" + eventNs + "2" } - }, - start - ]); - }); - 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 eventNs = ".overlayPanelShouldNotCallGetWrapper", - testPanel = $( "#panel-test-get-wrapper-overlay" ); + start + ] ); +} ); - testPanel.panel({ - "display": "overlay" - }); - deepEqual( count, 0, "getWrapper only called once durring create" ); +asyncTest( "Panel still opens after changing its ID", function() { + var eventNs = ".panelStillOpensAfterChangingItsId", + idTestPanel = $( "#panel-test-id-change" ), + idTestLink = $( "a[href='#panel-test-id-change']" ); - $.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(); + expect( 1 ); + + idTestPanel.attr( "id", "something-else" ); + idTestLink.attr( "href", "#something-else" ); + + $.testHelper.detailedEventCascade( [ + function() { + idTestLink.click(); + }, + { + panelopen: { src: idTestPanel, event: "panelopen" + eventNs + "1" } + }, + function( result ) { + deepEqual( result.panelopen.timedOut, false, "Renamed panel has opened" ); + idTestPanel.panel( "close" ); + }, + { + panelclose: { src: idTestPanel, event: "panelclose" + eventNs + "2" } + }, + start + ] ); +} ); +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 eventNs = ".overlayPanelShouldNotCallGetWrapper", + testPanel = $( "#panel-test-get-wrapper-overlay" ); + + testPanel.panel( { + "display": "overlay" + } ); + 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 panel should call getWrapper only once on create", function(){ - expect( 5 ); - var eventNs = ".pushPanelShouldCallGetWrapperOnlyOnceOnCreate", - testPanel = $( "#panel-test-get-wrapper-push" ); +asyncTest( "push panel should call getWrapper only once on create", function() { + expect( 5 ); + var eventNs = ".pushPanelShouldCallGetWrapperOnlyOnceOnCreate", + testPanel = $( "#panel-test-get-wrapper-push" ); - testPanel.panel({ - "display": "push" - }); - ok( count === 1, "getWrapper only called once durring create" ); + testPanel.panel( { + "display": "push" + } ); + ok( 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(); - } - ]); - }); + $.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 eventNs = ".revealPanelShouldCallGetWrapperOnlyOnceOnCreate", + testPanel = $( "#panel-test-get-wrapper" ); - asyncTest( "reveal panel should call getWrapper only once on create", function(){ + testPanel.panel(); + 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 getWrapper once on create and on page changes", + function() { expect( 5 ); - var eventNs = ".revealPanelShouldCallGetWrapperOnlyOnceOnCreate", - testPanel = $( "#panel-test-get-wrapper" ); + var eventNs = ".externalPanelShouldCallGetWrapperOnceOnCreateAndOnPageChanges", + testPanel = $( "#external-panel-getWrapper-test" ); testPanel.panel(); deepEqual( count, 1, "getWrapper only called once durring create" ); - $.testHelper.detailedEventCascade([ + $.testHelper.detailedEventCascade( [ function() { testPanel.panel( "open" ); }, { - panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" } + panelopen: { src: testPanel, event: "panelopen" } }, - function(){ + function() { deepEqual( count, 1, "getWrapper not called on open" ); testPanel.panel( "close" ); }, { - panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" } + panelclose: { src: testPanel, event: "panelclose" } }, function() { deepEqual( count, 1, "getWrapper not called on close" ); $.mobile.changePage( "#page2" ); }, { - pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" } + pageshow: { src: $( "body" ), event: "pagecontainershow" } }, 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 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 ); + + $( "body" ).one( "pagecontainershow", function() { window.setTimeout( function() { - deepEqual( count, 2, "getWrapper called on pagechange" ); + deepEqual( count, 3, + "getWrapper called on pagechange back to inital page" ); + start(); }, 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 ); - - var $panel = $( "#panel-test-external" ).panel(), - $firstPage = $( ":jqmData(role='page')" ).first(), - $secondPage = $( ":jqmData(role='page')" ).last(), - $openButton = $firstPage.find( "a[href='\\#panel-test-external']" ), - $link = $panel.find( "a[href='\\#multipage']" ), - $back = $panel.find( "a[data-nstest-rel='back']" ); - - $panel.one( "panelopen", function( event ) { +asyncTest( "external panel: test classes during A>B>A transition", function() { + expect( 16 ); - ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); - ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); - ok( $firstPage.data("nstestPanel") === "open", "open flag set on first page" ); - equal( $firstPage.find(".ui-panel-wrapper").length, 1, "wrapper exists." ); + var $panel = $( "#panel-test-external" ).panel(), + $firstPage = $( ":jqmData(role='page')" ).first(), + $secondPage = $( ":jqmData(role='page')" ).last(), + $openButton = $firstPage.find( "a[href='\\#panel-test-external']" ), + $link = $panel.find( "a[href='\\#multipage']" ), + $back = $panel.find( "a[data-nstest-rel='back']" ); + + $panel.one( "panelopen", function( event ) { - $link.trigger( "click" ); + ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); + ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); + ok( $firstPage.data( "nstestPanel" ) === "open", "open flag set on first page" ); + equal( $firstPage.find( ".ui-panel-wrapper" ).length, 1, "wrapper exists." ); - }).one( "panelclose", function( event ) { + $link.trigger( "click" ); - ok( $panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); - ok( !$panel.hasClass( defaults.classes.panelOpen ), "open class added" ); - ok( $firstPage.data("nstestPanel") === undefined, "no open flag on first" ); + } ).one( "panelclose", function( event ) { - $panel.trigger( "continue" ); + ok( $panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); + ok( !$panel.hasClass( defaults.classes.panelOpen ), "open class added" ); + ok( $firstPage.data( "nstestPanel" ) === undefined, "no open flag on first" ); - }).one( "continue", function( event ) { + $panel.trigger( "continue" ); - setTimeout(function() { - $panel.panel( "open" ); + } ).one( "continue", function( event ) { - ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); - ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); - ok( $secondPage.data("nstestPanel") === "open", "open flag set on 2nd page" ); - equal( $secondPage.find(".ui-panel-wrapper").length, 1, "wrapper exists." ); + setTimeout( function() { + $panel.panel( "open" ); - $back.trigger( "click" ); + ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); + ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); + ok( $secondPage.data( "nstestPanel" ) === "open", "open flag set on 2nd page" ); + equal( $secondPage.find( ".ui-panel-wrapper" ).length, 1, "wrapper exists." ); + + $back.trigger( "click" ); - },500); + }, 500 ); - }).panel( "open" ); + } ).panel( "open" ); - $back.one( "click", function( event ) { + $back.one( "click", function( event ) { - ok( $firstPage.data("nstestPanel") === undefined, - "no open flag on first page on backwards transition" ); - equal( $firstPage.find(".ui-panel-wrapper").length, 1, "wrapper exists." ); + ok( $firstPage.data( "nstestPanel" ) === undefined, + "no open flag on first page on backwards transition" ); + equal( $firstPage.find( ".ui-panel-wrapper" ).length, 1, "wrapper exists." ); - setTimeout(function() { - $panel.panel( "open" ); + setTimeout( function() { + $panel.panel( "open" ); - ok( $firstPage.data("nstestPanel") === "open", "open flag set on first page" ); - ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); - ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); + ok( $firstPage.data( "nstestPanel" ) === "open", "open flag set on first page" ); + ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" ); + ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" ); - start(); - },500); - }); - }); + start(); + }, 500 ); + } ); +} ); -}( jQuery )); +}( jQuery ) );