]>
git.immae.eu Git - perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git/blob - sources/plugins/colorbutton/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 * @fileOverview The "colorbutton" plugin that makes it possible to assign
8 * text and background colors to editor contents.
11 CKEDITOR
.plugins
.add( 'colorbutton', {
12 requires: 'panelbutton,floatpanel',
13 // jscs:disable maximumLineLength
14 lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
15 // jscs:enable maximumLineLength
16 icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE%
17 hidpi: true, // %REMOVE_LINE_CORE%
18 init: function( editor
) {
19 var config
= editor
.config
,
20 lang
= editor
.lang
.colorbutton
;
22 if ( !CKEDITOR
.env
.hc
) {
23 addButton( 'TextColor', 'fore', lang
.textColorTitle
, 10 );
24 addButton( 'BGColor', 'back', lang
.bgColorTitle
, 20 );
27 function addButton( name
, type
, title
, order
) {
28 var style
= new CKEDITOR
.style( config
[ 'colorButton_' + type
+ 'Style' ] ),
29 colorBoxId
= CKEDITOR
.tools
.getNextId() + '_colorBox';
31 editor
.ui
.add( name
, CKEDITOR
.UI_PANELBUTTON
, {
34 modes: { wysiwyg: 1 },
36 toolbar: 'colors,' + order
,
37 allowedContent: style
,
38 requiredContent: style
,
41 css: CKEDITOR
.skin
.getPath( 'editor' ),
42 attributes: { role: 'listbox', 'aria-label': lang
.panelTitle
}
45 onBlock: function( panel
, block
) {
46 block
.autoSize
= true;
47 block
.element
.addClass( 'cke_colorblock' );
48 block
.element
.setHtml( renderColors( panel
, type
, colorBoxId
) );
49 // The block should not have scrollbars (#5933, #6056)
50 block
.element
.getDocument().getBody().setStyle( 'overflow', 'hidden' );
52 CKEDITOR
.ui
.fire( 'ready', this );
54 var keys
= block
.keys
;
55 var rtl
= editor
.lang
.dir
== 'rtl';
56 keys
[ rtl
? 37 : 39 ] = 'next'; // ARROW-RIGHT
57 keys
[ 40 ] = 'next'; // ARROW-DOWN
58 keys
[ 9 ] = 'next'; // TAB
59 keys
[ rtl
? 39 : 37 ] = 'prev'; // ARROW-LEFT
60 keys
[ 38 ] = 'prev'; // ARROW-UP
61 keys
[ CKEDITOR
.SHIFT
+ 9 ] = 'prev'; // SHIFT + TAB
62 keys
[ 32 ] = 'click'; // SPACE
66 if ( !editor
.activeFilter
.check( style
) )
67 this.setState( CKEDITOR
.TRISTATE_DISABLED
);
70 // The automatic colorbox should represent the real color (#6010)
73 var selection
= editor
.getSelection(),
74 block
= selection
&& selection
.getStartElement(),
75 path
= editor
.elementPath( block
),
81 // Find the closest block element.
82 block
= path
.block
|| path
.blockLimit
|| editor
.document
.getBody();
84 // The background color might be transparent. In that case, look up the color in the DOM tree.
86 color
= block
&& block
.getComputedStyle( type
== 'back' ? 'background-color' : 'color' ) || 'transparent';
88 while ( type
== 'back' && color
== 'transparent' && block
&& ( block
= block
.getParent() ) );
90 // The box should never be transparent.
91 if ( !color
|| color
== 'transparent' )
94 this._
.panel
._
.iframe
.getFrameDocument().getById( colorBoxId
).setStyle( 'background-color', color
);
101 function renderColors( panel
, type
, colorBoxId
) {
103 colors
= config
.colorButton_colors
.split( ',' ),
104 // Tells if we should include "More Colors..." button.
105 moreColorsEnabled
= editor
.plugins
.colordialog
&& config
.colorButton_enableMore
!== false,
106 // aria-setsize and aria-posinset attributes are used to indicate size of options, because
107 // screen readers doesn't play nice with table, based layouts (#12097).
108 total
= colors
.length
+ ( moreColorsEnabled
? 2 : 1 );
110 var clickFn
= CKEDITOR
.tools
.addFunction( function( color
, type
) {
111 var applyColorStyle
= arguments
.callee
;
112 function onColorDialogClose( evt
) {
113 this.removeListener( 'ok', onColorDialogClose
);
114 this.removeListener( 'cancel', onColorDialogClose
);
116 evt
.name
== 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type
);
119 if ( color
== '?' ) {
120 editor
.openDialog( 'colordialog', function() {
121 this.on( 'ok', onColorDialogClose
);
122 this.on( 'cancel', onColorDialogClose
);
132 editor
.fire( 'saveSnapshot' );
134 // Clean up any conflicting style within the range.
135 editor
.removeStyle( new CKEDITOR
.style( config
[ 'colorButton_' + type
+ 'Style' ], { color: 'inherit' } ) );
138 var colorStyle
= config
[ 'colorButton_' + type
+ 'Style' ];
140 colorStyle
.childRule
= type
== 'back' ?
141 function( element
) {
142 // It's better to apply background color as the innermost style. (#3599)
143 // Except for "unstylable elements". (#6103)
144 return isUnstylable( element
);
145 } : function( element
) {
146 // Fore color style must be applied inside links instead of around it. (#4772,#6908)
147 return !( element
.is( 'a' ) || element
.getElementsByTag( 'a' ).count() ) || isUnstylable( element
);
150 editor
.applyStyle( new CKEDITOR
.style( colorStyle
, { color: color
} ) );
153 editor
.fire( 'saveSnapshot' );
156 // Render the "Automatic" button.
157 output
.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
158 ' title="', lang
.auto
, '"' +
159 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',null,\'', type
, '\');return false;"' +
160 ' href="javascript:void(\'', lang
.auto
, '\')"' +
161 ' role="option" aria-posinset="1" aria-setsize="', total
, '">' +
162 '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
165 '<span class="cke_colorbox" id="', colorBoxId
, '"></span>' +
167 '<td colspan=7 align=center>', lang
.auto
, '</td>' +
171 '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
173 // Render the color boxes.
174 for ( var i
= 0; i
< colors
.length
; i
++ ) {
175 if ( ( i
% 8 ) === 0 )
176 output
.push( '</tr><tr>' );
178 var parts
= colors
[ i
].split( '/' ),
179 colorName
= parts
[ 0 ],
180 colorCode
= parts
[ 1 ] || colorName
;
182 // The data can be only a color code (without #) or colorName + color code
183 // If only a color code is provided, then the colorName is the color with the hash
184 // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676
186 colorName
= '#' + colorName
.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );
188 var colorLabel
= editor
.lang
.colorbutton
.colors
[ colorCode
] || colorCode
;
189 output
.push( '<td>' +
190 '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
191 ' title="', colorLabel
, '"' +
192 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',\'', colorName
, '\',\'', type
, '\'); return false;"' +
193 ' href="javascript:void(\'', colorLabel
, '\')"' +
194 ' role="option" aria-posinset="', ( i
+ 2 ), '" aria-setsize="', total
, '">' +
195 '<span class="cke_colorbox" style="background-color:#', colorCode
, '"></span>' +
200 // Render the "More Colors" button.
201 if ( moreColorsEnabled
) {
202 output
.push( '</tr>' +
204 '<td colspan=8 align=center>' +
205 '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
206 ' title="', lang
.more
, '"' +
207 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',\'?\',\'', type
, '\');return false;"' +
208 ' href="javascript:void(\'', lang
.more
, '\')"', ' role="option" aria-posinset="', total
, '" aria-setsize="', total
, '">', lang
.more
, '</a>' +
209 '</td>' ); // tr is later in the code.
212 output
.push( '</tr></table>' );
214 return output
.join( '' );
217 function isUnstylable( ele
) {
218 return ( ele
.getAttribute( 'contentEditable' ) == 'false' ) || ele
.getAttribute( 'data-nostyle' );
224 * Whether to enable the **More Colors*** button in the color selectors.
226 * Read more in the [documentation](#!/guide/dev_colorbutton)
227 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
229 * config.colorButton_enableMore = false;
231 * @cfg {Boolean} [colorButton_enableMore=true]
232 * @member CKEDITOR.config
236 * Defines the colors to be displayed in the color selectors. This is a string
237 * containing hexadecimal notation for HTML colors, without the `'#'` prefix.
239 * **Since 3.3:** A color name may optionally be defined by prefixing the entries with
240 * a name and the slash character. For example, `'FontColor1/FF9900'` will be
241 * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
243 * Read more in the [documentation](#!/guide/dev_colorbutton)
244 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
246 * // Brazil colors only.
247 * config.colorButton_colors = '00923E,F8C100,28166F';
249 * config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';
251 * @cfg {String} [colorButton_colors=see source]
252 * @member CKEDITOR.config
254 CKEDITOR
.config
.colorButton_colors
= '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
255 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
256 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
257 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
258 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
261 * Stores the style definition that applies the text foreground color.
263 * Read more in the [documentation](#!/guide/dev_colorbutton)
264 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
266 * // This is actually the default value.
267 * config.colorButton_foreStyle = {
269 * styles: { color: '#(color)' }
272 * @cfg [colorButton_foreStyle=see source]
273 * @member CKEDITOR.config
275 CKEDITOR
.config
.colorButton_foreStyle
= {
277 styles: { 'color': '#(color)' },
279 element: 'font', attributes: { 'color': null }
284 * Stores the style definition that applies the text background color.
286 * Read more in the [documentation](#!/guide/dev_colorbutton)
287 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
289 * // This is actually the default value.
290 * config.colorButton_backStyle = {
292 * styles: { 'background-color': '#(color)' }
295 * @cfg [colorButton_backStyle=see source]
296 * @member CKEDITOR.config
298 CKEDITOR
.config
.colorButton_backStyle
= {
300 styles: { 'background-color': '#(color)' }