_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 );\r
  91                 range.setEndAfter( e.data );\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.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 style = 'text-align';\r
 110                                 var align = node.getStyle( style );\r
 111 \r
 112                                 if ( align == 'left' )\r
 113                                         node.setStyle( style, 'right' );\r
 114                                 else if ( align == 'right' )\r
 115                                         node.setStyle( style, 'left' );\r
 116                         }\r
 117                 }\r
 118         }\r
 119 \r
 120         justifyCommand.prototype = {\r
 121                 exec : function( editor )\r
 122                 {\r
 123                         var selection = editor.getSelection(),\r
 124                                 enterMode = editor.config.enterMode;\r
 125 \r
 126                         if ( !selection )\r
 127                                 return;\r
 128 \r
 129                         var bookmarks = selection.createBookmarks(),\r
 130                                 ranges = selection.getRanges( true );\r
 131 \r
 132                         var cssClassName = this.cssClassName,\r
 133                                 iterator,\r
 134                                 block;\r
 135 \r
 136                         var useComputedState = editor.config.useComputedState;\r
 137                         useComputedState = useComputedState === undefined || useComputedState;\r
 138 \r
 139                         for ( var i = ranges.length - 1 ; i >= 0 ; i-- )\r
 140                         {\r
 141                                 iterator = ranges[ i ].createIterator();\r
 142                                 iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR;\r
 143 \r
 144                                 while ( ( block = iterator.getNextParagraph() ) )\r
 145                                 {\r
 146                                         block.removeAttribute( 'align' );\r
 147                                         block.removeStyle( 'text-align' );\r
 148 \r
 149                                         // Remove any of the alignment classes from the className.\r
 150                                         var className = cssClassName && ( block.$.className =\r
 151                                                 CKEDITOR.tools.ltrim( block.$.className.replace( this.cssClassRegex, '' ) ) );\r
 152 \r
 153                                         var apply =\r
 154                                                 ( this.state == CKEDITOR.TRISTATE_OFF ) &&\r
 155                                                 ( !useComputedState || ( getAlignment( block, true ) != this.value ) );\r
 156 \r
 157                                         if ( cssClassName )\r
 158                                         {\r
 159                                                 // Append the desired class name.\r
 160                                                 if ( apply )\r
 161                                                         block.addClass( cssClassName );\r
 162                                                 else if ( !className )\r
 163                                                         block.removeAttribute( 'class' );\r
 164                                         }\r
 165                                         else if ( apply )\r
 166                                                 block.setStyle( 'text-align', this.value );\r
 167                                 }\r
 168 \r
 169                         }\r
 170 \r
 171                         editor.focus();\r
 172                         editor.forceNextSelectionCheck();\r
 173                         selection.selectBookmarks( bookmarks );\r
 174                 }\r
 175         };\r
 176 \r
 177         CKEDITOR.plugins.add( 'justify',\r
 178         {\r
 179                 init : function( editor )\r
 180                 {\r
 181                         var left = new justifyCommand( editor, 'justifyleft', 'left' ),\r
 182                                 center = new justifyCommand( editor, 'justifycenter', 'center' ),\r
 183                                 right = new justifyCommand( editor, 'justifyright', 'right' ),\r
 184                                 justify = new justifyCommand( editor, 'justifyblock', 'justify' );\r
 185 \r
 186                         editor.addCommand( 'justifyleft', left );\r
 187                         editor.addCommand( 'justifycenter', center );\r
 188                         editor.addCommand( 'justifyright', right );\r
 189                         editor.addCommand( 'justifyblock', justify );\r
 190 \r
 191                         editor.ui.addButton( 'JustifyLeft',\r
 192                                 {\r
 193                                         label : editor.lang.justify.left,\r
 194                                         command : 'justifyleft'\r
 195                                 } );\r
 196                         editor.ui.addButton( 'JustifyCenter',\r
 197                                 {\r
 198                                         label : editor.lang.justify.center,\r
 199                                         command : 'justifycenter'\r
 200                                 } );\r
 201                         editor.ui.addButton( 'JustifyRight',\r
 202                                 {\r
 203                                         label : editor.lang.justify.right,\r
 204                                         command : 'justifyright'\r
 205                                 } );\r
 206                         editor.ui.addButton( 'JustifyBlock',\r
 207                                 {\r
 208                                         label : editor.lang.justify.block,\r
 209                                         command : 'justifyblock'\r
 210                                 } );\r
 211 \r
 212                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, left ) );\r
 213                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, right ) );\r
 214                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, center ) );\r
 215                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, justify ) );\r
 216                         editor.on( 'dirChanged', onDirChanged );\r
 217                 },\r
 218 \r
 219                 requires : [ 'domiterator' ]\r
 220         });\r
 221 })();\r