2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
7 * @fileOverview Defines the {@link CKEDITOR.dom.element} class, which
\r
8 * represents a DOM element.
\r
12 * Represents a DOM element.
\r
14 * @augments CKEDITOR.dom.node
\r
15 * @param {Object|String} element A native DOM element or the element name for
\r
17 * @param {CKEDITOR.dom.document} [ownerDocument] The document that will contain
\r
18 * the element in case of element creation.
\r
20 * // Create a new <span> element.
\r
21 * var element = new CKEDITOR.dom.element( 'span' );
\r
23 * // Create an element based on a native DOM element.
\r
24 * var element = new CKEDITOR.dom.element( document.getElementById( 'myId' ) );
\r
26 CKEDITOR.dom.element = function( element, ownerDocument )
\r
28 if ( typeof element == 'string' )
\r
29 element = ( ownerDocument ? ownerDocument.$ : document ).createElement( element );
\r
31 // Call the base constructor (we must not call CKEDITOR.dom.node).
\r
32 CKEDITOR.dom.domObject.call( this, element );
\r
35 // PACKAGER_RENAME( CKEDITOR.dom.element )
\r
38 * The the {@link CKEDITOR.dom.element} representing and element. If the
\r
39 * element is a native DOM element, it will be transformed into a valid
\r
40 * CKEDITOR.dom.element object.
\r
41 * @returns {CKEDITOR.dom.element} The transformed element.
\r
43 * var element = new CKEDITOR.dom.element( 'span' );
\r
44 * alert( element == <b>CKEDITOR.dom.element.get( element )</b> ); "true"
\r
46 * var element = document.getElementById( 'myElement' );
\r
47 * alert( <b>CKEDITOR.dom.element.get( element )</b>.getName() ); e.g. "p"
\r
49 CKEDITOR.dom.element.get = function( element )
\r
51 return element && ( element.$ ? element : new CKEDITOR.dom.element( element ) );
\r
54 CKEDITOR.dom.element.prototype = new CKEDITOR.dom.node();
\r
57 * Creates an instance of the {@link CKEDITOR.dom.element} class based on the
\r
58 * HTML representation of an element.
\r
59 * @param {String} html The element HTML. It should define only one element in
\r
60 * the "root" level. The "root" element can have child nodes, but not
\r
62 * @returns {CKEDITOR.dom.element} The element instance.
\r
64 * var element = <b>CKEDITOR.dom.element.createFromHtml( '<strong class="anyclass">My element</strong>' )</b>;
\r
65 * alert( element.getName() ); // "strong"
\r
67 CKEDITOR.dom.element.createFromHtml = function( html, ownerDocument )
\r
69 var temp = new CKEDITOR.dom.element( 'div', ownerDocument );
\r
70 temp.setHtml( html );
\r
72 // When returning the node, remove it from its parent to detach it.
\r
73 return temp.getFirst().remove();
\r
76 CKEDITOR.dom.element.setMarker = function( database, element, name, value )
\r
78 var id = element.getCustomData( 'list_marker_id' ) ||
\r
79 ( element.setCustomData( 'list_marker_id', CKEDITOR.tools.getNextNumber() ).getCustomData( 'list_marker_id' ) ),
\r
80 markerNames = element.getCustomData( 'list_marker_names' ) ||
\r
81 ( element.setCustomData( 'list_marker_names', {} ).getCustomData( 'list_marker_names' ) );
\r
82 database[id] = element;
\r
83 markerNames[name] = 1;
\r
85 return element.setCustomData( name, value );
\r
88 CKEDITOR.dom.element.clearAllMarkers = function( database )
\r
90 for ( var i in database )
\r
91 CKEDITOR.dom.element.clearMarkers( database, database[i], true );
\r
94 CKEDITOR.dom.element.clearMarkers = function( database, element, removeFromDatabase )
\r
96 var names = element.getCustomData( 'list_marker_names' ),
\r
97 id = element.getCustomData( 'list_marker_id' );
\r
98 for ( var i in names )
\r
99 element.removeCustomData( i );
\r
100 element.removeCustomData( 'list_marker_names' );
\r
101 if ( removeFromDatabase )
\r
103 element.removeCustomData( 'list_marker_id' );
\r
104 delete database[id];
\r
108 CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype,
\r
109 /** @lends CKEDITOR.dom.element.prototype */
\r
112 * The node type. This is a constant value set to
\r
113 * {@link CKEDITOR.NODE_ELEMENT}.
\r
117 type : CKEDITOR.NODE_ELEMENT,
\r
120 * Adds a CSS class to the element. It appends the class to the
\r
121 * already existing names.
\r
122 * @param {String} className The name of the class to be added.
\r
124 * var element = new CKEDITOR.dom.element( 'div' );
\r
125 * element.addClass( 'classA' ); // <div class="classA">
\r
126 * element.addClass( 'classB' ); // <div class="classA classB">
\r
127 * element.addClass( 'classA' ); // <div class="classA classB">
\r
129 addClass : function( className )
\r
131 var c = this.$.className;
\r
134 var regex = new RegExp( '(?:^|\\s)' + className + '(?:\\s|$)', '' );
\r
135 if ( !regex.test( c ) )
\r
136 c += ' ' + className;
\r
138 this.$.className = c || className;
\r
142 * Removes a CSS class name from the elements classes. Other classes
\r
143 * remain untouched.
\r
144 * @param {String} className The name of the class to remove.
\r
146 * var element = new CKEDITOR.dom.element( 'div' );
\r
147 * element.addClass( 'classA' ); // <div class="classA">
\r
148 * element.addClass( 'classB' ); // <div class="classA classB">
\r
149 * element.removeClass( 'classA' ); // <div class="classB">
\r
150 * element.removeClass( 'classB' ); // <div>
\r
152 removeClass : function( className )
\r
154 var c = this.getAttribute( 'class' );
\r
157 var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', 'i' );
\r
158 if ( regex.test( c ) )
\r
160 c = c.replace( regex, '' ).replace( /^\s+/, '' );
\r
163 this.setAttribute( 'class', c );
\r
165 this.removeAttribute( 'class' );
\r
170 hasClass : function( className )
\r
172 var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', '' );
\r
173 return regex.test( this.getAttribute('class') );
\r
177 * Append a node as a child of this element.
\r
178 * @param {CKEDITOR.dom.node|String} node The node or element name to be
\r
180 * @param {Boolean} [toStart] Indicates that the element is to be
\r
181 * appended at the start.
\r
182 * @returns {CKEDITOR.dom.node} The appended node.
\r
184 * var p = new CKEDITOR.dom.element( 'p' );
\r
186 * var strong = new CKEDITOR.dom.element( 'strong' );
\r
187 * <b>p.append( strong );</b>
\r
189 * var em = <b>p.append( 'em' );</b>
\r
191 * // result: "<p><strong></strong><em></em></p>"
\r
193 append : function( node, toStart )
\r
195 if ( typeof node == 'string' )
\r
196 node = this.getDocument().createElement( node );
\r
199 this.$.insertBefore( node.$, this.$.firstChild );
\r
201 this.$.appendChild( node.$ );
\r
206 appendHtml : function( html )
\r
208 if ( !this.$.childNodes.length )
\r
209 this.setHtml( html );
\r
212 var temp = new CKEDITOR.dom.element( 'div', this.getDocument() );
\r
213 temp.setHtml( html );
\r
214 temp.moveChildren( this );
\r
219 * Append text to this element.
\r
220 * @param {String} text The text to be appended.
\r
221 * @returns {CKEDITOR.dom.node} The appended node.
\r
223 * var p = new CKEDITOR.dom.element( 'p' );
\r
224 * p.appendText( 'This is' );
\r
225 * p.appendText( ' some text' );
\r
227 * // result: "<p>This is some text</p>"
\r
229 appendText : function( text )
\r
231 if ( this.$.text != undefined )
\r
232 this.$.text += text;
\r
234 this.append( new CKEDITOR.dom.text( text ) );
\r
237 appendBogus : function()
\r
239 var lastChild = this.getLast() ;
\r
241 // Ignore empty/spaces text.
\r
242 while ( lastChild && lastChild.type == CKEDITOR.NODE_TEXT && !CKEDITOR.tools.rtrim( lastChild.getText() ) )
\r
243 lastChild = lastChild.getPrevious();
\r
244 if ( !lastChild || !lastChild.is || !lastChild.is( 'br' ) )
\r
247 CKEDITOR.env.opera ?
\r
248 this.getDocument().createText('') :
\r
249 this.getDocument().createElement( 'br' ) );
\r
254 * Breaks one of the ancestor element in the element position, moving
\r
255 * this element between the broken parts.
\r
256 * @param {CKEDITOR.dom.element} parent The anscestor element to get broken.
\r
258 * // Before breaking:
\r
259 * // <b>This <i>is some<span /> sample</i> test text</b>
\r
260 * // If "element" is <span /> and "parent" is <i>:
\r
261 * // <b>This <i>is some</i><span /><i> sample</i> test text</b>
\r
262 * element.breakParent( parent );
\r
264 * // Before breaking:
\r
265 * // <b>This <i>is some<span /> sample</i> test text</b>
\r
266 * // If "element" is <span /> and "parent" is <b>:
\r
267 * // <b>This <i>is some</i></b><span /><b><i> sample</i> test text</b>
\r
268 * element.breakParent( parent );
\r
270 breakParent : function( parent )
\r
272 var range = new CKEDITOR.dom.range( this.getDocument() );
\r
274 // We'll be extracting part of this element, so let's use our
\r
275 // range to get the correct piece.
\r
276 range.setStartAfter( this );
\r
277 range.setEndAfter( parent );
\r
280 var docFrag = range.extractContents();
\r
282 // Move the element outside the broken element.
\r
283 range.insertNode( this.remove() );
\r
285 // Re-insert the extracted piece after the element.
\r
286 docFrag.insertAfterNode( this );
\r
290 CKEDITOR.env.ie || CKEDITOR.env.webkit ?
\r
295 return node.type != CKEDITOR.NODE_ELEMENT ?
\r
296 $.contains( node.getParent().$ ) :
\r
297 $ != node.$ && $.contains( node.$ );
\r
302 return !!( this.$.compareDocumentPosition( node.$ ) & 16 );
\r
306 * Moves the selection focus to this element.
\r
308 * var element = CKEDITOR.document.getById( 'myTextarea' );
\r
309 * <b>element.focus()</b>;
\r
313 // IE throws error if the element is not visible.
\r
323 * Gets the inner HTML of this element.
\r
324 * @returns {String} The inner HTML of this element.
\r
326 * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
\r
327 * alert( <b>p.getHtml()</b> ); // "<b>Example</b>"
\r
329 getHtml : function()
\r
331 return this.$.innerHTML;
\r
334 getOuterHtml : function()
\r
336 if ( this.$.outerHTML )
\r
338 // IE includes the <?xml:namespace> tag in the outerHTML of
\r
339 // namespaced element. So, we must strip it here. (#3341)
\r
340 return this.$.outerHTML.replace( /<\?[^>]*>/, '' );
\r
343 var tmpDiv = this.$.ownerDocument.createElement( 'div' );
\r
344 tmpDiv.appendChild( this.$.cloneNode( true ) );
\r
345 return tmpDiv.innerHTML;
\r
349 * Sets the inner HTML of this element.
\r
350 * @param {String} html The HTML to be set for this element.
\r
351 * @returns {String} The inserted HTML.
\r
353 * var p = new CKEDITOR.dom.element( 'p' );
\r
354 * <b>p.setHtml( '<b>Inner</b> HTML' );</b>
\r
356 * // result: "<p><b>Inner</b> HTML</p>"
\r
358 setHtml : function( html )
\r
360 return ( this.$.innerHTML = html );
\r
364 * Sets the element contents as plain text.
\r
365 * @param {String} text The text to be set.
\r
366 * @returns {String} The inserted text.
\r
368 * var element = new CKEDITOR.dom.element( 'div' );
\r
369 * element.setText( 'A > B & C < D' );
\r
370 * alert( element.innerHTML ); // "A &gt; B &amp; C &lt; D"
\r
372 setText : function( text )
\r
374 CKEDITOR.dom.element.prototype.setText = ( this.$.innerText != undefined ) ?
\r
377 return this.$.innerText = text;
\r
381 return this.$.textContent = text;
\r
384 return this.setText( text );
\r
388 * Gets the value of an element attribute.
\r
390 * @param {String} name The attribute name.
\r
391 * @returns {String} The attribute value or null if not defined.
\r
393 * var element = CKEDITOR.dom.element.createFromHtml( '<input type="text" />' );
\r
394 * alert( <b>element.getAttribute( 'type' )</b> ); // "text"
\r
396 getAttribute : (function()
\r
398 var standard = function( name )
\r
400 return this.$.getAttribute( name, 2 );
\r
403 if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
405 return function( name )
\r
410 name = 'className';
\r
414 var tabIndex = standard.call( this, name );
\r
416 // IE returns tabIndex=0 by default for all
\r
417 // elements. For those elements,
\r
418 // getAtrribute( 'tabindex', 2 ) returns 32768
\r
419 // instead. So, we must make this check to give a
\r
420 // uniform result among all browsers.
\r
421 if ( tabIndex !== 0 && this.$.tabIndex === 0 )
\r
428 return this.$.checked;
\r
432 // IE does not return inline styles via getAttribute(). See #2947.
\r
433 return this.$.style.cssText;
\r
436 return standard.call( this, name );
\r
443 getChildren : function()
\r
445 return new CKEDITOR.dom.nodeList( this.$.childNodes );
\r
449 * Gets the current computed value of one of the element CSS style
\r
452 * @param {String} propertyName The style property name.
\r
453 * @returns {String} The property value.
\r
455 * var element = new CKEDITOR.dom.element( 'span' );
\r
456 * alert( <b>element.getComputedStyle( 'display' )</b> ); // "inline"
\r
460 function( propertyName )
\r
462 return this.$.currentStyle[ CKEDITOR.tools.cssStyleToDomStyle( propertyName ) ];
\r
465 function( propertyName )
\r
467 return this.getWindow().$.getComputedStyle( this.$, '' ).getPropertyValue( propertyName );
\r
471 * Gets the DTD entries for this element.
\r
472 * @returns {Object} An object containing the list of elements accepted
\r
475 getDtd : function()
\r
477 var dtd = CKEDITOR.dtd[ this.getName() ];
\r
479 this.getDtd = function()
\r
487 getElementsByTag : CKEDITOR.dom.document.prototype.getElementsByTag,
\r
490 * Gets the computed tabindex for this element.
\r
492 * @returns {Number} The tabindex value.
\r
494 * var element = CKEDITOR.document.getById( 'myDiv' );
\r
495 * alert( <b>element.getTabIndex()</b> ); // e.g. "-1"
\r
501 var tabIndex = this.$.tabIndex;
\r
503 // IE returns tabIndex=0 by default for all elements. In
\r
504 // those cases we must check that the element really has
\r
505 // the tabindex attribute set to zero, or it is one of
\r
506 // those element that should have zero by default.
\r
507 if ( tabIndex === 0 && !CKEDITOR.dtd.$tabIndex[ this.getName() ] && parseInt( this.getAttribute( 'tabindex' ), 10 ) !== 0 )
\r
512 : CKEDITOR.env.webkit ?
\r
515 var tabIndex = this.$.tabIndex;
\r
517 // Safari returns "undefined" for elements that should not
\r
518 // have tabindex (like a div). So, we must try to get it
\r
519 // from the attribute.
\r
520 // https://bugs.webkit.org/show_bug.cgi?id=20596
\r
521 if ( tabIndex == undefined )
\r
523 tabIndex = parseInt( this.getAttribute( 'tabindex' ), 10 );
\r
525 // If the element don't have the tabindex attribute,
\r
526 // then we should return -1.
\r
527 if ( isNaN( tabIndex ) )
\r
536 return this.$.tabIndex;
\r
540 * Gets the text value of this element.
\r
542 * Only in IE (which uses innerText), <br> will cause linebreaks,
\r
543 * and sucessive whitespaces (including line breaks) will be reduced to
\r
544 * a single space. This behavior is ok for us, for now. It may change
\r
546 * @returns {String} The text value.
\r
548 * var element = CKEDITOR.dom.element.createFromHtml( '<div>Same <i>text</i>.</div>' );
\r
549 * alert( <b>element.getText()</b> ); // "Sample text."
\r
551 getText : function()
\r
553 return this.$.textContent || this.$.innerText || '';
\r
557 * Gets the window object that contains this element.
\r
558 * @returns {CKEDITOR.dom.window} The window object.
\r
561 getWindow : function()
\r
563 return this.getDocument().getWindow();
\r
567 * Gets the value of the "id" attribute of this element.
\r
568 * @returns {String} The element id, or null if not available.
\r
570 * var element = CKEDITOR.dom.element.createFromHtml( '<p id="myId"></p>' );
\r
571 * alert( <b>element.getId()</b> ); // "myId"
\r
575 return this.$.id || null;
\r
579 * Gets the value of the "name" attribute of this element.
\r
580 * @returns {String} The element name, or null if not available.
\r
582 * var element = CKEDITOR.dom.element.createFromHtml( '<input name="myName"></input>' );
\r
583 * alert( <b>element.getNameAtt()</b> ); // "myName"
\r
585 getNameAtt : function()
\r
587 return this.$.name || null;
\r
591 * Gets the element name (tag name). The returned name is guaranteed to
\r
592 * be always full lowercased.
\r
593 * @returns {String} The element name.
\r
595 * var element = new CKEDITOR.dom.element( 'span' );
\r
596 * alert( <b>element.getName()</b> ); // "span"
\r
598 getName : function()
\r
600 // Cache the lowercased name inside a closure.
\r
601 var nodeName = this.$.nodeName.toLowerCase();
\r
603 if ( CKEDITOR.env.ie )
\r
605 var scopeName = this.$.scopeName;
\r
606 if ( scopeName != 'HTML' )
\r
607 nodeName = scopeName.toLowerCase() + ':' + nodeName;
\r
612 this.getName = function()
\r
619 * Gets the value set to this element. This value is usually available
\r
620 * for form field elements.
\r
621 * @returns {String} The element value.
\r
623 getValue : function()
\r
625 return this.$.value;
\r
629 * Gets the first child node of this element.
\r
630 * @returns {CKEDITOR.dom.node} The first child node or null if not
\r
633 * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
\r
634 * var first = <b>element.getFirst()</b>;
\r
635 * alert( first.getName() ); // "b"
\r
637 getFirst : function()
\r
639 var $ = this.$.firstChild;
\r
640 return $ ? new CKEDITOR.dom.node( $ ) : null;
\r
644 * @param {Function} evaluator Filtering the result node.
\r
646 getLast : function( evaluator )
\r
648 var last = this.$.lastChild,
\r
649 retval = last && new CKEDITOR.dom.node( last );
\r
650 if ( retval && evaluator && !evaluator( retval ) )
\r
651 retval = retval.getPrevious( evaluator );
\r
656 getStyle : function( name )
\r
658 return this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ];
\r
662 * Checks if the element name matches one or more names.
\r
663 * @param {String} name[,name[,...]] One or more names to be checked.
\r
664 * @returns {Boolean} true if the element name matches any of the names.
\r
666 * var element = new CKEDITOR.element( 'span' );
\r
667 * alert( <b>element.is( 'span' )</b> ); "true"
\r
668 * alert( <b>element.is( 'p', 'span' )</b> ); "true"
\r
669 * alert( <b>element.is( 'p' )</b> ); "false"
\r
670 * alert( <b>element.is( 'p', 'div' )</b> ); "false"
\r
674 var name = this.getName();
\r
675 for ( var i = 0 ; i < arguments.length ; i++ )
\r
677 if ( arguments[ i ] == name )
\r
683 isEditable : function()
\r
685 // Get the element name.
\r
686 var name = this.getName();
\r
688 // Get the element DTD (defaults to span for unknown elements).
\r
689 var dtd = !CKEDITOR.dtd.$nonEditable[ name ]
\r
690 && ( CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span );
\r
692 // In the DTD # == text node.
\r
693 return ( dtd && dtd['#'] );
\r
696 isIdentical : function( otherElement )
\r
698 if ( this.getName() != otherElement.getName() )
\r
701 var thisAttribs = this.$.attributes,
\r
702 otherAttribs = otherElement.$.attributes;
\r
704 var thisLength = thisAttribs.length,
\r
705 otherLength = otherAttribs.length;
\r
707 if ( !CKEDITOR.env.ie && thisLength != otherLength )
\r
710 for ( var i = 0 ; i < thisLength ; i++ )
\r
712 var attribute = thisAttribs[ i ];
\r
714 if ( ( !CKEDITOR.env.ie || ( attribute.specified && attribute.nodeName != '_cke_expando' ) ) && attribute.nodeValue != otherElement.getAttribute( attribute.nodeName ) )
\r
718 // For IE, we have to for both elements, because it's difficult to
\r
719 // know how the atttibutes collection is organized in its DOM.
\r
720 if ( CKEDITOR.env.ie )
\r
722 for ( i = 0 ; i < otherLength ; i++ )
\r
724 attribute = otherAttribs[ i ];
\r
726 if ( ( !CKEDITOR.env.ie || ( attribute.specified && attribute.nodeName != '_cke_expando' ) ) && attribute.nodeValue != thisAttribs.getAttribute( attribute.nodeName ) )
\r
735 * Checks if this element is visible. May not work if the element is
\r
736 * child of an element with visibility set to "hidden", but works well
\r
737 * on the great majority of cases.
\r
738 * @return {Boolean} True if the element is visible.
\r
740 isVisible : function()
\r
742 return this.$.offsetWidth && ( this.$.style.visibility != 'hidden' );
\r
746 * Indicates that the element has defined attributes.
\r
747 * @returns {Boolean} True if the element has attributes.
\r
749 * var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' );
\r
750 * alert( <b>element.hasAttributes()</b> ); "true"
\r
752 * var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' );
\r
753 * alert( <b>element.hasAttributes()</b> ); "false"
\r
756 CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ?
\r
759 var attributes = this.$.attributes;
\r
761 for ( var i = 0 ; i < attributes.length ; i++ )
\r
763 var attribute = attributes[i];
\r
765 switch ( attribute.nodeName )
\r
768 // IE has a strange bug. If calling removeAttribute('className'),
\r
769 // the attributes collection will still contain the "class"
\r
770 // attribute, which will be marked as "specified", even if the
\r
771 // outerHTML of the element is not displaying the class attribute.
\r
772 // Note : I was not able to reproduce it outside the editor,
\r
773 // but I've faced it while working on the TC of #1391.
\r
774 if ( this.getAttribute( 'class' ) )
\r
777 // Attributes to be ignored.
\r
778 case '_cke_expando' :
\r
784 if ( attribute.specified )
\r
794 var attributes = this.$.attributes;
\r
795 return ( attributes.length > 1 || ( attributes.length == 1 && attributes[0].nodeName != '_cke_expando' ) );
\r
799 * Indicates whether a specified attribute is defined for this element.
\r
800 * @returns {Boolean} True if the specified attribute is defined.
\r
801 * @param (String) name The attribute name.
\r
804 hasAttribute : function( name )
\r
806 var $attr = this.$.attributes.getNamedItem( name );
\r
807 return !!( $attr && $attr.specified );
\r
811 * Hides this element (display:none).
\r
813 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
814 * <b>element.hide()</b>;
\r
818 this.setStyle( 'display', 'none' );
\r
821 moveChildren : function( target, toStart )
\r
833 while ( ( child = $.lastChild ) )
\r
834 target.insertBefore( $.removeChild( child ), target.firstChild );
\r
838 while ( ( child = $.firstChild ) )
\r
839 target.appendChild( $.removeChild( child ) );
\r
844 * Shows this element (display it).
\r
846 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
847 * <b>element.show()</b>;
\r
859 * Sets the value of an element attribute.
\r
860 * @param {String} name The name of the attribute.
\r
861 * @param {String} value The value to be set to the attribute.
\r
863 * @returns {CKEDITOR.dom.element} This element instance.
\r
865 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
866 * <b>element.setAttribute( 'class', 'myClass' )</b>;
\r
867 * <b>element.setAttribute( 'title', 'This is an example' )</b>;
\r
869 setAttribute : (function()
\r
871 var standard = function( name, value )
\r
873 this.$.setAttribute( name, value );
\r
877 if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
879 return function( name, value )
\r
881 if ( name == 'class' )
\r
882 this.$.className = value;
\r
883 else if ( name == 'style' )
\r
884 this.$.style.cssText = value;
\r
885 else if ( name == 'tabindex' ) // Case sensitive.
\r
886 this.$.tabIndex = value;
\r
887 else if ( name == 'checked' )
\r
888 this.$.checked = value;
\r
890 standard.apply( this, arguments );
\r
899 * Sets the value of several element attributes.
\r
900 * @param {Object} attributesPairs An object containing the names and
\r
901 * values of the attributes.
\r
902 * @returns {CKEDITOR.dom.element} This element instance.
\r
904 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
905 * <b>element.setAttributes({
\r
906 * 'class' : 'myClass',
\r
907 * 'title' : 'This is an example' })</b>;
\r
909 setAttributes : function( attributesPairs )
\r
911 for ( var name in attributesPairs )
\r
912 this.setAttribute( name, attributesPairs[ name ] );
\r
917 * Sets the element value. This function is usually used with form
\r
919 * @param {String} value The element value.
\r
920 * @returns {CKEDITOR.dom.element} This element instance.
\r
922 setValue : function( value )
\r
924 this.$.value = value;
\r
929 * Removes an attribute from the element.
\r
930 * @param {String} name The attribute name.
\r
933 * var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
\r
934 * element.removeAttribute( 'class' );
\r
936 removeAttribute : (function()
\r
938 var standard = function( name )
\r
940 this.$.removeAttribute( name );
\r
943 if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
945 return function( name )
\r
947 if ( name == 'class' )
\r
948 name = 'className';
\r
949 else if ( name == 'tabindex' )
\r
951 standard.call( this, name );
\r
958 removeAttributes : function ( attributes )
\r
960 for ( var i = 0 ; i < attributes.length ; i++ )
\r
961 this.removeAttribute( attributes[ i ] );
\r
965 * Removes a style from the element.
\r
966 * @param {String} name The style name.
\r
969 * var element = CKEDITOR.dom.element.createFromHtml( '<div style="display:none"></div>' );
\r
970 * element.removeStyle( 'display' );
\r
972 removeStyle : function( name )
\r
974 if ( this.$.style.removeAttribute )
\r
975 this.$.style.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) );
\r
977 this.setStyle( name, '' );
\r
979 if ( !this.$.style.cssText )
\r
980 this.removeAttribute( 'style' );
\r
984 * Sets the value of an element style.
\r
985 * @param {String} name The name of the style. The CSS naming notation
\r
986 * must be used (e.g. "background-color").
\r
987 * @param {String} value The value to be set to the style.
\r
988 * @returns {CKEDITOR.dom.element} This element instance.
\r
990 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
991 * <b>element.setStyle( 'background-color', '#ff0000' )</b>;
\r
992 * <b>element.setStyle( 'margin-top', '10px' )</b>;
\r
993 * <b>element.setStyle( 'float', 'right' )</b>;
\r
995 setStyle : function( name, value )
\r
997 this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ] = value;
\r
1002 * Sets the value of several element styles.
\r
1003 * @param {Object} stylesPairs An object containing the names and
\r
1004 * values of the styles.
\r
1005 * @returns {CKEDITOR.dom.element} This element instance.
\r
1007 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1008 * <b>element.setStyles({
\r
1009 * 'position' : 'absolute',
\r
1010 * 'float' : 'right' })</b>;
\r
1012 setStyles : function( stylesPairs )
\r
1014 for ( var name in stylesPairs )
\r
1015 this.setStyle( name, stylesPairs[ name ] );
\r
1020 * Sets the opacity of an element.
\r
1021 * @param {Number} opacity A number within the range [0.0, 1.0].
\r
1023 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1024 * <b>element.setOpacity( 0.75 )</b>;
\r
1026 setOpacity : function( opacity )
\r
1028 if ( CKEDITOR.env.ie )
\r
1030 opacity = Math.round( opacity * 100 );
\r
1031 this.setStyle( 'filter', opacity >= 100 ? '' : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' );
\r
1034 this.setStyle( 'opacity', opacity );
\r
1038 * Makes the element and its children unselectable.
\r
1041 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1042 * element.unselectable();
\r
1045 CKEDITOR.env.gecko ?
\r
1048 this.$.style.MozUserSelect = 'none';
\r
1050 : CKEDITOR.env.webkit ?
\r
1053 this.$.style.KhtmlUserSelect = 'none';
\r
1058 if ( CKEDITOR.env.ie || CKEDITOR.env.opera )
\r
1060 var element = this.$,
\r
1064 element.unselectable = 'on';
\r
1066 while ( ( e = element.all[ i++ ] ) )
\r
1068 switch ( e.tagName.toLowerCase() )
\r
1074 /* Ignore the above tags */
\r
1077 e.unselectable = 'on';
\r
1083 getPositionedAncestor : function()
\r
1085 var current = this;
\r
1086 while ( current.getName() != 'html' )
\r
1088 if ( current.getComputedStyle( 'position' ) != 'static' )
\r
1091 current = current.getParent();
\r
1096 getDocumentPosition : function( refDocument )
\r
1099 body = this.getDocument().getBody(),
\r
1100 quirks = this.getDocument().$.compatMode == 'BackCompat';
\r
1102 var doc = this.getDocument();
\r
1104 if ( document.documentElement[ "getBoundingClientRect" ] )
\r
1106 var box = this.$.getBoundingClientRect(),
\r
1108 $docElem = $doc.documentElement;
\r
1110 var clientTop = $docElem.clientTop || body.$.clientTop || 0,
\r
1111 clientLeft = $docElem.clientLeft || body.$.clientLeft || 0,
\r
1112 needAdjustScrollAndBorders = true;
\r
1115 * #3804: getBoundingClientRect() works differently on IE and non-IE
\r
1116 * browsers, regarding scroll positions.
\r
1118 * On IE, the top position of the <html> element is always 0, no matter
\r
1119 * how much you scrolled down.
\r
1121 * On other browsers, the top position of the <html> element is negative
\r
1124 if ( CKEDITOR.env.ie )
\r
1126 var inDocElem = doc.getDocumentElement().contains( this ),
\r
1127 inBody = doc.getBody().contains( this );
\r
1129 needAdjustScrollAndBorders = ( quirks && inBody ) || ( !quirks && inDocElem );
\r
1132 if ( needAdjustScrollAndBorders )
\r
1134 x = box.left + ( !quirks && $docElem.scrollLeft || body.$.scrollLeft );
\r
1136 y = box.top + ( !quirks && $docElem.scrollTop || body.$.scrollTop );
\r
1142 var current = this, previous = null, offsetParent;
\r
1143 while ( current && !( current.getName() == 'body' || current.getName() == 'html' ) )
\r
1145 x += current.$.offsetLeft - current.$.scrollLeft;
\r
1146 y += current.$.offsetTop - current.$.scrollTop;
\r
1148 // Opera includes clientTop|Left into offsetTop|Left.
\r
1149 if ( !current.equals( this ) )
\r
1151 x += ( current.$.clientLeft || 0 );
\r
1152 y += ( current.$.clientTop || 0 );
\r
1155 var scrollElement = previous;
\r
1156 while ( scrollElement && !scrollElement.equals( current ) )
\r
1158 x -= scrollElement.$.scrollLeft;
\r
1159 y -= scrollElement.$.scrollTop;
\r
1160 scrollElement = scrollElement.getParent();
\r
1163 previous = current;
\r
1164 current = ( offsetParent = current.$.offsetParent ) ?
\r
1165 new CKEDITOR.dom.element( offsetParent ) : null;
\r
1169 if ( refDocument )
\r
1171 var currentWindow = this.getWindow(),
\r
1172 refWindow = refDocument.getWindow();
\r
1174 if ( !currentWindow.equals( refWindow ) && currentWindow.$.frameElement )
\r
1176 var iframePosition = ( new CKEDITOR.dom.element( currentWindow.$.frameElement ) ).getDocumentPosition( refDocument );
\r
1178 x += iframePosition.x;
\r
1179 y += iframePosition.y;
\r
1183 if ( !document.documentElement[ "getBoundingClientRect" ] )
\r
1185 // In Firefox, we'll endup one pixel before the element positions,
\r
1186 // so we must add it here.
\r
1187 if ( CKEDITOR.env.gecko && !quirks )
\r
1189 x += this.$.clientLeft ? 1 : 0;
\r
1190 y += this.$.clientTop ? 1 : 0;
\r
1194 return { x : x, y : y };
\r
1197 scrollIntoView : function( alignTop )
\r
1199 // Get the element window.
\r
1200 var win = this.getWindow(),
\r
1201 winHeight = win.getViewPaneSize().height;
\r
1203 // Starts from the offset that will be scrolled with the negative value of
\r
1204 // the visible window height.
\r
1205 var offset = winHeight * -1;
\r
1207 // Append the view pane's height if align to top.
\r
1208 // Append element height if we are aligning to the bottom.
\r
1210 offset += winHeight;
\r
1213 offset += this.$.offsetHeight || 0;
\r
1215 // Consider the margin in the scroll, which is ok for our current needs, but
\r
1216 // needs investigation if we will be using this function in other places.
\r
1217 offset += parseInt( this.getComputedStyle( 'marginBottom' ) || 0, 10 ) || 0;
\r
1220 // Append the offsets for the entire element hierarchy.
\r
1221 var elementPosition = this.getDocumentPosition();
\r
1222 offset += elementPosition.y;
\r
1224 // offset value might be out of range(nagative), fix it(#3692).
\r
1225 offset = offset < 0 ? 0 : offset;
\r
1227 // Scroll the window to the desired position, if not already visible(#3795).
\r
1228 var currentScroll = win.getScrollPosition().y;
\r
1229 if ( offset > currentScroll || offset < currentScroll - winHeight )
\r
1230 win.$.scrollTo( 0, offset );
\r
1233 setState : function( state )
\r
1237 case CKEDITOR.TRISTATE_ON :
\r
1238 this.addClass( 'cke_on' );
\r
1239 this.removeClass( 'cke_off' );
\r
1240 this.removeClass( 'cke_disabled' );
\r
1242 case CKEDITOR.TRISTATE_DISABLED :
\r
1243 this.addClass( 'cke_disabled' );
\r
1244 this.removeClass( 'cke_off' );
\r
1245 this.removeClass( 'cke_on' );
\r
1248 this.addClass( 'cke_off' );
\r
1249 this.removeClass( 'cke_on' );
\r
1250 this.removeClass( 'cke_disabled' );
\r
1256 * Returns the inner document of this IFRAME element.
\r
1257 * @returns {CKEDITOR.dom.document} The inner document.
\r
1259 getFrameDocument : function()
\r
1265 // In IE, with custom document.domain, it may happen that
\r
1266 // the iframe is not yet available, resulting in "Access
\r
1267 // Denied" for the following property access.
\r
1268 $.contentWindow.document;
\r
1272 // Trick to solve this issue, forcing the iframe to get ready
\r
1273 // by simply setting its "src" property.
\r
1276 // In IE6 though, the above is not enough, so we must pause the
\r
1277 // execution for a while, giving it time to think.
\r
1278 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
\r
1280 window.showModalDialog(
\r
1281 'javascript:document.write("' +
\r
1283 'window.setTimeout(' +
\r
1284 'function(){window.close();}' +
\r
1290 return $ && new CKEDITOR.dom.document( $.contentWindow.document );
\r
1294 * Copy all the attributes from one node to the other, kinda like a clone
\r
1295 * skipAttributes is an object with the attributes that must NOT be copied.
\r
1296 * @param {CKEDITOR.dom.element} dest The destination element.
\r
1297 * @param {Object} skipAttributes A dictionary of attributes to skip.
\r
1300 copyAttributes : function( dest, skipAttributes )
\r
1302 var attributes = this.$.attributes;
\r
1303 skipAttributes = skipAttributes || {};
\r
1305 for ( var n = 0 ; n < attributes.length ; n++ )
\r
1307 var attribute = attributes[n];
\r
1309 // IE BUG: value attribute is never specified even if it exists.
\r
1310 if ( attribute.specified ||
\r
1311 ( CKEDITOR.env.ie && attribute.nodeValue && attribute.nodeName.toLowerCase() == 'value' ) )
\r
1313 var attrName = attribute.nodeName;
\r
1314 // We can set the type only once, so do it with the proper value, not copying it.
\r
1315 if ( attrName in skipAttributes )
\r
1318 var attrValue = this.getAttribute( attrName );
\r
1319 if ( attrValue === null )
\r
1320 attrValue = attribute.nodeValue;
\r
1322 dest.setAttribute( attrName, attrValue );
\r
1327 if ( this.$.style.cssText !== '' )
\r
1328 dest.$.style.cssText = this.$.style.cssText;
\r
1332 * Changes the tag name of the current element.
\r
1333 * @param {String} newTag The new tag for the element.
\r
1335 renameNode : function( newTag )
\r
1337 // If it's already correct exit here.
\r
1338 if ( this.getName() == newTag )
\r
1341 var doc = this.getDocument();
\r
1343 // Create the new node.
\r
1344 var newNode = new CKEDITOR.dom.element( newTag, doc );
\r
1346 // Copy all attributes.
\r
1347 this.copyAttributes( newNode );
\r
1349 // Move children to the new node.
\r
1350 this.moveChildren( newNode );
\r
1352 // Replace the node.
\r
1353 this.$.parentNode.replaceChild( newNode.$, this.$ );
\r
1354 newNode.$._cke_expando = this.$._cke_expando;
\r
1355 this.$ = newNode.$;
\r
1359 * Gets a DOM tree descendant under the current node.
\r
1360 * @param {Array|Number} indices The child index or array of child indices under the node.
\r
1361 * @returns {CKEDITOR.dom.node} The specified DOM child under the current node. Null if child does not exist.
\r
1363 * var strong = p.getChild(0);
\r
1365 getChild : function( indices )
\r
1367 var rawNode = this.$;
\r
1369 if ( !indices.slice )
\r
1370 rawNode = rawNode.childNodes[ indices ];
\r
1373 while ( indices.length > 0 && rawNode )
\r
1374 rawNode = rawNode.childNodes[ indices.shift() ];
\r
1377 return rawNode ? new CKEDITOR.dom.node( rawNode ) : null;
\r
1380 getChildCount : function()
\r
1382 return this.$.childNodes.length;
\r