]> git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blame - sources/plugins/font/plugin.js
Update to 4.7.3
[perso/Immae/Projets/packagist/ludivine-ckeditor-component.git] / sources / plugins / font / plugin.js
CommitLineData
eaa92715
IB
1/**\r
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
3 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
4 */\r
5\r
6( function() {\r
7 function addCombo( editor, comboName, styleType, lang, entries, defaultLabel, styleDefinition, order ) {\r
8 var config = editor.config,\r
9 style = new CKEDITOR.style( styleDefinition );\r
10\r
11 // Gets the list of fonts from the settings.\r
12 var names = entries.split( ';' ),\r
13 values = [];\r
14\r
15 // Create style objects for all fonts.\r
16 var styles = {};\r
17 for ( var i = 0; i < names.length; i++ ) {\r
18 var parts = names[ i ];\r
19\r
20 if ( parts ) {\r
21 parts = parts.split( '/' );\r
22\r
23 var vars = {},\r
24 name = names[ i ] = parts[ 0 ];\r
25\r
26 vars[ styleType ] = values[ i ] = parts[ 1 ] || name;\r
27\r
28 styles[ name ] = new CKEDITOR.style( styleDefinition, vars );\r
29 styles[ name ]._.definition.name = name;\r
30 } else {\r
31 names.splice( i--, 1 );\r
32 }\r
33 }\r
34\r
35 editor.ui.addRichCombo( comboName, {\r
36 label: lang.label,\r
37 title: lang.panelTitle,\r
38 toolbar: 'styles,' + order,\r
39 allowedContent: style,\r
40 requiredContent: style,\r
41 contentTransformations: [\r
42 [\r
43 {\r
44 element: 'font',\r
45 check: 'span',\r
46 left: function( element ) {\r
47 return !!element.attributes.size ||\r
48 !!element.attributes.align ||\r
49 !!element.attributes.face;\r
50 },\r
51 right: function( element ) {\r
52 var sizes = [\r
53 '', // Non-existent size "0"\r
54 'x-small',\r
55 'small',\r
56 'medium',\r
57 'large',\r
58 'x-large',\r
59 'xx-large',\r
60 '48px' // Closest value to what size="7" might mean.\r
61 ];\r
62\r
63 element.name = 'span';\r
64\r
65 if ( element.attributes.size ) {\r
66 element.styles[ 'font-size' ] = sizes[ element.attributes.size ];\r
67 delete element.attributes.size;\r
68 }\r
69\r
70 if ( element.attributes.align ) {\r
71 element.styles[ 'text-align' ] = element.attributes.align;\r
72 delete element.attributes.align;\r
73 }\r
74\r
75 if ( element.attributes.face ) {\r
76 element.styles[ 'font-family' ] = element.attributes.face;\r
77 delete element.attributes.face;\r
78 }\r
79 }\r
80 }\r
81 ]\r
82 ],\r
83 panel: {\r
84 css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),\r
85 multiSelect: false,\r
86 attributes: { 'aria-label': lang.panelTitle }\r
87 },\r
88\r
89 init: function() {\r
90 this.startGroup( lang.panelTitle );\r
91\r
92 for ( var i = 0; i < names.length; i++ ) {\r
93 var name = names[ i ];\r
94\r
95 // Add the tag entry to the panel list.\r
96 this.add( name, styles[ name ].buildPreview(), name );\r
97 }\r
98 },\r
99\r
100 onClick: function( value ) {\r
101 editor.focus();\r
102 editor.fire( 'saveSnapshot' );\r
103\r
104 var previousValue = this.getValue(),\r
105 style = styles[ value ];\r
106\r
1794320d
IB
107 // When applying one style over another, first remove the previous one (http://dev.ckeditor.com/ticket/12403).\r
108 // NOTE: This is only a temporary fix. It will be moved to the styles system (http://dev.ckeditor.com/ticket/12687).\r
eaa92715
IB
109 if ( previousValue && value != previousValue ) {\r
110 var previousStyle = styles[ previousValue ],\r
111 range = editor.getSelection().getRanges()[ 0 ];\r
112\r
113 // If the range is collapsed we can't simply use the editor.removeStyle method\r
114 // because it will remove the entire element and we want to split it instead.\r
115 if ( range.collapsed ) {\r
116 var path = editor.elementPath(),\r
117 // Find the style element.\r
118 matching = path.contains( function( el ) {\r
119 return previousStyle.checkElementRemovable( el );\r
120 } );\r
121\r
122 if ( matching ) {\r
123 var startBoundary = range.checkBoundaryOfElement( matching, CKEDITOR.START ),\r
124 endBoundary = range.checkBoundaryOfElement( matching, CKEDITOR.END ),\r
125 node, bm;\r
126\r
127 // If we are at both boundaries it means that the element is empty.\r
128 // Remove it but in a way that we won't lose other empty inline elements inside it.\r
129 // Example: <p>x<span style="font-size:48px"><em>[]</em></span>x</p>\r
130 // Result: <p>x<em>[]</em>x</p>\r
131 if ( startBoundary && endBoundary ) {\r
132 bm = range.createBookmark();\r
133 // Replace the element with its children (TODO element.replaceWithChildren).\r
134 while ( ( node = matching.getFirst() ) ) {\r
135 node.insertBefore( matching );\r
136 }\r
137 matching.remove();\r
138 range.moveToBookmark( bm );\r
139\r
140 // If we are at the boundary of the style element, move out and copy nested styles/elements.\r
141 } else if ( startBoundary || endBoundary ) {\r
142 range.moveToPosition( matching, startBoundary ? CKEDITOR.POSITION_BEFORE_START : CKEDITOR.POSITION_AFTER_END );\r
143 cloneSubtreeIntoRange( range, path.elements.slice(), matching );\r
144 } else {\r
145 // Split the element and clone the elements that were in the path\r
146 // (between the startContainer and the matching element)\r
147 // into the new place.\r
148 range.splitElement( matching );\r
149 range.moveToPosition( matching, CKEDITOR.POSITION_AFTER_END );\r
150 cloneSubtreeIntoRange( range, path.elements.slice(), matching );\r
151 }\r
152\r
153 editor.getSelection().selectRanges( [ range ] );\r
154 }\r
155 } else {\r
156 editor.removeStyle( previousStyle );\r
157 }\r
158 }\r
159\r
160 editor[ previousValue == value ? 'removeStyle' : 'applyStyle' ]( style );\r
161\r
162 editor.fire( 'saveSnapshot' );\r
163 },\r
164\r
165 onRender: function() {\r
166 editor.on( 'selectionChange', function( ev ) {\r
167 var currentValue = this.getValue();\r
168\r
169 var elementPath = ev.data.path,\r
170 elements = elementPath.elements;\r
171\r
172 // For each element into the elements path.\r
173 for ( var i = 0, element; i < elements.length; i++ ) {\r
174 element = elements[ i ];\r
175\r
176 // Check if the element is removable by any of\r
177 // the styles.\r
178 for ( var value in styles ) {\r
179 if ( styles[ value ].checkElementMatch( element, true, editor ) ) {\r
180 if ( value != currentValue )\r
181 this.setValue( value );\r
182 return;\r
183 }\r
184 }\r
185 }\r
186\r
187 // If no styles match, just empty it.\r
188 this.setValue( '', defaultLabel );\r
189 }, this );\r
190 },\r
191\r
192 refresh: function() {\r
193 if ( !editor.activeFilter.check( style ) )\r
194 this.setState( CKEDITOR.TRISTATE_DISABLED );\r
195 }\r
196 } );\r
197 }\r
198\r
199 // Clones the subtree between subtreeStart (exclusive) and the\r
200 // leaf (inclusive) and inserts it into the range.\r
201 //\r
202 // @param range\r
203 // @param {CKEDITOR.dom.element[]} elements Elements path in the standard order: leaf -> root.\r
204 // @param {CKEDITOR.dom.element/null} substreeStart The start of the subtree.\r
205 // If null, then the leaf belongs to the subtree.\r
206 function cloneSubtreeIntoRange( range, elements, subtreeStart ) {\r
207 var current = elements.pop();\r
208 if ( !current ) {\r
209 return;\r
210 }\r
211 // Rewind the elements array up to the subtreeStart and then start the real cloning.\r
212 if ( subtreeStart ) {\r
213 return cloneSubtreeIntoRange( range, elements, current.equals( subtreeStart ) ? null : subtreeStart );\r
214 }\r
215\r
216 var clone = current.clone();\r
217 range.insertNode( clone );\r
218 range.moveToPosition( clone, CKEDITOR.POSITION_AFTER_START );\r
219\r
220 cloneSubtreeIntoRange( range, elements );\r
221 }\r
222\r
223 CKEDITOR.plugins.add( 'font', {\r
224 requires: 'richcombo',\r
225 // jscs:disable maximumLineLength\r
1794320d 226 lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,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,oc,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
eaa92715
IB
227 // jscs:enable maximumLineLength\r
228 init: function( editor ) {\r
229 var config = editor.config;\r
230\r
231 addCombo( editor, 'Font', 'family', editor.lang.font, config.font_names, config.font_defaultLabel, config.font_style, 30 );\r
232 addCombo( editor, 'FontSize', 'size', editor.lang.font.fontSize, config.fontSize_sizes, config.fontSize_defaultLabel, config.fontSize_style, 40 );\r
233 }\r
234 } );\r
235} )();\r
236\r
237/**\r
238 * The list of fonts names to be displayed in the Font combo in the toolbar.\r
239 * Entries are separated by semi-colons (`';'`), while it's possible to have more\r
240 * than one font for each entry, in the HTML way (separated by comma).\r
241 *\r
242 * A display name may be optionally defined by prefixing the entries with the\r
243 * name and the slash character. For example, `'Arial/Arial, Helvetica, sans-serif'`\r
244 * will be displayed as `'Arial'` in the list, but will be outputted as\r
245 * `'Arial, Helvetica, sans-serif'`.\r
246 *\r
247 * config.font_names =\r
248 * 'Arial/Arial, Helvetica, sans-serif;' +\r
249 * 'Times New Roman/Times New Roman, Times, serif;' +\r
250 * 'Verdana';\r
251 *\r
252 * config.font_names = 'Arial;Times New Roman;Verdana';\r
253 *\r
254 * @cfg {String} [font_names=see source]\r
255 * @member CKEDITOR.config\r
256 */\r
257CKEDITOR.config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +\r
258 'Comic Sans MS/Comic Sans MS, cursive;' +\r
259 'Courier New/Courier New, Courier, monospace;' +\r
260 'Georgia/Georgia, serif;' +\r
261 'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +\r
262 'Tahoma/Tahoma, Geneva, sans-serif;' +\r
263 'Times New Roman/Times New Roman, Times, serif;' +\r
264 'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +\r
265 'Verdana/Verdana, Geneva, sans-serif';\r
266\r
267/**\r
268 * The text to be displayed in the Font combo is none of the available values\r
269 * matches the current cursor position or text selection.\r
270 *\r
271 * // If the default site font is Arial, we may making it more explicit to the end user.\r
272 * config.font_defaultLabel = 'Arial';\r
273 *\r
274 * @cfg {String} [font_defaultLabel='']\r
275 * @member CKEDITOR.config\r
276 */\r
277CKEDITOR.config.font_defaultLabel = '';\r
278\r
279/**\r
280 * The style definition to be used to apply the font in the text.\r
281 *\r
282 * // This is actually the default value for it.\r
283 * config.font_style = {\r
284 * element: 'span',\r
285 * styles: { 'font-family': '#(family)' },\r
286 * overrides: [ { element: 'font', attributes: { 'face': null } } ]\r
287 * };\r
288 *\r
289 * @cfg {Object} [font_style=see example]\r
290 * @member CKEDITOR.config\r
291 */\r
292CKEDITOR.config.font_style = {\r
293 element: 'span',\r
294 styles: { 'font-family': '#(family)' },\r
295 overrides: [ {\r
296 element: 'font', attributes: { 'face': null }\r
297 } ]\r
298};\r
299\r
300/**\r
301 * The list of fonts size to be displayed in the Font Size combo in the\r
302 * toolbar. Entries are separated by semi-colons (`';'`).\r
303 *\r
304 * Any kind of "CSS like" size can be used, like `'12px'`, `'2.3em'`, `'130%'`,\r
305 * `'larger'` or `'x-small'`.\r
306 *\r
307 * A display name may be optionally defined by prefixing the entries with the\r
308 * name and the slash character. For example, `'Bigger Font/14px'` will be\r
309 * displayed as `'Bigger Font'` in the list, but will be outputted as `'14px'`.\r
310 *\r
311 * config.fontSize_sizes = '16/16px;24/24px;48/48px;';\r
312 *\r
313 * config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';\r
314 *\r
315 * config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';\r
316 *\r
317 * @cfg {String} [fontSize_sizes=see source]\r
318 * @member CKEDITOR.config\r
319 */\r
320CKEDITOR.config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px';\r
321\r
322/**\r
323 * The text to be displayed in the Font Size combo is none of the available\r
324 * values matches the current cursor position or text selection.\r
325 *\r
326 * // If the default site font size is 12px, we may making it more explicit to the end user.\r
327 * config.fontSize_defaultLabel = '12px';\r
328 *\r
329 * @cfg {String} [fontSize_defaultLabel='']\r
330 * @member CKEDITOR.config\r
331 */\r
332CKEDITOR.config.fontSize_defaultLabel = '';\r
333\r
334/**\r
335 * The style definition to be used to apply the font size in the text.\r
336 *\r
337 * // This is actually the default value for it.\r
338 * config.fontSize_style = {\r
339 * element: 'span',\r
340 * styles: { 'font-size': '#(size)' },\r
341 * overrides: [ { element: 'font', attributes: { 'size': null } } ]\r
342 * };\r
343 *\r
344 * @cfg {Object} [fontSize_style=see example]\r
345 * @member CKEDITOR.config\r
346 */\r
347CKEDITOR.config.fontSize_style = {\r
348 element: 'span',\r
349 styles: { 'font-size': '#(size)' },\r
350 overrides: [ {\r
351 element: 'font', attributes: { 'size': null }\r
352 } ]\r
353};\r