resources/src/mediawiki.action/mediawiki.action.edit.js

   1 /**
   2  * Interface for the classic edit toolbar.
   3  *
   4  * @class mw.toolbar
   5  * @singleton
   6  */
   7 ( function ( mw, $ ) {
   8         var toolbar, isReady, $toolbar, queue, slice, $currentFocused;
   9
  10         /**
  11          * Internal helper that does the actual insertion of the button into the toolbar.
  12          *
  13          * See #addButton for parameter documentation.
  14          *
  15          * @private
  16          */
  17         function insertButton( b, speedTip, tagOpen, tagClose, sampleText, imageId ) {
  18                 // Backwards compatibility
  19                 if ( typeof b !== 'object' ) {
  20                         b = {
  21                                 imageFile: b,
  22                                 speedTip: speedTip,
  23                                 tagOpen: tagOpen,
  24                                 tagClose: tagClose,
  25                                 sampleText: sampleText,
  26                                 imageId: imageId
  27                         };
  28                 }
  29                 var $image = $( '<img>' ).attr( {
  30                         width: 23,
  31                         height: 22,
  32                         src: b.imageFile,
  33                         alt: b.speedTip,
  34                         title: b.speedTip,
  35                         id: b.imageId || undefined,
  36                         'class': 'mw-toolbar-editbutton'
  37                 } ).click( function ( e ) {
  38                         if ( b.onClick !== undefined ) {
  39                                 b.onClick( e );
  40                         } else {
  41                                 toolbar.insertTags( b.tagOpen, b.tagClose, b.sampleText );
  42                         }
  43
  44                         return false;
  45                 } );
  46
  47                 $toolbar.append( $image );
  48         }
  49
  50         isReady = false;
  51         $toolbar = false;
  52
  53         /**
  54          * @private
  55          * @property {Array}
  56          * Contains button objects (and for backwards compatibilty, it can
  57          * also contains an arguments array for insertButton).
  58          */
  59         queue = [];
  60         slice = queue.slice;
  61
  62         toolbar = {
  63
  64                 /**
  65                  * Add buttons to the toolbar.
  66                  *
  67                  * Takes care of race conditions and time-based dependencies
  68                  * by placing buttons in a queue if this method is called before
  69                  * the toolbar is created.
  70                  *
  71                  * For backwards-compatibility, passing `imageFile`, `speedTip`, `tagOpen`, `tagClose`,
  72                  * `sampleText` and `imageId` as separate arguments (in this order) is also supported.
  73                  *
  74                  * @param {Object} button Object with the following properties.
  75                  *  You are required to provide *either* the `onClick` parameter, or the three parameters
  76                  *  `tagOpen`, `tagClose` and `sampleText`, but not both (they're mutually exclusive).
  77                  * @param {string} button.imageFile Image to use for the button.
  78                  * @param {string} button.speedTip Tooltip displayed when user mouses over the button.
  79                  * @param {Function} [button.onClick] Function to be executed when the button is clicked.
  80                  * @param {string} [button.tagOpen]
  81                  * @param {string} [button.tagClose]
  82                  * @param {string} [button.sampleText] Alternative to `onClick`. `tagOpen`, `tagClose` and
  83                  *  `sampleText` together provide the markup that should be inserted into page text at
  84                  *  current cursor position.
  85                  * @param {string} [button.imageId] `id` attribute of the button HTML element.
  86                  */
  87                 addButton: function () {
  88                         if ( isReady ) {
  89                                 insertButton.apply( toolbar, arguments );
  90                         } else {
  91                                 // Convert arguments list to array
  92                                 queue.push( slice.call( arguments ) );
  93                         }
  94                 },
  95                 /**
  96                  * Add multiple buttons to the toolbar (see also #addButton).
  97                  *
  98                  * Example usage:
  99                  *
 100                  *     addButtons( [ { .. }, { .. }, { .. } ] );
 101                  *     addButtons( { .. }, { .. } );
 102                  *
 103                  * @param {Object|Array...} [buttons] An array of button objects or the first
 104                  *  button object in a list of variadic arguments.
 105                  */
 106                 addButtons: function ( buttons ) {
 107                         if ( !$.isArray( buttons ) ) {
 108                                 buttons = slice.call( arguments );
 109                         }
 110                         if ( isReady ) {
 111                                 $.each( buttons, function () {
 112                                         insertButton( this );
 113                                 } );
 114                         } else {
 115                                 // Push each button into the queue
 116                                 queue.push.apply( queue, buttons );
 117                         }
 118                 },
 119
 120                 /**
 121                  * Apply tagOpen/tagClose to selection in currently focused textarea.
 122                  *
 123                  * Uses `sampleText` if selection is empty.
 124                  *
 125                  * @param {string} tagOpen
 126                  * @param {string} tagClose
 127                  * @param {string} sampleText
 128                  */
 129                 insertTags: function ( tagOpen, tagClose, sampleText ) {
 130                         if ( $currentFocused && $currentFocused.length ) {
 131                                 $currentFocused.textSelection(
 132                                         'encapsulateSelection', {
 133                                                 pre: tagOpen,
 134                                                 peri: sampleText,
 135                                                 post: tagClose
 136                                         }
 137                                 );
 138                         }
 139                 },
 140
 141                 // For backwards compatibility,
 142                 // Called from EditPage.php, maybe in other places as well.
 143                 init: function () {}
 144         };
 145
 146         // Legacy (for compatibility with the code previously in skins/common.edit.js)
 147         mw.log.deprecate( window, 'addButton', toolbar.addButton, 'Use mw.toolbar.addButton instead.' );
 148         mw.log.deprecate( window, 'insertTags', toolbar.insertTags, 'Use mw.toolbar.insertTags instead.' );
 149
 150         // Expose API publicly
 151         mw.toolbar = toolbar;
 152
 153         $( function () {
 154                 var i, b, editBox, scrollTop, $editForm;
 155
 156                 // Used to determine where to insert tags
 157                 $currentFocused = $( '#wpTextbox1' );
 158
 159                 // Populate the selector cache for $toolbar
 160                 $toolbar = $( '#toolbar' );
 161
 162                 for ( i = 0; i < queue.length; i++ ) {
 163                         b = queue[i];
 164                         if ( $.isArray( b ) ) {
 165                                 // Forwarded arguments array from mw.toolbar.addButton
 166                                 insertButton.apply( toolbar, b );
 167                         } else {
 168                                 // Raw object from mw.toolbar.addButtons
 169                                 insertButton( b );
 170                         }
 171                 }
 172
 173                 // Clear queue
 174                 queue.length = 0;
 175
 176                 // This causes further calls to addButton to go to insertion directly
 177                 // instead of to the queue.
 178                 // It is important that this is after the one and only loop through
 179                 // the the queue
 180                 isReady = true;
 181
 182                 // Make sure edit summary does not exceed byte limit
 183                 $( '#wpSummary' ).byteLimit( 255 );
 184
 185                 // Restore the edit box scroll state following a preview operation,
 186                 // and set up a form submission handler to remember this state.
 187                 editBox = document.getElementById( 'wpTextbox1' );
 188                 scrollTop = document.getElementById( 'wpScrolltop' );
 189                 $editForm = $( '#editform' );
 190                 if ( $editForm.length && editBox && scrollTop ) {
 191                         if ( scrollTop.value ) {
 192                                 editBox.scrollTop = scrollTop.value;
 193                         }
 194                         $editForm.submit( function () {
 195                                 scrollTop.value = editBox.scrollTop;
 196                         } );
 197                 }
 198
 199                 // Apply to dynamically created textboxes as well as normal ones
 200                 $( document ).on( 'focus', 'textarea, input:text', function () {
 201                         $currentFocused = $( this );
 202                 } );
 203         } );
 204
 205 }( mediaWiki, jQuery ) );