_source/plugins/bidi/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 (function()\r
   7 {\r
   8         var guardElements = { table:1, tbody: 1, ul:1, ol:1, blockquote:1, div:1, tr: 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                 var useComputedState = editor.config.useComputedState,\r
  26                         selectedElement;\r
  27 \r
  28                 useComputedState = useComputedState === undefined || useComputedState;\r
  29 \r
  30                 // We can use computedState provided by the browser or traverse parents manually.\r
  31                 if ( !useComputedState )\r
  32                         selectedElement = getElementForDirection( path.lastElement );\r
  33 \r
  34                 selectedElement = selectedElement || path.block || path.blockLimit;\r
  35 \r
  36                 if ( !selectedElement || selectedElement.getName() == 'body' )\r
  37                         return;\r
  38 \r
  39                 var selectionDir = useComputedState ?\r
  40                         selectedElement.getComputedStyle( 'direction' ) :\r
  41                         selectedElement.getStyle( 'direction' ) || selectedElement.getAttribute( 'dir' );\r
  42 \r
  43                 editor.getCommand( 'bidirtl' ).setState( selectionDir == 'rtl' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );\r
  44                 editor.getCommand( 'bidiltr' ).setState( selectionDir == 'ltr' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );\r
  45         }\r
  46 \r
  47         function handleMixedDirContent( evt )\r
  48         {\r
  49                 var editor = evt.editor,\r
  50                         chromeRoot = editor.container.getChild( 1 ),\r
  51                         directionNode = evt.data.path.block || evt.data.path.blockLimit;\r
  52 \r
  53                 if ( directionNode && editor.lang.dir != directionNode.getComputedStyle( 'direction' ) )\r
  54                         chromeRoot.addClass( 'cke_mixed_dir_content' );\r
  55                 else\r
  56                         chromeRoot.removeClass( 'cke_mixed_dir_content' );\r
  57         }\r
  58 \r
  59         /**\r
  60          * Returns element with possibility of applying the direction.\r
  61          * @param node\r
  62          */\r
  63         function getElementForDirection( node )\r
  64         {\r
  65                 while ( node && !( node.getName() in allGuardElements || node.is( 'body' ) ) )\r
  66                 {\r
  67                         var parent = node.getParent();\r
  68                         if ( !parent )\r
  69                                 break;\r
  70 \r
  71                         node = parent;\r
  72                 }\r
  73 \r
  74                 return node;\r
  75         }\r
  76 \r
  77         function switchDir( element, dir, editor, database )\r
  78         {\r
  79                 // Mark this element as processed by switchDir.\r
  80                 CKEDITOR.dom.element.setMarker( database, element, 'bidi_processed', 1 );\r
  81 \r
  82                 // Check whether one of the ancestors has already been styled.\r
  83                 var parent = element;\r
  84                 while ( ( parent = parent.getParent() ) && !parent.is( 'body' ) )\r
  85                 {\r
  86                         if ( parent.getCustomData( 'bidi_processed' ) )\r
  87                         {\r
  88                                 // Ancestor style must dominate.\r
  89                                 element.removeStyle( 'direction' );\r
  90                                 element.removeAttribute( 'dir' );\r
  91                                 return null;\r
  92                         }\r
  93                 }\r
  94 \r
  95                 var useComputedState = ( 'useComputedState' in editor.config ) ? editor.config.useComputedState : 1;\r
  96 \r
  97                 var elementDir = useComputedState ? element.getComputedStyle( 'direction' )\r
  98                         : element.getStyle( 'direction' ) || element.hasAttribute( 'dir' );\r
  99 \r
 100                 // Stop if direction is same as present.\r
 101                 if ( elementDir == dir )\r
 102                         return null;\r
 103 \r
 104                 // Reuse computedState if we already have it.\r
 105                 var dirBefore = useComputedState ? elementDir : element.getComputedStyle( 'direction' );\r
 106 \r
 107                 // Clear direction on this element.\r
 108                 element.removeStyle( 'direction' );\r
 109 \r
 110                 // Do the second check when computed state is ON, to check\r
 111                 // if we need to apply explicit direction on this element.\r
 112                 if ( useComputedState )\r
 113                 {\r
 114                         element.removeAttribute( 'dir' );\r
 115                         if ( dir != element.getComputedStyle( 'direction' ) )\r
 116                                 element.setAttribute( 'dir', dir );\r
 117                 }\r
 118                 else\r
 119                         // Set new direction for this element.\r
 120                         element.setAttribute( 'dir', dir );\r
 121 \r
 122                 // If the element direction changed, we need to switch the margins of\r
 123                 // the element and all its children, so it will get really reflected\r
 124                 // like a mirror. (#5910)\r
 125                 if ( dir != dirBefore )\r
 126                 {\r
 127                         editor.fire( 'dirChanged',\r
 128                                 {\r
 129                                         node : element,\r
 130                                         dir : dir\r
 131                                 } );\r
 132                 }\r
 133 \r
 134                 editor.forceNextSelectionCheck();\r
 135 \r
 136                 return null;\r
 137         }\r
 138 \r
 139         function getFullySelected( range, elements )\r
 140         {\r
 141                 var ancestor = range.getCommonAncestor( false, true );\r
 142 \r
 143                 range.enlarge( CKEDITOR.ENLARGE_BLOCK_CONTENTS );\r
 144 \r
 145                 if ( range.checkBoundaryOfElement( ancestor, CKEDITOR.START )\r
 146                                 && range.checkBoundaryOfElement( ancestor, CKEDITOR.END ) )\r
 147                 {\r
 148                         var parent;\r
 149                         while ( ancestor && ancestor.type == CKEDITOR.NODE_ELEMENT\r
 150                                         && ( parent = ancestor.getParent() )\r
 151                                         && parent.getChildCount() == 1\r
 152                                         && ( !( ancestor.getName() in elements ) || ( parent.getName() in elements ) )\r
 153                                         )\r
 154                                 ancestor = parent;\r
 155 \r
 156                         return ancestor.type == CKEDITOR.NODE_ELEMENT\r
 157                                         && ( ancestor.getName() in elements )\r
 158                                         && ancestor;\r
 159                 }\r
 160         }\r
 161 \r
 162         function bidiCommand( dir )\r
 163         {\r
 164                 return function( editor )\r
 165                 {\r
 166                         var selection = editor.getSelection(),\r
 167                                 enterMode = editor.config.enterMode,\r
 168                                 ranges = selection.getRanges();\r
 169 \r
 170                         if ( ranges && ranges.length )\r
 171                         {\r
 172                                 var database = {};\r
 173 \r
 174                                 // Creates bookmarks for selection, as we may split some blocks.\r
 175                                 var bookmarks = selection.createBookmarks();\r
 176 \r
 177                                 var rangeIterator = ranges.createIterator(),\r
 178                                         range,\r
 179                                         i = 0;\r
 180 \r
 181                                 while ( ( range = rangeIterator.getNextRange( 1 ) ) )\r
 182                                 {\r
 183                                         // Apply do directly selected elements from guardElements.\r
 184                                         var selectedElement = range.getEnclosedNode();\r
 185 \r
 186                                         // If this is not our element of interest, apply to fully selected elements from guardElements.\r
 187                                         if ( !selectedElement || selectedElement\r
 188                                                         && !( selectedElement.type == CKEDITOR.NODE_ELEMENT && selectedElement.getName() in directSelectionGuardElements )\r
 189                                                 )\r
 190                                                 selectedElement = getFullySelected( range, guardElements );\r
 191 \r
 192                                         if ( selectedElement && !selectedElement.isReadOnly() )\r
 193                                                 switchDir( selectedElement, dir, editor, database );\r
 194 \r
 195                                         var iterator,\r
 196                                                 block;\r
 197 \r
 198                                         // Walker searching for guardElements.\r
 199                                         var walker = new CKEDITOR.dom.walker( range );\r
 200 \r
 201                                         var start = bookmarks[ i ].startNode,\r
 202                                                 end = bookmarks[ i++ ].endNode;\r
 203 \r
 204                                         walker.evaluator = function( node )\r
 205                                         {\r
 206                                                 return !! ( node.type == CKEDITOR.NODE_ELEMENT\r
 207                                                                 && node.getName() in guardElements\r
 208                                                                 && !( node.getName() == ( enterMode == CKEDITOR.ENTER_P ) ? 'p' : 'div'\r
 209                                                                         && node.getParent().type == CKEDITOR.NODE_ELEMENT\r
 210                                                                         && node.getParent().getName() == 'blockquote' )\r
 211                                                                 // Element must be fully included in the range as well. (#6485).\r
 212                                                                 && node.getPosition( start ) & CKEDITOR.POSITION_FOLLOWING\r
 213                                                                 && ( ( node.getPosition( end ) & CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_CONTAINS ) == CKEDITOR.POSITION_PRECEDING ) );\r
 214                                         };\r
 215 \r
 216                                         while ( ( block = walker.next() ) )\r
 217                                                 switchDir( block, dir, editor, database );\r
 218 \r
 219                                         iterator = range.createIterator();\r
 220                                         iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR;\r
 221 \r
 222                                         while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) )\r
 223                                                 !block.isReadOnly() && switchDir( block, dir, editor, database );\r
 224                                 }\r
 225 \r
 226                                 CKEDITOR.dom.element.clearAllMarkers( database );\r
 227 \r
 228                                 editor.forceNextSelectionCheck();\r
 229                                 // Restore selection position.\r
 230                                 selection.selectBookmarks( bookmarks );\r
 231 \r
 232                                 editor.focus();\r
 233                         }\r
 234                 };\r
 235         }\r
 236 \r
 237         CKEDITOR.plugins.add( 'bidi',\r
 238         {\r
 239                 requires : [ 'styles', 'button' ],\r
 240 \r
 241                 init : function( editor )\r
 242                 {\r
 243                         // All buttons use the same code to register. So, to avoid\r
 244                         // duplications, let's use this tool function.\r
 245                         var addButtonCommand = function( buttonName, buttonLabel, commandName, commandExec )\r
 246                         {\r
 247                                 editor.addCommand( commandName, new CKEDITOR.command( editor, { exec : commandExec }) );\r
 248 \r
 249                                 editor.ui.addButton( buttonName,\r
 250                                         {\r
 251                                                 label : buttonLabel,\r
 252                                                 command : commandName\r
 253                                         });\r
 254                         };\r
 255 \r
 256                         var lang = editor.lang.bidi;\r
 257 \r
 258                         addButtonCommand( 'BidiLtr', lang.ltr, 'bidiltr', bidiCommand( 'ltr' ) );\r
 259                         addButtonCommand( 'BidiRtl', lang.rtl, 'bidirtl', bidiCommand( 'rtl' ) );\r
 260 \r
 261                         editor.on( 'selectionChange', onSelectionChange );\r
 262                 }\r
 263         });\r
 264 \r
 265 })();\r