libs/js/jquery-mobile-1.2.0/js/widgets/dialog.js

   1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
   2 //>>description: Displays a page as a modal dialog with inset appearance and overlay background
   3 //>>label: Dialogs
   4 //>>group: Widgets
   5 //>>css.structure: ../css/structure/jquery.mobile.dialog.css
   6 //>>css.theme: ../css/themes/default/jquery.mobile.theme.css
   7
   8 define( [ "jquery", "../jquery.mobile.widget" ], function( $ ) {
   9 //>>excludeEnd("jqmBuildExclude");
  10 (function( $, window, undefined ) {
  11
  12 $.widget( "mobile.dialog", $.mobile.widget, {
  13         options: {
  14                 closeBtnText: "Close",
  15                 overlayTheme: "a",
  16                 initSelector: ":jqmData(role='dialog')"
  17         },
  18         _create: function() {
  19                 var self = this,
  20                         $el = this.element,
  21                         headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
  22                         dialogWrap = $( "<div/>", {
  23                                         "role" : "dialog",
  24                                         "class" : "ui-dialog-contain ui-corner-all ui-overlay-shadow"
  25                                 });
  26
  27                 $el.addClass( "ui-dialog ui-overlay-" + this.options.overlayTheme );
  28
  29                 // Class the markup for dialog styling
  30                 // Set aria role
  31                 $el
  32                         .wrapInner( dialogWrap )
  33                         .children()
  34                                 .find( ":jqmData(role='header')" )
  35                                         .prepend( headerCloseButton )
  36                                 .end()
  37                                 .children( ':first-child')
  38                                         .addClass( "ui-corner-top" )
  39                                 .end()
  40                                 .children( ":last-child" )
  41                                         .addClass( "ui-corner-bottom" );
  42
  43                 // this must be an anonymous function so that select menu dialogs can replace
  44                 // the close method. This is a change from previously just defining data-rel=back
  45                 // on the button and letting nav handle it
  46                 //
  47                 // Use click rather than vclick in order to prevent the possibility of unintentionally
  48                 // reopening the dialog if the dialog opening item was directly under the close button.
  49                 headerCloseButton.bind( "click", function() {
  50                         self.close();
  51                 });
  52
  53                 /* bind events
  54                         - clicks and submits should use the closing transition that the dialog opened with
  55                                 unless a data-transition is specified on the link/form
  56                         - if the click was on the close button, or the link has a data-rel="back" it'll go back in history naturally
  57                 */
  58                 $el.bind( "vclick submit", function( event ) {
  59                         var $target = $( event.target ).closest( event.type === "vclick" ? "a" : "form" ),
  60                                 active;
  61
  62                         if ( $target.length && !$target.jqmData( "transition" ) ) {
  63
  64                                 active = $.mobile.urlHistory.getActive() || {};
  65
  66                                 $target.attr( "data-" + $.mobile.ns + "transition", ( active.transition || $.mobile.defaultDialogTransition ) )
  67                                         .attr( "data-" + $.mobile.ns + "direction", "reverse" );
  68                         }
  69                 })
  70                 .bind( "pagehide", function( e, ui ) {
  71                         $( this ).find( "." + $.mobile.activeBtnClass ).not( ".ui-slider-bg" ).removeClass( $.mobile.activeBtnClass );
  72                 })
  73                 // Override the theme set by the page plugin on pageshow
  74                 .bind( "pagebeforeshow", function() {
  75                         self._isCloseable = true;
  76                         if ( self.options.overlayTheme ) {
  77                                 self.element
  78                                         .page( "removeContainerBackground" )
  79                                         .page( "setContainerBackground", self.options.overlayTheme );
  80                         }
  81                 });
  82         },
  83
  84         // Close method goes back in history
  85         close: function() {
  86                 var dst;
  87
  88                 if ( this._isCloseable ) {
  89                         this._isCloseable = false;
  90                         if ( $.mobile.hashListeningEnabled ) {
  91                                 $.mobile.back();
  92                         } else {
  93                                 dst = $.mobile.urlHistory.getPrev().url;
  94                                 if ( !$.mobile.path.isPath( dst ) ) {
  95                                         dst = $.mobile.path.makeUrlAbsolute( "#" + dst );
  96                                 }
  97
  98                                 $.mobile.changePage( dst, { changeHash: false, fromHashChange: true } );
  99                         }
 100                 }
 101         }
 102 });
 103
 104 //auto self-init widgets
 105 $( document ).delegate( $.mobile.dialog.prototype.options.initSelector, "pagecreate", function() {
 106         $.mobile.dialog.prototype.enhance( this );
 107 });
 108
 109 })( jQuery, this );
 110 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 111 });
 112 //>>excludeEnd("jqmBuildExclude");