_source/plugins/bidi/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 (function()\r
   7 {\r
   8         var guardElements = { table:1, ul:1, ol:1, blockquote:1, div:1 },\r
   9                 directSelectionGuardElements = {},\r
  10                 // All guard elements which can have a direction applied on them.\r
  11                 allGuardElements = {};\r
  12         CKEDITOR.tools.extend( directSelectionGuardElements, guardElements, { tr:1, p:1, div:1, li:1 } );\r
  13         CKEDITOR.tools.extend( allGuardElements, directSelectionGuardElements, { td:1 } );\r
  14 \r
  15         function onSelectionChange( e )\r
  16         {\r
  17                 setToolbarStates( e );\r
  18                 handleMixedDirContent( e );\r
  19         }\r
  20 \r
  21         function setToolbarStates( evt )\r
  22         {\r
  23                 var editor = evt.editor,\r
  24                         path = evt.data.path;\r
  25 \r
  26                 if ( editor.readOnly )\r
  27                         return;\r
  28 \r
  29                 var useComputedState = editor.config.useComputedState,\r
  30                         selectedElement;\r
  31 \r
  32                 useComputedState = useComputedState === undefined || useComputedState;\r
  33 \r
  34                 // We can use computedState provided by the browser or traverse parents manually.\r
  35                 if ( !useComputedState )\r
  36                         selectedElement = getElementForDirection( path.lastElement );\r
  37 \r
  38                 selectedElement = selectedElement || path.block || path.blockLimit;\r
  39 \r
  40                 // If we're having BODY here, user probably done CTRL+A, let's try to get the enclosed node, if any.\r
  41                 selectedElement.is( 'body' ) &&\r
  42                         ( selectedElement = editor.getSelection().getRanges()[ 0 ].getEnclosedNode() );\r
  43 \r
  44                 if ( !selectedElement )\r
  45                         return;\r
  46 \r
  47                 var selectionDir = useComputedState ?\r
  48                         selectedElement.getComputedStyle( 'direction' ) :\r
  49                         selectedElement.getStyle( 'direction' ) || selectedElement.getAttribute( 'dir' );\r
  50 \r
  51                 editor.getCommand( 'bidirtl' ).setState( selectionDir == 'rtl' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );\r
  52                 editor.getCommand( 'bidiltr' ).setState( selectionDir == 'ltr' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );\r
  53         }\r
  54 \r
  55         function handleMixedDirContent( evt )\r
  56         {\r
  57                 var editor = evt.editor,\r
  58                         directionNode = evt.data.path.block || evt.data.path.blockLimit;\r
  59 \r
  60                 editor.fire( 'contentDirChanged', directionNode ? directionNode.getComputedStyle( 'direction' ) : editor.lang.dir );\r
  61         }\r
  62 \r
  63         /**\r
  64          * Returns element with possibility of applying the direction.\r
  65          * @param node\r
  66          */\r
  67         function getElementForDirection( node )\r
  68         {\r
  69                 while ( node && !( node.getName() in allGuardElements || node.is( 'body' ) ) )\r
  70                 {\r
  71                         var parent = node.getParent();\r
  72                         if ( !parent )\r
  73                                 break;\r
  74 \r
  75                         node = parent;\r
  76                 }\r
  77 \r
  78                 return node;\r
  79         }\r
  80 \r
  81         function switchDir( element, dir, editor, database )\r
  82         {\r
  83                 if ( element.isReadOnly() )\r
  84                         return;\r
  85 \r
  86                 // Mark this element as processed by switchDir.\r
  87                 CKEDITOR.dom.element.setMarker( database, element, 'bidi_processed', 1 );\r
  88 \r
  89                 // Check whether one of the ancestors has already been styled.\r
  90                 var parent = element;\r
  91                 while ( ( parent = parent.getParent() ) && !parent.is( 'body' ) )\r
  92                 {\r
  93                         if ( parent.getCustomData( 'bidi_processed' ) )\r
  94                         {\r
  95                                 // Ancestor style must dominate.\r
  96                                 element.removeStyle( 'direction' );\r
  97                                 element.removeAttribute( 'dir' );\r
  98                                 return;\r
  99                         }\r
 100                 }\r
 101 \r
 102                 var useComputedState = ( 'useComputedState' in editor.config ) ? editor.config.useComputedState : 1;\r
 103 \r
 104                 var elementDir = useComputedState ? element.getComputedStyle( 'direction' )\r
 105                         : element.getStyle( 'direction' ) || element.hasAttribute( 'dir' );\r
 106 \r
 107                 // Stop if direction is same as present.\r
 108                 if ( elementDir == dir )\r
 109                         return;\r
 110 \r
 111                 // Clear direction on this element.\r
 112                 element.removeStyle( 'direction' );\r
 113 \r
 114                 // Do the second check when computed state is ON, to check\r
 115                 // if we need to apply explicit direction on this element.\r
 116                 if ( useComputedState )\r
 117                 {\r
 118                         element.removeAttribute( 'dir' );\r
 119                         if ( dir != element.getComputedStyle( 'direction' ) )\r
 120                                 element.setAttribute( 'dir', dir );\r
 121                 }\r
 122                 else\r
 123                         // Set new direction for this element.\r
 124                         element.setAttribute( 'dir', dir );\r
 125 \r
 126                 editor.forceNextSelectionCheck();\r
 127 \r
 128                 return;\r
 129         }\r
 130 \r
 131         function getFullySelected( range, elements, enterMode )\r
 132         {\r
 133                 var ancestor = range.getCommonAncestor( false, true );\r
 134 \r
 135                 range = range.clone();\r
 136                 range.enlarge( enterMode == CKEDITOR.ENTER_BR ?\r
 137                                 CKEDITOR.ENLARGE_LIST_ITEM_CONTENTS\r
 138                                 : CKEDITOR.ENLARGE_BLOCK_CONTENTS );\r
 139 \r
 140                 if ( range.checkBoundaryOfElement( ancestor, CKEDITOR.START )\r
 141                                 && range.checkBoundaryOfElement( ancestor, CKEDITOR.END ) )\r
 142                 {\r
 143                         var parent;\r
 144                         while ( ancestor && ancestor.type == CKEDITOR.NODE_ELEMENT\r
 145                                         && ( parent = ancestor.getParent() )\r
 146                                         && parent.getChildCount() == 1\r
 147                                         && !( ancestor.getName() in elements ) )\r
 148                                 ancestor = parent;\r
 149 \r
 150                         return ancestor.type == CKEDITOR.NODE_ELEMENT\r
 151                                         && ( ancestor.getName() in elements )\r
 152                                         && ancestor;\r
 153                 }\r
 154         }\r
 155 \r
 156         function bidiCommand( dir )\r
 157         {\r
 158                 return function( editor )\r
 159                 {\r
 160                         var selection = editor.getSelection(),\r
 161                                 enterMode = editor.config.enterMode,\r
 162                                 ranges = selection.getRanges();\r
 163 \r
 164                         if ( ranges && ranges.length )\r
 165                         {\r
 166                                 var database = {};\r
 167 \r
 168                                 // Creates bookmarks for selection, as we may split some blocks.\r
 169                                 var bookmarks = selection.createBookmarks();\r
 170 \r
 171                                 var rangeIterator = ranges.createIterator(),\r
 172                                         range,\r
 173                                         i = 0;\r
 174 \r
 175                                 while ( ( range = rangeIterator.getNextRange( 1 ) ) )\r
 176                                 {\r
 177                                         // Apply do directly selected elements from guardElements.\r
 178                                         var selectedElement = range.getEnclosedNode();\r
 179 \r
 180                                         // If this is not our element of interest, apply to fully selected elements from guardElements.\r
 181                                         if ( !selectedElement || selectedElement\r
 182                                                         && !( selectedElement.type == CKEDITOR.NODE_ELEMENT && selectedElement.getName() in directSelectionGuardElements )\r
 183                                                 )\r
 184                                                 selectedElement = getFullySelected( range, guardElements, enterMode );\r
 185 \r
 186                                         selectedElement && switchDir( selectedElement, dir, editor, database );\r
 187 \r
 188                                         var iterator,\r
 189                                                 block;\r
 190 \r
 191                                         // Walker searching for guardElements.\r
 192                                         var walker = new CKEDITOR.dom.walker( range );\r
 193 \r
 194                                         var start = bookmarks[ i ].startNode,\r
 195                                                 end = bookmarks[ i++ ].endNode;\r
 196 \r
 197                                         walker.evaluator = function( node )\r
 198                                         {\r
 199                                                 return !! ( node.type == CKEDITOR.NODE_ELEMENT\r
 200                                                                 && node.getName() in guardElements\r
 201                                                                 && !( node.getName() == ( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' )\r
 202                                                                         && node.getParent().type == CKEDITOR.NODE_ELEMENT\r
 203                                                                         && node.getParent().getName() == 'blockquote' )\r
 204                                                                 // Element must be fully included in the range as well. (#6485).\r
 205                                                                 && node.getPosition( start ) & CKEDITOR.POSITION_FOLLOWING\r
 206                                                                 && ( ( node.getPosition( end ) & CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_CONTAINS ) == CKEDITOR.POSITION_PRECEDING ) );\r
 207                                         };\r
 208 \r
 209                                         while ( ( block = walker.next() ) )\r
 210                                                 switchDir( block, dir, editor, database );\r
 211 \r
 212                                         iterator = range.createIterator();\r
 213                                         iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR;\r
 214 \r
 215                                         while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) )\r
 216                                                 switchDir( block, dir, editor, database );\r
 217                                         }\r
 218 \r
 219                                 CKEDITOR.dom.element.clearAllMarkers( database );\r
 220 \r
 221                                 editor.forceNextSelectionCheck();\r
 222                                 // Restore selection position.\r
 223                                 selection.selectBookmarks( bookmarks );\r
 224 \r
 225                                 editor.focus();\r
 226                         }\r
 227                 };\r
 228         }\r
 229 \r
 230         CKEDITOR.plugins.add( 'bidi',\r
 231         {\r
 232                 requires : [ 'styles', 'button' ],\r
 233 \r
 234                 init : function( editor )\r
 235                 {\r
 236                         // All buttons use the same code to register. So, to avoid\r
 237                         // duplications, let's use this tool function.\r
 238                         var addButtonCommand = function( buttonName, buttonLabel, commandName, commandExec )\r
 239                         {\r
 240                                 editor.addCommand( commandName, new CKEDITOR.command( editor, { exec : commandExec }) );\r
 241 \r
 242                                 editor.ui.addButton( buttonName,\r
 243                                         {\r
 244                                                 label : buttonLabel,\r
 245                                                 command : commandName\r
 246                                         });\r
 247                         };\r
 248 \r
 249                         var lang = editor.lang.bidi;\r
 250 \r
 251                         addButtonCommand( 'BidiLtr', lang.ltr, 'bidiltr', bidiCommand( 'ltr' ) );\r
 252                         addButtonCommand( 'BidiRtl', lang.rtl, 'bidirtl', bidiCommand( 'rtl' ) );\r
 253 \r
 254                         editor.on( 'selectionChange', onSelectionChange );\r
 255                         editor.on( 'contentDom', function()\r
 256                         {\r
 257                                 editor.document.on( 'dirChanged', function( evt )\r
 258                                 {\r
 259                                         editor.fire( 'dirChanged',\r
 260                                                 {\r
 261                                                         node : evt.data,\r
 262                                                         dir : evt.data.getDirection( 1 )\r
 263                                                 } );\r
 264                                 });\r
 265                         });\r
 266                 }\r
 267         });\r
 268 \r
 269         // If the element direction changed, we need to switch the margins of\r
 270         // the element and all its children, so it will get really reflected\r
 271         // like a mirror. (#5910)\r
 272         function isOffline( el )\r
 273         {\r
 274                 var html = el.getDocument().getBody().getParent();\r
 275                 while ( el )\r
 276                 {\r
 277                         if ( el.equals( html ) )\r
 278                                 return false;\r
 279                         el = el.getParent();\r
 280                 }\r
 281                 return true;\r
 282         }\r
 283         function dirChangeNotifier( org )\r
 284         {\r
 285                 var isAttribute = org == elementProto.setAttribute,\r
 286                         isRemoveAttribute = org == elementProto.removeAttribute,\r
 287                         dirStyleRegexp = /\bdirection\s*:\s*(.*?)\s*(:?$|;)/;\r
 288 \r
 289                 return function( name, val )\r
 290                 {\r
 291                         if ( !this.getDocument().equals( CKEDITOR.document ) )\r
 292                         {\r
 293                                 var orgDir;\r
 294                                 if ( ( name == ( isAttribute || isRemoveAttribute ? 'dir' : 'direction' ) ||\r
 295                                          name == 'style' && ( isRemoveAttribute || dirStyleRegexp.test( val ) ) ) && !isOffline( this ) )\r
 296                                 {\r
 297                                         orgDir = this.getDirection( 1 );\r
 298                                         var retval = org.apply( this, arguments );\r
 299                                         if ( orgDir != this.getDirection( 1 ) )\r
 300                                         {\r
 301                                                 this.getDocument().fire( 'dirChanged', this );\r
 302                                                 return retval;\r
 303                                         }\r
 304                                 }\r
 305                         }\r
 306 \r
 307                         return org.apply( this, arguments );\r
 308                 };\r
 309         }\r
 310 \r
 311         var elementProto = CKEDITOR.dom.element.prototype,\r
 312                 methods = [ 'setStyle', 'removeStyle', 'setAttribute', 'removeAttribute' ];\r
 313         for ( var i = 0; i < methods.length; i++ )\r
 314                 elementProto[ methods[ i ] ] = CKEDITOR.tools.override( elementProto[ methods [ i ] ], dirChangeNotifier );\r
 315 })();\r
 316 \r
 317 /**\r
 318  * Fired when the language direction of an element is changed\r
 319  * @name CKEDITOR.editor#dirChanged\r
 320  * @event\r
 321  * @param {CKEDITOR.editor} editor This editor instance.\r
 322  * @param {Object} eventData.node The element that is being changed.\r
 323  * @param {String} eventData.dir The new direction.\r
 324  */\r
 325 \r
 326 /**\r
 327  * Fired when the language direction in the specific cursor position is changed\r
 328  * @name CKEDITOR.editor#contentDirChanged\r
 329  * @event\r
 330  * @param {String} eventData The direction in the current position.\r
 331  */\r