2 Copyright (c) 2003-2013, 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], 1 );
\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
111 CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype,
\r
112 /** @lends CKEDITOR.dom.element.prototype */
\r
115 * The node type. This is a constant value set to
\r
116 * {@link CKEDITOR.NODE_ELEMENT}.
\r
120 type : CKEDITOR.NODE_ELEMENT,
\r
123 * Adds a CSS class to the element. It appends the class to the
\r
124 * already existing names.
\r
125 * @param {String} className The name of the class to be added.
\r
127 * var element = new CKEDITOR.dom.element( 'div' );
\r
128 * element.addClass( 'classA' ); // <div class="classA">
\r
129 * element.addClass( 'classB' ); // <div class="classA classB">
\r
130 * element.addClass( 'classA' ); // <div class="classA classB">
\r
132 addClass : function( className )
\r
134 var c = this.$.className;
\r
137 var regex = new RegExp( '(?:^|\\s)' + className + '(?:\\s|$)', '' );
\r
138 if ( !regex.test( c ) )
\r
139 c += ' ' + className;
\r
141 this.$.className = c || className;
\r
145 * Removes a CSS class name from the elements classes. Other classes
\r
146 * remain untouched.
\r
147 * @param {String} className The name of the class to remove.
\r
149 * var element = new CKEDITOR.dom.element( 'div' );
\r
150 * element.addClass( 'classA' ); // <div class="classA">
\r
151 * element.addClass( 'classB' ); // <div class="classA classB">
\r
152 * element.removeClass( 'classA' ); // <div class="classB">
\r
153 * element.removeClass( 'classB' ); // <div>
\r
155 removeClass : function( className )
\r
157 var c = this.getAttribute( 'class' );
\r
160 var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', 'i' );
\r
161 if ( regex.test( c ) )
\r
163 c = c.replace( regex, '' ).replace( /^\s+/, '' );
\r
166 this.setAttribute( 'class', c );
\r
168 this.removeAttribute( 'class' );
\r
173 hasClass : function( className )
\r
175 var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', '' );
\r
176 return regex.test( this.getAttribute('class') );
\r
180 * Append a node as a child of this element.
\r
181 * @param {CKEDITOR.dom.node|String} node The node or element name to be
\r
183 * @param {Boolean} [toStart] Indicates that the element is to be
\r
184 * appended at the start.
\r
185 * @returns {CKEDITOR.dom.node} The appended node.
\r
187 * var p = new CKEDITOR.dom.element( 'p' );
\r
189 * var strong = new CKEDITOR.dom.element( 'strong' );
\r
190 * <b>p.append( strong );</b>
\r
192 * var em = <b>p.append( 'em' );</b>
\r
194 * // result: "<p><strong></strong><em></em></p>"
\r
196 append : function( node, toStart )
\r
198 if ( typeof node == 'string' )
\r
199 node = this.getDocument().createElement( node );
\r
202 this.$.insertBefore( node.$, this.$.firstChild );
\r
204 this.$.appendChild( node.$ );
\r
209 appendHtml : function( html )
\r
211 if ( !this.$.childNodes.length )
\r
212 this.setHtml( html );
\r
215 var temp = new CKEDITOR.dom.element( 'div', this.getDocument() );
\r
216 temp.setHtml( html );
\r
217 temp.moveChildren( this );
\r
222 * Append text to this element.
\r
223 * @param {String} text The text to be appended.
\r
224 * @returns {CKEDITOR.dom.node} The appended node.
\r
226 * var p = new CKEDITOR.dom.element( 'p' );
\r
227 * p.appendText( 'This is' );
\r
228 * p.appendText( ' some text' );
\r
230 * // result: "<p>This is some text</p>"
\r
232 appendText : function( text )
\r
234 if ( this.$.text != undefined )
\r
235 this.$.text += text;
\r
237 this.append( new CKEDITOR.dom.text( text ) );
\r
240 appendBogus : function()
\r
242 var lastChild = this.getLast() ;
\r
244 // Ignore empty/spaces text.
\r
245 while ( lastChild && lastChild.type == CKEDITOR.NODE_TEXT && !CKEDITOR.tools.rtrim( lastChild.getText() ) )
\r
246 lastChild = lastChild.getPrevious();
\r
247 if ( !lastChild || !lastChild.is || !lastChild.is( 'br' ) )
\r
249 var bogus = CKEDITOR.env.opera ?
\r
250 this.getDocument().createText('') :
\r
251 this.getDocument().createElement( 'br' );
\r
253 CKEDITOR.env.gecko && bogus.setAttribute( 'type', '_moz' );
\r
255 this.append( bogus );
\r
260 * Breaks one of the ancestor element in the element position, moving
\r
261 * this element between the broken parts.
\r
262 * @param {CKEDITOR.dom.element} parent The anscestor element to get broken.
\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 <i>:
\r
267 * // <b>This <i>is some</i><span /><i> sample</i> test text</b>
\r
268 * element.breakParent( parent );
\r
270 * // Before breaking:
\r
271 * // <b>This <i>is some<span /> sample</i> test text</b>
\r
272 * // If "element" is <span /> and "parent" is <b>:
\r
273 * // <b>This <i>is some</i></b><span /><b><i> sample</i> test text</b>
\r
274 * element.breakParent( parent );
\r
276 breakParent : function( parent )
\r
278 var range = new CKEDITOR.dom.range( this.getDocument() );
\r
280 // We'll be extracting part of this element, so let's use our
\r
281 // range to get the correct piece.
\r
282 range.setStartAfter( this );
\r
283 range.setEndAfter( parent );
\r
286 var docFrag = range.extractContents();
\r
288 // Move the element outside the broken element.
\r
289 range.insertNode( this.remove() );
\r
291 // Re-insert the extracted piece after the element.
\r
292 docFrag.insertAfterNode( this );
\r
296 CKEDITOR.env.ie || CKEDITOR.env.webkit ?
\r
301 return node.type != CKEDITOR.NODE_ELEMENT ?
\r
302 $.contains( node.getParent().$ ) :
\r
303 $ != node.$ && $.contains( node.$ );
\r
308 return !!( this.$.compareDocumentPosition( node.$ ) & 16 );
\r
312 * Moves the selection focus to this element.
\r
314 * @param {Boolean} defer Whether to asynchronously defer the
\r
315 * execution by 100 ms.
\r
317 * var element = CKEDITOR.document.getById( 'myTextarea' );
\r
318 * <b>element.focus()</b>;
\r
320 focus : ( function()
\r
324 // IE throws error if the element is not visible.
\r
333 return function( defer )
\r
336 CKEDITOR.tools.setTimeout( exec, 100, this );
\r
343 * Gets the inner HTML of this element.
\r
344 * @returns {String} The inner HTML of this element.
\r
346 * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
\r
347 * alert( <b>p.getHtml()</b> ); // "<b>Example</b>"
\r
349 getHtml : function()
\r
351 var retval = this.$.innerHTML;
\r
352 // Strip <?xml:namespace> tags in IE. (#3341).
\r
353 return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval;
\r
356 getOuterHtml : function()
\r
358 if ( this.$.outerHTML )
\r
360 // IE includes the <?xml:namespace> tag in the outerHTML of
\r
361 // namespaced element. So, we must strip it here. (#3341)
\r
362 return this.$.outerHTML.replace( /<\?[^>]*>/, '' );
\r
365 var tmpDiv = this.$.ownerDocument.createElement( 'div' );
\r
366 tmpDiv.appendChild( this.$.cloneNode( true ) );
\r
367 return tmpDiv.innerHTML;
\r
371 * Sets the inner HTML of this element.
\r
372 * @param {String} html The HTML to be set for this element.
\r
373 * @returns {String} The inserted HTML.
\r
375 * var p = new CKEDITOR.dom.element( 'p' );
\r
376 * <b>p.setHtml( '<b>Inner</b> HTML' );</b>
\r
378 * // result: "<p><b>Inner</b> HTML</p>"
\r
380 setHtml : function( html )
\r
382 return ( this.$.innerHTML = html );
\r
386 * Sets the element contents as plain text.
\r
387 * @param {String} text The text to be set.
\r
388 * @returns {String} The inserted text.
\r
390 * var element = new CKEDITOR.dom.element( 'div' );
\r
391 * element.setText( 'A > B & C < D' );
\r
392 * alert( element.innerHTML ); // "A &gt; B &amp; C &lt; D"
\r
394 setText : function( text )
\r
396 CKEDITOR.dom.element.prototype.setText = ( this.$.innerText != undefined ) ?
\r
399 return this.$.innerText = text;
\r
403 return this.$.textContent = text;
\r
406 return this.setText( text );
\r
410 * Gets the value of an element attribute.
\r
412 * @param {String} name The attribute name.
\r
413 * @returns {String} The attribute value or null if not defined.
\r
415 * var element = CKEDITOR.dom.element.createFromHtml( '<input type="text" />' );
\r
416 * alert( <b>element.getAttribute( 'type' )</b> ); // "text"
\r
418 getAttribute : (function()
\r
420 var standard = function( name )
\r
422 return this.$.getAttribute( name, 2 );
\r
425 if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
427 return function( name )
\r
432 name = 'className';
\r
436 name = 'httpEquiv';
\r
440 return this.$.name;
\r
443 var tabIndex = standard.call( this, name );
\r
445 // IE returns tabIndex=0 by default for all
\r
446 // elements. For those elements,
\r
447 // getAtrribute( 'tabindex', 2 ) returns 32768
\r
448 // instead. So, we must make this check to give a
\r
449 // uniform result among all browsers.
\r
450 if ( tabIndex !== 0 && this.$.tabIndex === 0 )
\r
458 var attr = this.$.attributes.getNamedItem( name ),
\r
459 attrValue = attr.specified ? attr.nodeValue // For value given by parser.
\r
460 : this.$.checked; // For value created via DOM interface.
\r
462 return attrValue ? 'checked' : null;
\r
467 return this.$[ name ];
\r
470 // IE does not return inline styles via getAttribute(). See #2947.
\r
471 return this.$.style.cssText;
\r
473 case 'contenteditable':
\r
474 case 'contentEditable':
\r
475 return this.$.attributes.getNamedItem( 'contentEditable' ).specified ?
\r
476 this.$.getAttribute( 'contentEditable' ) : null;
\r
479 return standard.call( this, name );
\r
486 getChildren : function()
\r
488 return new CKEDITOR.dom.nodeList( this.$.childNodes );
\r
492 * Gets the current computed value of one of the element CSS style
\r
495 * @param {String} propertyName The style property name.
\r
496 * @returns {String} The property value.
\r
498 * var element = new CKEDITOR.dom.element( 'span' );
\r
499 * alert( <b>element.getComputedStyle( 'display' )</b> ); // "inline"
\r
503 function( propertyName )
\r
505 return this.$.currentStyle[ CKEDITOR.tools.cssStyleToDomStyle( propertyName ) ];
\r
508 function( propertyName )
\r
510 var style = this.getWindow().$.getComputedStyle( this.$, null );
\r
512 // Firefox may return null if we call the above on a hidden iframe. (#9117)
\r
513 return style ? style.getPropertyValue( propertyName ) : '';
\r
517 * Gets the DTD entries for this element.
\r
518 * @returns {Object} An object containing the list of elements accepted
\r
521 getDtd : function()
\r
523 var dtd = CKEDITOR.dtd[ this.getName() ];
\r
525 this.getDtd = function()
\r
533 getElementsByTag : CKEDITOR.dom.document.prototype.getElementsByTag,
\r
536 * Gets the computed tabindex for this element.
\r
538 * @returns {Number} The tabindex value.
\r
540 * var element = CKEDITOR.document.getById( 'myDiv' );
\r
541 * alert( <b>element.getTabIndex()</b> ); // e.g. "-1"
\r
547 var tabIndex = this.$.tabIndex;
\r
549 // IE returns tabIndex=0 by default for all elements. In
\r
550 // those cases we must check that the element really has
\r
551 // the tabindex attribute set to zero, or it is one of
\r
552 // those element that should have zero by default.
\r
553 if ( tabIndex === 0 && !CKEDITOR.dtd.$tabIndex[ this.getName() ] && parseInt( this.getAttribute( 'tabindex' ), 10 ) !== 0 )
\r
558 : CKEDITOR.env.webkit ?
\r
561 var tabIndex = this.$.tabIndex;
\r
563 // Safari returns "undefined" for elements that should not
\r
564 // have tabindex (like a div). So, we must try to get it
\r
565 // from the attribute.
\r
566 // https://bugs.webkit.org/show_bug.cgi?id=20596
\r
567 if ( tabIndex == undefined )
\r
569 tabIndex = parseInt( this.getAttribute( 'tabindex' ), 10 );
\r
571 // If the element don't have the tabindex attribute,
\r
572 // then we should return -1.
\r
573 if ( isNaN( tabIndex ) )
\r
582 return this.$.tabIndex;
\r
586 * Gets the text value of this element.
\r
588 * Only in IE (which uses innerText), <br> will cause linebreaks,
\r
589 * and sucessive whitespaces (including line breaks) will be reduced to
\r
590 * a single space. This behavior is ok for us, for now. It may change
\r
592 * @returns {String} The text value.
\r
594 * var element = CKEDITOR.dom.element.createFromHtml( '<div>Sample <i>text</i>.</div>' );
\r
595 * alert( <b>element.getText()</b> ); // "Sample text."
\r
597 getText : function()
\r
599 return this.$.textContent || this.$.innerText || '';
\r
603 * Gets the window object that contains this element.
\r
604 * @returns {CKEDITOR.dom.window} The window object.
\r
607 getWindow : function()
\r
609 return this.getDocument().getWindow();
\r
613 * Gets the value of the "id" attribute of this element.
\r
614 * @returns {String} The element id, or null if not available.
\r
616 * var element = CKEDITOR.dom.element.createFromHtml( '<p id="myId"></p>' );
\r
617 * alert( <b>element.getId()</b> ); // "myId"
\r
621 return this.$.id || null;
\r
625 * Gets the value of the "name" attribute of this element.
\r
626 * @returns {String} The element name, or null if not available.
\r
628 * var element = CKEDITOR.dom.element.createFromHtml( '<input name="myName"></input>' );
\r
629 * alert( <b>element.getNameAtt()</b> ); // "myName"
\r
631 getNameAtt : function()
\r
633 return this.$.name || null;
\r
637 * Gets the element name (tag name). The returned name is guaranteed to
\r
638 * be always full lowercased.
\r
639 * @returns {String} The element name.
\r
641 * var element = new CKEDITOR.dom.element( 'span' );
\r
642 * alert( <b>element.getName()</b> ); // "span"
\r
644 getName : function()
\r
646 // Cache the lowercased name inside a closure.
\r
647 var nodeName = this.$.nodeName.toLowerCase();
\r
649 if ( CKEDITOR.env.ie && ! ( document.documentMode > 8 ) )
\r
651 var scopeName = this.$.scopeName;
\r
652 if ( scopeName != 'HTML' )
\r
653 nodeName = scopeName.toLowerCase() + ':' + nodeName;
\r
657 this.getName = function()
\r
664 * Gets the value set to this element. This value is usually available
\r
665 * for form field elements.
\r
666 * @returns {String} The element value.
\r
668 getValue : function()
\r
670 return this.$.value;
\r
674 * Gets the first child node of this element.
\r
675 * @param {Function} evaluator Filtering the result node.
\r
676 * @returns {CKEDITOR.dom.node} The first child node or null if not
\r
679 * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' );
\r
680 * var first = <b>element.getFirst()</b>;
\r
681 * alert( first.getName() ); // "b"
\r
683 getFirst : function( evaluator )
\r
685 var first = this.$.firstChild,
\r
686 retval = first && new CKEDITOR.dom.node( first );
\r
687 if ( retval && evaluator && !evaluator( retval ) )
\r
688 retval = retval.getNext( evaluator );
\r
694 * @param {Function} evaluator Filtering the result node.
\r
696 getLast : function( evaluator )
\r
698 var last = this.$.lastChild,
\r
699 retval = last && new CKEDITOR.dom.node( last );
\r
700 if ( retval && evaluator && !evaluator( retval ) )
\r
701 retval = retval.getPrevious( evaluator );
\r
706 getStyle : function( name )
\r
708 return this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ];
\r
712 * Checks if the element name matches one or more names.
\r
713 * @param {String} name[,name[,...]] One or more names to be checked.
\r
714 * @returns {Boolean} true if the element name matches any of the names.
\r
716 * var element = new CKEDITOR.element( 'span' );
\r
717 * alert( <b>element.is( 'span' )</b> ); "true"
\r
718 * alert( <b>element.is( 'p', 'span' )</b> ); "true"
\r
719 * alert( <b>element.is( 'p' )</b> ); "false"
\r
720 * alert( <b>element.is( 'p', 'div' )</b> ); "false"
\r
724 var name = this.getName();
\r
725 for ( var i = 0 ; i < arguments.length ; i++ )
\r
727 if ( arguments[ i ] == name )
\r
734 * Decide whether one element is able to receive cursor.
\r
735 * @param {Boolean} [textCursor=true] Only consider element that could receive text child.
\r
737 isEditable : function( textCursor )
\r
739 var name = this.getName();
\r
741 if ( this.isReadOnly()
\r
742 || this.getComputedStyle( 'display' ) == 'none'
\r
743 || this.getComputedStyle( 'visibility' ) == 'hidden'
\r
744 || this.is( 'a' ) && this.data( 'cke-saved-name' ) && !this.getChildCount()
\r
745 || CKEDITOR.dtd.$nonEditable[ name ]
\r
746 || CKEDITOR.dtd.$empty[ name ] )
\r
751 if ( textCursor !== false )
\r
753 // Get the element DTD (defaults to span for unknown elements).
\r
754 var dtd = CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span;
\r
755 // In the DTD # == text node.
\r
756 return ( dtd && dtd[ '#'] );
\r
762 isIdentical : function( otherElement )
\r
764 if ( this.getName() != otherElement.getName() )
\r
767 var thisAttribs = this.$.attributes,
\r
768 otherAttribs = otherElement.$.attributes;
\r
770 var thisLength = thisAttribs.length,
\r
771 otherLength = otherAttribs.length;
\r
773 for ( var i = 0 ; i < thisLength ; i++ )
\r
775 var attribute = thisAttribs[ i ];
\r
777 if ( attribute.nodeName == '_moz_dirty' )
\r
780 if ( ( !CKEDITOR.env.ie || ( attribute.specified && attribute.nodeName != 'data-cke-expando' ) ) && attribute.nodeValue != otherElement.getAttribute( attribute.nodeName ) )
\r
784 // For IE, we have to for both elements, because it's difficult to
\r
785 // know how the atttibutes collection is organized in its DOM.
\r
786 if ( CKEDITOR.env.ie )
\r
788 for ( i = 0 ; i < otherLength ; i++ )
\r
790 attribute = otherAttribs[ i ];
\r
791 if ( attribute.specified && attribute.nodeName != 'data-cke-expando'
\r
792 && attribute.nodeValue != this.getAttribute( attribute.nodeName ) )
\r
801 * Checks if this element is visible. May not work if the element is
\r
802 * child of an element with visibility set to "hidden", but works well
\r
803 * on the great majority of cases.
\r
804 * @return {Boolean} True if the element is visible.
\r
806 isVisible : function()
\r
808 var isVisible = ( this.$.offsetHeight || this.$.offsetWidth ) && this.getComputedStyle( 'visibility' ) != 'hidden',
\r
810 elementWindowFrame;
\r
812 // Webkit and Opera report non-zero offsetHeight despite that
\r
813 // element is inside an invisible iframe. (#4542)
\r
814 if ( isVisible && ( CKEDITOR.env.webkit || CKEDITOR.env.opera ) )
\r
816 elementWindow = this.getWindow();
\r
818 if ( !elementWindow.equals( CKEDITOR.document.getWindow() )
\r
819 && ( elementWindowFrame = elementWindow.$.frameElement ) )
\r
821 isVisible = new CKEDITOR.dom.element( elementWindowFrame ).isVisible();
\r
825 return !!isVisible;
\r
829 * Whether it's an empty inline elements which has no visual impact when removed.
\r
831 isEmptyInlineRemoveable : function()
\r
833 if ( !CKEDITOR.dtd.$removeEmpty[ this.getName() ] )
\r
836 var children = this.getChildren();
\r
837 for ( var i = 0, count = children.count(); i < count; i++ )
\r
839 var child = children.getItem( i );
\r
841 if ( child.type == CKEDITOR.NODE_ELEMENT && child.data( 'cke-bookmark' ) )
\r
844 if ( child.type == CKEDITOR.NODE_ELEMENT && !child.isEmptyInlineRemoveable()
\r
845 || child.type == CKEDITOR.NODE_TEXT && CKEDITOR.tools.trim( child.getText() ) )
\r
854 * Checks if the element has any defined attributes.
\r
856 * @returns {Boolean} True if the element has attributes.
\r
858 * var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' );
\r
859 * alert( <b>element.hasAttributes()</b> ); // "true"
\r
861 * var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' );
\r
862 * alert( <b>element.hasAttributes()</b> ); // "false"
\r
865 CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ?
\r
868 var attributes = this.$.attributes;
\r
870 for ( var i = 0 ; i < attributes.length ; i++ )
\r
872 var attribute = attributes[i];
\r
874 switch ( attribute.nodeName )
\r
877 // IE has a strange bug. If calling removeAttribute('className'),
\r
878 // the attributes collection will still contain the "class"
\r
879 // attribute, which will be marked as "specified", even if the
\r
880 // outerHTML of the element is not displaying the class attribute.
\r
881 // Note : I was not able to reproduce it outside the editor,
\r
882 // but I've faced it while working on the TC of #1391.
\r
883 if ( this.getAttribute( 'class' ) )
\r
886 // Attributes to be ignored.
\r
887 case 'data-cke-expando' :
\r
893 if ( attribute.specified )
\r
903 var attrs = this.$.attributes,
\r
904 attrsNum = attrs.length;
\r
906 // The _moz_dirty attribute might get into the element after pasting (#5455)
\r
907 var execludeAttrs = { 'data-cke-expando' : 1, _moz_dirty : 1 };
\r
909 return attrsNum > 0 &&
\r
911 !execludeAttrs[ attrs[0].nodeName ] ||
\r
912 ( attrsNum == 2 && !execludeAttrs[ attrs[1].nodeName ] ) );
\r
916 * Checks if the specified attribute is defined for this element.
\r
917 * @returns {Boolean} True if the specified attribute is defined.
\r
918 * @param {String} name The attribute name.
\r
921 hasAttribute : (function()
\r
923 function standard( name )
\r
925 var $attr = this.$.attributes.getNamedItem( name );
\r
926 return !!( $attr && $attr.specified );
\r
929 return ( CKEDITOR.env.ie && CKEDITOR.env.version < 8 ) ?
\r
932 // On IE < 8 the name attribute cannot be retrieved
\r
933 // right after the element creation and setting the
\r
934 // name with setAttribute.
\r
935 if ( name == 'name' )
\r
936 return !!this.$.name;
\r
938 return standard.call( this, name );
\r
945 * Hides this element (display:none).
\r
947 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
948 * <b>element.hide()</b>;
\r
952 this.setStyle( 'display', 'none' );
\r
955 moveChildren : function( target, toStart )
\r
967 while ( ( child = $.lastChild ) )
\r
968 target.insertBefore( $.removeChild( child ), target.firstChild );
\r
972 while ( ( child = $.firstChild ) )
\r
973 target.appendChild( $.removeChild( child ) );
\r
978 * Merges sibling elements that are identical to this one.<br>
\r
980 * Identical child elements are also merged. For example:<br>
\r
981 * <b><i></i></b><b><i></i></b> => <b><i></i></b>
\r
983 * @param {Boolean} [inlineOnly] Allow only inline elements to be merged. Defaults to "true".
\r
985 mergeSiblings : ( function()
\r
987 function mergeElements( element, sibling, isNext )
\r
989 if ( sibling && sibling.type == CKEDITOR.NODE_ELEMENT )
\r
991 // Jumping over bookmark nodes and empty inline elements, e.g. <b><i></i></b>,
\r
992 // queuing them to be moved later. (#5567)
\r
993 var pendingNodes = [];
\r
995 while ( sibling.data( 'cke-bookmark' )
\r
996 || sibling.isEmptyInlineRemoveable() )
\r
998 pendingNodes.push( sibling );
\r
999 sibling = isNext ? sibling.getNext() : sibling.getPrevious();
\r
1000 if ( !sibling || sibling.type != CKEDITOR.NODE_ELEMENT )
\r
1004 if ( element.isIdentical( sibling ) )
\r
1006 // Save the last child to be checked too, to merge things like
\r
1007 // <b><i></i></b><b><i></i></b> => <b><i></i></b>
\r
1008 var innerSibling = isNext ? element.getLast() : element.getFirst();
\r
1010 // Move pending nodes first into the target element.
\r
1011 while( pendingNodes.length )
\r
1012 pendingNodes.shift().move( element, !isNext );
\r
1014 sibling.moveChildren( element, !isNext );
\r
1017 // Now check the last inner child (see two comments above).
\r
1018 if ( innerSibling && innerSibling.type == CKEDITOR.NODE_ELEMENT )
\r
1019 innerSibling.mergeSiblings();
\r
1024 return function( inlineOnly )
\r
1026 if ( ! ( inlineOnly === false
\r
1027 || CKEDITOR.dtd.$removeEmpty[ this.getName() ]
\r
1028 || this.is( 'a' ) ) ) // Merge empty links and anchors also. (#5567)
\r
1033 mergeElements( this, this.getNext(), true );
\r
1034 mergeElements( this, this.getPrevious() );
\r
1039 * Shows this element (display it).
\r
1041 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1042 * <b>element.show()</b>;
\r
1054 * Sets the value of an element attribute.
\r
1055 * @param {String} name The name of the attribute.
\r
1056 * @param {String} value The value to be set to the attribute.
\r
1058 * @returns {CKEDITOR.dom.element} This element instance.
\r
1060 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1061 * <b>element.setAttribute( 'class', 'myClass' )</b>;
\r
1062 * <b>element.setAttribute( 'title', 'This is an example' )</b>;
\r
1064 setAttribute : (function()
\r
1066 var standard = function( name, value )
\r
1068 this.$.setAttribute( name, value );
\r
1072 if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
1074 return function( name, value )
\r
1076 if ( name == 'class' )
\r
1077 this.$.className = value;
\r
1078 else if ( name == 'style' )
\r
1079 this.$.style.cssText = value;
\r
1080 else if ( name == 'tabindex' ) // Case sensitive.
\r
1081 this.$.tabIndex = value;
\r
1082 else if ( name == 'checked' )
\r
1083 this.$.checked = value;
\r
1084 else if ( name == 'contenteditable' )
\r
1085 standard.call( this, 'contentEditable', value );
\r
1087 standard.apply( this, arguments );
\r
1091 else if ( CKEDITOR.env.ie8Compat && CKEDITOR.env.secure )
\r
1093 return function( name, value )
\r
1095 // IE8 throws error when setting src attribute to non-ssl value. (#7847)
\r
1096 if ( name == 'src' && value.match( /^http:\/\// ) )
\r
1097 try { standard.apply( this, arguments ); } catch( e ){}
\r
1099 standard.apply( this, arguments );
\r
1108 * Sets the value of several element attributes.
\r
1109 * @param {Object} attributesPairs An object containing the names and
\r
1110 * values of the attributes.
\r
1111 * @returns {CKEDITOR.dom.element} This element instance.
\r
1113 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1114 * <b>element.setAttributes({
\r
1115 * 'class' : 'myClass',
\r
1116 * 'title' : 'This is an example' })</b>;
\r
1118 setAttributes : function( attributesPairs )
\r
1120 for ( var name in attributesPairs )
\r
1121 this.setAttribute( name, attributesPairs[ name ] );
\r
1126 * Sets the element value. This function is usually used with form
\r
1128 * @param {String} value The element value.
\r
1129 * @returns {CKEDITOR.dom.element} This element instance.
\r
1131 setValue : function( value )
\r
1133 this.$.value = value;
\r
1138 * Removes an attribute from the element.
\r
1139 * @param {String} name The attribute name.
\r
1142 * var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
\r
1143 * element.removeAttribute( 'class' );
\r
1145 removeAttribute : (function()
\r
1147 var standard = function( name )
\r
1149 this.$.removeAttribute( name );
\r
1152 if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
\r
1154 return function( name )
\r
1156 if ( name == 'class' )
\r
1157 name = 'className';
\r
1158 else if ( name == 'tabindex' )
\r
1159 name = 'tabIndex';
\r
1160 else if ( name == 'contenteditable' )
\r
1161 name = 'contentEditable';
\r
1162 standard.call( this, name );
\r
1169 removeAttributes : function ( attributes )
\r
1171 if ( CKEDITOR.tools.isArray( attributes ) )
\r
1173 for ( var i = 0 ; i < attributes.length ; i++ )
\r
1174 this.removeAttribute( attributes[ i ] );
\r
1178 for ( var attr in attributes )
\r
1179 attributes.hasOwnProperty( attr ) && this.removeAttribute( attr );
\r
1184 * Removes a style from the element.
\r
1185 * @param {String} name The style name.
\r
1188 * var element = CKEDITOR.dom.element.createFromHtml( '<div style="display:none"></div>' );
\r
1189 * element.removeStyle( 'display' );
\r
1191 removeStyle : function( name )
\r
1193 // Removes the specified property from the current style object.
\r
1194 var $ = this.$.style;
\r
1196 // "removeProperty" need to be specific on the following styles.
\r
1197 if ( !$.removeProperty && ( name == 'border' || name == 'margin' || name == 'padding' ) )
\r
1199 var names = expandedRules( name );
\r
1200 for ( var i = 0 ; i < names.length ; i++ )
\r
1201 this.removeStyle( names[ i ] );
\r
1205 $.removeProperty ? $.removeProperty( name ) : $.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) );
\r
1207 if ( !this.$.style.cssText )
\r
1208 this.removeAttribute( 'style' );
\r
1212 * Sets the value of an element style.
\r
1213 * @param {String} name The name of the style. The CSS naming notation
\r
1214 * must be used (e.g. "background-color").
\r
1215 * @param {String} value The value to be set to the style.
\r
1216 * @returns {CKEDITOR.dom.element} This element instance.
\r
1218 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1219 * <b>element.setStyle( 'background-color', '#ff0000' )</b>;
\r
1220 * <b>element.setStyle( 'margin-top', '10px' )</b>;
\r
1221 * <b>element.setStyle( 'float', 'right' )</b>;
\r
1223 setStyle : function( name, value )
\r
1225 this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ] = value;
\r
1230 * Sets the value of several element styles.
\r
1231 * @param {Object} stylesPairs An object containing the names and
\r
1232 * values of the styles.
\r
1233 * @returns {CKEDITOR.dom.element} This element instance.
\r
1235 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1236 * <b>element.setStyles({
\r
1237 * 'position' : 'absolute',
\r
1238 * 'float' : 'right' })</b>;
\r
1240 setStyles : function( stylesPairs )
\r
1242 for ( var name in stylesPairs )
\r
1243 this.setStyle( name, stylesPairs[ name ] );
\r
1248 * Sets the opacity of an element.
\r
1249 * @param {Number} opacity A number within the range [0.0, 1.0].
\r
1251 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1252 * <b>element.setOpacity( 0.75 )</b>;
\r
1254 setOpacity : function( opacity )
\r
1256 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
\r
1258 opacity = Math.round( opacity * 100 );
\r
1259 this.setStyle( 'filter', opacity >= 100 ? '' : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' );
\r
1262 this.setStyle( 'opacity', opacity );
\r
1266 * Makes the element and its children unselectable.
\r
1269 * var element = CKEDITOR.dom.element.getById( 'myElement' );
\r
1270 * element.unselectable();
\r
1273 CKEDITOR.env.gecko ?
\r
1276 this.$.style.MozUserSelect = 'none';
\r
1277 this.on( 'dragstart', function( evt ) { evt.data.preventDefault(); } );
\r
1279 : CKEDITOR.env.webkit ?
\r
1282 this.$.style.KhtmlUserSelect = 'none';
\r
1283 this.on( 'dragstart', function( evt ) { evt.data.preventDefault(); } );
\r
1288 if ( CKEDITOR.env.ie || CKEDITOR.env.opera )
\r
1290 var element = this.$,
\r
1291 elements = element.getElementsByTagName("*"),
\r
1295 element.unselectable = 'on';
\r
1297 while ( ( e = elements[ i++ ] ) )
\r
1299 switch ( e.tagName.toLowerCase() )
\r
1305 /* Ignore the above tags */
\r
1308 e.unselectable = 'on';
\r
1314 getPositionedAncestor : function()
\r
1316 var current = this;
\r
1317 while ( current.getName() != 'html' )
\r
1319 if ( current.getComputedStyle( 'position' ) != 'static' )
\r
1322 current = current.getParent();
\r
1327 getDocumentPosition : function( refDocument )
\r
1330 doc = this.getDocument(),
\r
1331 body = doc.getBody(),
\r
1332 quirks = doc.$.compatMode == 'BackCompat';
\r
1334 if ( document.documentElement[ "getBoundingClientRect" ] )
\r
1336 var box = this.$.getBoundingClientRect(),
\r
1338 $docElem = $doc.documentElement;
\r
1340 var clientTop = $docElem.clientTop || body.$.clientTop || 0,
\r
1341 clientLeft = $docElem.clientLeft || body.$.clientLeft || 0,
\r
1342 needAdjustScrollAndBorders = true;
\r
1345 * #3804: getBoundingClientRect() works differently on IE and non-IE
\r
1346 * browsers, regarding scroll positions.
\r
1348 * On IE, the top position of the <html> element is always 0, no matter
\r
1349 * how much you scrolled down.
\r
1351 * On other browsers, the top position of the <html> element is negative
\r
1354 if ( CKEDITOR.env.ie )
\r
1356 var inDocElem = doc.getDocumentElement().contains( this ),
\r
1357 inBody = doc.getBody().contains( this );
\r
1359 needAdjustScrollAndBorders = ( quirks && inBody ) || ( !quirks && inDocElem );
\r
1362 if ( needAdjustScrollAndBorders )
\r
1364 x = box.left + ( !quirks && $docElem.scrollLeft || body.$.scrollLeft );
\r
1366 y = box.top + ( !quirks && $docElem.scrollTop || body.$.scrollTop );
\r
1372 var current = this, previous = null, offsetParent;
\r
1373 while ( current && !( current.getName() == 'body' || current.getName() == 'html' ) )
\r
1375 x += current.$.offsetLeft - current.$.scrollLeft;
\r
1376 y += current.$.offsetTop - current.$.scrollTop;
\r
1378 // Opera includes clientTop|Left into offsetTop|Left.
\r
1379 if ( !current.equals( this ) )
\r
1381 x += ( current.$.clientLeft || 0 );
\r
1382 y += ( current.$.clientTop || 0 );
\r
1385 var scrollElement = previous;
\r
1386 while ( scrollElement && !scrollElement.equals( current ) )
\r
1388 x -= scrollElement.$.scrollLeft;
\r
1389 y -= scrollElement.$.scrollTop;
\r
1390 scrollElement = scrollElement.getParent();
\r
1393 previous = current;
\r
1394 current = ( offsetParent = current.$.offsetParent ) ?
\r
1395 new CKEDITOR.dom.element( offsetParent ) : null;
\r
1399 if ( refDocument )
\r
1401 var currentWindow = this.getWindow(),
\r
1402 refWindow = refDocument.getWindow();
\r
1404 if ( !currentWindow.equals( refWindow ) && currentWindow.$.frameElement )
\r
1406 var iframePosition = ( new CKEDITOR.dom.element( currentWindow.$.frameElement ) ).getDocumentPosition( refDocument );
\r
1408 x += iframePosition.x;
\r
1409 y += iframePosition.y;
\r
1413 if ( !document.documentElement[ "getBoundingClientRect" ] )
\r
1415 // In Firefox, we'll endup one pixel before the element positions,
\r
1416 // so we must add it here.
\r
1417 if ( CKEDITOR.env.gecko && !quirks )
\r
1419 x += this.$.clientLeft ? 1 : 0;
\r
1420 y += this.$.clientTop ? 1 : 0;
\r
1424 return { x : x, y : y };
\r
1428 * Make any page element visible inside the browser viewport.
\r
1429 * @param {Boolean} [alignToTop]
\r
1431 scrollIntoView : function( alignToTop )
\r
1433 var parent = this.getParent();
\r
1434 if ( !parent ) return;
\r
1436 // Scroll the element into parent container from the inner out.
\r
1439 // Check ancestors that overflows.
\r
1441 parent.$.clientWidth && parent.$.clientWidth < parent.$.scrollWidth
\r
1442 || parent.$.clientHeight && parent.$.clientHeight < parent.$.scrollHeight;
\r
1445 this.scrollIntoParent( parent, alignToTop, 1 );
\r
1447 // Walk across the frame.
\r
1448 if ( parent.is( 'html' ) )
\r
1450 var win = parent.getWindow();
\r
1452 // Avoid security error.
\r
1455 var iframe = win.$.frameElement;
\r
1456 iframe && ( parent = new CKEDITOR.dom.element( iframe ) );
\r
1461 while ( ( parent = parent.getParent() ) );
\r
1465 * Make any page element visible inside one of the ancestors by scrolling the parent.
\r
1466 * @param {CKEDITOR.dom.element|CKEDITOR.dom.window} parent The container to scroll into.
\r
1467 * @param {Boolean} [alignToTop] Align the element's top side with the container's
\r
1468 * when <code>true</code> is specified; align the bottom with viewport bottom when
\r
1469 * <code>false</code> is specified. Otherwise scroll on either side with the minimum
\r
1470 * amount to show the element.
\r
1471 * @param {Boolean} [hscroll] Whether horizontal overflow should be considered.
\r
1473 scrollIntoParent : function( parent, alignToTop, hscroll )
\r
1475 !parent && ( parent = this.getWindow() );
\r
1477 var doc = parent.getDocument();
\r
1478 var isQuirks = doc.$.compatMode == 'BackCompat';
\r
1480 // On window <html> is scrolled while quirks scrolls <body>.
\r
1481 if ( parent instanceof CKEDITOR.dom.window )
\r
1482 parent = isQuirks ? doc.getBody() : doc.getDocumentElement();
\r
1484 // Scroll the parent by the specified amount.
\r
1485 function scrollBy( x, y )
\r
1487 // Webkit doesn't support "scrollTop/scrollLeft"
\r
1488 // on documentElement/body element.
\r
1489 if ( /body|html/.test( parent.getName() ) )
\r
1490 parent.getWindow().$.scrollBy( x, y );
\r
1493 parent.$[ 'scrollLeft' ] += x;
\r
1494 parent.$[ 'scrollTop' ] += y;
\r
1498 // Figure out the element position relative to the specified window.
\r
1499 function screenPos( element, refWin )
\r
1501 var pos = { x: 0, y: 0 };
\r
1503 if ( !( element.is( isQuirks ? 'body' : 'html' ) ) )
\r
1505 var box = element.$.getBoundingClientRect();
\r
1506 pos.x = box.left, pos.y = box.top;
\r
1509 var win = element.getWindow();
\r
1510 if ( !win.equals( refWin ) )
\r
1512 var outerPos = screenPos( CKEDITOR.dom.element.get( win.$.frameElement ), refWin );
\r
1513 pos.x += outerPos.x, pos.y += outerPos.y;
\r
1519 // calculated margin size.
\r
1520 function margin( element, side )
\r
1522 return parseInt( element.getComputedStyle( 'margin-' + side ) || 0, 10 ) || 0;
\r
1525 var win = parent.getWindow();
\r
1527 var thisPos = screenPos( this, win ),
\r
1528 parentPos = screenPos( parent, win ),
\r
1529 eh = this.$.offsetHeight,
\r
1530 ew = this.$.offsetWidth,
\r
1531 ch = parent.$.clientHeight,
\r
1532 cw = parent.$.clientWidth,
\r
1536 // Left-top margins.
\r
1539 x : thisPos.x - margin( this, 'left' ) - parentPos.x || 0,
\r
1540 y : thisPos.y - margin( this, 'top' ) - parentPos.y|| 0
\r
1543 // Bottom-right margins.
\r
1546 x : thisPos.x + ew + margin( this, 'right' ) - ( ( parentPos.x ) + cw ) || 0,
\r
1547 y : thisPos.y + eh + margin( this, 'bottom' ) - ( ( parentPos.y ) + ch ) || 0
\r
1550 // 1. Do the specified alignment as much as possible;
\r
1551 // 2. Otherwise be smart to scroll only the minimum amount;
\r
1552 // 3. Never cut at the top;
\r
1553 // 4. DO NOT scroll when already visible.
\r
1554 if ( lt.y < 0 || br.y > 0 )
\r
1557 alignToTop === true ? lt.y :
\r
1558 alignToTop === false ? br.y :
\r
1559 lt.y < 0 ? lt.y : br.y );
\r
1562 if ( hscroll && ( lt.x < 0 || br.x > 0 ) )
\r
1563 scrollBy( lt.x < 0 ? lt.x : br.x, 0 );
\r
1566 setState : function( state )
\r
1570 case CKEDITOR.TRISTATE_ON :
\r
1571 this.addClass( 'cke_on' );
\r
1572 this.removeClass( 'cke_off' );
\r
1573 this.removeClass( 'cke_disabled' );
\r
1575 case CKEDITOR.TRISTATE_DISABLED :
\r
1576 this.addClass( 'cke_disabled' );
\r
1577 this.removeClass( 'cke_off' );
\r
1578 this.removeClass( 'cke_on' );
\r
1581 this.addClass( 'cke_off' );
\r
1582 this.removeClass( 'cke_on' );
\r
1583 this.removeClass( 'cke_disabled' );
\r
1589 * Returns the inner document of this IFRAME element.
\r
1590 * @returns {CKEDITOR.dom.document} The inner document.
\r
1592 getFrameDocument : function()
\r
1598 // In IE, with custom document.domain, it may happen that
\r
1599 // the iframe is not yet available, resulting in "Access
\r
1600 // Denied" for the following property access.
\r
1601 $.contentWindow.document;
\r
1605 // Trick to solve this issue, forcing the iframe to get ready
\r
1606 // by simply setting its "src" property.
\r
1609 // In IE6 though, the above is not enough, so we must pause the
\r
1610 // execution for a while, giving it time to think.
\r
1611 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
\r
1613 window.showModalDialog(
\r
1614 'javascript:document.write("' +
\r
1616 'window.setTimeout(' +
\r
1617 'function(){window.close();}' +
\r
1623 return $ && new CKEDITOR.dom.document( $.contentWindow.document );
\r
1627 * Copy all the attributes from one node to the other, kinda like a clone
\r
1628 * skipAttributes is an object with the attributes that must NOT be copied.
\r
1629 * @param {CKEDITOR.dom.element} dest The destination element.
\r
1630 * @param {Object} skipAttributes A dictionary of attributes to skip.
\r
1633 copyAttributes : function( dest, skipAttributes )
\r
1635 var attributes = this.$.attributes;
\r
1636 skipAttributes = skipAttributes || {};
\r
1638 for ( var n = 0 ; n < attributes.length ; n++ )
\r
1640 var attribute = attributes[n];
\r
1642 // Lowercase attribute name hard rule is broken for
\r
1643 // some attribute on IE, e.g. CHECKED.
\r
1644 var attrName = attribute.nodeName.toLowerCase(),
\r
1647 // We can set the type only once, so do it with the proper value, not copying it.
\r
1648 if ( attrName in skipAttributes )
\r
1651 if ( attrName == 'checked' && ( attrValue = this.getAttribute( attrName ) ) )
\r
1652 dest.setAttribute( attrName, attrValue );
\r
1653 // IE BUG: value attribute is never specified even if it exists.
\r
1654 else if ( attribute.specified ||
\r
1655 ( CKEDITOR.env.ie && attribute.nodeValue && attrName == 'value' ) )
\r
1657 attrValue = this.getAttribute( attrName );
\r
1658 if ( attrValue === null )
\r
1659 attrValue = attribute.nodeValue;
\r
1661 dest.setAttribute( attrName, attrValue );
\r
1666 if ( this.$.style.cssText !== '' )
\r
1667 dest.$.style.cssText = this.$.style.cssText;
\r
1671 * Changes the tag name of the current element.
\r
1672 * @param {String} newTag The new tag for the element.
\r
1674 renameNode : function( newTag )
\r
1676 // If it's already correct exit here.
\r
1677 if ( this.getName() == newTag )
\r
1680 var doc = this.getDocument();
\r
1682 // Create the new node.
\r
1683 var newNode = new CKEDITOR.dom.element( newTag, doc );
\r
1685 // Copy all attributes.
\r
1686 this.copyAttributes( newNode );
\r
1688 // Move children to the new node.
\r
1689 this.moveChildren( newNode );
\r
1691 // Replace the node.
\r
1692 this.getParent() && this.$.parentNode.replaceChild( newNode.$, this.$ );
\r
1693 newNode.$[ 'data-cke-expando' ] = this.$[ 'data-cke-expando' ];
\r
1694 this.$ = newNode.$;
\r
1698 * Gets a DOM tree descendant under the current node.
\r
1699 * @param {Array|Number} indices The child index or array of child indices under the node.
\r
1700 * @returns {CKEDITOR.dom.node} The specified DOM child under the current node. Null if child does not exist.
\r
1702 * var strong = p.getChild(0);
\r
1704 getChild : function( indices )
\r
1706 var rawNode = this.$;
\r
1708 if ( !indices.slice )
\r
1709 rawNode = rawNode.childNodes[ indices ];
\r
1712 while ( indices.length > 0 && rawNode )
\r
1713 rawNode = rawNode.childNodes[ indices.shift() ];
\r
1716 return rawNode ? new CKEDITOR.dom.node( rawNode ) : null;
\r
1719 getChildCount : function()
\r
1721 return this.$.childNodes.length;
\r
1724 disableContextMenu : function()
\r
1726 this.on( 'contextmenu', function( event )
\r
1728 // Cancel the browser context menu.
\r
1729 if ( !event.data.getTarget().hasClass( 'cke_enable_context_menu' ) )
\r
1730 event.data.preventDefault();
\r
1735 * Gets element's direction. Supports both CSS 'direction' prop and 'dir' attr.
\r
1737 getDirection : function( useComputed )
\r
1739 return useComputed ?
\r
1740 this.getComputedStyle( 'direction' )
\r
1741 // Webkit: offline element returns empty direction (#8053).
\r
1742 || this.getDirection()
\r
1743 || this.getDocument().$.dir
\r
1744 || this.getDocument().getBody().getDirection( 1 )
\r
1745 : this.getStyle( 'direction' ) || this.getAttribute( 'dir' );
\r
1749 * Gets, sets and removes custom data to be stored as HTML5 data-* attributes.
\r
1750 * @param {String} name The name of the attribute, excluding the 'data-' part.
\r
1751 * @param {String} [value] The value to set. If set to false, the attribute will be removed.
\r
1753 * element.data( 'extra-info', 'test' ); // appended the attribute data-extra-info="test" to the element
\r
1754 * alert( element.data( 'extra-info' ) ); // "test"
\r
1755 * element.data( 'extra-info', false ); // remove the data-extra-info attribute from the element
\r
1757 data : function ( name, value )
\r
1759 name = 'data-' + name;
\r
1760 if ( value === undefined )
\r
1761 return this.getAttribute( name );
\r
1762 else if ( value === false )
\r
1763 this.removeAttribute( name );
\r
1765 this.setAttribute( name, value );
\r
1772 width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],
\r
1773 height : [ "border-top-width", "border-bottom-width", "padding-top", "padding-bottom" ]
\r
1776 // Generate list of specific style rules, applicable to margin/padding/border.
\r
1777 function expandedRules( style )
\r
1779 var sides = [ 'top', 'left', 'right', 'bottom' ], components;
\r
1781 if ( style == 'border' )
\r
1782 components = [ 'color', 'style', 'width' ];
\r
1785 for ( var i = 0 ; i < sides.length ; i++ )
\r
1790 for ( var j = 0 ; j < components.length ; j++ )
\r
1791 styles.push( [ style, sides[ i ], components[j] ].join( '-' ) );
\r
1794 styles.push( [ style, sides[ i ] ].join( '-' ) );
\r
1800 function marginAndPaddingSize( type )
\r
1802 var adjustment = 0;
\r
1803 for ( var i = 0, len = sides[ type ].length; i < len; i++ )
\r
1804 adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;
\r
1805 return adjustment;
\r
1809 * Sets the element size considering the box model.
\r
1810 * @name CKEDITOR.dom.element.prototype.setSize
\r
1812 * @param {String} type The dimension to set. It accepts "width" and "height".
\r
1813 * @param {Number} size The length unit in px.
\r
1814 * @param {Boolean} isBorderBox Apply the size based on the border box model.
\r
1816 CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox )
\r
1818 if ( typeof size == 'number' )
\r
1820 if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
\r
1821 size -= marginAndPaddingSize.call( this, type );
\r
1823 this.setStyle( type, size + 'px' );
\r
1828 * Gets the element size, possibly considering the box model.
\r
1829 * @name CKEDITOR.dom.element.prototype.getSize
\r
1831 * @param {String} type The dimension to get. It accepts "width" and "height".
\r
1832 * @param {Boolean} isBorderBox Get the size based on the border box model.
\r
1834 CKEDITOR.dom.element.prototype.getSize = function( type, isBorderBox )
\r
1836 var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type ) ],
\r
1837 this.$[ 'client' + CKEDITOR.tools.capitalize( type ) ] ) || 0;
\r
1839 if ( isBorderBox )
\r
1840 size -= marginAndPaddingSize.call( this, type );
\r
Got questions, comments, patches, etc.? Contact Jason Woofenden