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