X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fbidi%2Fplugin.js;h=2233ee1881a54d462bbfa7c0ec1b80f2351f8810;hb=f0610347140239143439a511ee2bd48cb784f470;hp=c91af0a7957be17f96a0eacc903b96c7b697d408;hpb=e371ddf8abcb89013e20e6d0dd746adec344d0e5;p=ckeditor.git diff --git a/_source/plugins/bidi/plugin.js b/_source/plugins/bidi/plugin.js index c91af0a..2233ee1 100644 --- a/_source/plugins/bidi/plugin.js +++ b/_source/plugins/bidi/plugin.js @@ -1,116 +1,159 @@ /* -Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ (function() { - var guardElements = { table:1, ul:1, ol:1, blockquote:1, div:1 }; - var directSelectionGuardElements = {}; + var guardElements = { table:1, ul:1, ol:1, blockquote:1, div:1 }, + directSelectionGuardElements = {}, + // All guard elements which can have a direction applied on them. + allGuardElements = {}; CKEDITOR.tools.extend( directSelectionGuardElements, guardElements, { tr:1, p:1, div:1, li:1 } ); + CKEDITOR.tools.extend( allGuardElements, directSelectionGuardElements, { td:1 } ); - function onSelectionChange( evt ) + function onSelectionChange( e ) { - evt.editor.getCommand( 'bidirtl' ).setState( getState( evt.editor, evt.data.path, 'rtl' ) ); - evt.editor.getCommand( 'bidiltr' ).setState( getState( evt.editor, evt.data.path, 'ltr' ) ); + setToolbarStates( e ); + handleMixedDirContent( e ); } - function getState( editor, path, dir ) + function setToolbarStates( evt ) { + var editor = evt.editor, + path = evt.data.path; + + if ( editor.readOnly ) + return; + var useComputedState = editor.config.useComputedState, selectedElement; useComputedState = useComputedState === undefined || useComputedState; - if ( useComputedState ) - { - var selection = editor.getSelection(), - ranges = selection.getRanges(); + // We can use computedState provided by the browser or traverse parents manually. + if ( !useComputedState ) + selectedElement = getElementForDirection( path.lastElement ); - selectedElement = ranges && ranges[ 0 ].getEnclosedNode(); + selectedElement = selectedElement || path.block || path.blockLimit; - // If this is not our element of interest, apply to fully selected elements from guardElements. - if ( !selectedElement || selectedElement - && !( selectedElement.type == CKEDITOR.NODE_ELEMENT && selectedElement.getName() in directSelectionGuardElements ) - ) - selectedElement = getFullySelected( selection, guardElements ); + // If we're having BODY here, user probably done CTRL+A, let's try to get the enclosed node, if any. + if ( selectedElement.is( 'body' ) ) + { + var enclosedNode = editor.getSelection().getRanges()[ 0 ].getEnclosedNode(); + enclosedNode && enclosedNode.type == CKEDITOR.NODE_ELEMENT && ( selectedElement = enclosedNode ); } - selectedElement = selectedElement || path.block || path.blockLimit; - - if ( !selectedElement || selectedElement.getName() == 'body' ) - return CKEDITOR.TRISTATE_OFF; + if ( !selectedElement ) + return; - selectedElement = useComputedState ? + var selectionDir = useComputedState ? selectedElement.getComputedStyle( 'direction' ) : selectedElement.getStyle( 'direction' ) || selectedElement.getAttribute( 'dir' ); - return ( selectedElement == dir ) ? - CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF; + editor.getCommand( 'bidirtl' ).setState( selectionDir == 'rtl' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF ); + editor.getCommand( 'bidiltr' ).setState( selectionDir == 'ltr' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF ); } - function switchDir( element, dir, editor ) + function handleMixedDirContent( evt ) { - var dirBefore = element.getComputedStyle( 'direction' ), - currentDir = element.getStyle( 'direction' ) || element.getAttribute( 'dir' ) || ''; + var editor = evt.editor, + directionNode = evt.data.path.block || evt.data.path.blockLimit; - element.removeStyle( 'direction' ); - - if ( currentDir.toLowerCase() == dir ) - element.removeAttribute( 'dir' ); - else - element.setAttribute( 'dir', dir ); + editor.fire( 'contentDirChanged', directionNode ? directionNode.getComputedStyle( 'direction' ) : editor.lang.dir ); + } - // If the element direction changed, we need to switch the margins of - // the element and all its children, so it will get really reflected - // like a mirror. (#5910) - var dirAfter = element.getComputedStyle( 'direction' ); - if ( dirAfter != dirBefore ) + /** + * Returns element with possibility of applying the direction. + * @param node + */ + function getElementForDirection( node ) + { + while ( node && !( node.getName() in allGuardElements || node.is( 'body' ) ) ) { - var range = new CKEDITOR.dom.range( element.getDocument() ); - range.setStartBefore( element ); - range.setEndAfter( element ); + var parent = node.getParent(); + if ( !parent ) + break; - var walker = new CKEDITOR.dom.walker( range ); + node = parent; + } - var node; - while ( ( node = walker.next() ) ) - { - if ( node.type == CKEDITOR.NODE_ELEMENT ) - { - // A child with dir defined is to be ignored. - if ( !node.equals( element ) && node.hasAttribute( 'dir' ) ) - { - range.setStartAfter( node ); - walker = new CKEDITOR.dom.walker( range ); - continue; - } + return node; + } - // Switch the margins. - var marginLeft = node.getStyle( 'margin-right' ), - marginRight = node.getStyle( 'margin-left' ); + function switchDir( element, dir, editor, database ) + { + if ( element.isReadOnly() ) + return; - marginLeft ? node.setStyle( 'margin-left', marginLeft ) : node.removeStyle( 'margin-left' ); - marginRight ? node.setStyle( 'margin-right', marginRight ) : node.removeStyle( 'margin-right' ); - } + // Mark this element as processed by switchDir. + CKEDITOR.dom.element.setMarker( database, element, 'bidi_processed', 1 ); + + // Check whether one of the ancestors has already been styled. + var parent = element; + while ( ( parent = parent.getParent() ) && !parent.is( 'body' ) ) + { + if ( parent.getCustomData( 'bidi_processed' ) ) + { + // Ancestor style must dominate. + element.removeStyle( 'direction' ); + element.removeAttribute( 'dir' ); + return; } } + var useComputedState = ( 'useComputedState' in editor.config ) ? editor.config.useComputedState : 1; + + var elementDir = useComputedState ? element.getComputedStyle( 'direction' ) + : element.getStyle( 'direction' ) || element.hasAttribute( 'dir' ); + + // Stop if direction is same as present. + if ( elementDir == dir ) + return; + + // Clear direction on this element. + element.removeStyle( 'direction' ); + + // Do the second check when computed state is ON, to check + // if we need to apply explicit direction on this element. + if ( useComputedState ) + { + element.removeAttribute( 'dir' ); + if ( dir != element.getComputedStyle( 'direction' ) ) + element.setAttribute( 'dir', dir ); + } + else + // Set new direction for this element. + element.setAttribute( 'dir', dir ); + editor.forceNextSelectionCheck(); + + return; } - function getFullySelected( selection, elements ) + function getFullySelected( range, elements, enterMode ) { - var selectedElement = selection.getCommonAncestor(); - while( selectedElement.type == CKEDITOR.NODE_ELEMENT - && !( selectedElement.getName() in elements ) - && selectedElement.getParent().getChildCount() == 1 - ) - selectedElement = selectedElement.getParent(); - - return selectedElement.type == CKEDITOR.NODE_ELEMENT - && ( selectedElement.getName() in elements ) - && selectedElement; + var ancestor = range.getCommonAncestor( false, true ); + + range = range.clone(); + range.enlarge( enterMode == CKEDITOR.ENTER_BR ? + CKEDITOR.ENLARGE_LIST_ITEM_CONTENTS + : CKEDITOR.ENLARGE_BLOCK_CONTENTS ); + + if ( range.checkBoundaryOfElement( ancestor, CKEDITOR.START ) + && range.checkBoundaryOfElement( ancestor, CKEDITOR.END ) ) + { + var parent; + while ( ancestor && ancestor.type == CKEDITOR.NODE_ELEMENT + && ( parent = ancestor.getParent() ) + && parent.getChildCount() == 1 + && !( ancestor.getName() in elements ) ) + ancestor = parent; + + return ancestor.type == CKEDITOR.NODE_ELEMENT + && ( ancestor.getName() in elements ) + && ancestor; + } } function bidiCommand( dir ) @@ -123,90 +166,64 @@ For licensing, see LICENSE.html or http://ckeditor.com/license if ( ranges && ranges.length ) { - // Apply do directly selected elements from guardElements. - var selectedElement = ranges[ 0 ].getEnclosedNode(); + var database = {}; - // If this is not our element of interest, apply to fully selected elements from guardElements. - if ( !selectedElement || selectedElement - && !( selectedElement.type == CKEDITOR.NODE_ELEMENT && selectedElement.getName() in directSelectionGuardElements ) - ) - selectedElement = getFullySelected( selection, guardElements ); + // Creates bookmarks for selection, as we may split some blocks. + var bookmarks = selection.createBookmarks(); - if ( selectedElement ) - { - if ( !selectedElement.isReadOnly() ) - switchDir( selectedElement, dir, editor ); - } - else + var rangeIterator = ranges.createIterator(), + range, + i = 0; + + while ( ( range = rangeIterator.getNextRange( 1 ) ) ) { - // Creates bookmarks for selection, as we may split some blocks. - var bookmarks = selection.createBookmarks(); + // Apply do directly selected elements from guardElements. + var selectedElement = range.getEnclosedNode(); + + // If this is not our element of interest, apply to fully selected elements from guardElements. + if ( !selectedElement || selectedElement + && !( selectedElement.type == CKEDITOR.NODE_ELEMENT && selectedElement.getName() in directSelectionGuardElements ) + ) + selectedElement = getFullySelected( range, guardElements, enterMode ); + + selectedElement && switchDir( selectedElement, dir, editor, database ); var iterator, block; - for ( var i = ranges.length - 1 ; i >= 0 ; i-- ) + // Walker searching for guardElements. + var walker = new CKEDITOR.dom.walker( range ); + + var start = bookmarks[ i ].startNode, + end = bookmarks[ i++ ].endNode; + + walker.evaluator = function( node ) { - // Array of elements processed as guardElements. - var processedElements = []; - // Walker searching for guardElements. - var walker = new CKEDITOR.dom.walker( ranges[ i ] ); - walker.evaluator = function( node ){ - return node.type == CKEDITOR.NODE_ELEMENT + return !! ( node.type == CKEDITOR.NODE_ELEMENT && node.getName() in guardElements - && !( node.getName() == ( enterMode == CKEDITOR.ENTER_P ) ? 'p' : 'div' + && !( node.getName() == ( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) && node.getParent().type == CKEDITOR.NODE_ELEMENT - && node.getParent().getName() == 'blockquote' - ); - }; + && node.getParent().getName() == 'blockquote' ) + // Element must be fully included in the range as well. (#6485). + && node.getPosition( start ) & CKEDITOR.POSITION_FOLLOWING + && ( ( node.getPosition( end ) & CKEDITOR.POSITION_PRECEDING + CKEDITOR.POSITION_CONTAINS ) == CKEDITOR.POSITION_PRECEDING ) ); + }; - while ( ( block = walker.next() ) ) - { - switchDir( block, dir, editor ); - processedElements.push( block ); - } + while ( ( block = walker.next() ) ) + switchDir( block, dir, editor, database ); - iterator = ranges[ i ].createIterator(); - iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR; + iterator = range.createIterator(); + iterator.enlargeBr = enterMode != CKEDITOR.ENTER_BR; - while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) ) - { - if ( block.isReadOnly() ) - continue; - - var _break = 0; - - // Check if block have been already processed by the walker above. - for ( var ii = 0; ii < processedElements.length; ii++ ) - { - var parent = block.getParent(); - - while( parent && parent.getName() != 'body' ) - { - if ( ( parent.$.isSameNode && parent.$.isSameNode( processedElements[ ii ].$ ) ) - || parent.$ == processedElements[ ii ].$ ) - { - _break = 1; - break; - } - parent = parent.getParent(); - } - - if ( _break ) - break; - } - - if ( !_break ) - { - switchDir( block, dir, editor ); - } - } + while ( ( block = iterator.getNextParagraph( enterMode == CKEDITOR.ENTER_P ? 'p' : 'div' ) ) ) + switchDir( block, dir, editor, database ); } - editor.forceNextSelectionCheck(); - // Restore selection position. - selection.selectBookmarks( bookmarks ); - } + CKEDITOR.dom.element.clearAllMarkers( database ); + + editor.forceNextSelectionCheck(); + // Restore selection position. + selection.selectBookmarks( bookmarks ); editor.focus(); } @@ -238,7 +255,80 @@ For licensing, see LICENSE.html or http://ckeditor.com/license addButtonCommand( 'BidiRtl', lang.rtl, 'bidirtl', bidiCommand( 'rtl' ) ); editor.on( 'selectionChange', onSelectionChange ); + editor.on( 'contentDom', function() + { + editor.document.on( 'dirChanged', function( evt ) + { + editor.fire( 'dirChanged', + { + node : evt.data, + dir : evt.data.getDirection( 1 ) + } ); + }); + }); } }); + // If the element direction changed, we need to switch the margins of + // the element and all its children, so it will get really reflected + // like a mirror. (#5910) + function isOffline( el ) + { + var html = el.getDocument().getBody().getParent(); + while ( el ) + { + if ( el.equals( html ) ) + return false; + el = el.getParent(); + } + return true; + } + function dirChangeNotifier( org ) + { + var isAttribute = org == elementProto.setAttribute, + isRemoveAttribute = org == elementProto.removeAttribute, + dirStyleRegexp = /\bdirection\s*:\s*(.*?)\s*(:?$|;)/; + + return function( name, val ) + { + if ( !this.getDocument().equals( CKEDITOR.document ) ) + { + var orgDir; + if ( ( name == ( isAttribute || isRemoveAttribute ? 'dir' : 'direction' ) || + name == 'style' && ( isRemoveAttribute || dirStyleRegexp.test( val ) ) ) && !isOffline( this ) ) + { + orgDir = this.getDirection( 1 ); + var retval = org.apply( this, arguments ); + if ( orgDir != this.getDirection( 1 ) ) + { + this.getDocument().fire( 'dirChanged', this ); + return retval; + } + } + } + + return org.apply( this, arguments ); + }; + } + + var elementProto = CKEDITOR.dom.element.prototype, + methods = [ 'setStyle', 'removeStyle', 'setAttribute', 'removeAttribute' ]; + for ( var i = 0; i < methods.length; i++ ) + elementProto[ methods[ i ] ] = CKEDITOR.tools.override( elementProto[ methods [ i ] ], dirChangeNotifier ); })(); + +/** + * Fired when the language direction of an element is changed + * @name CKEDITOR.editor#dirChanged + * @event + * @param {CKEDITOR.editor} editor This editor instance. + * @param {Object} eventData.node The element that is being changed. + * @param {String} eventData.dir The new direction. + */ + +/** + * Fired when the language direction in the specific cursor position is changed + * @name CKEDITOR.editor#contentDirChanged + * @event + * @param {String} eventData The direction in the current position. + */