X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fcore%2Fdom%2Felement.js;h=c83674ab405ebf54b9778ffdc6acdaced3c50a96;hb=2f22c0c38f17e75be5541089076885442aaa2377;hp=0243dea37764845c1b25ab6406f1d9de884f4869;hpb=9afde8772159bd3436f1f5b7862960307710ae5a;p=ckeditor.git diff --git a/_source/core/dom/element.js b/_source/core/dom/element.js index 0243dea..c83674a 100644 --- a/_source/core/dom/element.js +++ b/_source/core/dom/element.js @@ -1,5 +1,5 @@ /* -Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ @@ -307,6 +307,7 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, /** * Moves the selection focus to this element. + * @function * @param {Boolean} defer Whether to asynchronously defer the * execution by 100 ms. * @example @@ -428,6 +429,13 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, name = 'className'; break; + case 'http-equiv': + name = 'httpEquiv'; + break; + + case 'name': + return this.$.name; + case 'tabindex': var tabIndex = standard.call( this, name ); @@ -452,7 +460,8 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, } case 'hspace': - return this.$.hspace; + case 'value': + return this.$[ name ]; case 'style': // IE does not return inline styles via getAttribute(). See #2947. @@ -571,7 +580,7 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, * in the future. * @returns {String} The text value. * @example - * var element = CKEDITOR.dom.element.createFromHtml( '<div>Same <i>text</i>.</div>' ); + * var element = CKEDITOR.dom.element.createFromHtml( '<div>Sample <i>text</i>.</div>' ); * alert( element.getText() ); // "Sample text." */ getText : function() @@ -710,17 +719,32 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, return false; }, - isEditable : function() + /** + * Decide whether one element is able to receive cursor. + * @param {Boolean} [textCursor=true] Only consider element that could receive text child. + */ + isEditable : function( textCursor ) { - // Get the element name. var name = this.getName(); - // Get the element DTD (defaults to span for unknown elements). - var dtd = !CKEDITOR.dtd.$nonEditable[ name ] - && ( CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span ); + if ( this.isReadOnly() + || this.getComputedStyle( 'display' ) == 'none' + || this.getComputedStyle( 'visibility' ) == 'hidden' + || this.is( 'a' ) && this.data( 'cke-saved-name' ) && !this.getChildCount() + || CKEDITOR.dtd.$nonEditable[ name ] ) + { + return false; + } + + if ( textCursor !== false ) + { + // Get the element DTD (defaults to span for unknown elements). + var dtd = CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span; + // In the DTD # == text node. + return ( dtd && dtd[ '#'] ); + } - // In the DTD # == text node. - return ( dtd && dtd['#'] ); + return true; }, isIdentical : function( otherElement ) @@ -769,7 +793,7 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, */ isVisible : function() { - var isVisible = !!this.$.offsetHeight && this.getComputedStyle( 'visibility' ) != 'hidden', + var isVisible = ( this.$.offsetHeight || this.$.offsetWidth ) && this.getComputedStyle( 'visibility' ) != 'hidden', elementWindow, elementWindowFrame; @@ -786,7 +810,7 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, } } - return isVisible; + return !!isVisible; }, /** @@ -815,14 +839,15 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, }, /** - * Indicates that the element has defined attributes. + * Checks if the element has any defined attributes. + * @function * @returns {Boolean} True if the element has attributes. * @example - * var element = CKEDITOR.dom.element.createFromHtml( '
Example
' ); - * alert( element.hasAttributes() ); "true" + * var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' ); + * alert( element.hasAttributes() ); // "true" * @example - * var element = CKEDITOR.dom.element.createFromHtml( '
Example
' ); - * alert( element.hasAttributes() ); "false" + * var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' ); + * alert( element.hasAttributes() ); // "false" */ hasAttributes : CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ? @@ -876,16 +901,33 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, }, /** - * Indicates whether a specified attribute is defined for this element. + * Checks if the specified attribute is defined for this element. * @returns {Boolean} True if the specified attribute is defined. - * @param (String) name The attribute name. + * @param {String} name The attribute name. * @example */ - hasAttribute : function( name ) + hasAttribute : (function() { - var $attr = this.$.attributes.getNamedItem( name ); - return !!( $attr && $attr.specified ); - }, + function standard( name ) + { + var $attr = this.$.attributes.getNamedItem( name ); + return !!( $attr && $attr.specified ); + } + + return ( CKEDITOR.env.ie && CKEDITOR.env.version < 8 ) ? + function( name ) + { + // On IE < 8 the name attribute cannot be retrieved + // right after the element creation and setting the + // name with setAttribute. + if ( name == 'name' ) + return !!this.$.name; + + return standard.call( this, name ); + } + : + standard; + })(), /** * Hides this element (display:none). @@ -920,6 +962,14 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, } }, + /** + * Merges sibling elements that are identical to this one.
+ *
+ * Identical child elements are also merged. For example:
+ * <b><i></i></b><b><i></i></b> => <b><i></i></b> + * @function + * @param {Boolean} [inlineOnly] Allow only inline elements to be merged. Defaults to "true". + */ mergeSiblings : ( function() { function mergeElements( element, sibling, isNext ) @@ -959,11 +1009,14 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, } } - return function() + return function( inlineOnly ) { - // Merge empty links and anchors also. (#5567) - if ( !( CKEDITOR.dtd.$removeEmpty[ this.getName() ] || this.is( 'a' ) ) ) + if ( ! ( inlineOnly === false + || CKEDITOR.dtd.$removeEmpty[ this.getName() ] + || this.is( 'a' ) ) ) // Merge empty links and anchors also. (#5567) + { return; + } mergeElements( this, this.getNext(), true ); mergeElements( this, this.getPrevious() ); @@ -1021,6 +1074,18 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, return this; }; } + else if ( CKEDITOR.env.ie8Compat && CKEDITOR.env.secure ) + { + return function( name, value ) + { + // IE8 throws error when setting src attribute to non-ssl value. (#7847) + if ( name == 'src' && value.match( /^http:\/\// ) ) + try { standard.apply( this, arguments ); } catch( e ){} + else + standard.apply( this, arguments ); + return this; + }; + } else return standard; })(), @@ -1197,12 +1262,13 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, if ( CKEDITOR.env.ie || CKEDITOR.env.opera ) { var element = this.$, + elements = element.getElementsByTagName("*"), e, i = 0; element.unselectable = 'on'; - while ( ( e = element.all[ i++ ] ) ) + while ( ( e = elements[ i++ ] ) ) { switch ( e.tagName.toLowerCase() ) { @@ -1235,10 +1301,9 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, getDocumentPosition : function( refDocument ) { var x = 0, y = 0, - body = this.getDocument().getBody(), - quirks = this.getDocument().$.compatMode == 'BackCompat'; - - var doc = this.getDocument(); + doc = this.getDocument(), + body = doc.getBody(), + quirks = doc.$.compatMode == 'BackCompat'; if ( document.documentElement[ "getBoundingClientRect" ] ) { @@ -1333,40 +1398,143 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, return { x : x, y : y }; }, - scrollIntoView : function( alignTop ) + /** + * Make any page element visible inside the browser viewport. + * @param {Boolean} [alignToTop] + */ + scrollIntoView : function( alignToTop ) { - // Get the element window. - var win = this.getWindow(), - winHeight = win.getViewPaneSize().height; - - // Starts from the offset that will be scrolled with the negative value of - // the visible window height. - var offset = winHeight * -1; - - // Append the view pane's height if align to top. - // Append element height if we are aligning to the bottom. - if ( alignTop ) - offset += winHeight; - else + var parent = this.getParent(); + if ( !parent ) return; + + // Scroll the element into parent container from the inner out. + do + { + // Check ancestors that overflows. + var overflowed = + parent.$.clientWidth && parent.$.clientWidth < parent.$.scrollWidth + || parent.$.clientHeight && parent.$.clientHeight < parent.$.scrollHeight; + + if ( overflowed ) + this.scrollIntoParent( parent, alignToTop, 1 ); + + // Walk across the frame. + if ( parent.is( 'html' ) ) + { + var win = parent.getWindow(); + + // Avoid security error. + try + { + var iframe = win.$.frameElement; + iframe && ( parent = new CKEDITOR.dom.element( iframe ) ); + } + catch(er){} + } + } + while ( ( parent = parent.getParent() ) ); + }, + + /** + * Make any page element visible inside one of the ancestors by scrolling the parent. + * @param {CKEDITOR.dom.element|CKEDITOR.dom.window} parent The container to scroll into. + * @param {Boolean} [alignToTop] Align the element's top side with the container's + * when true is specified; align the bottom with viewport bottom when + * false is specified. Otherwise scroll on either side with the minimum + * amount to show the element. + * @param {Boolean} [hscroll] Whether horizontal overflow should be considered. + */ + scrollIntoParent : function( parent, alignToTop, hscroll ) + { + !parent && ( parent = this.getWindow() ); + + var doc = parent.getDocument(); + var isQuirks = doc.$.compatMode == 'BackCompat'; + + // On window is scrolled while quirks scrolls . + if ( parent instanceof CKEDITOR.dom.window ) + parent = isQuirks ? doc.getBody() : doc.getDocumentElement(); + + // Scroll the parent by the specified amount. + function scrollBy( x, y ) + { + // Webkit doesn't support "scrollTop/scrollLeft" + // on documentElement/body element. + if ( /body|html/.test( parent.getName() ) ) + parent.getWindow().$.scrollBy( x, y ); + else + { + parent.$[ 'scrollLeft' ] += x; + parent.$[ 'scrollTop' ] += y; + } + } + + // Figure out the element position relative to the specified window. + function screenPos( element, refWin ) { - offset += this.$.offsetHeight || 0; + var pos = { x: 0, y: 0 }; - // Consider the margin in the scroll, which is ok for our current needs, but - // needs investigation if we will be using this function in other places. - offset += parseInt( this.getComputedStyle( 'marginBottom' ) || 0, 10 ) || 0; + if ( !( element.is( isQuirks ? 'body' : 'html' ) ) ) + { + var box = element.$.getBoundingClientRect(); + pos.x = box.left, pos.y = box.top; + } + + var win = element.getWindow(); + if ( !win.equals( refWin ) ) + { + var outerPos = screenPos( CKEDITOR.dom.element.get( win.$.frameElement ), refWin ); + pos.x += outerPos.x, pos.y += outerPos.y; + } + + return pos; } - // Append the offsets for the entire element hierarchy. - var elementPosition = this.getDocumentPosition(); - offset += elementPosition.y; + // calculated margin size. + function margin( element, side ) + { + return parseInt( element.getComputedStyle( 'margin-' + side ) || 0, 10 ) || 0; + } + + var win = parent.getWindow(); - // offset value might be out of range(nagative), fix it(#3692). - offset = offset < 0 ? 0 : offset; + var thisPos = screenPos( this, win ), + parentPos = screenPos( parent, win ), + eh = this.$.offsetHeight, + ew = this.$.offsetWidth, + ch = parent.$.clientHeight, + cw = parent.$.clientWidth, + lt, + br; - // Scroll the window to the desired position, if not already visible(#3795). - var currentScroll = win.getScrollPosition().y; - if ( offset > currentScroll || offset < currentScroll - winHeight ) - win.$.scrollTo( 0, offset ); + // Left-top margins. + lt = + { + x : thisPos.x - margin( this, 'left' ) - parentPos.x || 0, + y : thisPos.y - margin( this, 'top' ) - parentPos.y|| 0 + }; + + // Bottom-right margins. + br = + { + x : thisPos.x + ew + margin( this, 'right' ) - ( ( parentPos.x ) + cw ) || 0, + y : thisPos.y + eh + margin( this, 'bottom' ) - ( ( parentPos.y ) + ch ) || 0 + }; + + // 1. Do the specified alignment as much as possible; + // 2. Otherwise be smart to scroll only the minimum amount; + // 3. Never cut at the top; + // 4. DO NOT scroll when already visible. + if ( lt.y < 0 || br.y > 0 ) + { + scrollBy( 0, + alignToTop === true ? lt.y : + alignToTop === false ? br.y : + lt.y < 0 ? lt.y : br.y ); + } + + if ( hscroll && ( lt.x < 0 || br.x > 0 ) ) + scrollBy( lt.x < 0 ? lt.x : br.x, 0 ); }, setState : function( state ) @@ -1542,14 +1710,23 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, */ getDirection : function( useComputed ) { - return useComputed ? this.getComputedStyle( 'direction' ) : this.getStyle( 'direction' ) || this.getAttribute( 'dir' ); + return useComputed ? + this.getComputedStyle( 'direction' ) + // Webkit: offline element returns empty direction (#8053). + || this.getDirection() + || this.getDocument().$.dir + || this.getDocument().getBody().getDirection( 1 ) + : this.getStyle( 'direction' ) || this.getAttribute( 'dir' ); }, /** * Gets, sets and removes custom data to be stored as HTML5 data-* attributes. - * @name CKEDITOR.dom.element.data - * @param {String} name The name of the attribute, execluding the 'data-' part. + * @param {String} name The name of the attribute, excluding the 'data-' part. * @param {String} [value] The value to set. If set to false, the attribute will be removed. + * @example + * element.data( 'extra-info', 'test' ); // appended the attribute data-extra-info="test" to the element + * alert( element.data( 'extra-info' ) ); // "test" + * element.data( 'extra-info', false ); // remove the data-extra-info attribute from the element */ data : function ( name, value ) { @@ -1560,6 +1737,8 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, this.removeAttribute( name ); else this.setAttribute( name, value ); + + return null; } }); @@ -1579,11 +1758,12 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, } /** - * Update the element's size with box model awareness. - * @name CKEDITOR.dom.element.setSize - * @param {String} type [width|height] + * Sets the element size considering the box model. + * @name CKEDITOR.dom.element.prototype.setSize + * @function + * @param {String} type The dimension to set. It accepts "width" and "height". * @param {Number} size The length unit in px. - * @param isBorderBox Apply the {@param width} and {@param height} based on border box model. + * @param {Boolean} isBorderBox Apply the size based on the border box model. */ CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox ) { @@ -1597,17 +1777,18 @@ CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, }; /** - * Get the element's size, possibly with box model awareness. - * @name CKEDITOR.dom.element.getSize - * @param {String} type [width|height] - * @param {Boolean} contentSize Get the {@param width} or {@param height} based on border box model. + * Gets the element size, possibly considering the box model. + * @name CKEDITOR.dom.element.prototype.getSize + * @function + * @param {String} type The dimension to get. It accepts "width" and "height". + * @param {Boolean} isBorderBox Get the size based on the border box model. */ - CKEDITOR.dom.element.prototype.getSize = function( type, contentSize ) + CKEDITOR.dom.element.prototype.getSize = function( type, isBorderBox ) { var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type ) ], this.$[ 'client' + CKEDITOR.tools.capitalize( type ) ] ) || 0; - if ( contentSize ) + if ( isBorderBox ) size -= marginAndPaddingSize.call( this, type ); return size;