]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/plugins/justify/plugin.js
21b9221090f5f8e55f74a2e4d7e5ee44df1aaad5
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 * @fileOverview Justify commands.
11 function getAlignment( element
, useComputedState
) {
12 useComputedState
= useComputedState
=== undefined || useComputedState
;
15 if ( useComputedState
)
16 align
= element
.getComputedStyle( 'text-align' );
18 while ( !element
.hasAttribute
|| !( element
.hasAttribute( 'align' ) || element
.getStyle( 'text-align' ) ) ) {
19 var parent
= element
.getParent();
24 align
= element
.getStyle( 'text-align' ) || element
.getAttribute( 'align' ) || '';
27 // Sometimes computed values doesn't tell.
28 align
&& ( align
= align
.replace( /(?:-(?:moz|webkit)-)?(?:start|auto)/i, '' ) );
30 !align
&& useComputedState
&& ( align
= element
.getComputedStyle( 'direction' ) == 'rtl' ? 'right' : 'left' );
35 function justifyCommand( editor
, name
, value
) {
40 var classes
= editor
.config
.justifyClasses
,
41 blockTag
= editor
.config
.enterMode
== CKEDITOR
.ENTER_P
? 'p' : 'div';
46 this.cssClassName
= classes
[ 0 ];
49 this.cssClassName
= classes
[ 1 ];
52 this.cssClassName
= classes
[ 2 ];
55 this.cssClassName
= classes
[ 3 ];
59 this.cssClassRegex
= new RegExp( '(?:^|\\s+)(?:' + classes
.join( '|' ) + ')(?=$|\\s)' );
60 this.requiredContent
= blockTag
+ '(' + this.cssClassName
+ ')';
63 this.requiredContent
= blockTag
+ '{text-align}';
66 this.allowedContent
= {
67 'caption div h1 h2 h3 h4 h5 h6 p pre td th li': {
68 // Do not add elements, but only text-align style if element is validated by other rule.
70 styles: this.cssClassName
? null : 'text-align',
71 classes: this.cssClassName
|| null
75 // In enter mode BR we need to allow here for div, because when non other
76 // feature allows div justify is the only plugin that uses it.
77 if ( editor
.config
.enterMode
== CKEDITOR
.ENTER_BR
)
78 this.allowedContent
.div
= true;
81 function onDirChanged( e
) {
82 var editor
= e
.editor
;
84 var range
= editor
.createRange();
85 range
.setStartBefore( e
.data
.node
);
86 range
.setEndAfter( e
.data
.node
);
88 var walker
= new CKEDITOR
.dom
.walker( range
),
91 while ( ( node
= walker
.next() ) ) {
92 if ( node
.type
== CKEDITOR
.NODE_ELEMENT
) {
93 // A child with the defined dir is to be ignored.
94 if ( !node
.equals( e
.data
.node
) && node
.getDirection() ) {
95 range
.setStartAfter( node
);
96 walker
= new CKEDITOR
.dom
.walker( range
);
100 // Switch the alignment.
101 var classes
= editor
.config
.justifyClasses
;
103 // The left align class.
104 if ( node
.hasClass( classes
[ 0 ] ) ) {
105 node
.removeClass( classes
[ 0 ] );
106 node
.addClass( classes
[ 2 ] );
108 // The right align class.
109 else if ( node
.hasClass( classes
[ 2 ] ) ) {
110 node
.removeClass( classes
[ 2 ] );
111 node
.addClass( classes
[ 0 ] );
115 // Always switch CSS margins.
116 var style
= 'text-align';
117 var align
= node
.getStyle( style
);
119 if ( align
== 'left' )
120 node
.setStyle( style
, 'right' );
121 else if ( align
== 'right' )
122 node
.setStyle( style
, 'left' );
127 justifyCommand
.prototype = {
128 exec: function( editor
) {
129 var selection
= editor
.getSelection(),
130 enterMode
= editor
.config
.enterMode
;
135 var bookmarks
= selection
.createBookmarks(),
136 ranges
= selection
.getRanges();
138 var cssClassName
= this.cssClassName
,
141 var useComputedState
= editor
.config
.useComputedState
;
142 useComputedState
= useComputedState
=== undefined || useComputedState
;
144 for ( var i
= ranges
.length
- 1; i
>= 0; i
-- ) {
145 iterator
= ranges
[ i
].createIterator();
146 iterator
.enlargeBr
= enterMode
!= CKEDITOR
.ENTER_BR
;
148 while ( ( block
= iterator
.getNextParagraph( enterMode
== CKEDITOR
.ENTER_P
? 'p' : 'div' ) ) ) {
149 if ( block
.isReadOnly() )
152 // Check if style or class might be applied to currently processed element (#455).
153 var tag
= block
.getName(),
154 isAllowedTextAlign
, isAllowedCssClass
;
156 isAllowedTextAlign
= editor
.activeFilter
.check( tag
+ '{text-align}' );
157 isAllowedCssClass
= editor
.activeFilter
.check( tag
+ '(' + cssClassName
+ ')' );
159 if ( !isAllowedCssClass
&& !isAllowedTextAlign
) {
163 block
.removeAttribute( 'align' );
164 block
.removeStyle( 'text-align' );
166 // Remove any of the alignment classes from the className.
167 var className
= cssClassName
&& ( block
.$.className
= CKEDITOR
.tools
.ltrim( block
.$.className
.replace( this.cssClassRegex
, '' ) ) );
169 var apply
= ( this.state
== CKEDITOR
.TRISTATE_OFF
) && ( !useComputedState
|| ( getAlignment( block
, true ) != this.value
) );
171 if ( cssClassName
&& isAllowedCssClass
) {
172 // Append the desired class name.
174 block
.addClass( cssClassName
);
175 else if ( !className
)
176 block
.removeAttribute( 'class' );
177 } else if ( apply
&& isAllowedTextAlign
) {
178 block
.setStyle( 'text-align', this.value
);
185 editor
.forceNextSelectionCheck();
186 selection
.selectBookmarks( bookmarks
);
189 refresh: function( editor
, path
) {
190 var firstBlock
= path
.block
|| path
.blockLimit
,
191 name
= firstBlock
.getName(),
192 isEditable
= firstBlock
.equals( editor
.editable() ),
193 isStylable
= this.cssClassName
? editor
.activeFilter
.check( name
+ '(' + this.cssClassName
+ ')' ) :
194 editor
.activeFilter
.check( name
+ '{text-align}' );
197 // 1. Check if we are directly in editbale. Justification should be always allowed, and not highlighted.
198 // Checking path.elements.length is required to filter out situation `body > ul` where ul is selected and path.blockLimit returns editable.
199 // 2. Check if current element can have applied specific class.
200 // 3. Check if current element can have applied text-align style.
201 if ( isEditable
&& path
.elements
.length
=== 1 ) {
202 this.setState( CKEDITOR
.TRISTATE_OFF
);
203 } else if ( !isEditable
&& isStylable
) {
204 // 2 & 3 in one condition.
205 this.setState( getAlignment( firstBlock
, this.editor
.config
.useComputedState
) == this.value
? CKEDITOR
.TRISTATE_ON : CKEDITOR
.TRISTATE_OFF
);
207 this.setState( CKEDITOR
.TRISTATE_DISABLED
);
212 CKEDITOR
.plugins
.add( 'justify', {
213 // jscs:disable maximumLineLength
214 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%
215 // jscs:enable maximumLineLength
216 icons: 'justifyblock,justifycenter,justifyleft,justifyright', // %REMOVE_LINE_CORE%
217 hidpi: true, // %REMOVE_LINE_CORE%
218 init: function( editor
) {
219 if ( editor
.blockless
)
222 var left
= new justifyCommand( editor
, 'justifyleft', 'left' ),
223 center
= new justifyCommand( editor
, 'justifycenter', 'center' ),
224 right
= new justifyCommand( editor
, 'justifyright', 'right' ),
225 justify
= new justifyCommand( editor
, 'justifyblock', 'justify' );
227 editor
.addCommand( 'justifyleft', left
);
228 editor
.addCommand( 'justifycenter', center
);
229 editor
.addCommand( 'justifyright', right
);
230 editor
.addCommand( 'justifyblock', justify
);
232 if ( editor
.ui
.addButton
) {
233 editor
.ui
.addButton( 'JustifyLeft', {
234 label: editor
.lang
.justify
.left
,
235 command: 'justifyleft',
238 editor
.ui
.addButton( 'JustifyCenter', {
239 label: editor
.lang
.justify
.center
,
240 command: 'justifycenter',
243 editor
.ui
.addButton( 'JustifyRight', {
244 label: editor
.lang
.justify
.right
,
245 command: 'justifyright',
248 editor
.ui
.addButton( 'JustifyBlock', {
249 label: editor
.lang
.justify
.block
,
250 command: 'justifyblock',
254 editor
.on( 'dirChanged', onDirChanged
);
260 * List of classes to use for aligning the contents. If it's `null`, no classes will be used
261 * and instead the corresponding CSS values will be used.
263 * The array should contain 4 members, in the following order: left, center, right, justify.
265 * // Use the classes 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify'
266 * config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ];
268 * @cfg {Array} [justifyClasses=null]
269 * @member CKEDITOR.config