sources/plugins/justify/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2017, 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                 var classes = editor.config.justifyClasses,
  41                         blockTag = editor.config.enterMode == CKEDITOR.ENTER_P ? 'p' : 'div';
  42
  43                 if ( classes ) {
  44                         switch ( value ) {
  45                                 case 'left':
  46                                         this.cssClassName = classes[ 0 ];
  47                                         break;
  48                                 case 'center':
  49                                         this.cssClassName = classes[ 1 ];
  50                                         break;
  51                                 case 'right':
  52                                         this.cssClassName = classes[ 2 ];
  53                                         break;
  54                                 case 'justify':
  55                                         this.cssClassName = classes[ 3 ];
  56                                         break;
  57                         }
  58
  59                         this.cssClassRegex = new RegExp( '(?:^|\\s+)(?:' + classes.join( '|' ) + ')(?=$|\\s)' );
  60                         this.requiredContent = blockTag + '(' + this.cssClassName + ')';
  61                 }
  62                 else {
  63                         this.requiredContent = blockTag + '{text-align}';
  64                 }
  65
  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.
  69                                 propertiesOnly: true,
  70                                 styles: this.cssClassName ? null : 'text-align',
  71                                 classes: this.cssClassName || null
  72                         }
  73                 };
  74
  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;
  79         }
  80
  81         function onDirChanged( e ) {
  82                 var editor = e.editor;
  83
  84                 var range = editor.createRange();
  85                 range.setStartBefore( e.data.node );
  86                 range.setEndAfter( e.data.node );
  87
  88                 var walker = new CKEDITOR.dom.walker( range ),
  89                         node;
  90
  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 );
  97                                         continue;
  98                                 }
  99
 100                                 // Switch the alignment.
 101                                 var classes = editor.config.justifyClasses;
 102                                 if ( classes ) {
 103                                         // The left align class.
 104                                         if ( node.hasClass( classes[ 0 ] ) ) {
 105                                                 node.removeClass( classes[ 0 ] );
 106                                                 node.addClass( classes[ 2 ] );
 107                                         }
 108                                         // The right align class.
 109                                         else if ( node.hasClass( classes[ 2 ] ) ) {
 110                                                 node.removeClass( classes[ 2 ] );
 111                                                 node.addClass( classes[ 0 ] );
 112                                         }
 113                                 }
 114
 115                                 // Always switch CSS margins.
 116                                 var style = 'text-align';
 117                                 var align = node.getStyle( style );
 118
 119                                 if ( align == 'left' )
 120                                         node.setStyle( style, 'right' );
 121                                 else if ( align == 'right' )
 122                                         node.setStyle( style, 'left' );
 123                         }
 124                 }
 125         }
 126
 127         justifyCommand.prototype = {
 128                 exec: function( editor ) {
 129                         var selection = editor.getSelection(),
 130                                 enterMode = editor.config.enterMode;
 131
 132                         if ( !selection )
 133                                 return;
 134
 135                         var bookmarks = selection.createBookmarks(),
 136                                 ranges = selection.getRanges();
 137
 138                         var cssClassName = this.cssClassName,
 139                                 iterator, block;
 140
 141                         var useComputedState = editor.config.useComputedState;
 142                         useComputedState = useComputedState === undefined || useComputedState;
 143
 144                         for ( var i = ranges.length - 1; i >= 0; i-- ) {
 145                                 iterator = ranges[ i ].createIterator();
 146                                 iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR;
 147
 148                                 while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) ) {
 149                                         if ( block.isReadOnly() )
 150                                                 continue;
 151
 152                                         // Check if style or class might be applied to currently processed element (#455).
 153                                         var tag = block.getName(),
 154                                                 isAllowedTextAlign, isAllowedCssClass;
 155
 156                                         isAllowedTextAlign = editor.activeFilter.check( tag + '{text-align}' );
 157                                         isAllowedCssClass = editor.activeFilter.check( tag + '(' + cssClassName + ')' );
 158
 159                                         if ( !isAllowedCssClass && !isAllowedTextAlign ) {
 160                                                 continue;
 161                                         }
 162
 163                                         block.removeAttribute( 'align' );
 164                                         block.removeStyle( 'text-align' );
 165
 166                                         // Remove any of the alignment classes from the className.
 167                                         var className = cssClassName && ( block.$.className = CKEDITOR.tools.ltrim( block.$.className.replace( this.cssClassRegex, '' ) ) );
 168
 169                                         var apply = ( this.state == CKEDITOR.TRISTATE_OFF ) && ( !useComputedState || ( getAlignment( block, true ) != this.value ) );
 170
 171                                         if ( cssClassName && isAllowedCssClass ) {
 172                                                 // Append the desired class name.
 173                                                 if ( apply )
 174                                                         block.addClass( cssClassName );
 175                                                 else if ( !className )
 176                                                         block.removeAttribute( 'class' );
 177                                         } else if ( apply && isAllowedTextAlign ) {
 178                                                 block.setStyle( 'text-align', this.value );
 179                                         }
 180                                 }
 181
 182                         }
 183
 184                         editor.focus();
 185                         editor.forceNextSelectionCheck();
 186                         selection.selectBookmarks( bookmarks );
 187                 },
 188
 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}' );
 195
 196                         // #455
 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 );
 206                         } else {
 207                                 this.setState( CKEDITOR.TRISTATE_DISABLED );
 208                         }
 209                 }
 210         };
 211
 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 )
 220                                 return;
 221
 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' );
 226
 227                         editor.addCommand( 'justifyleft', left );
 228                         editor.addCommand( 'justifycenter', center );
 229                         editor.addCommand( 'justifyright', right );
 230                         editor.addCommand( 'justifyblock', justify );
 231
 232                         if ( editor.ui.addButton ) {
 233                                 editor.ui.addButton( 'JustifyLeft', {
 234                                         label: editor.lang.justify.left,
 235                                         command: 'justifyleft',
 236                                         toolbar: 'align,10'
 237                                 } );
 238                                 editor.ui.addButton( 'JustifyCenter', {
 239                                         label: editor.lang.justify.center,
 240                                         command: 'justifycenter',
 241                                         toolbar: 'align,20'
 242                                 } );
 243                                 editor.ui.addButton( 'JustifyRight', {
 244                                         label: editor.lang.justify.right,
 245                                         command: 'justifyright',
 246                                         toolbar: 'align,30'
 247                                 } );
 248                                 editor.ui.addButton( 'JustifyBlock', {
 249                                         label: editor.lang.justify.block,
 250                                         command: 'justifyblock',
 251                                         toolbar: 'align,40'
 252                                 } );
 253                         }
 254                         editor.on( 'dirChanged', onDirChanged );
 255                 }
 256         } );
 257 } )();
 258
 259 /**
 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.
 262  *
 263  * The array should contain 4 members, in the following order: left, center, right, justify.
 264  *
 265  *              // Use the classes 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify'
 266  *              config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ];
 267  *
 268  * @cfg {Array} [justifyClasses=null]
 269  * @member CKEDITOR.config
 270  */