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