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 * For backwards-compatibility, passing `imageFile`, `speedTip`, `tagOpen`, `tagClose`,
14 * `sampleText` and `imageId` as separate arguments (in this order) is also supported.
18 * @param {Object} button Object with the following properties.
19 * You are required to provide *either* the `onClick` parameter, or the three parameters
20 * `tagOpen`, `tagClose` and `sampleText`, but not both (they're mutually exclusive).
21 * @param {string} [button.imageFile] Image to use for the button.
22 * @param {string} button.speedTip Tooltip displayed when user mouses over the button.
23 * @param {Function} [button.onClick] Function to be executed when the button is clicked.
24 * @param {string} [button.tagOpen]
25 * @param {string} [button.tagClose]
26 * @param {string} [button.sampleText] Alternative to `onClick`. `tagOpen`, `tagClose` and
27 * `sampleText` together provide the markup that should be inserted into page text at
28 * current cursor position.
29 * @param {string} [button.imageId] `id` attribute of the button HTML element. Can be
30 * used to define the image with CSS if it's not provided as `imageFile`.
32 function insertButton( button
, speedTip
, tagOpen
, tagClose
, sampleText
, imageId
) {
35 // Backwards compatibility
36 if ( typeof button
!== 'object' ) {
42 sampleText
: sampleText
,
47 if ( button
.imageFile
) {
48 $button
= $( '<img>' ).attr( {
49 src
: button
.imageFile
,
51 title
: button
.speedTip
,
52 id
: button
.imageId
|| undefined,
53 'class': 'mw-toolbar-editbutton'
56 $button
= $( '<div>' ).attr( {
57 title
: button
.speedTip
,
58 id
: button
.imageId
|| undefined,
59 'class': 'mw-toolbar-editbutton'
63 $button
.click( function ( e
) {
64 if ( button
.onClick
!== undefined ) {
67 toolbar
.insertTags( button
.tagOpen
, button
.tagClose
, button
.sampleText
);
73 $toolbar
.append( $button
);
82 * Contains button objects (and for backwards compatibilty, it can
83 * also contains an arguments array for insertButton).
91 * Add buttons to the toolbar.
93 * Takes care of race conditions and time-based dependencies by placing buttons in a queue if
94 * this method is called before the toolbar is created.
96 * For backwards-compatibility, passing `imageFile`, `speedTip`, `tagOpen`, `tagClose`,
97 * `sampleText` and `imageId` as separate arguments (in this order) is also supported.
99 * @inheritdoc #insertButton
101 addButton: function () {
103 insertButton
.apply( toolbar
, arguments
);
105 // Convert arguments list to array
106 queue
.push( slice
.call( arguments
) );
111 * Add multiple buttons to the toolbar (see also #addButton).
115 * addButtons( [ { .. }, { .. }, { .. } ] );
116 * addButtons( { .. }, { .. } );
118 * @param {Object|Array...} [buttons] An array of button objects or the first
119 * button object in a list of variadic arguments.
121 addButtons: function ( buttons
) {
122 if ( !$.isArray( buttons
) ) {
123 buttons
= slice
.call( arguments
);
126 $.each( buttons
, function () {
127 insertButton( this );
130 // Push each button into the queue
131 queue
.push
.apply( queue
, buttons
);
136 * Apply tagOpen/tagClose to selection in currently focused textarea.
138 * Uses `sampleText` if selection is empty.
140 * @param {string} tagOpen
141 * @param {string} tagClose
142 * @param {string} sampleText
144 insertTags: function ( tagOpen
, tagClose
, sampleText
) {
145 if ( $currentFocused
&& $currentFocused
.length
) {
146 $currentFocused
.textSelection(
147 'encapsulateSelection', {
157 // Legacy (for compatibility with the code previously in skins/common.edit.js)
158 mw
.log
.deprecate( window
, 'addButton', toolbar
.addButton
, 'Use mw.toolbar.addButton instead.' );
159 mw
.log
.deprecate( window
, 'insertTags', toolbar
.insertTags
, 'Use mw.toolbar.insertTags instead.' );
161 // For backwards compatibility. Used to be called from EditPage.php, maybe other places as well.
162 mw
.log
.deprecate( toolbar
, 'init', $.noop
);
164 // Expose API publicly
165 mw
.toolbar
= toolbar
;
170 // Used to determine where to insert tags
171 $currentFocused
= $( '#wpTextbox1' );
173 // Populate the selector cache for $toolbar
174 $toolbar
= $( '#toolbar' );
176 for ( i
= 0; i
< queue
.length
; i
++ ) {
178 if ( $.isArray( button
) ) {
179 // Forwarded arguments array from mw.toolbar.addButton
180 insertButton
.apply( toolbar
, button
);
182 // Raw object from mw.toolbar.addButtons
183 insertButton( button
);
190 // This causes further calls to addButton to go to insertion directly
191 // instead of to the queue.
192 // It is important that this is after the one and only loop through
196 // Apply to dynamically created textboxes as well as normal ones
197 $( document
).on( 'focus', 'textarea, input:text', function () {
198 $currentFocused
= $( this );
202 }( mediaWiki
, jQuery
) );