Slide panel refactor tests #5412

Closed
wants to merge 8 commits into
from
@@ -196,14 +196,6 @@
left: 0;
}
-
-/* while open, page x overflow is disabled */
-.ui-page-active.ui-panel-page-block{
- overflow-x:hidden;
-}
-
-
-
/* wrap push on wide viewports once open */
@media (min-width: 60em){
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push,
View
@@ -25,7 +25,8 @@ $.widget( "mobile.panel", $.mobile.widget, {
contentWrapOpenComplete: "ui-panel-content-wrap-open-complete",
pageBlock: "ui-panel-page-block",
pagePanel: "ui-page-panel",
- pageChildAnimations: "ui-page-panel-animate"
+ pageChildAnimations: "ui-page-panel-animate",
+ cssTransform3d: "ui-panel-3dtransforms"
},
animate: true,
theme: null,
@@ -99,7 +100,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
}
if( $.support.cssTransform3d ){
- panelClasses += " ui-panel-3dtransforms";
+ panelClasses += " " + this.options.classes.cssTransform3d;
}
return panelClasses;
},
@@ -202,7 +203,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
_contentWrapOpenClasses: null,
_modalOpenClasses: null,
- open: function( options ){
+ open: function( options, immediate ){
var self = this,
o = self.options,
complete = function(){
@@ -217,12 +218,12 @@ $.widget( "mobile.panel", $.mobile.widget, {
self._trigger( "beforeopen" );
- if ( $.support.cssTransitions && o.animate ) {
+ if ( !immediate && $.support.cssTransitions && o.animate ) {
self.element.add( self._wrapper ).on( self._transitionEndEvents , complete );
} else{
setTimeout( complete , 0 );
}
- self._page.addClass( self.options.classes.pageBlock );
+ self._page.addClass( o.classes.pageBlock );
self.element.removeClass( o.classes.panelClosed );
self.element.addClass( o.classes.panelOpen );
self._contentWrapOpenClasses = self._getPosDisplayClasses( o.classes.contentWrap );
@@ -239,21 +240,21 @@ $.widget( "mobile.panel", $.mobile.widget, {
var o = this.options,
self = this,
complete = function(){
- self.element.add( self._wrapper ).unbind( self._transitionEndEvents , complete );
+ self.element.add( self._wrapper ).unbind( self._transitionEndEvents, complete );
self.element.addClass( o.classes.panelClosed );
self._wrapper.removeClass( self._contentWrapOpenClasses );
self._wrapper.addClass( o.classes.contentWrapClosed );
- self._page.removeClass( self.options.classes.pageBlock );
+ self._page.removeClass( o.classes.pageBlock );
self._fixPanel();
self._unbindFixListener();
self._trigger( "close" );
};
self._trigger( "beforeclose" );
- if ( $.support.cssTransform3d && o.animate ) {
- self.element.add( self._wrapper ).on( self._transitionEndEvents , complete );
- } else{
+ if ( !immediate && $.support.cssTransform3d && o.animate ) {
+ self.element.add( self._wrapper ).on( self._transitionEndEvents, complete );
+ } else {
setTimeout( complete , 0 );
}
View
@@ -18,9 +18,7 @@
</script>
<script>
$.testHelper.asyncLoad([
- [
- "widgets/panel"
- ],
+ [ "widgets/panel" ],
[ "jquery.mobile.init" ],
[ "panel_core.js" ]
]);
@@ -39,126 +37,56 @@ <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
- <div id="qunit-fixture">
-
- <!-- Basic Panel test -->
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id="panel-test-1">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-1">Open Panel</a>
- </div>
+ <div data-nstest-role="page">
+ <div data-nstest-role="panel" id="panel-test-create">
+ <p>Contents of a panel.</p>
</div>
-
-
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id="panel-test-2" data-animate="false">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-2">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-events">
+ <p>Contents of a panel.</p>
</div>
-
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id="panel-test-3" data-theme="c">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-3">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-open">
+ <p>Contents of a panel.</p>
</div>
-
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id='panel-tes4' data-position="right">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-4">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-close">
+ <p>Contents of a panel.</p>
</div>
-
-
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id='panel-test-5' data-display="push">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-5">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-toggle">
+ <p>Contents of a panel.</p>
</div>
-
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id='panel-test-6' data-display="reveal">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-6">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-wrapper">
+ <p>Contents of a panel.</p>
</div>
-
- <div data-nstest-role="page" >
- <div data-nstest-role="panel" id='panel-test-7' data-display="push" data-position="right">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-7">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-dismiss">
+ <p>Contents of a panel.</p>
</div>
-
- <div data-nstest-role="page" >
- <div data-nstest-role="panel" id='panel-test-8' data-display="reveal" data-position="right">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-8">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-destroy">
+ <p>Contents of a panel.</p>
</div>
-
- <div data-nstest-role="page">
- <div data-nstest-role="panel" id='panel-test-8' data-dismissible="false">
- <p>Contents of a panel.</p>
- </div>
- <div data-nstest-role="header">
- <h1>Panel Test</h1>
- </div>
- <div data-nstest-role="content">
- <a href="#panel-test-9">Open Panel</a>
- </div>
+ <div data-nstest-role="panel" id="panel-test-non-default-theme" data-nstest-theme="c">
+ <p>Contents of a panel.</p>
+ </div>
+ <div data-nstest-role="panel" id="panel-test-with-close">
+ <p>Contents of a panel.</p>
+ <a href="#demo-links" data-nstest-rel="close" data-nstest-role="button">Close panel</a>
</div>
-
-
-
-
-
+ <div data-nstest-role="header">
+ <h1>Panel Test</h1>
+ </div>
+ <div data-nstest-role="content">
+ <h1 id="demo-links">Panels</h1>
+ <a href="#panel-test-create">Open Panel</a>
+ <a href="#panel-test-events">Open Panel</a>
+ <a href="#panel-test-open">Open Panel</a>
+ <a href="#panel-test-close">Open Panel</a>
+ <a href="#panel-test-toggle">Open Panel</a>
+ <a href="#panel-test-wrapper">Open Panel</a>
+ <a href="#panel-test-dismiss">Open Panel</a>
+ <a href="#panel-test-destroy">Open Panel</a>
+ <a href="#panel-test-non-default-theme">Open Panel</a>
+ <a href="#panel-test-with-close">Open Panel</a>
+ </div>
</div>
-
</body>
</html>
Oops, something went wrong.