Permalink
Browse files

Panel: Don't start opening a panel before other panels are closed. Fi…

…xes #5510.
  • Loading branch information...
1 parent 2f4fd71 commit 58f0d6aab6750b5f3698d1041088df53515564f5 @jaspermdegroot jaspermdegroot committed Feb 1, 2013
Showing with 111 additions and 64 deletions.
  1. +12 −8 css/structure/jquery.mobile.panel.css
  2. +20 −16 docs/panels/index.html
  3. +79 −40 js/widgets/panel.js
@@ -203,25 +203,29 @@
margin-right: 1px;
}
-/* wrap push on wide viewports once open */
+/* wrap on wide viewports once open */
@media (min-width:55em){
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left {
+ right: 17em;
+ }
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right {
+ left: 17em;
+ }
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
- margin: 0 0 0 17em;
+ margin-left: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}
.ui-responsive-panel .ui-panel-dismiss-display-push {
display: none;
- }
+ }
}
@@ -82,7 +82,7 @@ <h2 id="demo-links">Panels</h2>
<h4>CSS column-count &amp; forms</h4>
- <p>To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. The CSS that is used to do this can cause issues with form elements on the page if you use <code>column-count</code> to layout the form. To resolve this you have to set the following rule for the <code>div</code> that contains the form or the field container of each form element:
+ <p>To avoid blinks when opening a panel, we force hardware acceleration on WebKit browsers. The CSS that is used to do this can cause issues with form elements on the page if you use <code>column-count</code> to layout the form. To resolve this you have to set the following rule for the <code>div</code> that contains the form or the field container of each form element:</p>
<pre><code>
-webkit-transform: translate3d(0,0,0);
@@ -194,27 +194,31 @@ <h2 id="demo-links">Panels</h2>
<p>Here is an example of these rules wrapped in a media query to only apply this behavior above 35em (560px):</p>
<pre><code>
-/* wrap push on wide viewports once open */
-@media (min-width: 35em){
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
+/* wrap on wide viewports once open */
+@media (min-width:55em){
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left {
+ right: 17em;
+ }
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
- .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
+ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right {
+ left: 17em;
+ }
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
- margin: 0 0 0 17em;
+ margin-left: 17em;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal {
width: auto;
}
.ui-responsive-panel .ui-panel-dismiss-display-push {
display: none;
- }
+ }
}
</code></pre>
@@ -232,7 +236,7 @@ <h2 id="demo-links">Panels</h2>
<!-- Here are a bunch of panels at the end, just before the close page tag -->
<!-- leftpanel1 -->
- <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-dismissible="true" data-theme="a">
+ <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-theme="a">
<h3>Left Panel: Reveal</h3>
<p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -243,7 +247,7 @@ <h2 id="demo-links">Panels</h2>
<!-- leftpanel2 -->
- <div data-role="panel" id="leftpanel2" data-position="left" data-display="push" data-dismissible="true" data-theme="a">
+ <div data-role="panel" id="leftpanel2" data-position="left" data-display="push" data-theme="a">
<h3>Left Panel: Push</h3>
<p>This panel is positioned on the left with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -254,7 +258,7 @@ <h2 id="demo-links">Panels</h2>
<!-- leftpanel3 -->
- <div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-dismissible="true" data-theme="a">
+ <div data-role="panel" id="leftpanel3" data-position="left" data-display="overlay" data-theme="a">
<h3>Left Panel: Overlay</h3>
<p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -265,7 +269,7 @@ <h2 id="demo-links">Panels</h2>
<!-- rightpanel1 -->
- <div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-dismissible="true" data-theme="b">
+ <div data-role="panel" id="rightpanel1" data-position="right" data-display="reveal" data-theme="b">
<h3>Right Panel: Reveal</h3>
<p>This panel is positioned on the right with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -276,7 +280,7 @@ <h2 id="demo-links">Panels</h2>
<!-- rightpanel2 -->
- <div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-dismissible="true" data-theme="b">
+ <div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="b">
<h3>Right Panel: Push</h3>
<p>This panel is positioned on the right with the push display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
@@ -287,7 +291,7 @@ <h2 id="demo-links">Panels</h2>
<!-- rightpanel3 -->
- <div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-dismissible="true" data-theme="b">
+ <div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-theme="b">
<h3>Right Panel: Overlay</h3>
<p>This panel is positioned on the right with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
View
@@ -256,10 +256,10 @@ $.widget( "mobile.panel", $.mobile.widget, {
var self = this;
self._page
- // Close immediately if another panel on the page opens
+ // Close the panel if another panel on the page opens
.on( "panelbeforeopen", function( e ) {
if ( self._open && e.target !== self.element[ 0 ] ) {
- self.close( true );
+ self.close();
}
})
// clean up open panels after page hide
@@ -287,39 +287,64 @@ $.widget( "mobile.panel", $.mobile.widget, {
if ( !this._open ) {
var self = this,
o = self.options,
+ _openPanel = function() {
+ self._page.off( "panelclose" );
+ self._page.jqmData( "panel", "open" );
+
+ if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
+ self.element.add( self._wrapper ).on( self._transitionEndEvents, complete );
+ } else {
+ setTimeout( complete, 0 );
+ }
+
+ if ( self.options.theme && self.options.display !== "overlay" ) {
+ self._page
+ .removeClass( self._pageTheme )
+ .addClass( "ui-body-" + self.options.theme );
+ }
+
+ self.element.removeClass( o.classes.panelClosed ).addClass( o.classes.panelOpen );
+
+ self._contentWrapOpenClasses = self._getPosDisplayClasses( o.classes.contentWrap );
+ self._wrapper
+ .removeClass( o.classes.contentWrapClosed )
+ .addClass( self._contentWrapOpenClasses + " " + o.classes.contentWrapOpen );
+
+ self._fixedToolbarOpenClasses = self._getPosDisplayClasses( o.classes.contentFixedToolbar );
+ self._fixedToolbar
+ .removeClass( o.classes.contentFixedToolbarClosed )
+ .addClass( self._fixedToolbarOpenClasses + " " + o.classes.contentFixedToolbarOpen );
+
+ self._modalOpenClasses = self._getPosDisplayClasses( o.classes.modal ) + " " + o.classes.modalOpen;
+ if ( this._modal ) {
+ self._modal.addClass( self._modalOpenClasses );
+ }
+ },
complete = function() {
- self.element.add( self._wrapper ).add( self._fixedToolbar ).off( self._transitionEndEvents, complete );
+ self.element.add( self._wrapper ).off( self._transitionEndEvents, complete );
+
self._page.addClass( o.classes.pagePanelOpen );
+
self._positionPanel();
self._bindFixListener();
+
self._trigger( "open" );
};
if ( this.element.closest( ".ui-page-active" ).length < 0 ) {
immediate = true;
}
+
self._trigger( "beforeopen" );
-
- if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
- self.element.add( self._wrapper ).add( self._fixedToolbar ).on( self._transitionEndEvents, complete );
+
+ if ( self._page.jqmData('panel') === "open" ) {
+ self._page.on( "panelclose", function() {
+ _openPanel();
+ });
} else {
- setTimeout( complete, 0 );
- }
- if ( self.options.theme && self.options.display !== "overlay" ) {
- self._page.removeClass( self._pageTheme ).addClass( "ui-body-" + self.options.theme );
- }
- self.element.removeClass( o.classes.panelClosed );
- self.element.addClass( o.classes.panelOpen );
- self._contentWrapOpenClasses = self._getPosDisplayClasses( o.classes.contentWrap );
- self._wrapper.removeClass( o.classes.contentWrapClosed );
- self._wrapper.addClass( self._contentWrapOpenClasses + " " + o.classes.contentWrapOpen );
- self._fixedToolbarOpenClasses = self._getPosDisplayClasses( o.classes.contentFixedToolbar );
- self._fixedToolbar.removeClass( o.classes.contentFixedToolbarClosed );
- self._fixedToolbar.addClass( self._fixedToolbarOpenClasses + " " + o.classes.contentFixedToolbarOpen );
- self._modalOpenClasses = self._getPosDisplayClasses( o.classes.modal ) + " " + o.classes.modalOpen;
- if ( this._modal ) {
- self._modal.addClass( self._modalOpenClasses );
+ _openPanel();
}
+
self._open = true;
}
},
@@ -328,39 +353,51 @@ $.widget( "mobile.panel", $.mobile.widget, {
if ( this._open ) {
var o = this.options,
self = this,
+ _closePanel = function() {
+ if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
+ self.element.add( self._wrapper ).on( self._transitionEndEvents, complete );
+ } else {
+ setTimeout( complete, 0 );
+ }
+
+ self._page.removeClass( o.classes.pagePanelOpen );
+ self.element.removeClass( o.classes.panelOpen );
+ self._wrapper.removeClass( o.classes.contentWrapOpen );
+ self._fixedToolbar.removeClass( o.classes.contentFixedToolbarOpen );
+
+ if ( this._modal ) {
+ self._modal.removeClass( self._modalOpenClasses );
+ }
+ },
complete = function() {
if ( self.options.theme && self.options.display !== "overlay" ) {
self._page.removeClass( "ui-body-" + self.options.theme ).addClass( self._pageTheme );
}
- self.element.add( self._wrapper ).add( self._fixedToolbar ).off( self._transitionEndEvents, complete );
+ self.element.add( self._wrapper ).off( self._transitionEndEvents, complete );
self.element.addClass( o.classes.panelClosed );
- self._wrapper.removeClass( self._contentWrapOpenClasses );
- self._wrapper.addClass( o.classes.contentWrapClosed );
- self._fixedToolbar.removeClass( self._fixedToolbarOpenClasses );
- self._fixedToolbar.addClass( o.classes.contentFixedToolbarClosed );
- self._page.removeClass( o.classes.pagePanelOpen );
+
+ self._wrapper
+ .removeClass( self._contentWrapOpenClasses )
+ .addClass( o.classes.contentWrapClosed );
+
+ self._fixedToolbar
+ .removeClass( self._fixedToolbarOpenClasses )
+ .addClass( o.classes.contentFixedToolbarClosed );
+
self._fixPanel();
self._unbindFixListener();
$.mobile.resetActivePageHeight();
+
+ self._page.jqmRemoveData( "panel" );
self._trigger( "close" );
};
+
if ( this.element.closest( ".ui-page-active" ).length < 0 ) {
immediate = true;
}
self._trigger( "beforeclose" );
- if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
- self.element.add( self._wrapper ).add( self._fixedToolbar ).on( self._transitionEndEvents, complete );
- } else {
- setTimeout( complete, 0 );
- }
-
- self.element.removeClass( o.classes.panelOpen );
- if ( this._modal ) {
- self._modal.removeClass( self._modalOpenClasses );
- }
- self._wrapper.removeClass( o.classes.contentWrapOpen );
- self._fixedToolbar.removeClass( o.classes.contentFixedToolbarOpen );
+ _closePanel();
self._open = false;
}
@@ -383,6 +420,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
this._page.find( "a" ).unbind( "panelopen panelclose" );
this._page.removeClass( classes.pagePanel );
if ( this._open ) {
+ this._page.jqmRemoveData( "panel" );
this._page.removeClass( classes.pagePanelOpen );
if ( theme ) {
this._page.removeClass( "ui-body-" + theme ).addClass( this._pageTheme );
@@ -392,6 +430,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
} else if ( this._open ) {
this._wrapper.removeClass( classes.contentWrapOpen );
this._fixedToolbar.removeClass( classes.contentFixedToolbarOpen );
+ this._page.jqmRemoveData( "panel" );
this._page.removeClass( classes.pagePanelOpen );
if ( theme ) {
this._page.removeClass( "ui-body-" + theme ).addClass( this._pageTheme );

0 comments on commit 58f0d6a

Please sign in to comment.