]>
git.immae.eu Git - perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git/blob - sources/plugins/button/plugin.js
2 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 var template
= '<a id="{id}"' +
8 ' class="cke_button cke_button__{name} cke_button_{state} {cls}"' +
9 ( CKEDITOR
.env
.gecko
&& !CKEDITOR
.env
.hc
? '' : ' href="javascript:void(\'{titleJs}\')"' ) +
14 ' aria-labelledby="{id}_label"' +
15 ' aria-haspopup="{hasArrow}"' +
16 ' aria-disabled="{ariaDisabled}"';
18 // Some browsers don't cancel key events in the keydown but in the
20 // TODO: Check if really needed.
21 if ( CKEDITOR
.env
.gecko
&& CKEDITOR
.env
.mac
)
22 template
+= ' onkeypress="return false;"';
24 // With Firefox, we need to force the button to redraw, otherwise it
25 // will remain in the focus state.
26 if ( CKEDITOR
.env
.gecko
)
27 template
+= ' onblur="this.style.cssText = this.style.cssText;"';
29 template
+= ' onkeydown="return CKEDITOR.tools.callFunction({keydownFn},event);"' +
30 ' onfocus="return CKEDITOR.tools.callFunction({focusFn},event);" ' +
31 ( CKEDITOR
.env
.ie
? 'onclick="return false;" onmouseup' : 'onclick' ) + // #188
32 '="CKEDITOR.tools.callFunction({clickFn},this);return false;">' +
33 '<span class="cke_button_icon cke_button__{iconName}_icon" style="{style}"';
36 template
+= '> </span>' +
37 '<span id="{id}_label" class="cke_button_label cke_button__{name}_label" aria-hidden="false">{label}</span>' +
41 var templateArrow
= '<span class="cke_button_arrow">' +
42 // BLACK DOWN-POINTING TRIANGLE
43 ( CKEDITOR
.env
.hc
? '▼' : '' ) +
46 var btnArrowTpl
= CKEDITOR
.addTemplate( 'buttonArrow', templateArrow
),
47 btnTpl
= CKEDITOR
.addTemplate( 'button', template
);
49 CKEDITOR
.plugins
.add( 'button', {
50 lang: 'af,ar,bg,ca,cs,da,de,de-ch,el,en,en-gb,eo,es,eu,fa,fi,fr,gl,he,hu,id,it,ja,km,ko,ku,lt,nb,nl,pl,pt,pt-br,ro,ru,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
51 beforeInit: function( editor
) {
52 editor
.ui
.addHandler( CKEDITOR
.UI_BUTTON
, CKEDITOR
.ui
.button
.handler
);
60 * @property {String} [='button']
63 CKEDITOR
.UI_BUTTON
= 'button';
66 * Represents a button UI element. This class should not be called directly. To
67 * create new buttons use {@link CKEDITOR.ui#addButton} instead.
70 * @constructor Creates a button class instance.
71 * @param {Object} definition The button definition.
73 CKEDITOR
.ui
.button = function( definition
) {
74 CKEDITOR
.tools
.extend( this, definition
,
77 title: definition
.label
,
78 click: definition
.click
||
80 editor
.execCommand( definition
.command
);
88 * Represents the button handler object.
92 * @extends CKEDITOR.ui.handlerDefinition
94 CKEDITOR
.ui
.button
.handler
= {
96 * Transforms a button definition in a {@link CKEDITOR.ui.button} instance.
98 * @member CKEDITOR.ui.button.handler
99 * @param {Object} definition
100 * @returns {CKEDITOR.ui.button}
102 create: function( definition
) {
103 return new CKEDITOR
.ui
.button( definition
);
107 /** @class CKEDITOR.ui.button */
108 CKEDITOR
.ui
.button
.prototype = {
110 * Renders the button.
112 * @param {CKEDITOR.editor} editor The editor instance which this button is
114 * @param {Array} output The output array to which the HTML code related to
115 * this button should be appended.
117 render: function( editor
, output
) {
118 function updateState() {
119 // "this" is a CKEDITOR.ui.button instance.
120 var mode
= editor
.mode
;
123 // Restore saved button state.
124 var state
= this.modes
[ mode
] ? modeStates
[ mode
] !== undefined ? modeStates
[ mode
] : CKEDITOR
.TRISTATE_OFF : CKEDITOR
.TRISTATE_DISABLED
;
126 state
= editor
.readOnly
&& !this.readOnly
? CKEDITOR
.TRISTATE_DISABLED : state
;
128 this.setState( state
);
130 // Let plugin to disable button.
136 var env
= CKEDITOR
.env
,
137 id
= this._
.id
= CKEDITOR
.tools
.getNextId(),
139 command
= this.command
,
140 // Get the command name.
143 this._
.editor
= editor
;
150 var element
= CKEDITOR
.document
.getById( id
);
153 execute: function() {
154 this.button
.click( editor
);
156 attach: function( editor
) {
157 this.button
.attach( editor
);
161 var keydownFn
= CKEDITOR
.tools
.addFunction( function( ev
) {
162 if ( instance
.onkey
) {
163 ev
= new CKEDITOR
.dom
.event( ev
);
164 return ( instance
.onkey( instance
, ev
.getKeystroke() ) !== false );
168 var focusFn
= CKEDITOR
.tools
.addFunction( function( ev
) {
171 if ( instance
.onfocus
)
172 retVal
= ( instance
.onfocus( instance
, new CKEDITOR
.dom
.event( ev
) ) !== false );
179 instance
.clickFn
= clickFn
= CKEDITOR
.tools
.addFunction( function() {
181 // Restore locked selection in Opera.
183 editor
.unlockSelection( 1 );
188 // Fixed iOS focus issue when your press disabled button (#12381).
195 // Indicate a mode sensitive button.
199 editor
.on( 'beforeModeUnload', function() {
200 if ( editor
.mode
&& this._
.state
!= CKEDITOR
.TRISTATE_DISABLED
)
201 modeStates
[ editor
.mode
] = this._
.state
;
204 // Update status when activeFilter, mode or readOnly changes.
205 editor
.on( 'activeFilterChange', updateState
, this );
206 editor
.on( 'mode', updateState
, this );
207 // If this button is sensitive to readOnly state, update it accordingly.
208 !this.readOnly
&& editor
.on( 'readOnly', updateState
, this );
210 } else if ( command
) {
211 // Get the command instance.
212 command
= editor
.getCommand( command
);
215 command
.on( 'state', function() {
216 this.setState( command
.state
);
219 stateName
+= ( command
.state
== CKEDITOR
.TRISTATE_ON
? 'on' : command
.state
== CKEDITOR
.TRISTATE_DISABLED
? 'disabled' : 'off' );
223 // For button that has text-direction awareness on selection path.
224 if ( this.directional
) {
225 editor
.on( 'contentDirChanged', function( evt
) {
226 var el
= CKEDITOR
.document
.getById( this._
.id
),
227 icon
= el
.getFirst();
229 var pathDir
= evt
.data
;
231 // Make a minor direction change to become style-able for the skin icon.
232 if ( pathDir
!= editor
.lang
.dir
)
233 el
.addClass( 'cke_' + pathDir
);
235 el
.removeClass( 'cke_ltr' ).removeClass( 'cke_rtl' );
237 // Inline style update for the plugin icon.
238 icon
.setAttribute( 'style', CKEDITOR
.skin
.getIconStyle( iconName
, pathDir
== 'rtl', this.icon
, this.iconOffset
) );
245 var name
= this.name
|| this.command
,
248 // Check if we're pointing to an icon defined by another command. (#9555)
249 if ( this.icon
&& !( /\./ ).test( this.icon
) ) {
250 iconName
= this.icon
;
259 cls: this.className
|| '',
261 ariaDisabled: stateName
== 'disabled' ? 'true' : 'false',
263 titleJs: env
.gecko
&& !env
.hc
? '' : ( this.title
|| '' ).replace( "'", '' ),
264 hasArrow: this.hasArrow
? 'true' : 'false',
265 keydownFn: keydownFn
,
268 style: CKEDITOR
.skin
.getIconStyle( iconName
, ( editor
.lang
.dir
== 'rtl' ), this.icon
, this.iconOffset
),
269 arrowHtml: this.hasArrow
? btnArrowTpl
.output() : ''
272 btnTpl
.output( params
, output
);
281 * Sets the button state.
283 * @param {Number} state Indicates the button state. One of {@link CKEDITOR#TRISTATE_ON},
284 * {@link CKEDITOR#TRISTATE_OFF}, or {@link CKEDITOR#TRISTATE_DISABLED}.
286 setState: function( state
) {
287 if ( this._
.state
== state
)
290 this._
.state
= state
;
292 var element
= CKEDITOR
.document
.getById( this._
.id
);
295 element
.setState( state
, 'cke_button' );
297 state
== CKEDITOR
.TRISTATE_DISABLED
?
298 element
.setAttribute( 'aria-disabled', true ) :
299 element
.removeAttribute( 'aria-disabled' );
301 if ( !this.hasArrow
) {
302 // Note: aria-pressed attribute should not be added to menuButton instances. (#11331)
303 state
== CKEDITOR
.TRISTATE_ON
?
304 element
.setAttribute( 'aria-pressed', true ) :
305 element
.removeAttribute( 'aria-pressed' );
307 var newLabel
= state
== CKEDITOR
.TRISTATE_ON
?
308 this._
.editor
.lang
.button
.selectedLabel
.replace( /%1/g, this.label
) : this.label
;
309 CKEDITOR
.document
.getById( this._
.id
+ '_label' ).setText( newLabel
);
319 * Gets the button state.
321 * @returns {Number} The button state. One of {@link CKEDITOR#TRISTATE_ON},
322 * {@link CKEDITOR#TRISTATE_OFF}, or {@link CKEDITOR#TRISTATE_DISABLED}.
324 getState: function() {
329 * Returns this button's {@link CKEDITOR.feature} instance.
331 * It may be this button instance if it has at least one of
332 * `allowedContent` and `requiredContent` properties. Otherwise,
333 * if a command is bound to this button by the `command` property, then
334 * that command will be returned.
336 * This method implements the {@link CKEDITOR.feature#toFeature} interface method.
339 * @param {CKEDITOR.editor} Editor instance.
340 * @returns {CKEDITOR.feature} The feature.
342 toFeature: function( editor
) {
343 if ( this._
.feature
)
344 return this._
.feature
;
348 // If button isn't a feature, return command if is bound.
349 if ( !this.allowedContent
&& !this.requiredContent
&& this.command
)
350 feature
= editor
.getCommand( this.command
) || feature
;
352 return this._
.feature
= feature
;
357 * Adds a button definition to the UI elements list.
359 * editorInstance.ui.addButton( 'MyBold', {
362 * toolbar: 'basicstyles,1'
365 * @member CKEDITOR.ui
366 * @param {String} name The button name.
367 * @param {Object} definition The button definition.
368 * @param {String} definition.label The textual part of the button (if visible) and its tooltip.
369 * @param {String} definition.command The command to be executed once the button is activated.
370 * @param {String} definition.toolbar The {@link CKEDITOR.config#toolbarGroups toolbar group} into which
371 * the button will be added. An optional index value (separated by a comma) determines the button position within the group.
373 CKEDITOR
.ui
.prototype.addButton = function( name
, definition
) {
374 this.add( name
, CKEDITOR
.UI_BUTTON
, definition
);