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 compatiblity, passing the properties listed below as separate arguments
  72                  * (in the listed order) is also supported.
  73                  *
  74                  * @param {Object} button Object with the following properties:
  75                  * @param {string} button.imageFile
  76                  * @param {string} button.speedTip
  77                  * @param {string} button.tagOpen
  78                  * @param {string} button.tagClose
  79                  * @param {string} button.sampleText
  80                  * @param {string} [button.imageId]
  81                  * @param {Function} [button.onClick]
  82                  */
  83                 addButton: function () {
  84                         if ( isReady ) {
  85                                 insertButton.apply( toolbar, arguments );
  86                         } else {
  87                                 // Convert arguments list to array
  88                                 queue.push( slice.call( arguments ) );
  89                         }
  90                 },
  91                 /**
  92                  * Add multiple buttons to the toolbar (see also #addButton).
  93                  *
  94                  * Example usage:
  95                  *
  96                  *     addButtons( [ { .. }, { .. }, { .. } ] );
  97                  *     addButtons( { .. }, { .. } );
  98                  *
  99                  * @param {Object|Array...} [buttons] An array of button objects or the first
 100                  *  button object in a list of variadic arguments.
 101                  */
 102                 addButtons: function ( buttons ) {
 103                         if ( !$.isArray( buttons ) ) {
 104                                 buttons = slice.call( arguments );
 105                         }
 106                         if ( isReady ) {
 107                                 $.each( buttons, function () {
 108                                         insertButton( this );
 109                                 } );
 110                         } else {
 111                                 // Push each button into the queue
 112                                 queue.push.apply( queue, buttons );
 113                         }
 114                 },
 115
 116                 /**
 117                  * Apply tagOpen/tagClose to selection in currently focused textarea.
 118                  *
 119                  * Uses `sampleText` if selection is empty.
 120                  *
 121                  * @param {string} tagOpen
 122                  * @param {string} tagClose
 123                  * @param {string} sampleText
 124                  */
 125                 insertTags: function ( tagOpen, tagClose, sampleText ) {
 126                         if ( $currentFocused && $currentFocused.length ) {
 127                                 $currentFocused.textSelection(
 128                                         'encapsulateSelection', {
 129                                                 pre: tagOpen,
 130                                                 peri: sampleText,
 131                                                 post: tagClose
 132                                         }
 133                                 );
 134                         }
 135                 },
 136
 137                 // For backwards compatibility,
 138                 // Called from EditPage.php, maybe in other places as well.
 139                 init: function () {}
 140         };
 141
 142         // Legacy (for compatibility with the code previously in skins/common.edit.js)
 143         mw.log.deprecate( window, 'addButton', toolbar.addButton, 'Use mw.toolbar.addButton instead.' );
 144         mw.log.deprecate( window, 'insertTags', toolbar.insertTags, 'Use mw.toolbar.insertTags instead.' );
 145
 146         // Expose API publicly
 147         mw.toolbar = toolbar;
 148
 149         $( function () {
 150                 var i, b, editBox, scrollTop, $editForm;
 151
 152                 // Used to determine where to insert tags
 153                 $currentFocused = $( '#wpTextbox1' );
 154
 155                 // Populate the selector cache for $toolbar
 156                 $toolbar = $( '#toolbar' );
 157
 158                 for ( i = 0; i < queue.length; i++ ) {
 159                         b = queue[i];
 160                         if ( $.isArray( b ) ) {
 161                                 // Forwarded arguments array from mw.toolbar.addButton
 162                                 insertButton.apply( toolbar, b );
 163                         } else {
 164                                 // Raw object from mw.toolbar.addButtons
 165                                 insertButton( b );
 166                         }
 167                 }
 168
 169                 // Clear queue
 170                 queue.length = 0;
 171
 172                 // This causes further calls to addButton to go to insertion directly
 173                 // instead of to the queue.
 174                 // It is important that this is after the one and only loop through
 175                 // the the queue
 176                 isReady = true;
 177
 178                 // Make sure edit summary does not exceed byte limit
 179                 $( '#wpSummary' ).byteLimit( 255 );
 180
 181                 // Restore the edit box scroll state following a preview operation,
 182                 // and set up a form submission handler to remember this state.
 183                 editBox = document.getElementById( 'wpTextbox1' );
 184                 scrollTop = document.getElementById( 'wpScrolltop' );
 185                 $editForm = $( '#editform' );
 186                 if ( $editForm.length && editBox && scrollTop ) {
 187                         if ( scrollTop.value ) {
 188                                 editBox.scrollTop = scrollTop.value;
 189                         }
 190                         $editForm.submit( function () {
 191                                 scrollTop.value = editBox.scrollTop;
 192                         } );
 193                 }
 194
 195                 // Apply to dynamically created textboxes as well as normal ones
 196                 $( document ).on( 'focus', 'textarea, input:text', function () {
 197                         $currentFocused = $( this );
 198                 } );
 199         } );
 200
 201 }( mediaWiki, jQuery ) );