Permalink
Browse files

Page: add dialog extension

  • Loading branch information...
arschmitz committed Aug 13, 2013
1 parent 6e7c295 commit 173a1012a9649e2407220c2cbda64ce91aa1d623
Showing with 148 additions and 3 deletions.
  1. +1 −1 demos/intro/index.php
  2. +1 −1 js/widgets/dialog.js
  3. +144 −0 js/widgets/page.dialog.js
  4. +2 −1 js/widgets/page.js
View
@@ -13,7 +13,7 @@
<script src="../../js/"></script>
</head>
<body>
-<div data-role="page" class="jqm-demos" data-quicklinks="true">
+<div data-role="page" class="jqm-demos" data-quicklinks="true" data-dialog="true">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
View
@@ -177,4 +177,4 @@ $.widget( "mobile.dialog", {
})( jQuery, this );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
-//>>excludeEnd("jqmBuildExclude");
+//>>excludeEnd("jqmBuildExclude");
View
@@ -0,0 +1,144 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Displays a page as a modal dialog with inset appearance and overlay background
+//>>label: Dialogs
+//>>group: Widgets
+//>>css.structure: ../css/structure/jquery.mobile.dialog.css
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+
+define( [ "jquery",
+ "../jquery.mobile.widget",
+ "./page",
+ "../jquery.mobile.navigation" ], function( jQuery ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+$.widget( "mobile.page", $.mobile.page, {
+ options: {
+
+ // Accepts left, right and none
+ closeBtn: "left",
+ closeBtnText: "Close",
+ overlayTheme: "a",
+ corners: true,
+ dialog: false
+ },
+
+ _create: function() {
+ this._super();
+ if( this.options.dialog ){
+
+ if( !this.options.enhanced ) {
+ this._enhance();
+ }
+
+ $.extend( this, {
+ _isCloseable: false,
+ _inner: this.element.children(),
+ _headerCloseButton: null
+ });
+
+ if( !this.options.enhanced ) {
+ this._setCloseBtn( this.options.closeBtn );
+ }
+ }
+ },
+
+ _enhance: function() {
+ // Class the markup for dialog styling and wrap interior
+ this.element.addClass( "ui-dialog" )
+ .wrapInner( $( "<div/>", {
+
+ // ARIA role
+ "role" : "dialog",
+ "class" : "ui-dialog-contain ui-overlay-shadow" +
+ ( this.options.corners ? " ui-corner-all" : "" )
+ }));
+ },
+
+ _setOptions: function( options ) {
+ var closeButtonLocation, closeButtonText,
+ currentOpts = this.options;
+
+ if ( options.corners !== undefined ) {
+ this._inner.toggleClass( "ui-corner-all", !!options.corners );
+ }
+
+ if ( options.overlayTheme !== undefined ) {
+ if ( $.mobile.activePage[ 0 ] === this.element[ 0 ] ) {
+ currentOpts.overlayTheme = options.overlayTheme;
+ this._handlePageBeforeShow();
+ }
+ }
+
+ if ( options.closeBtnText !== undefined ) {
+ closeButtonLocation = currentOpts.closeBtn;
+ closeButtonText = options.closeBtnText;
+ }
+
+ if ( options.closeBtn !== undefined ) {
+ closeButtonLocation = options.closeBtn;
+ }
+
+ if ( closeButtonLocation ) {
+ this._setCloseBtn( closeButtonLocation, closeButtonText );
+ }
+
+ this._super( options );
+ },
+
+ _setCloseBtn: function( location, text ) {
+ var dst,
+ btn = this._headerCloseButton;
+
+ // Sanitize value
+ location = "left" === location ? "left" : "right" === location ? "right" : "none";
+
+ if ( "none" === location ) {
+ if ( btn ) {
+ btn.remove();
+ btn = null;
+ }
+ } else if ( btn ) {
+ btn.removeClass( "ui-btn-left ui-btn-right" ).addClass( "ui-btn-" + location );
+ if ( text ) {
+ btn.text( text );
+ }
+ } else {
+ dst = this._inner.find( ":jqmData(role='header')" ).first();
+ btn = $( "<a></a>", {
+ "role": "button",
+ "href": "#",
+ "class": "ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-" + location
+ })
+ .text( text || this.options.closeBtnText || "" )
+ .prependTo( dst );
+ this._on( btn, { click: "close" } );
+ }
+
+ this._headerCloseButton = btn;
+ },
+
+ // Close method goes back in history
+ close: function() {
+ var idx, dst, hist = $.mobile.navigate.history;
+
+ if ( $.mobile.hashListeningEnabled && hist.activeIndex > 0 ) {
+ $.mobile.back();
+ } else {
+ idx = Math.max( 0, hist.activeIndex - 1 );
+ dst = hist.stack[ idx ].pageUrl || hist.stack[ idx ].url;
+ hist.previousIndex = hist.activeIndex;
+ hist.activeIndex = idx;
+ if ( !$.mobile.path.isPath( dst ) ) {
+ dst = $.mobile.path.makeUrlAbsolute( "#" + dst );
+ }
+
+ $.mobile.changePage( dst, { direction: "back", changeHash: false, fromHashChange: true } );
+ }
+ }
+});
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
View
@@ -39,7 +39,8 @@ $.widget( "mobile.page", {
// Deprecated in 1.4 remove in 1.5
keepNativeDefault: $.mobile.keepNative,
- contentTheme: null
+ contentTheme: null,
+ enhanced: false
},
// DEPRECATED for > 1.4

0 comments on commit 173a101

Please sign in to comment.