diff options
Diffstat (limited to 'sources/plugins/justify/plugin.js')
-rw-r--r-- | sources/plugins/justify/plugin.js | 245 |
1 files changed, 245 insertions, 0 deletions
diff --git a/sources/plugins/justify/plugin.js b/sources/plugins/justify/plugin.js new file mode 100644 index 0000000..15163b8 --- /dev/null +++ b/sources/plugins/justify/plugin.js | |||
@@ -0,0 +1,245 @@ | |||
1 | /** | ||
2 | * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. | ||
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license | ||
4 | */ | ||
5 | |||
6 | /** | ||
7 | * @fileOverview Justify commands. | ||
8 | */ | ||
9 | |||
10 | ( function() { | ||
11 | function getAlignment( element, useComputedState ) { | ||
12 | useComputedState = useComputedState === undefined || useComputedState; | ||
13 | |||
14 | var align; | ||
15 | if ( useComputedState ) | ||
16 | align = element.getComputedStyle( 'text-align' ); | ||
17 | else { | ||
18 | while ( !element.hasAttribute || !( element.hasAttribute( 'align' ) || element.getStyle( 'text-align' ) ) ) { | ||
19 | var parent = element.getParent(); | ||
20 | if ( !parent ) | ||
21 | break; | ||
22 | element = parent; | ||
23 | } | ||
24 | align = element.getStyle( 'text-align' ) || element.getAttribute( 'align' ) || ''; | ||
25 | } | ||
26 | |||
27 | // Sometimes computed values doesn't tell. | ||
28 | align && ( align = align.replace( /(?:-(?:moz|webkit)-)?(?:start|auto)/i, '' ) ); | ||
29 | |||
30 | !align && useComputedState && ( align = element.getComputedStyle( 'direction' ) == 'rtl' ? 'right' : 'left' ); | ||
31 | |||
32 | return align; | ||
33 | } | ||
34 | |||
35 | function justifyCommand( editor, name, value ) { | ||
36 | this.editor = editor; | ||
37 | this.name = name; | ||
38 | this.value = value; | ||
39 | this.context = 'p'; | ||
40 | |||
41 | var classes = editor.config.justifyClasses, | ||
42 | blockTag = editor.config.enterMode == CKEDITOR.ENTER_P ? 'p' : 'div'; | ||
43 | |||
44 | if ( classes ) { | ||
45 | switch ( value ) { | ||
46 | case 'left': | ||
47 | this.cssClassName = classes[ 0 ]; | ||
48 | break; | ||
49 | case 'center': | ||
50 | this.cssClassName = classes[ 1 ]; | ||
51 | break; | ||
52 | case 'right': | ||
53 | this.cssClassName = classes[ 2 ]; | ||
54 | break; | ||
55 | case 'justify': | ||
56 | this.cssClassName = classes[ 3 ]; | ||
57 | break; | ||
58 | } | ||
59 | |||
60 | this.cssClassRegex = new RegExp( '(?:^|\\s+)(?:' + classes.join( '|' ) + ')(?=$|\\s)' ); | ||
61 | this.requiredContent = blockTag + '(' + this.cssClassName + ')'; | ||
62 | } | ||
63 | else { | ||
64 | this.requiredContent = blockTag + '{text-align}'; | ||
65 | } | ||
66 | |||
67 | this.allowedContent = { | ||
68 | 'caption div h1 h2 h3 h4 h5 h6 p pre td th li': { | ||
69 | // Do not add elements, but only text-align style if element is validated by other rule. | ||
70 | propertiesOnly: true, | ||
71 | styles: this.cssClassName ? null : 'text-align', | ||
72 | classes: this.cssClassName || null | ||
73 | } | ||
74 | }; | ||
75 | |||
76 | // In enter mode BR we need to allow here for div, because when non other | ||
77 | // feature allows div justify is the only plugin that uses it. | ||
78 | if ( editor.config.enterMode == CKEDITOR.ENTER_BR ) | ||
79 | this.allowedContent.div = true; | ||
80 | } | ||
81 | |||
82 | function onDirChanged( e ) { | ||
83 | var editor = e.editor; | ||
84 | |||
85 | var range = editor.createRange(); | ||
86 | range.setStartBefore( e.data.node ); | ||
87 | range.setEndAfter( e.data.node ); | ||
88 | |||
89 | var walker = new CKEDITOR.dom.walker( range ), | ||
90 | node; | ||
91 | |||
92 | while ( ( node = walker.next() ) ) { | ||
93 | if ( node.type == CKEDITOR.NODE_ELEMENT ) { | ||
94 | // A child with the defined dir is to be ignored. | ||
95 | if ( !node.equals( e.data.node ) && node.getDirection() ) { | ||
96 | range.setStartAfter( node ); | ||
97 | walker = new CKEDITOR.dom.walker( range ); | ||
98 | continue; | ||
99 | } | ||
100 | |||
101 | // Switch the alignment. | ||
102 | var classes = editor.config.justifyClasses; | ||
103 | if ( classes ) { | ||
104 | // The left align class. | ||
105 | if ( node.hasClass( classes[ 0 ] ) ) { | ||
106 | node.removeClass( classes[ 0 ] ); | ||
107 | node.addClass( classes[ 2 ] ); | ||
108 | } | ||
109 | // The right align class. | ||
110 | else if ( node.hasClass( classes[ 2 ] ) ) { | ||
111 | node.removeClass( classes[ 2 ] ); | ||
112 | node.addClass( classes[ 0 ] ); | ||
113 | } | ||
114 | } | ||
115 | |||
116 | // Always switch CSS margins. | ||
117 | var style = 'text-align'; | ||
118 | var align = node.getStyle( style ); | ||
119 | |||
120 | if ( align == 'left' ) | ||
121 | node.setStyle( style, 'right' ); | ||
122 | else if ( align == 'right' ) | ||
123 | node.setStyle( style, 'left' ); | ||
124 | } | ||
125 | } | ||
126 | } | ||
127 | |||
128 | justifyCommand.prototype = { | ||
129 | exec: function( editor ) { | ||
130 | var selection = editor.getSelection(), | ||
131 | enterMode = editor.config.enterMode; | ||
132 | |||
133 | if ( !selection ) | ||
134 | return; | ||
135 | |||
136 | var bookmarks = selection.createBookmarks(), | ||
137 | ranges = selection.getRanges(); | ||
138 | |||
139 | var cssClassName = this.cssClassName, | ||
140 | iterator, block; | ||
141 | |||
142 | var useComputedState = editor.config.useComputedState; | ||
143 | useComputedState = useComputedState === undefined || useComputedState; | ||
144 | |||
145 | for ( var i = ranges.length - 1; i >= 0; i-- ) { | ||
146 | iterator = ranges[ i ].createIterator(); | ||
147 | iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR; | ||
148 | |||
149 | while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) ) { | ||
150 | if ( block.isReadOnly() ) | ||
151 | continue; | ||
152 | |||
153 | block.removeAttribute( 'align' ); | ||
154 | block.removeStyle( 'text-align' ); | ||
155 | |||
156 | // Remove any of the alignment classes from the className. | ||
157 | var className = cssClassName && ( block.$.className = CKEDITOR.tools.ltrim( block.$.className.replace( this.cssClassRegex, '' ) ) ); | ||
158 | |||
159 | var apply = ( this.state == CKEDITOR.TRISTATE_OFF ) && ( !useComputedState || ( getAlignment( block, true ) != this.value ) ); | ||
160 | |||
161 | if ( cssClassName ) { | ||
162 | // Append the desired class name. | ||
163 | if ( apply ) | ||
164 | block.addClass( cssClassName ); | ||
165 | else if ( !className ) | ||
166 | block.removeAttribute( 'class' ); | ||
167 | } else if ( apply ) { | ||
168 | block.setStyle( 'text-align', this.value ); | ||
169 | } | ||
170 | } | ||
171 | |||
172 | } | ||
173 | |||
174 | editor.focus(); | ||
175 | editor.forceNextSelectionCheck(); | ||
176 | selection.selectBookmarks( bookmarks ); | ||
177 | }, | ||
178 | |||
179 | refresh: function( editor, path ) { | ||
180 | var firstBlock = path.block || path.blockLimit; | ||
181 | |||
182 | this.setState( firstBlock.getName() != 'body' && getAlignment( firstBlock, this.editor.config.useComputedState ) == this.value ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF ); | ||
183 | } | ||
184 | }; | ||
185 | |||
186 | CKEDITOR.plugins.add( 'justify', { | ||
187 | // jscs:disable maximumLineLength | ||
188 | 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% | ||
189 | // jscs:enable maximumLineLength | ||
190 | icons: 'justifyblock,justifycenter,justifyleft,justifyright', // %REMOVE_LINE_CORE% | ||
191 | hidpi: true, // %REMOVE_LINE_CORE% | ||
192 | init: function( editor ) { | ||
193 | if ( editor.blockless ) | ||
194 | return; | ||
195 | |||
196 | var left = new justifyCommand( editor, 'justifyleft', 'left' ), | ||
197 | center = new justifyCommand( editor, 'justifycenter', 'center' ), | ||
198 | right = new justifyCommand( editor, 'justifyright', 'right' ), | ||
199 | justify = new justifyCommand( editor, 'justifyblock', 'justify' ); | ||
200 | |||
201 | editor.addCommand( 'justifyleft', left ); | ||
202 | editor.addCommand( 'justifycenter', center ); | ||
203 | editor.addCommand( 'justifyright', right ); | ||
204 | editor.addCommand( 'justifyblock', justify ); | ||
205 | |||
206 | if ( editor.ui.addButton ) { | ||
207 | editor.ui.addButton( 'JustifyLeft', { | ||
208 | label: editor.lang.justify.left, | ||
209 | command: 'justifyleft', | ||
210 | toolbar: 'align,10' | ||
211 | } ); | ||
212 | editor.ui.addButton( 'JustifyCenter', { | ||
213 | label: editor.lang.justify.center, | ||
214 | command: 'justifycenter', | ||
215 | toolbar: 'align,20' | ||
216 | } ); | ||
217 | editor.ui.addButton( 'JustifyRight', { | ||
218 | label: editor.lang.justify.right, | ||
219 | command: 'justifyright', | ||
220 | toolbar: 'align,30' | ||
221 | } ); | ||
222 | editor.ui.addButton( 'JustifyBlock', { | ||
223 | label: editor.lang.justify.block, | ||
224 | command: 'justifyblock', | ||
225 | toolbar: 'align,40' | ||
226 | } ); | ||
227 | } | ||
228 | |||
229 | editor.on( 'dirChanged', onDirChanged ); | ||
230 | } | ||
231 | } ); | ||
232 | } )(); | ||
233 | |||
234 | /** | ||
235 | * List of classes to use for aligning the contents. If it's `null`, no classes will be used | ||
236 | * and instead the corresponding CSS values will be used. | ||
237 | * | ||
238 | * The array should contain 4 members, in the following order: left, center, right, justify. | ||
239 | * | ||
240 | * // Use the classes 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' | ||
241 | * config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ]; | ||
242 | * | ||
243 | * @cfg {Array} [justifyClasses=null] | ||
244 | * @member CKEDITOR.config | ||
245 | */ | ||