_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         justifyCommand.prototype = {\r
  86                 exec : function( editor )\r
  87                 {\r
  88                         var selection = editor.getSelection(),\r
  89                                 enterMode = editor.config.enterMode;\r
  90 \r
  91                         if ( !selection )\r
  92                                 return;\r
  93 \r
  94                         var bookmarks = selection.createBookmarks(),\r
  95                                 ranges = selection.getRanges( true );\r
  96 \r
  97                         var cssClassName = this.cssClassName,\r
  98                                 iterator,\r
  99                                 block;\r
 100 \r
 101                         var useComputedState = editor.config.useComputedState;\r
 102                         useComputedState = useComputedState === undefined || useComputedState;\r
 103 \r
 104                         for ( var i = ranges.length - 1 ; i >= 0 ; i-- )\r
 105                         {\r
 106                                 iterator = ranges[ i ].createIterator();\r
 107                                 iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR;\r
 108 \r
 109                                 while ( ( block = iterator.getNextParagraph() ) )\r
 110                                 {\r
 111                                         block.removeAttribute( 'align' );\r
 112                                         block.removeStyle( 'text-align' );\r
 113 \r
 114                                         // Remove any of the alignment classes from the className.\r
 115                                         var className = cssClassName && ( block.$.className =\r
 116                                                 CKEDITOR.tools.ltrim( block.$.className.replace( this.cssClassRegex, '' ) ) );\r
 117 \r
 118                                         var apply =\r
 119                                                 ( this.state == CKEDITOR.TRISTATE_OFF ) &&\r
 120                                                 ( !useComputedState || ( getAlignment( block, true ) != this.value ) );\r
 121 \r
 122                                         if ( cssClassName )\r
 123                                         {\r
 124                                                 // Append the desired class name.\r
 125                                                 if ( apply )\r
 126                                                         block.addClass( cssClassName );\r
 127                                                 else if ( !className )\r
 128                                                         block.removeAttribute( 'class' );\r
 129                                         }\r
 130                                         else if ( apply )\r
 131                                                 block.setStyle( 'text-align', this.value );\r
 132                                 }\r
 133 \r
 134                         }\r
 135 \r
 136                         editor.focus();\r
 137                         editor.forceNextSelectionCheck();\r
 138                         selection.selectBookmarks( bookmarks );\r
 139                 }\r
 140         };\r
 141 \r
 142         CKEDITOR.plugins.add( 'justify',\r
 143         {\r
 144                 init : function( editor )\r
 145                 {\r
 146                         var left = new justifyCommand( editor, 'justifyleft', 'left' ),\r
 147                                 center = new justifyCommand( editor, 'justifycenter', 'center' ),\r
 148                                 right = new justifyCommand( editor, 'justifyright', 'right' ),\r
 149                                 justify = new justifyCommand( editor, 'justifyblock', 'justify' );\r
 150 \r
 151                         editor.addCommand( 'justifyleft', left );\r
 152                         editor.addCommand( 'justifycenter', center );\r
 153                         editor.addCommand( 'justifyright', right );\r
 154                         editor.addCommand( 'justifyblock', justify );\r
 155 \r
 156                         editor.ui.addButton( 'JustifyLeft',\r
 157                                 {\r
 158                                         label : editor.lang.justify.left,\r
 159                                         command : 'justifyleft'\r
 160                                 } );\r
 161                         editor.ui.addButton( 'JustifyCenter',\r
 162                                 {\r
 163                                         label : editor.lang.justify.center,\r
 164                                         command : 'justifycenter'\r
 165                                 } );\r
 166                         editor.ui.addButton( 'JustifyRight',\r
 167                                 {\r
 168                                         label : editor.lang.justify.right,\r
 169                                         command : 'justifyright'\r
 170                                 } );\r
 171                         editor.ui.addButton( 'JustifyBlock',\r
 172                                 {\r
 173                                         label : editor.lang.justify.block,\r
 174                                         command : 'justifyblock'\r
 175                                 } );\r
 176 \r
 177                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, left ) );\r
 178                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, right ) );\r
 179                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, center ) );\r
 180                         editor.on( 'selectionChange', CKEDITOR.tools.bind( onSelectionChange, justify ) );\r
 181                 },\r
 182 \r
 183                 requires : [ 'domiterator' ]\r
 184         });\r
 185 })();\r
 186 \r
 187 CKEDITOR.tools.extend( CKEDITOR.config,\r
 188         {\r
 189                 justifyClasses : null\r
 190         } );\r