]>
Commit | Line | Data |
---|---|---|
7adcb81e | 1 | /**\r |
3b35bd27 | 2 | * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r |
7adcb81e IB |
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license\r |
4 | */\r | |
5 | \r | |
6 | /**\r | |
7 | * @fileOverview The "colorbutton" plugin that makes it possible to assign\r | |
8 | * text and background colors to editor contents.\r | |
9 | *\r | |
10 | */\r | |
11 | CKEDITOR.plugins.add( 'colorbutton', {\r | |
12 | requires: 'panelbutton,floatpanel',\r | |
13 | // jscs:disable maximumLineLength\r | |
3b35bd27 | 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%\r |
7adcb81e IB |
15 | // jscs:enable maximumLineLength\r |
16 | icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE%\r | |
17 | hidpi: true, // %REMOVE_LINE_CORE%\r | |
18 | init: function( editor ) {\r | |
19 | var config = editor.config,\r | |
20 | lang = editor.lang.colorbutton;\r | |
21 | \r | |
22 | if ( !CKEDITOR.env.hc ) {\r | |
23 | addButton( 'TextColor', 'fore', lang.textColorTitle, 10 );\r | |
24 | addButton( 'BGColor', 'back', lang.bgColorTitle, 20 );\r | |
25 | }\r | |
26 | \r | |
27 | function addButton( name, type, title, order ) {\r | |
28 | var style = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ] ),\r | |
29 | colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';\r | |
30 | \r | |
31 | editor.ui.add( name, CKEDITOR.UI_PANELBUTTON, {\r | |
32 | label: title,\r | |
33 | title: title,\r | |
34 | modes: { wysiwyg: 1 },\r | |
35 | editorFocus: 0,\r | |
36 | toolbar: 'colors,' + order,\r | |
37 | allowedContent: style,\r | |
38 | requiredContent: style,\r | |
39 | \r | |
40 | panel: {\r | |
41 | css: CKEDITOR.skin.getPath( 'editor' ),\r | |
42 | attributes: { role: 'listbox', 'aria-label': lang.panelTitle }\r | |
43 | },\r | |
44 | \r | |
45 | onBlock: function( panel, block ) {\r | |
46 | block.autoSize = true;\r | |
47 | block.element.addClass( 'cke_colorblock' );\r | |
48 | block.element.setHtml( renderColors( panel, type, colorBoxId ) );\r | |
49 | // The block should not have scrollbars (#5933, #6056)\r | |
50 | block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );\r | |
51 | \r | |
52 | CKEDITOR.ui.fire( 'ready', this );\r | |
53 | \r | |
54 | var keys = block.keys;\r | |
55 | var rtl = editor.lang.dir == 'rtl';\r | |
56 | keys[ rtl ? 37 : 39 ] = 'next'; // ARROW-RIGHT\r | |
57 | keys[ 40 ] = 'next'; // ARROW-DOWN\r | |
58 | keys[ 9 ] = 'next'; // TAB\r | |
59 | keys[ rtl ? 39 : 37 ] = 'prev'; // ARROW-LEFT\r | |
60 | keys[ 38 ] = 'prev'; // ARROW-UP\r | |
61 | keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB\r | |
62 | keys[ 32 ] = 'click'; // SPACE\r | |
63 | },\r | |
64 | \r | |
65 | refresh: function() {\r | |
66 | if ( !editor.activeFilter.check( style ) )\r | |
67 | this.setState( CKEDITOR.TRISTATE_DISABLED );\r | |
68 | },\r | |
69 | \r | |
70 | // The automatic colorbox should represent the real color (#6010)\r | |
71 | onOpen: function() {\r | |
72 | \r | |
73 | var selection = editor.getSelection(),\r | |
74 | block = selection && selection.getStartElement(),\r | |
75 | path = editor.elementPath( block ),\r | |
76 | color;\r | |
77 | \r | |
78 | if ( !path )\r | |
79 | return;\r | |
80 | \r | |
81 | // Find the closest block element.\r | |
82 | block = path.block || path.blockLimit || editor.document.getBody();\r | |
83 | \r | |
84 | // The background color might be transparent. In that case, look up the color in the DOM tree.\r | |
85 | do {\r | |
86 | color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent';\r | |
87 | }\r | |
88 | while ( type == 'back' && color == 'transparent' && block && ( block = block.getParent() ) );\r | |
89 | \r | |
90 | // The box should never be transparent.\r | |
91 | if ( !color || color == 'transparent' )\r | |
92 | color = '#ffffff';\r | |
93 | \r | |
94 | this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color );\r | |
95 | \r | |
96 | return color;\r | |
97 | }\r | |
98 | } );\r | |
99 | }\r | |
100 | \r | |
101 | function renderColors( panel, type, colorBoxId ) {\r | |
102 | var output = [],\r | |
103 | colors = config.colorButton_colors.split( ',' ),\r | |
104 | // Tells if we should include "More Colors..." button.\r | |
105 | moreColorsEnabled = editor.plugins.colordialog && config.colorButton_enableMore !== false,\r | |
106 | // aria-setsize and aria-posinset attributes are used to indicate size of options, because\r | |
107 | // screen readers doesn't play nice with table, based layouts (#12097).\r | |
108 | total = colors.length + ( moreColorsEnabled ? 2 : 1 );\r | |
109 | \r | |
110 | var clickFn = CKEDITOR.tools.addFunction( function( color, type ) {\r | |
111 | var applyColorStyle = arguments.callee;\r | |
112 | function onColorDialogClose( evt ) {\r | |
113 | this.removeListener( 'ok', onColorDialogClose );\r | |
114 | this.removeListener( 'cancel', onColorDialogClose );\r | |
115 | \r | |
116 | evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type );\r | |
117 | }\r | |
118 | \r | |
119 | if ( color == '?' ) {\r | |
120 | editor.openDialog( 'colordialog', function() {\r | |
121 | this.on( 'ok', onColorDialogClose );\r | |
122 | this.on( 'cancel', onColorDialogClose );\r | |
123 | } );\r | |
124 | \r | |
125 | return;\r | |
126 | }\r | |
127 | \r | |
128 | editor.focus();\r | |
129 | \r | |
130 | panel.hide();\r | |
131 | \r | |
132 | editor.fire( 'saveSnapshot' );\r | |
133 | \r | |
134 | // Clean up any conflicting style within the range.\r | |
135 | editor.removeStyle( new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ) );\r | |
136 | \r | |
137 | if ( color ) {\r | |
138 | var colorStyle = config[ 'colorButton_' + type + 'Style' ];\r | |
139 | \r | |
140 | colorStyle.childRule = type == 'back' ?\r | |
141 | function( element ) {\r | |
142 | // It's better to apply background color as the innermost style. (#3599)\r | |
143 | // Except for "unstylable elements". (#6103)\r | |
144 | return isUnstylable( element );\r | |
145 | } : function( element ) {\r | |
146 | // Fore color style must be applied inside links instead of around it. (#4772,#6908)\r | |
147 | return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );\r | |
148 | };\r | |
149 | \r | |
150 | editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) );\r | |
151 | }\r | |
152 | \r | |
153 | editor.fire( 'saveSnapshot' );\r | |
154 | } );\r | |
155 | \r | |
156 | // Render the "Automatic" button.\r | |
157 | output.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +\r | |
158 | ' title="', lang.auto, '"' +\r | |
159 | ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +\r | |
160 | ' href="javascript:void(\'', lang.auto, '\')"' +\r | |
161 | ' role="option" aria-posinset="1" aria-setsize="', total, '">' +\r | |
162 | '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +\r | |
163 | '<tr>' +\r | |
164 | '<td>' +\r | |
165 | '<span class="cke_colorbox" id="', colorBoxId, '"></span>' +\r | |
166 | '</td>' +\r | |
167 | '<td colspan=7 align=center>', lang.auto, '</td>' +\r | |
168 | '</tr>' +\r | |
169 | '</table>' +\r | |
170 | '</a>' +\r | |
171 | '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );\r | |
172 | \r | |
173 | // Render the color boxes.\r | |
174 | for ( var i = 0; i < colors.length; i++ ) {\r | |
175 | if ( ( i % 8 ) === 0 )\r | |
176 | output.push( '</tr><tr>' );\r | |
177 | \r | |
178 | var parts = colors[ i ].split( '/' ),\r | |
179 | colorName = parts[ 0 ],\r | |
180 | colorCode = parts[ 1 ] || colorName;\r | |
181 | \r | |
182 | // The data can be only a color code (without #) or colorName + color code\r | |
183 | // If only a color code is provided, then the colorName is the color with the hash\r | |
184 | // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676\r | |
185 | if ( !parts[ 1 ] )\r | |
186 | colorName = '#' + colorName.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );\r | |
187 | \r | |
188 | var colorLabel = editor.lang.colorbutton.colors[ colorCode ] || colorCode;\r | |
189 | output.push( '<td>' +\r | |
190 | '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +\r | |
191 | ' title="', colorLabel, '"' +\r | |
192 | ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' +\r | |
193 | ' href="javascript:void(\'', colorLabel, '\')"' +\r | |
194 | ' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +\r | |
195 | '<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +\r | |
196 | '</a>' +\r | |
197 | '</td>' );\r | |
198 | }\r | |
199 | \r | |
200 | // Render the "More Colors" button.\r | |
201 | if ( moreColorsEnabled ) {\r | |
202 | output.push( '</tr>' +\r | |
203 | '<tr>' +\r | |
204 | '<td colspan=8 align=center>' +\r | |
205 | '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +\r | |
206 | ' title="', lang.more, '"' +\r | |
207 | ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +\r | |
208 | ' href="javascript:void(\'', lang.more, '\')"', ' role="option" aria-posinset="', total, '" aria-setsize="', total, '">', lang.more, '</a>' +\r | |
209 | '</td>' ); // tr is later in the code.\r | |
210 | }\r | |
211 | \r | |
212 | output.push( '</tr></table>' );\r | |
213 | \r | |
214 | return output.join( '' );\r | |
215 | }\r | |
216 | \r | |
217 | function isUnstylable( ele ) {\r | |
218 | return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' );\r | |
219 | }\r | |
220 | }\r | |
221 | } );\r | |
222 | \r | |
223 | /**\r | |
224 | * Whether to enable the **More Colors*** button in the color selectors.\r | |
225 | *\r | |
226 | * Read more in the [documentation](#!/guide/dev_colorbutton)\r | |
227 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).\r | |
228 | *\r | |
229 | * config.colorButton_enableMore = false;\r | |
230 | *\r | |
231 | * @cfg {Boolean} [colorButton_enableMore=true]\r | |
232 | * @member CKEDITOR.config\r | |
233 | */\r | |
234 | \r | |
235 | /**\r | |
236 | * Defines the colors to be displayed in the color selectors. This is a string\r | |
237 | * containing hexadecimal notation for HTML colors, without the `'#'` prefix.\r | |
238 | *\r | |
239 | * **Since 3.3:** A color name may optionally be defined by prefixing the entries with\r | |
240 | * a name and the slash character. For example, `'FontColor1/FF9900'` will be\r | |
241 | * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.\r | |
242 | *\r | |
243 | * Read more in the [documentation](#!/guide/dev_colorbutton)\r | |
244 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).\r | |
245 | *\r | |
246 | * // Brazil colors only.\r | |
247 | * config.colorButton_colors = '00923E,F8C100,28166F';\r | |
248 | *\r | |
249 | * config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';\r | |
250 | *\r | |
251 | * @cfg {String} [colorButton_colors=see source]\r | |
252 | * @member CKEDITOR.config\r | |
253 | */\r | |
254 | CKEDITOR.config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +\r | |
255 | 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +\r | |
256 | 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +\r | |
257 | 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +\r | |
258 | 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';\r | |
259 | \r | |
260 | /**\r | |
261 | * Stores the style definition that applies the text foreground color.\r | |
262 | *\r | |
263 | * Read more in the [documentation](#!/guide/dev_colorbutton)\r | |
264 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).\r | |
265 | *\r | |
266 | * // This is actually the default value.\r | |
267 | * config.colorButton_foreStyle = {\r | |
268 | * element: 'span',\r | |
269 | * styles: { color: '#(color)' }\r | |
270 | * };\r | |
271 | *\r | |
272 | * @cfg [colorButton_foreStyle=see source]\r | |
273 | * @member CKEDITOR.config\r | |
274 | */\r | |
275 | CKEDITOR.config.colorButton_foreStyle = {\r | |
276 | element: 'span',\r | |
277 | styles: { 'color': '#(color)' },\r | |
278 | overrides: [ {\r | |
279 | element: 'font', attributes: { 'color': null }\r | |
280 | } ]\r | |
281 | };\r | |
282 | \r | |
283 | /**\r | |
284 | * Stores the style definition that applies the text background color.\r | |
285 | *\r | |
286 | * Read more in the [documentation](#!/guide/dev_colorbutton)\r | |
287 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).\r | |
288 | *\r | |
289 | * // This is actually the default value.\r | |
290 | * config.colorButton_backStyle = {\r | |
291 | * element: 'span',\r | |
292 | * styles: { 'background-color': '#(color)' }\r | |
293 | * };\r | |
294 | *\r | |
295 | * @cfg [colorButton_backStyle=see source]\r | |
296 | * @member CKEDITOR.config\r | |
297 | */\r | |
298 | CKEDITOR.config.colorButton_backStyle = {\r | |
299 | element: 'span',\r | |
300 | styles: { 'background-color': '#(color)' }\r | |
301 | };\r |