_source/plugins/justify/plugin.js

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