tizen-web-ui-fw/latest/js/src/widgets/dialog.js

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