]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blob - sources/plugins/justify/plugin.js
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
) {
41 var classes
= editor
.config
.justifyClasses
,
42 blockTag
= editor
.config
.enterMode
== CKEDITOR
.ENTER_P
? 'p' : 'div';
47 this.cssClassName
= classes
[ 0 ];
50 this.cssClassName
= classes
[ 1 ];
53 this.cssClassName
= classes
[ 2 ];
56 this.cssClassName
= classes
[ 3 ];
60 this.cssClassRegex
= new RegExp( '(?:^|\\s+)(?:' + classes
.join( '|' ) + ')(?=$|\\s)' );
61 this.requiredContent
= blockTag
+ '(' + this.cssClassName
+ ')';
64 this.requiredContent
= blockTag
+ '{text-align}';
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.
71 styles: this.cssClassName
? null : 'text-align',
72 classes: this.cssClassName
|| null
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;
82 function onDirChanged( e
) {
83 var editor
= e
.editor
;
85 var range
= editor
.createRange();
86 range
.setStartBefore( e
.data
.node
);
87 range
.setEndAfter( e
.data
.node
);
89 var walker
= new CKEDITOR
.dom
.walker( range
),
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
);
101 // Switch the alignment.
102 var classes
= editor
.config
.justifyClasses
;
104 // The left align class.
105 if ( node
.hasClass( classes
[ 0 ] ) ) {
106 node
.removeClass( classes
[ 0 ] );
107 node
.addClass( classes
[ 2 ] );
109 // The right align class.
110 else if ( node
.hasClass( classes
[ 2 ] ) ) {
111 node
.removeClass( classes
[ 2 ] );
112 node
.addClass( classes
[ 0 ] );
116 // Always switch CSS margins.
117 var style
= 'text-align';
118 var align
= node
.getStyle( style
);
120 if ( align
== 'left' )
121 node
.setStyle( style
, 'right' );
122 else if ( align
== 'right' )
123 node
.setStyle( style
, 'left' );
128 justifyCommand
.prototype = {
129 exec: function( editor
) {
130 var selection
= editor
.getSelection(),
131 enterMode
= editor
.config
.enterMode
;
136 var bookmarks
= selection
.createBookmarks(),
137 ranges
= selection
.getRanges();
139 var cssClassName
= this.cssClassName
,
142 var useComputedState
= editor
.config
.useComputedState
;
143 useComputedState
= useComputedState
=== undefined || useComputedState
;
145 for ( var i
= ranges
.length
- 1; i
>= 0; i
-- ) {
146 iterator
= ranges
[ i
].createIterator();
147 iterator
.enlargeBr
= enterMode
!= CKEDITOR
.ENTER_BR
;
149 while ( ( block
= iterator
.getNextParagraph( enterMode
== CKEDITOR
.ENTER_P
? 'p' : 'div' ) ) ) {
150 if ( block
.isReadOnly() )
153 block
.removeAttribute( 'align' );
154 block
.removeStyle( 'text-align' );
156 // Remove any of the alignment classes from the className.
157 var className
= cssClassName
&& ( block
.$.className
= CKEDITOR
.tools
.ltrim( block
.$.className
.replace( this.cssClassRegex
, '' ) ) );
159 var apply
= ( this.state
== CKEDITOR
.TRISTATE_OFF
) && ( !useComputedState
|| ( getAlignment( block
, true ) != this.value
) );
161 if ( cssClassName
) {
162 // Append the desired class name.
164 block
.addClass( cssClassName
);
165 else if ( !className
)
166 block
.removeAttribute( 'class' );
167 } else if ( apply
) {
168 block
.setStyle( 'text-align', this.value
);
175 editor
.forceNextSelectionCheck();
176 selection
.selectBookmarks( bookmarks
);
179 refresh: function( editor
, path
) {
180 var firstBlock
= path
.block
|| path
.blockLimit
;
182 this.setState( firstBlock
.getName() != 'body' && getAlignment( firstBlock
, this.editor
.config
.useComputedState
) == this.value
? CKEDITOR
.TRISTATE_ON : CKEDITOR
.TRISTATE_OFF
);
186 CKEDITOR
.plugins
.add( 'justify', {
187 // jscs:disable maximumLineLength
188 lang: 'af,ar,az,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,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%
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
)
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' );
201 editor
.addCommand( 'justifyleft', left
);
202 editor
.addCommand( 'justifycenter', center
);
203 editor
.addCommand( 'justifyright', right
);
204 editor
.addCommand( 'justifyblock', justify
);
206 if ( editor
.ui
.addButton
) {
207 editor
.ui
.addButton( 'JustifyLeft', {
208 label: editor
.lang
.justify
.left
,
209 command: 'justifyleft',
212 editor
.ui
.addButton( 'JustifyCenter', {
213 label: editor
.lang
.justify
.center
,
214 command: 'justifycenter',
217 editor
.ui
.addButton( 'JustifyRight', {
218 label: editor
.lang
.justify
.right
,
219 command: 'justifyright',
222 editor
.ui
.addButton( 'JustifyBlock', {
223 label: editor
.lang
.justify
.block
,
224 command: 'justifyblock',
229 editor
.on( 'dirChanged', onDirChanged
);
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.
238 * The array should contain 4 members, in the following order: left, center, right, justify.
240 * // Use the classes 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify'
241 * config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ];
243 * @cfg {Array} [justifyClasses=null]
244 * @member CKEDITOR.config