Showing with 66 additions and 30 deletions.
  1. +0 −7 docs/panels/index.html
  2. +4 −5 docs/panels/options.html
  3. +32 −16 js/widgets/panel.js
  4. +30 −2 tests/unit/panel/panel_core.js
7 docs/panels/index.html
View file
@@ -10,13 +10,6 @@
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
<script>
$(document).on("pageinit", function(){
$(document).on("panelclose panelopen swiperight swipeleft", function(e){
console.log(e);
});
});
</script>
</head>
<body>
<div data-role="page" class="ui-responsive-panel">
9 docs/panels/options.html
View file
@@ -47,10 +47,11 @@ <h2>Panels</h2>
<dt><code>position</code> default: "left"</dt>
<dd>The side of the screen the panel appears on. Values can be "left" or "right". Also available via the <code>data-position</code> attribute on the link that opens the panel.</dd>

<dt><code>positionFixed</code> default: "false"</dt>
<dt><code>positionFixed</code> default: false</dt>
<dd>Sets whether the panel has fixed positioning so the contents are in view even if the page is scrolled down. This also allows the page to scroll while the panel stays fixed. We recommend not to enable this feature when panels are used withing Android apps because of poor performance and display issues. Also available via the <code>data-position-fixed</code> attribute on the panel.</dd>
<dt><code>swipeClose</code> default: "true"</dt>
<dd>Sets whether the panel can be closed by swiping left or right over the panel. Also available via the <code>data-swipe-close</code> attribute on the panel.</dd>

<dt><code>swipeClose</code> default: true</dt>
<dd>Sets whether the panel can be closed by swiping over the panel or, if <code>dismissible=true</code>, the page content and toolbars. Also available via the <code>data-swipe-close</code> attribute on the panel.</dd>

<dt><code>theme</code> default: null</dt>
<dd>Theme swatch for the panel. Can be any valid swatch letter in your theme (a-z). Also available via the <code>data-theme</code> attribute on the panel container.</dd>
@@ -60,9 +61,7 @@ <h2>Panels</h2>
<h3>Classes Option</h3>
<p>The <code>classes</code> option define the structural classnames that the plugin uses. This is only configurable via JavaScript because it expects an object literal value.</p>


<dl>

<dt><code>classes.panel</code> default: "ui-panel"</dt>
<dd>Class added to the panel.</dd>

48 js/widgets/panel.js
View file
@@ -43,6 +43,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
_closeLink: null,
_page: null,
_modal: null,
_pannelInner: null,
_wrapper: null,
_fixedToolbar: null,

@@ -65,7 +66,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
_getWrapper = function() {
var $wrapper = page.find( "." + self.options.classes.contentWrap );
if ( $wrapper.length === 0 ) {
$wrapper = page.children( ".ui-header:not(:jqmData(position='fixed')), .ui-content:not(.ui-popup), .ui-footer:not(:jqmData(position='fixed'))" ).wrapAll( '<div class="' + self.options.classes.contentWrap + ' ' + _getPageTheme() + '" />' ).parent();
$wrapper = page.children( ".ui-header:not(:jqmData(position='fixed')), .ui-content:not(:jqmData(role='popup')), .ui-footer:not(:jqmData(position='fixed'))" ).wrapAll( '<div class="' + self.options.classes.contentWrap + ' ' + _getPageTheme() + '" />' ).parent();
if ( $.support.cssTransform3d && !!self.options.animate ) {
$wrapper.addClass( self.options.classes.animate );
}
@@ -109,15 +110,18 @@ $.widget( "mobile.panel", $.mobile.widget, {
self._bindLinkListeners();
self._bindPageEvents();

if ( self.options.dismissible ) {
if ( !!self.options.dismissible ) {
self._createModal();
}

self._bindSwipeEvents();
},

_createModal: function( options ) {
var self = this;

self._modal = $( "<div class='" + self.options.classes.modal + "' data-panelid='" + self._panelID + "'></div>" )
.on( "mousedown" , function() {
.on( "mousedown", function() {
self.close();
})
.appendTo( this._page );
@@ -212,16 +216,28 @@ $.widget( "mobile.panel", $.mobile.widget, {
}
});
},

_bindSwipeEvents: function() {
var self = this,
area = self._modal ? self.element.add( self._modal ) : self.element;

// on swipe, close the panel
if( !!self.options.swipeClose ) {
if ( self.options.position === "left" ) {
area.on( "swipeleft.panel", function( e ) {
self.close();
});
} else {
area.on( "swiperight.panel", function( e ) {
self.close();
});
}
}
},

_bindPageEvents: function() {
var self = this;
if( !!this.options.swipeClose ){
self.element
// on swipe, close the panel (should swipe open too?)
.on( "swipe.panel" , function( e ){
self.close( );
});
}

self._page
// Close immediately if another panel on the page opens
.on( "panelbeforeopen", function( e ) {
@@ -230,15 +246,15 @@ $.widget( "mobile.panel", $.mobile.widget, {
}
})
// clean up open panels after page hide
.on( "pagehide", function( e ) {
.on( "pagehide", function( e ) {
if ( self._open ) {
self.close( true );
}
})
// 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 ( e.keyCode === 27 && self._open ) {
self.close();
}
});
},
@@ -318,7 +334,7 @@ $.widget( "mobile.panel", $.mobile.widget, {

if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
self.element.add( self._wrapper ).add( self._fixedToolbar ).on( self._transitionEndEvents, complete );
} else{
} else {
setTimeout( complete, 0 );
}

@@ -368,9 +384,9 @@ $.widget( "mobile.panel", $.mobile.widget, {
this._pannelInner.children().unwrap();

this.element.removeClass( [ this._getPanelClasses(), classes.panelAnimate ].join( " " ) )
.off( "swipe.panel" )
.off( "swipeleft.panel swiperight.panel" )
.off( "panelbeforeopen" )
.off( "panelbeforehide" )
.off( "panelhide" )
.off( "keyup.panel" );

this._closeLink.off( "click.panel" );
32 tests/unit/panel/panel_core.js
View file
@@ -201,7 +201,13 @@
$panel.panel();
});

module( "dismissable panel" );
module( "dismissable panel", {
setup: function(){
$.Event.prototype.originalEvent = {
touches: [{ 'pageX' : 0 }, { 'pageY' : 0 }]
};
}
});

test( "dismissable", function() {
var $panel = $( "#panel-test-dismiss" );
@@ -211,7 +217,7 @@
asyncTest( "click on dismissable modal closes panel", function() {

expect( 1 );

var $panel = $( "#panel-test-dismiss" ),
$modal = getModalFromPanel( $panel );

@@ -230,6 +236,28 @@

});

asyncTest( "swipe on dismissable modal closes panel", function() {

expect( 1 );

var $panel = $( "#panel-test-dismiss" ),
$modal = getModalFromPanel( $panel );

$panel.one( "panelopen", function() {

$modal.trigger( "swipeleft" );

}).one( "panelclose", function() {

ok( true, "modal is closed" );
start();

});

$panel.panel( "open" );

});

module( "panel with non-default theme" );

test( "expected classes on create", function() {