2 * Interface for the classic edit toolbar.
8 var toolbar
, isReady
, $toolbar
, queue
, slice
, $currentFocused
;
11 * Internal helper that does the actual insertion of the button into the toolbar.
13 * See #addButton for parameter documentation.
17 function insertButton( b
, speedTip
, tagOpen
, tagClose
, sampleText
, imageId
) {
20 // Backwards compatibility
21 if ( typeof b
!== 'object' ) {
27 sampleText
: sampleText
,
33 $button
= $( '<img>' ).attr( {
37 id
: b
.imageId
|| undefined,
38 'class': 'mw-toolbar-editbutton'
41 $button
= $( '<div>' ).attr( {
43 id
: b
.imageId
|| undefined,
44 'class': 'mw-toolbar-editbutton'
48 $button
.click( function ( e
) {
49 if ( b
.onClick
!== undefined ) {
52 toolbar
.insertTags( b
.tagOpen
, b
.tagClose
, b
.sampleText
);
58 $toolbar
.append( $button
);
67 * Contains button objects (and for backwards compatibilty, it can
68 * also contains an arguments array for insertButton).
76 * Add buttons to the toolbar.
78 * Takes care of race conditions and time-based dependencies
79 * by placing buttons in a queue if this method is called before
80 * the toolbar is created.
82 * For backwards-compatibility, passing `imageFile`, `speedTip`, `tagOpen`, `tagClose`,
83 * `sampleText` and `imageId` as separate arguments (in this order) is also supported.
85 * @param {Object} button Object with the following properties.
86 * You are required to provide *either* the `onClick` parameter, or the three parameters
87 * `tagOpen`, `tagClose` and `sampleText`, but not both (they're mutually exclusive).
88 * @param {string} [button.imageFile] Image to use for the button.
89 * @param {string} button.speedTip Tooltip displayed when user mouses over the button.
90 * @param {Function} [button.onClick] Function to be executed when the button is clicked.
91 * @param {string} [button.tagOpen]
92 * @param {string} [button.tagClose]
93 * @param {string} [button.sampleText] Alternative to `onClick`. `tagOpen`, `tagClose` and
94 * `sampleText` together provide the markup that should be inserted into page text at
95 * current cursor position.
96 * @param {string} [button.imageId] `id` attribute of the button HTML element. Can be
97 * used to define the image with CSS if it's not provided as `imageFile`.
99 addButton: function () {
101 insertButton
.apply( toolbar
, arguments
);
103 // Convert arguments list to array
104 queue
.push( slice
.call( arguments
) );
108 * Add multiple buttons to the toolbar (see also #addButton).
112 * addButtons( [ { .. }, { .. }, { .. } ] );
113 * addButtons( { .. }, { .. } );
115 * @param {Object|Array...} [buttons] An array of button objects or the first
116 * button object in a list of variadic arguments.
118 addButtons: function ( buttons
) {
119 if ( !$.isArray( buttons
) ) {
120 buttons
= slice
.call( arguments
);
123 $.each( buttons
, function () {
124 insertButton( this );
127 // Push each button into the queue
128 queue
.push
.apply( queue
, buttons
);
133 * Apply tagOpen/tagClose to selection in currently focused textarea.
135 * Uses `sampleText` if selection is empty.
137 * @param {string} tagOpen
138 * @param {string} tagClose
139 * @param {string} sampleText
141 insertTags: function ( tagOpen
, tagClose
, sampleText
) {
142 if ( $currentFocused
&& $currentFocused
.length
) {
143 $currentFocused
.textSelection(
144 'encapsulateSelection', {
153 // For backwards compatibility,
154 // Called from EditPage.php, maybe in other places as well.
158 // Legacy (for compatibility with the code previously in skins/common.edit.js)
159 mw
.log
.deprecate( window
, 'addButton', toolbar
.addButton
, 'Use mw.toolbar.addButton instead.' );
160 mw
.log
.deprecate( window
, 'insertTags', toolbar
.insertTags
, 'Use mw.toolbar.insertTags instead.' );
162 // Expose API publicly
163 mw
.toolbar
= toolbar
;
168 // Used to determine where to insert tags
169 $currentFocused
= $( '#wpTextbox1' );
171 // Populate the selector cache for $toolbar
172 $toolbar
= $( '#toolbar' );
174 for ( i
= 0; i
< queue
.length
; i
++ ) {
176 if ( $.isArray( b
) ) {
177 // Forwarded arguments array from mw.toolbar.addButton
178 insertButton
.apply( toolbar
, b
);
180 // Raw object from mw.toolbar.addButtons
188 // This causes further calls to addButton to go to insertion directly
189 // instead of to the queue.
190 // It is important that this is after the one and only loop through
194 // Apply to dynamically created textboxes as well as normal ones
195 $( document
).on( 'focus', 'textarea, input:text', function () {
196 $currentFocused
= $( this );
200 }( mediaWiki
, jQuery
) );