_source/plugins/justify/plugin.js

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