plugin.js 9.9 KB

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