]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/plugins/button/plugin.js
e91fa86cbd5568f7f2643d963a933f1623ffca7d
2 * @license Copyright (c) 2003-2017, 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-describedby="{id}_description"' +
16 ' aria-haspopup="{hasArrow}"' +
17 ' aria-disabled="{ariaDisabled}"';
19 // Some browsers don't cancel key events in the keydown but in the
21 // TODO: Check if really needed.
22 if ( CKEDITOR
.env
.gecko
&& CKEDITOR
.env
.mac
)
23 template
+= ' onkeypress="return false;"';
25 // With Firefox, we need to force the button to redraw, otherwise it
26 // will remain in the focus state.
27 if ( CKEDITOR
.env
.gecko
)
28 template
+= ' onblur="this.style.cssText = this.style.cssText;"';
30 template
+= ' onkeydown="return CKEDITOR.tools.callFunction({keydownFn},event);"' +
31 ' onfocus="return CKEDITOR.tools.callFunction({focusFn},event);" ' +
32 ( CKEDITOR
.env
.ie
? 'onclick="return false;" onmouseup' : 'onclick' ) + // http://dev.ckeditor.com/ticket/188
33 '="CKEDITOR.tools.callFunction({clickFn},this);return false;">' +
34 '<span class="cke_button_icon cke_button__{iconName}_icon" style="{style}"';
37 template
+= '> </span>' +
38 '<span id="{id}_label" class="cke_button_label cke_button__{name}_label" aria-hidden="false">{label}</span>' +
39 '<span id="{id}_description" class="cke_button_label" aria-hidden="false">{ariaShortcut}</span>' +
43 var templateArrow
= '<span class="cke_button_arrow">' +
44 // BLACK DOWN-POINTING TRIANGLE
45 ( CKEDITOR
.env
.hc
? '▼' : '' ) +
48 var btnArrowTpl
= CKEDITOR
.addTemplate( 'buttonArrow', templateArrow
),
49 btnTpl
= CKEDITOR
.addTemplate( 'button', template
);
51 CKEDITOR
.plugins
.add( 'button', {
52 lang: 'af,ar,az,bg,ca,cs,da,de,de-ch,el,en,en-gb,eo,es,es-mx,eu,fa,fi,fr,gl,he,hr,hu,id,it,ja,km,ko,ku,lt,nb,nl,no,oc,pl,pt,pt-br,ro,ru,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
53 beforeInit: function( editor
) {
54 editor
.ui
.addHandler( CKEDITOR
.UI_BUTTON
, CKEDITOR
.ui
.button
.handler
);
62 * @property {String} [='button']
65 CKEDITOR
.UI_BUTTON
= 'button';
68 * Represents a button UI element. This class should not be called directly. To
69 * create new buttons use {@link CKEDITOR.ui#addButton} instead.
72 * @constructor Creates a button class instance.
73 * @param {Object} definition The button definition.
75 CKEDITOR
.ui
.button = function( definition
) {
76 CKEDITOR
.tools
.extend( this, definition
,
79 title: definition
.label
,
80 click: definition
.click
||
82 editor
.execCommand( definition
.command
);
90 * Represents the button handler object.
94 * @extends CKEDITOR.ui.handlerDefinition
96 CKEDITOR
.ui
.button
.handler
= {
98 * Transforms a button definition in a {@link CKEDITOR.ui.button} instance.
100 * @member CKEDITOR.ui.button.handler
101 * @param {Object} definition
102 * @returns {CKEDITOR.ui.button}
104 create: function( definition
) {
105 return new CKEDITOR
.ui
.button( definition
);
109 /** @class CKEDITOR.ui.button */
110 CKEDITOR
.ui
.button
.prototype = {
112 * Renders the button.
114 * @param {CKEDITOR.editor} editor The editor instance which this button is
116 * @param {Array} output The output array to which the HTML code related to
117 * this button should be appended.
119 render: function( editor
, output
) {
120 function updateState() {
121 // "this" is a CKEDITOR.ui.button instance.
122 var mode
= editor
.mode
;
125 // Restore saved button state.
126 var state
= this.modes
[ mode
] ? modeStates
[ mode
] !== undefined ? modeStates
[ mode
] : CKEDITOR
.TRISTATE_OFF : CKEDITOR
.TRISTATE_DISABLED
;
128 state
= editor
.readOnly
&& !this.readOnly
? CKEDITOR
.TRISTATE_DISABLED : state
;
130 this.setState( state
);
132 // Let plugin to disable button.
138 var env
= CKEDITOR
.env
,
139 id
= this._
.id
= CKEDITOR
.tools
.getNextId(),
141 command
= this.command
,
142 // Get the command name.
147 this._
.editor
= editor
;
154 var element
= CKEDITOR
.document
.getById( id
);
157 execute: function() {
158 this.button
.click( editor
);
160 attach: function( editor
) {
161 this.button
.attach( editor
);
165 var keydownFn
= CKEDITOR
.tools
.addFunction( function( ev
) {
166 if ( instance
.onkey
) {
167 ev
= new CKEDITOR
.dom
.event( ev
);
168 return ( instance
.onkey( instance
, ev
.getKeystroke() ) !== false );
172 var focusFn
= CKEDITOR
.tools
.addFunction( function( ev
) {
175 if ( instance
.onfocus
)
176 retVal
= ( instance
.onfocus( instance
, new CKEDITOR
.dom
.event( ev
) ) !== false );
183 instance
.clickFn
= clickFn
= CKEDITOR
.tools
.addFunction( function() {
185 // Restore locked selection in Opera.
187 editor
.unlockSelection( 1 );
192 // Fixed iOS focus issue when your press disabled button (http://dev.ckeditor.com/ticket/12381).
199 // Indicate a mode sensitive button.
203 editor
.on( 'beforeModeUnload', function() {
204 if ( editor
.mode
&& this._
.state
!= CKEDITOR
.TRISTATE_DISABLED
)
205 modeStates
[ editor
.mode
] = this._
.state
;
208 // Update status when activeFilter, mode or readOnly changes.
209 editor
.on( 'activeFilterChange', updateState
, this );
210 editor
.on( 'mode', updateState
, this );
211 // If this button is sensitive to readOnly state, update it accordingly.
212 !this.readOnly
&& editor
.on( 'readOnly', updateState
, this );
214 } else if ( command
) {
215 // Get the command instance.
216 command
= editor
.getCommand( command
);
219 command
.on( 'state', function() {
220 this.setState( command
.state
);
223 stateName
+= ( command
.state
== CKEDITOR
.TRISTATE_ON
? 'on' : command
.state
== CKEDITOR
.TRISTATE_DISABLED
? 'disabled' : 'off' );
227 // For button that has text-direction awareness on selection path.
228 if ( this.directional
) {
229 editor
.on( 'contentDirChanged', function( evt
) {
230 var el
= CKEDITOR
.document
.getById( this._
.id
),
231 icon
= el
.getFirst();
233 var pathDir
= evt
.data
;
235 // Make a minor direction change to become style-able for the skin icon.
236 if ( pathDir
!= editor
.lang
.dir
)
237 el
.addClass( 'cke_' + pathDir
);
239 el
.removeClass( 'cke_ltr' ).removeClass( 'cke_rtl' );
241 // Inline style update for the plugin icon.
242 icon
.setAttribute( 'style', CKEDITOR
.skin
.getIconStyle( iconName
, pathDir
== 'rtl', this.icon
, this.iconOffset
) );
249 keystroke
= editor
.getCommandKeystroke( command
);
252 shortcut
= CKEDITOR
.tools
.keystrokeToString( editor
.lang
.common
.keyboard
, keystroke
);
256 var name
= this.name
|| this.command
,
259 // Check if we're pointing to an icon defined by another command. (http://dev.ckeditor.com/ticket/9555)
260 if ( this.icon
&& !( /\./ ).test( this.icon
) ) {
261 iconName
= this.icon
;
270 cls: this.className
|| '',
272 ariaDisabled: stateName
== 'disabled' ? 'true' : 'false',
273 title: this.title
+ ( shortcut
? ' (' + shortcut
.display
+ ')' : '' ),
274 ariaShortcut: shortcut
? editor
.lang
.common
.keyboardShortcut
+ ' ' + shortcut
.aria : '',
275 titleJs: env
.gecko
&& !env
.hc
? '' : ( this.title
|| '' ).replace( "'", '' ),
276 hasArrow: this.hasArrow
? 'true' : 'false',
277 keydownFn: keydownFn
,
280 style: CKEDITOR
.skin
.getIconStyle( iconName
, ( editor
.lang
.dir
== 'rtl' ), this.icon
, this.iconOffset
),
281 arrowHtml: this.hasArrow
? btnArrowTpl
.output() : ''
284 btnTpl
.output( params
, output
);
293 * Sets the button state.
295 * @param {Number} state Indicates the button state. One of {@link CKEDITOR#TRISTATE_ON},
296 * {@link CKEDITOR#TRISTATE_OFF}, or {@link CKEDITOR#TRISTATE_DISABLED}.
298 setState: function( state
) {
299 if ( this._
.state
== state
)
302 this._
.state
= state
;
304 var element
= CKEDITOR
.document
.getById( this._
.id
);
307 element
.setState( state
, 'cke_button' );
309 state
== CKEDITOR
.TRISTATE_DISABLED
?
310 element
.setAttribute( 'aria-disabled', true ) :
311 element
.removeAttribute( 'aria-disabled' );
313 if ( !this.hasArrow
) {
314 // Note: aria-pressed attribute should not be added to menuButton instances. (http://dev.ckeditor.com/ticket/11331)
315 state
== CKEDITOR
.TRISTATE_ON
?
316 element
.setAttribute( 'aria-pressed', true ) :
317 element
.removeAttribute( 'aria-pressed' );
319 var newLabel
= state
== CKEDITOR
.TRISTATE_ON
?
320 this._
.editor
.lang
.button
.selectedLabel
.replace( /%1/g, this.label
) : this.label
;
321 CKEDITOR
.document
.getById( this._
.id
+ '_label' ).setText( newLabel
);
331 * Gets the button state.
333 * @returns {Number} The button state. One of {@link CKEDITOR#TRISTATE_ON},
334 * {@link CKEDITOR#TRISTATE_OFF}, or {@link CKEDITOR#TRISTATE_DISABLED}.
336 getState: function() {
341 * Returns this button's {@link CKEDITOR.feature} instance.
343 * It may be this button instance if it has at least one of
344 * `allowedContent` and `requiredContent` properties. Otherwise,
345 * if a command is bound to this button by the `command` property, then
346 * that command will be returned.
348 * This method implements the {@link CKEDITOR.feature#toFeature} interface method.
351 * @param {CKEDITOR.editor} Editor instance.
352 * @returns {CKEDITOR.feature} The feature.
354 toFeature: function( editor
) {
355 if ( this._
.feature
)
356 return this._
.feature
;
360 // If button isn't a feature, return command if is bound.
361 if ( !this.allowedContent
&& !this.requiredContent
&& this.command
)
362 feature
= editor
.getCommand( this.command
) || feature
;
364 return this._
.feature
= feature
;
369 * Adds a button definition to the UI elements list.
371 * editorInstance.ui.addButton( 'MyBold', {
374 * toolbar: 'basicstyles,1'
377 * @member CKEDITOR.ui
378 * @param {String} name The button name.
379 * @param {Object} definition The button definition.
380 * @param {String} definition.label The textual part of the button (if visible) and its tooltip.
381 * @param {String} definition.command The command to be executed once the button is activated.
382 * @param {String} definition.toolbar The {@link CKEDITOR.config#toolbarGroups toolbar group} into which
383 * the button will be added. An optional index value (separated by a comma) determines the button position within the group.
385 CKEDITOR
.ui
.prototype.addButton = function( name
, definition
) {
386 this.add( name
, CKEDITOR
.UI_BUTTON
, definition
);