[Summary view] [Print] [Text view]

   1  /**
   2   * Dialog Module for wikiEditor
   3   */
   4  ( function ( $, mw ) {
   5  
   6  $.wikiEditor.modules.dialogs = {
   7  
   8      /**
   9       * Compatability map
  10       */
  11      browsers: {
  12          // Left-to-right languages
  13          ltr: {
  14              msie: [['>=', 7]],
  15              // jQuery UI appears to be broken in FF 2.0 - 2.0.0.4
  16              firefox: [
  17                  ['>=', 2], ['!=', '2.0'], ['!=', '2.0.0.1'], ['!=', '2.0.0.2'], ['!=', '2.0.0.3'], ['!=', '2.0.0.4']
  18              ],
  19              opera: [['>=', 9.6]],
  20              safari: [['>=', 3]],
  21              chrome: [['>=', 3]]
  22          },
  23          // Right-to-left languages
  24          rtl: {
  25              msie: [['>=', 7]],
  26              // jQuery UI appears to be broken in FF 2.0 - 2.0.0.4
  27              firefox: [
  28                  ['>=', 2], ['!=', '2.0'], ['!=', '2.0.0.1'], ['!=', '2.0.0.2'], ['!=', '2.0.0.3'], ['!=', '2.0.0.4']
  29              ],
  30              opera: [['>=', 9.6]],
  31              safari: [['>=', 3]],
  32              chrome: [['>=', 3]]
  33          }
  34      },
  35  
  36      /**
  37       * API accessible functions
  38       */
  39      api: {
  40          addDialog: function ( context, data ) {
  41              $.wikiEditor.modules.dialogs.fn.create( context, data );
  42          },
  43          openDialog: function ( context, module ) {
  44              if ( module in $.wikiEditor.modules.dialogs.modules ) {
  45                  var mod = $.wikiEditor.modules.dialogs.modules[module],
  46                      $dialog = $( '#' + mod.id );
  47                  if ( $dialog.length === 0 ) {
  48                      $.wikiEditor.modules.dialogs.fn.reallyCreate( context, mod, module );
  49                      $dialog = $( '#' + mod.id );
  50                  }
  51  
  52                  // Workaround for bug in jQuery UI: close button in top right retains focus
  53                  $dialog.closest( '.ui-dialog' )
  54                      .find( '.ui-dialog-titlebar-close' )
  55                      .removeClass( 'ui-state-focus' );
  56  
  57                  $dialog.dialog( 'open' );
  58              }
  59          },
  60          closeDialog: function ( context, module ) {
  61              if ( module in $.wikiEditor.modules.dialogs.modules ) {
  62                  $( '#' + $.wikiEditor.modules.dialogs.modules[module].id ).dialog( 'close' );
  63              }
  64          }
  65      },
  66  
  67      /**
  68       * Internally used functions
  69       */
  70      fn: {
  71          /**
  72           * Creates a dialog module within a wikiEditor
  73           *
  74           * @param {Object} context Context object of editor to create module in
  75           * @param {Object} config Configuration object to create module from
  76           */
  77          create: function ( context, config ) {
  78              var mod, module, filtered, i, $existingDialog;
  79  
  80              // Defer building of modules, unless they require immediate creation
  81              for ( mod in config ) {
  82                  module = config[mod];
  83                  // Only create the dialog if it's supported, isn't filtered and doesn't exist yet
  84                  filtered = false;
  85                  if ( typeof module.filters !== 'undefined' ) {
  86                      for ( i = 0; i < module.filters.length; i++ ) {
  87                          if ( $( module.filters[i] ).length === 0 ) {
  88                              filtered = true;
  89                              break;
  90                          }
  91                      }
  92                  }
  93                  // If the dialog already exists, but for another textarea, simply remove it
  94                  $existingDialog = $( '#' + module.id );
  95                  if ( $existingDialog.length > 0 && $existingDialog.data( 'context' ).$textarea !== context.$textarea ) {
  96                      $existingDialog.remove();
  97                  }
  98                  // Re-select from the DOM, we might have removed the dialog just now
  99                  $existingDialog = $( '#' + module.id );
 100                  if ( !filtered && $.wikiEditor.isSupported( module ) && $existingDialog.length === 0 ) {
 101                      $.wikiEditor.modules.dialogs.modules[mod] = module;
 102                      context.$textarea.trigger( 'wikiEditor-dialogs-setup-' + mod );
 103                      // If this dialog requires immediate creation, create it now
 104                      if ( typeof module.immediateCreate !== 'undefined' && module.immediateCreate ) {
 105                          $.wikiEditor.modules.dialogs.fn.reallyCreate( context, module, mod );
 106                      }
 107                  }
 108              }
 109          },
 110  
 111          /**
 112           * Build the actual dialog. This done on-demand rather than in create()
 113           * @param {Object} context Context object of editor dialog belongs to
 114           * @param {Object} module Dialog module object
 115           * @param {String} name Dialog name (key in $.wikiEditor.modules.dialogs.modules)
 116           */
 117          reallyCreate: function ( context, module, name ) {
 118              var msg, dialogDiv,
 119                  configuration = module.dialog;
 120              // Add some stuff to configuration
 121              configuration.bgiframe = true;
 122              configuration.autoOpen = false;
 123              // By default our dialogs are modal, unless explicitely defined in their specific configuration.
 124              if ( typeof configuration.modal === 'undefined' ) {
 125                  configuration.modal = true;
 126              }
 127              configuration.title = $.wikiEditor.autoMsg( module, 'title' );
 128              // Transform messages in keys
 129              // Stupid JS won't let us do stuff like
 130              // foo = { mw.msg( 'bar' ): baz }
 131              configuration.newButtons = {};
 132              for ( msg in configuration.buttons ) {
 133                  configuration.newButtons[mw.msg( msg )] = configuration.buttons[msg];
 134              }
 135              configuration.buttons = configuration.newButtons;
 136              // Create the dialog <div>
 137              dialogDiv = $( '<div>' )
 138                  .attr( 'id', module.id )
 139                  .html( module.html )
 140                  .data( 'context', context )
 141                  .appendTo( $( 'body' ) )
 142                  .each( module.init )
 143                  .dialog( configuration );
 144              // Set tabindexes on buttons added by .dialog()
 145              $.wikiEditor.modules.dialogs.fn.setTabindexes( dialogDiv.closest( '.ui-dialog' )
 146                  .find( 'button' ).not( '[tabindex]' ) );
 147              if ( !( 'resizeme' in module ) || module.resizeme ) {
 148                  dialogDiv
 149                      .bind( 'dialogopen', $.wikiEditor.modules.dialogs.fn.resize )
 150                      .find( '.ui-tabs' ).bind( 'tabsshow', function () {
 151                          $( this ).closest( '.ui-dialog-content' ).each(
 152                              $.wikiEditor.modules.dialogs.fn.resize );
 153                      } );
 154              }
 155              dialogDiv.bind( 'dialogclose', function () {
 156                  context.fn.restoreSelection();
 157              } );
 158  
 159              // Let the outside world know we set up this dialog
 160              context.$textarea.trigger( 'wikiEditor-dialogs-loaded-' + name );
 161          },
 162  
 163          /**
 164           * Resize a dialog so its contents fit
 165           *
 166           * Usage: dialog.each( resize ); or dialog.bind( 'blah', resize );
 167           * NOTE: This function assumes $.ui.dialog has already been loaded
 168           */
 169          resize: function () {
 170              var oldWS, thisWidth, wrapperWidth,
 171                  wrapper = $( this ).closest( '.ui-dialog' ),
 172                  oldWidth = wrapper.width(),
 173                  // Make sure elements don't wrapped so we get an accurate idea of whether they really fit. Also temporarily show
 174                  // hidden elements. Work around jQuery bug where <div style="display: inline;"/> inside a dialog is both
 175                  // :visible and :hidden
 176                  oldHidden = $( this ).find( '*' ).not( ':visible' );
 177  
 178              // Save the style attributes of the hidden elements to restore them later. Calling hide() after show() messes up
 179              // for elements hidden with a class
 180              oldHidden.each( function () {
 181                  $( this ).data( 'oldstyle', $( this ).attr( 'style' ) );
 182              } );
 183              oldHidden.show();
 184              oldWS = $( this ).css( 'white-space' );
 185              $( this ).css( 'white-space', 'nowrap' );
 186              if ( wrapper.width() <= $( this ).get( 0 ).scrollWidth ) {
 187                  thisWidth = $( this ).data( 'thisWidth' ) ? $( this ).data( 'thisWidth' ) : 0;
 188                  thisWidth = Math.max( $( this ).get( 0 ).width, thisWidth );
 189                  $( this ).width( thisWidth );
 190                  $( this ).data( 'thisWidth', thisWidth );
 191                  wrapperWidth = $( this ).data( 'wrapperWidth' ) ? $( this ).data( 'wrapperWidth' ) : 0;
 192                  wrapperWidth = Math.max( wrapper.get( 0 ).scrollWidth, wrapperWidth );
 193                  wrapper.width( wrapperWidth );
 194                  $( this ).data( 'wrapperWidth', wrapperWidth );
 195                  $( this ).dialog( { 'width': wrapper.width() } );
 196                  wrapper.css( 'left', parseInt( wrapper.css( 'left' ), 10 ) - ( wrapper.width() - oldWidth ) / 2 );
 197              }
 198              $( this ).css( 'white-space', oldWS );
 199              oldHidden.each( function () {
 200                  $( this ).attr( 'style', $( this ).data( 'oldstyle' ) );
 201              } );
 202          },
 203          /**
 204           * Set the right tabindexes on elements in a dialog
 205           * @param $elements Elements to set tabindexes on. If they already have tabindexes, this function can behave a bit weird
 206           */
 207          setTabindexes: function ( $elements ) {
 208              // Get the highest tab index
 209              var tabIndex = $( document ).lastTabIndex() + 1;
 210              $elements.each( function () {
 211                  $( this ).attr( 'tabindex', tabIndex++ );
 212              } );
 213          }
 214      },
 215  
 216      // This stuff is just hanging here, perhaps we could come up with a better home for this stuff
 217      modules: {},
 218  
 219      quickDialog: function ( body, settings ) {
 220          $( '<div>' )
 221              .text( body )
 222              .appendTo( $( 'body' ) )
 223              .dialog( $.extend( {
 224                  bgiframe: true,
 225                  modal: true
 226              }, settings ) )
 227              .dialog( 'open' );
 228      }
 229  
 230  };
 231  
 232  }( jQuery, mediaWiki ) );