sources/plugins/justify/plugin.js

   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  */