library/custom_template/ckeditor/_source/core/dom/element.js

   1 /*
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.html or http://ckeditor.com/license
   4 */
   5
   6 /**
   7  * @fileOverview Defines the {@link CKEDITOR.dom.element} class, which
   8  *              represents a DOM element.
   9  */
  10
  11 /**
  12  * Represents a DOM element.
  13  * @constructor
  14  * @augments CKEDITOR.dom.node
  15  * @param {Object|String} element A native DOM element or the element name for
  16  *              new elements.
  17  * @param {CKEDITOR.dom.document} [ownerDocument] The document that will contain
  18  *              the element in case of element creation.
  19  * @example
  20  * // Create a new &lt;span&gt; element.
  21  * var element = new CKEDITOR.dom.element( 'span' );
  22  * @example
  23  * // Create an element based on a native DOM element.
  24  * var element = new CKEDITOR.dom.element( document.getElementById( 'myId' ) );
  25  */
  26 CKEDITOR.dom.element = function( element, ownerDocument )
  27 {
  28         if ( typeof element == 'string' )
  29                 element = ( ownerDocument ? ownerDocument.$ : document ).createElement( element );
  30
  31         // Call the base constructor (we must not call CKEDITOR.dom.node).
  32         CKEDITOR.dom.domObject.call( this, element );
  33 };
  34
  35 // PACKAGER_RENAME( CKEDITOR.dom.element )
  36
  37 /**
  38  * The the {@link CKEDITOR.dom.element} representing and element. If the
  39  * element is a native DOM element, it will be transformed into a valid
  40  * CKEDITOR.dom.element object.
  41  * @returns {CKEDITOR.dom.element} The transformed element.
  42  * @example
  43  * var element = new CKEDITOR.dom.element( 'span' );
  44  * alert( element == <b>CKEDITOR.dom.element.get( element )</b> );  "true"
  45  * @example
  46  * var element = document.getElementById( 'myElement' );
  47  * alert( <b>CKEDITOR.dom.element.get( element )</b>.getName() );  e.g. "p"
  48  */
  49 CKEDITOR.dom.element.get = function( element )
  50 {
  51         return element && ( element.$ ? element : new CKEDITOR.dom.element( element ) );
  52 };
  53
  54 CKEDITOR.dom.element.prototype = new CKEDITOR.dom.node();
  55
  56 /**
  57  * Creates an instance of the {@link CKEDITOR.dom.element} class based on the
  58  * HTML representation of an element.
  59  * @param {String} html The element HTML. It should define only one element in
  60  *              the "root" level. The "root" element can have child nodes, but not
  61  *              siblings.
  62  * @returns {CKEDITOR.dom.element} The element instance.
  63  * @example
  64  * var element = <b>CKEDITOR.dom.element.createFromHtml( '&lt;strong class="anyclass"&gt;My element&lt;/strong&gt;' )</b>;
  65  * alert( element.getName() );  // "strong"
  66  */
  67 CKEDITOR.dom.element.createFromHtml = function( html, ownerDocument )
  68 {
  69         var temp = new CKEDITOR.dom.element( 'div', ownerDocument );
  70         temp.setHtml( html );
  71
  72         // When returning the node, remove it from its parent to detach it.
  73         return temp.getFirst().remove();
  74 };
  75
  76 CKEDITOR.dom.element.setMarker = function( database, element, name, value )
  77 {
  78         var id = element.getCustomData( 'list_marker_id' ) ||
  79                         ( element.setCustomData( 'list_marker_id', CKEDITOR.tools.getNextNumber() ).getCustomData( 'list_marker_id' ) ),
  80                 markerNames = element.getCustomData( 'list_marker_names' ) ||
  81                         ( element.setCustomData( 'list_marker_names', {} ).getCustomData( 'list_marker_names' ) );
  82         database[id] = element;
  83         markerNames[name] = 1;
  84
  85         return element.setCustomData( name, value );
  86 };
  87
  88 CKEDITOR.dom.element.clearAllMarkers = function( database )
  89 {
  90         for ( var i in database )
  91                 CKEDITOR.dom.element.clearMarkers( database, database[i], 1 );
  92 };
  93
  94 CKEDITOR.dom.element.clearMarkers = function( database, element, removeFromDatabase )
  95 {
  96         var names = element.getCustomData( 'list_marker_names' ),
  97                 id = element.getCustomData( 'list_marker_id' );
  98         for ( var i in names )
  99                 element.removeCustomData( i );
 100         element.removeCustomData( 'list_marker_names' );
 101         if ( removeFromDatabase )
 102         {
 103                 element.removeCustomData( 'list_marker_id' );
 104                 delete database[id];
 105         }
 106 };
 107
 108 CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype,
 109         /** @lends CKEDITOR.dom.element.prototype */
 110         {
 111                 /**
 112                  * The node type. This is a constant value set to
 113                  * {@link CKEDITOR.NODE_ELEMENT}.
 114                  * @type Number
 115                  * @example
 116                  */
 117                 type : CKEDITOR.NODE_ELEMENT,
 118
 119                 /**
 120                  * Adds a CSS class to the element. It appends the class to the
 121                  * already existing names.
 122                  * @param {String} className The name of the class to be added.
 123                  * @example
 124                  * var element = new CKEDITOR.dom.element( 'div' );
 125                  * element.addClass( 'classA' );  // &lt;div class="classA"&gt;
 126                  * element.addClass( 'classB' );  // &lt;div class="classA classB"&gt;
 127                  * element.addClass( 'classA' );  // &lt;div class="classA classB"&gt;
 128                  */
 129                 addClass : function( className )
 130                 {
 131                         var c = this.$.className;
 132                         if ( c )
 133                         {
 134                                 var regex = new RegExp( '(?:^|\\s)' + className + '(?:\\s|$)', '' );
 135                                 if ( !regex.test( c ) )
 136                                         c += ' ' + className;
 137                         }
 138                         this.$.className = c || className;
 139                 },
 140
 141                 /**
 142                  * Removes a CSS class name from the elements classes. Other classes
 143                  * remain untouched.
 144                  * @param {String} className The name of the class to remove.
 145                  * @example
 146                  * var element = new CKEDITOR.dom.element( 'div' );
 147                  * element.addClass( 'classA' );  // &lt;div class="classA"&gt;
 148                  * element.addClass( 'classB' );  // &lt;div class="classA classB"&gt;
 149                  * element.removeClass( 'classA' );  // &lt;div class="classB"&gt;
 150                  * element.removeClass( 'classB' );  // &lt;div&gt;
 151                  */
 152                 removeClass : function( className )
 153                 {
 154                         var c = this.getAttribute( 'class' );
 155                         if ( c )
 156                         {
 157                                 var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', 'i' );
 158                                 if ( regex.test( c ) )
 159                                 {
 160                                         c = c.replace( regex, '' ).replace( /^\s+/, '' );
 161
 162                                         if ( c )
 163                                                 this.setAttribute( 'class', c );
 164                                         else
 165                                                 this.removeAttribute( 'class' );
 166                                 }
 167                         }
 168                 },
 169
 170                 hasClass : function( className )
 171                 {
 172                         var regex = new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)', '' );
 173                         return regex.test( this.getAttribute('class') );
 174                 },
 175
 176                 /**
 177                  * Append a node as a child of this element.
 178                  * @param {CKEDITOR.dom.node|String} node The node or element name to be
 179                  *              appended.
 180                  * @param {Boolean} [toStart] Indicates that the element is to be
 181                  *              appended at the start.
 182                  * @returns {CKEDITOR.dom.node} The appended node.
 183                  * @example
 184                  * var p = new CKEDITOR.dom.element( 'p' );
 185                  *
 186                  * var strong = new CKEDITOR.dom.element( 'strong' );
 187                  * <b>p.append( strong );</b>
 188                  *
 189                  * var em = <b>p.append( 'em' );</b>
 190                  *
 191                  * // result: "&lt;p&gt;&lt;strong&gt;&lt;/strong&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;"
 192                  */
 193                 append : function( node, toStart )
 194                 {
 195                         if ( typeof node == 'string' )
 196                                 node = this.getDocument().createElement( node );
 197
 198                         if ( toStart )
 199                                 this.$.insertBefore( node.$, this.$.firstChild );
 200                         else
 201                                 this.$.appendChild( node.$ );
 202
 203                         return node;
 204                 },
 205
 206                 appendHtml : function( html )
 207                 {
 208                         if ( !this.$.childNodes.length )
 209                                 this.setHtml( html );
 210                         else
 211                         {
 212                                 var temp = new CKEDITOR.dom.element( 'div', this.getDocument() );
 213                                 temp.setHtml( html );
 214                                 temp.moveChildren( this );
 215                         }
 216                 },
 217
 218                 /**
 219                  * Append text to this element.
 220                  * @param {String} text The text to be appended.
 221                  * @returns {CKEDITOR.dom.node} The appended node.
 222                  * @example
 223                  * var p = new CKEDITOR.dom.element( 'p' );
 224                  * p.appendText( 'This is' );
 225                  * p.appendText( ' some text' );
 226                  *
 227                  * // result: "&lt;p&gt;This is some text&lt;/p&gt;"
 228                  */
 229                 appendText : function( text )
 230                 {
 231                         if ( this.$.text != undefined )
 232                                 this.$.text += text;
 233                         else
 234                                 this.append( new CKEDITOR.dom.text( text ) );
 235                 },
 236
 237                 appendBogus : function()
 238                 {
 239                         var lastChild = this.getLast() ;
 240
 241                         // Ignore empty/spaces text.
 242                         while ( lastChild && lastChild.type == CKEDITOR.NODE_TEXT && !CKEDITOR.tools.rtrim( lastChild.getText() ) )
 243                                 lastChild = lastChild.getPrevious();
 244                         if ( !lastChild || !lastChild.is || !lastChild.is( 'br' ) )
 245                         {
 246                                 var bogus = CKEDITOR.env.opera ?
 247                                                 this.getDocument().createText('') :
 248                                                 this.getDocument().createElement( 'br' );
 249
 250                                 CKEDITOR.env.gecko && bogus.setAttribute( 'type', '_moz' );
 251
 252                                 this.append( bogus );
 253                         }
 254                 },
 255
 256                 /**
 257                  * Breaks one of the ancestor element in the element position, moving
 258                  * this element between the broken parts.
 259                  * @param {CKEDITOR.dom.element} parent The anscestor element to get broken.
 260                  * @example
 261                  * // Before breaking:
 262                  * //     &lt;b&gt;This &lt;i&gt;is some&lt;span /&gt; sample&lt;/i&gt; test text&lt;/b&gt;
 263                  * // If "element" is &lt;span /&gt; and "parent" is &lt;i&gt;:
 264                  * //     &lt;b&gt;This &lt;i&gt;is some&lt;/i&gt;&lt;span /&gt;&lt;i&gt; sample&lt;/i&gt; test text&lt;/b&gt;
 265                  * element.breakParent( parent );
 266                  * @example
 267                  * // Before breaking:
 268                  * //     &lt;b&gt;This &lt;i&gt;is some&lt;span /&gt; sample&lt;/i&gt; test text&lt;/b&gt;
 269                  * // If "element" is &lt;span /&gt; and "parent" is &lt;b&gt;:
 270                  * //     &lt;b&gt;This &lt;i&gt;is some&lt;/i&gt;&lt;/b&gt;&lt;span /&gt;&lt;b&gt;&lt;i&gt; sample&lt;/i&gt; test text&lt;/b&gt;
 271                  * element.breakParent( parent );
 272                  */
 273                 breakParent : function( parent )
 274                 {
 275                         var range = new CKEDITOR.dom.range( this.getDocument() );
 276
 277                         // We'll be extracting part of this element, so let's use our
 278                         // range to get the correct piece.
 279                         range.setStartAfter( this );
 280                         range.setEndAfter( parent );
 281
 282                         // Extract it.
 283                         var docFrag = range.extractContents();
 284
 285                         // Move the element outside the broken element.
 286                         range.insertNode( this.remove() );
 287
 288                         // Re-insert the extracted piece after the element.
 289                         docFrag.insertAfterNode( this );
 290                 },
 291
 292                 contains :
 293                         CKEDITOR.env.ie || CKEDITOR.env.webkit ?
 294                                 function( node )
 295                                 {
 296                                         var $ = this.$;
 297
 298                                         return node.type != CKEDITOR.NODE_ELEMENT ?
 299                                                 $.contains( node.getParent().$ ) :
 300                                                 $ != node.$ && $.contains( node.$ );
 301                                 }
 302                         :
 303                                 function( node )
 304                                 {
 305                                         return !!( this.$.compareDocumentPosition( node.$ ) & 16 );
 306                                 },
 307
 308                 /**
 309                  * Moves the selection focus to this element.
 310                  * @param  {Boolean} defer Whether to asynchronously defer the
 311                  *              execution by 100 ms.
 312                  * @example
 313                  * var element = CKEDITOR.document.getById( 'myTextarea' );
 314                  * <b>element.focus()</b>;
 315                  */
 316                 focus : ( function()
 317                 {
 318                         function exec()
 319                         {
 320                         // IE throws error if the element is not visible.
 321                         try
 322                         {
 323                                 this.$.focus();
 324                         }
 325                         catch (e)
 326                         {}
 327                         }
 328
 329                         return function( defer )
 330                         {
 331                                 if ( defer )
 332                                         CKEDITOR.tools.setTimeout( exec, 100, this );
 333                                 else
 334                                         exec.call( this );
 335                         };
 336                 })(),
 337
 338                 /**
 339                  * Gets the inner HTML of this element.
 340                  * @returns {String} The inner HTML of this element.
 341                  * @example
 342                  * var element = CKEDITOR.dom.element.createFromHtml( '&lt;div&gt;&lt;b&gt;Example&lt;/b&gt;&lt;/div&gt;' );
 343                  * alert( <b>p.getHtml()</b> );  // "&lt;b&gt;Example&lt;/b&gt;"
 344                  */
 345                 getHtml : function()
 346                 {
 347                         var retval = this.$.innerHTML;
 348                         // Strip <?xml:namespace> tags in IE. (#3341).
 349                         return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval;
 350                 },
 351
 352                 getOuterHtml : function()
 353                 {
 354                         if ( this.$.outerHTML )
 355                         {
 356                                 // IE includes the <?xml:namespace> tag in the outerHTML of
 357                                 // namespaced element. So, we must strip it here. (#3341)
 358                                 return this.$.outerHTML.replace( /<\?[^>]*>/, '' );
 359                         }
 360
 361                         var tmpDiv = this.$.ownerDocument.createElement( 'div' );
 362                         tmpDiv.appendChild( this.$.cloneNode( true ) );
 363                         return tmpDiv.innerHTML;
 364                 },
 365
 366                 /**
 367                  * Sets the inner HTML of this element.
 368                  * @param {String} html The HTML to be set for this element.
 369                  * @returns {String} The inserted HTML.
 370                  * @example
 371                  * var p = new CKEDITOR.dom.element( 'p' );
 372                  * <b>p.setHtml( '&lt;b&gt;Inner&lt;/b&gt; HTML' );</b>
 373                  *
 374                  * // result: "&lt;p&gt;&lt;b&gt;Inner&lt;/b&gt; HTML&lt;/p&gt;"
 375                  */
 376                 setHtml : function( html )
 377                 {
 378                         return ( this.$.innerHTML = html );
 379                 },
 380
 381                 /**
 382                  * Sets the element contents as plain text.
 383                  * @param {String} text The text to be set.
 384                  * @returns {String} The inserted text.
 385                  * @example
 386                  * var element = new CKEDITOR.dom.element( 'div' );
 387                  * element.setText( 'A > B & C < D' );
 388                  * alert( element.innerHTML );  // "A &amp;gt; B &amp;amp; C &amp;lt; D"
 389                  */
 390                 setText : function( text )
 391                 {
 392                         CKEDITOR.dom.element.prototype.setText = ( this.$.innerText != undefined ) ?
 393                                 function ( text )
 394                                 {
 395                                         return this.$.innerText = text;
 396                                 } :
 397                                 function ( text )
 398                                 {
 399                                         return this.$.textContent = text;
 400                                 };
 401
 402                         return this.setText( text );
 403                 },
 404
 405                 /**
 406                  * Gets the value of an element attribute.
 407                  * @function
 408                  * @param {String} name The attribute name.
 409                  * @returns {String} The attribute value or null if not defined.
 410                  * @example
 411                  * var element = CKEDITOR.dom.element.createFromHtml( '&lt;input type="text" /&gt;' );
 412                  * alert( <b>element.getAttribute( 'type' )</b> );  // "text"
 413                  */
 414                 getAttribute : (function()
 415                 {
 416                         var standard = function( name )
 417                         {
 418                                 return this.$.getAttribute( name, 2 );
 419                         };
 420
 421                         if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
 422                         {
 423                                 return function( name )
 424                                 {
 425                                         switch ( name )
 426                                         {
 427                                                 case 'class':
 428                                                         name = 'className';
 429                                                         break;
 430
 431                                                 case 'tabindex':
 432                                                         var tabIndex = standard.call( this, name );
 433
 434                                                         // IE returns tabIndex=0 by default for all
 435                                                         // elements. For those elements,
 436                                                         // getAtrribute( 'tabindex', 2 ) returns 32768
 437                                                         // instead. So, we must make this check to give a
 438                                                         // uniform result among all browsers.
 439                                                         if ( tabIndex !== 0 && this.$.tabIndex === 0 )
 440                                                                 tabIndex = null;
 441
 442                                                         return tabIndex;
 443                                                         break;
 444
 445                                                 case 'checked':
 446                                                 {
 447                                                         var attr = this.$.attributes.getNamedItem( name ),
 448                                                                 attrValue = attr.specified ? attr.nodeValue     // For value given by parser.
 449                                                                                                                          : this.$.checked;  // For value created via DOM interface.
 450
 451                                                         return attrValue ? 'checked' : null;
 452                                                 }
 453
 454                                                 case 'hspace':
 455                                                 case 'value':
 456                                                         return this.$[ name ];
 457
 458                                                 case 'style':
 459                                                         // IE does not return inline styles via getAttribute(). See #2947.
 460                                                         return this.$.style.cssText;
 461                                         }
 462
 463                                         return standard.call( this, name );
 464                                 };
 465                         }
 466                         else
 467                                 return standard;
 468                 })(),
 469
 470                 getChildren : function()
 471                 {
 472                         return new CKEDITOR.dom.nodeList( this.$.childNodes );
 473                 },
 474
 475                 /**
 476                  * Gets the current computed value of one of the element CSS style
 477                  * properties.
 478                  * @function
 479                  * @param {String} propertyName The style property name.
 480                  * @returns {String} The property value.
 481                  * @example
 482                  * var element = new CKEDITOR.dom.element( 'span' );
 483                  * alert( <b>element.getComputedStyle( 'display' )</b> );  // "inline"
 484                  */
 485                 getComputedStyle :
 486                         CKEDITOR.env.ie ?
 487                                 function( propertyName )
 488                                 {
 489                                         return this.$.currentStyle[ CKEDITOR.tools.cssStyleToDomStyle( propertyName ) ];
 490                                 }
 491                         :
 492                                 function( propertyName )
 493                                 {
 494                                         return this.getWindow().$.getComputedStyle( this.$, '' ).getPropertyValue( propertyName );
 495                                 },
 496
 497                 /**
 498                  * Gets the DTD entries for this element.
 499                  * @returns {Object} An object containing the list of elements accepted
 500                  *              by this element.
 501                  */
 502                 getDtd : function()
 503                 {
 504                         var dtd = CKEDITOR.dtd[ this.getName() ];
 505
 506                         this.getDtd = function()
 507                         {
 508                                 return dtd;
 509                         };
 510
 511                         return dtd;
 512                 },
 513
 514                 getElementsByTag : CKEDITOR.dom.document.prototype.getElementsByTag,
 515
 516                 /**
 517                  * Gets the computed tabindex for this element.
 518                  * @function
 519                  * @returns {Number} The tabindex value.
 520                  * @example
 521                  * var element = CKEDITOR.document.getById( 'myDiv' );
 522                  * alert( <b>element.getTabIndex()</b> );  // e.g. "-1"
 523                  */
 524                 getTabIndex :
 525                         CKEDITOR.env.ie ?
 526                                 function()
 527                                 {
 528                                         var tabIndex = this.$.tabIndex;
 529
 530                                         // IE returns tabIndex=0 by default for all elements. In
 531                                         // those cases we must check that the element really has
 532                                         // the tabindex attribute set to zero, or it is one of
 533                                         // those element that should have zero by default.
 534                                         if ( tabIndex === 0 && !CKEDITOR.dtd.$tabIndex[ this.getName() ] && parseInt( this.getAttribute( 'tabindex' ), 10 ) !== 0 )
 535                                                 tabIndex = -1;
 536
 537                                                 return tabIndex;
 538                                 }
 539                         : CKEDITOR.env.webkit ?
 540                                 function()
 541                                 {
 542                                         var tabIndex = this.$.tabIndex;
 543
 544                                         // Safari returns "undefined" for elements that should not
 545                                         // have tabindex (like a div). So, we must try to get it
 546                                         // from the attribute.
 547                                         // https://bugs.webkit.org/show_bug.cgi?id=20596
 548                                         if ( tabIndex == undefined )
 549                                         {
 550                                                 tabIndex = parseInt( this.getAttribute( 'tabindex' ), 10 );
 551
 552                                                 // If the element don't have the tabindex attribute,
 553                                                 // then we should return -1.
 554                                                 if ( isNaN( tabIndex ) )
 555                                                         tabIndex = -1;
 556                                         }
 557
 558                                         return tabIndex;
 559                                 }
 560                         :
 561                                 function()
 562                                 {
 563                                         return this.$.tabIndex;
 564                                 },
 565
 566                 /**
 567                  * Gets the text value of this element.
 568                  *
 569                  * Only in IE (which uses innerText), &lt;br&gt; will cause linebreaks,
 570                  * and sucessive whitespaces (including line breaks) will be reduced to
 571                  * a single space. This behavior is ok for us, for now. It may change
 572                  * in the future.
 573                  * @returns {String} The text value.
 574                  * @example
 575                  * var element = CKEDITOR.dom.element.createFromHtml( '&lt;div&gt;Same &lt;i&gt;text&lt;/i&gt;.&lt;/div&gt;' );
 576                  * alert( <b>element.getText()</b> );  // "Sample text."
 577                  */
 578                 getText : function()
 579                 {
 580                         return this.$.textContent || this.$.innerText || '';
 581                 },
 582
 583                 /**
 584                  * Gets the window object that contains this element.
 585                  * @returns {CKEDITOR.dom.window} The window object.
 586                  * @example
 587                  */
 588                 getWindow : function()
 589                 {
 590                         return this.getDocument().getWindow();
 591                 },
 592
 593                 /**
 594                  * Gets the value of the "id" attribute of this element.
 595                  * @returns {String} The element id, or null if not available.
 596                  * @example
 597                  * var element = CKEDITOR.dom.element.createFromHtml( '&lt;p id="myId"&gt;&lt;/p&gt;' );
 598                  * alert( <b>element.getId()</b> );  // "myId"
 599                  */
 600                 getId : function()
 601                 {
 602                         return this.$.id || null;
 603                 },
 604
 605                 /**
 606                  * Gets the value of the "name" attribute of this element.
 607                  * @returns {String} The element name, or null if not available.
 608                  * @example
 609                  * var element = CKEDITOR.dom.element.createFromHtml( '&lt;input name="myName"&gt;&lt;/input&gt;' );
 610                  * alert( <b>element.getNameAtt()</b> );  // "myName"
 611                  */
 612                 getNameAtt : function()
 613                 {
 614                         return this.$.name || null;
 615                 },
 616
 617                 /**
 618                  * Gets the element name (tag name). The returned name is guaranteed to
 619                  * be always full lowercased.
 620                  * @returns {String} The element name.
 621                  * @example
 622                  * var element = new CKEDITOR.dom.element( 'span' );
 623                  * alert( <b>element.getName()</b> );  // "span"
 624                  */
 625                 getName : function()
 626                 {
 627                         // Cache the lowercased name inside a closure.
 628                         var nodeName = this.$.nodeName.toLowerCase();
 629
 630                         if ( CKEDITOR.env.ie && ! ( document.documentMode > 8 ) )
 631                         {
 632                                 var scopeName = this.$.scopeName;
 633                                 if ( scopeName != 'HTML' )
 634                                         nodeName = scopeName.toLowerCase() + ':' + nodeName;
 635                         }
 636
 637                         return (
 638                         this.getName = function()
 639                                 {
 640                                         return nodeName;
 641                                 })();
 642                 },
 643
 644                 /**
 645                  * Gets the value set to this element. This value is usually available
 646                  * for form field elements.
 647                  * @returns {String} The element value.
 648                  */
 649                 getValue : function()
 650                 {
 651                         return this.$.value;
 652                 },
 653
 654                 /**
 655                  * Gets the first child node of this element.
 656                  * @param {Function} evaluator Filtering the result node.
 657                  * @returns {CKEDITOR.dom.node} The first child node or null if not
 658                  *              available.
 659                  * @example
 660                  * var element = CKEDITOR.dom.element.createFromHtml( '&lt;div&gt;&lt;b&gt;Example&lt;/b&gt;&lt;/div&gt;' );
 661                  * var first = <b>element.getFirst()</b>;
 662                  * alert( first.getName() );  // "b"
 663                  */
 664                 getFirst : function( evaluator )
 665                 {
 666                         var first = this.$.firstChild,
 667                                 retval = first && new CKEDITOR.dom.node( first );
 668                         if ( retval && evaluator && !evaluator( retval ) )
 669                                 retval = retval.getNext( evaluator );
 670
 671                         return retval;
 672                 },
 673
 674                 /**
 675                  * @param {Function} evaluator Filtering the result node.
 676                  */
 677                 getLast : function( evaluator )
 678                 {
 679                         var last = this.$.lastChild,
 680                                 retval = last && new CKEDITOR.dom.node( last );
 681                         if ( retval && evaluator && !evaluator( retval ) )
 682                                 retval = retval.getPrevious( evaluator );
 683
 684                         return retval;
 685                 },
 686
 687                 getStyle : function( name )
 688                 {
 689                         return this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ];
 690                 },
 691
 692                 /**
 693                  * Checks if the element name matches one or more names.
 694                  * @param {String} name[,name[,...]] One or more names to be checked.
 695                  * @returns {Boolean} true if the element name matches any of the names.
 696                  * @example
 697                  * var element = new CKEDITOR.element( 'span' );
 698                  * alert( <b>element.is( 'span' )</b> );  "true"
 699                  * alert( <b>element.is( 'p', 'span' )</b> );  "true"
 700                  * alert( <b>element.is( 'p' )</b> );  "false"
 701                  * alert( <b>element.is( 'p', 'div' )</b> );  "false"
 702                  */
 703                 is : function()
 704                 {
 705                         var name = this.getName();
 706                         for ( var i = 0 ; i < arguments.length ; i++ )
 707                         {
 708                                 if ( arguments[ i ] == name )
 709                                         return true;
 710                         }
 711                         return false;
 712                 },
 713
 714                 isEditable : function()
 715                 {
 716                         // Get the element name.
 717                         var name = this.getName();
 718
 719                         // Get the element DTD (defaults to span for unknown elements).
 720                         var dtd = !CKEDITOR.dtd.$nonEditable[ name ]
 721                                                 && ( CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span );
 722
 723                         // In the DTD # == text node.
 724                         return ( dtd && dtd['#'] );
 725                 },
 726
 727                 isIdentical : function( otherElement )
 728                 {
 729                         if ( this.getName() != otherElement.getName() )
 730                                 return false;
 731
 732                         var thisAttribs = this.$.attributes,
 733                                 otherAttribs = otherElement.$.attributes;
 734
 735                         var thisLength = thisAttribs.length,
 736                                 otherLength = otherAttribs.length;
 737
 738                         for ( var i = 0 ; i < thisLength ; i++ )
 739                         {
 740                                 var attribute = thisAttribs[ i ];
 741
 742                                 if ( attribute.nodeName == '_moz_dirty' )
 743                                         continue;
 744
 745                                 if ( ( !CKEDITOR.env.ie || ( attribute.specified && attribute.nodeName != 'data-cke-expando' ) ) && attribute.nodeValue != otherElement.getAttribute( attribute.nodeName ) )
 746                                         return false;
 747                         }
 748
 749                         // For IE, we have to for both elements, because it's difficult to
 750                         // know how the atttibutes collection is organized in its DOM.
 751                         if ( CKEDITOR.env.ie )
 752                         {
 753                                 for ( i = 0 ; i < otherLength ; i++ )
 754                                 {
 755                                         attribute = otherAttribs[ i ];
 756                                         if ( attribute.specified && attribute.nodeName != 'data-cke-expando'
 757                                                         && attribute.nodeValue != this.getAttribute( attribute.nodeName ) )
 758                                                 return false;
 759                                 }
 760                         }
 761
 762                         return true;
 763                 },
 764
 765                 /**
 766                  * Checks if this element is visible. May not work if the element is
 767                  * child of an element with visibility set to "hidden", but works well
 768                  * on the great majority of cases.
 769                  * @return {Boolean} True if the element is visible.
 770                  */
 771                 isVisible : function()
 772                 {
 773                         var isVisible = !!this.$.offsetHeight && this.getComputedStyle( 'visibility' ) != 'hidden',
 774                                 elementWindow,
 775                                 elementWindowFrame;
 776
 777                         // Webkit and Opera report non-zero offsetHeight despite that
 778                         // element is inside an invisible iframe. (#4542)
 779                         if ( isVisible && ( CKEDITOR.env.webkit || CKEDITOR.env.opera ) )
 780                         {
 781                                 elementWindow = this.getWindow();
 782
 783                                 if ( !elementWindow.equals( CKEDITOR.document.getWindow() )
 784                                                 && ( elementWindowFrame = elementWindow.$.frameElement ) )
 785                                 {
 786                                         isVisible = new CKEDITOR.dom.element( elementWindowFrame ).isVisible();
 787                                 }
 788                         }
 789
 790                         return isVisible;
 791                 },
 792
 793                 /**
 794                  * Whether it's an empty inline elements which has no visual impact when removed.
 795                  */
 796                 isEmptyInlineRemoveable : function()
 797                 {
 798                         if ( !CKEDITOR.dtd.$removeEmpty[ this.getName() ] )
 799                                 return false;
 800
 801                         var children = this.getChildren();
 802                         for ( var i = 0, count = children.count(); i < count; i++ )
 803                         {
 804                                 var child = children.getItem( i );
 805
 806                                 if ( child.type == CKEDITOR.NODE_ELEMENT && child.data( 'cke-bookmark' ) )
 807                                         continue;
 808
 809                                 if ( child.type == CKEDITOR.NODE_ELEMENT && !child.isEmptyInlineRemoveable()
 810                                         || child.type == CKEDITOR.NODE_TEXT && CKEDITOR.tools.trim( child.getText() ) )
 811                                 {
 812                                         return false;
 813                                 }
 814                         }
 815                         return true;
 816                 },
 817
 818                 /**
 819                  * Indicates that the element has defined attributes.
 820                  * @returns {Boolean} True if the element has attributes.
 821                  * @example
 822                  * var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' );
 823                  * alert( <b>element.hasAttributes()</b> );  "true"
 824                  * @example
 825                  * var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' );
 826                  * alert( <b>element.hasAttributes()</b> );  "false"
 827                  */
 828                 hasAttributes :
 829                         CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) ?
 830                                 function()
 831                                 {
 832                                         var attributes = this.$.attributes;
 833
 834                                         for ( var i = 0 ; i < attributes.length ; i++ )
 835                                         {
 836                                                 var attribute = attributes[i];
 837
 838                                                 switch ( attribute.nodeName )
 839                                                 {
 840                                                         case 'class' :
 841                                                                 // IE has a strange bug. If calling removeAttribute('className'),
 842                                                                 // the attributes collection will still contain the "class"
 843                                                                 // attribute, which will be marked as "specified", even if the
 844                                                                 // outerHTML of the element is not displaying the class attribute.
 845                                                                 // Note : I was not able to reproduce it outside the editor,
 846                                                                 // but I've faced it while working on the TC of #1391.
 847                                                                 if ( this.getAttribute( 'class' ) )
 848                                                                         return true;
 849
 850                                                         // Attributes to be ignored.
 851                                                         case 'data-cke-expando' :
 852                                                                 continue;
 853
 854                                                         /*jsl:fallthru*/
 855
 856                                                         default :
 857                                                                 if ( attribute.specified )
 858                                                                         return true;
 859                                                 }
 860                                         }
 861
 862                                         return false;
 863                                 }
 864                         :
 865                                 function()
 866                                 {
 867                                         var attrs = this.$.attributes,
 868                                                 attrsNum = attrs.length;
 869
 870                                         // The _moz_dirty attribute might get into the element after pasting (#5455)
 871                                         var execludeAttrs = { 'data-cke-expando' : 1, _moz_dirty : 1 };
 872
 873                                         return attrsNum > 0 &&
 874                                                 ( attrsNum > 2 ||
 875                                                         !execludeAttrs[ attrs[0].nodeName ] ||
 876                                                         ( attrsNum == 2 && !execludeAttrs[ attrs[1].nodeName ] ) );
 877                                 },
 878
 879                 /**
 880                  * Indicates whether a specified attribute is defined for this element.
 881                  * @returns {Boolean} True if the specified attribute is defined.
 882                  * @param (String) name The attribute name.
 883                  * @example
 884                  */
 885                 hasAttribute : function( name )
 886                 {
 887                         var $attr = this.$.attributes.getNamedItem( name );
 888                         return !!( $attr && $attr.specified );
 889                 },
 890
 891                 /**
 892                  * Hides this element (display:none).
 893                  * @example
 894                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
 895                  * <b>element.hide()</b>;
 896                  */
 897                 hide : function()
 898                 {
 899                         this.setStyle( 'display', 'none' );
 900                 },
 901
 902                 moveChildren : function( target, toStart )
 903                 {
 904                         var $ = this.$;
 905                         target = target.$;
 906
 907                         if ( $ == target )
 908                                 return;
 909
 910                         var child;
 911
 912                         if ( toStart )
 913                         {
 914                                 while ( ( child = $.lastChild ) )
 915                                         target.insertBefore( $.removeChild( child ), target.firstChild );
 916                         }
 917                         else
 918                         {
 919                                 while ( ( child = $.firstChild ) )
 920                                         target.appendChild( $.removeChild( child ) );
 921                         }
 922                 },
 923
 924                 /**
 925                  * @param {Boolean} [inlineOnly=true] Allow only inline elements to be merged.
 926                  */
 927                 mergeSiblings : ( function()
 928                 {
 929                         function mergeElements( element, sibling, isNext )
 930                         {
 931                                 if ( sibling && sibling.type == CKEDITOR.NODE_ELEMENT )
 932                                 {
 933                                         // Jumping over bookmark nodes and empty inline elements, e.g. <b><i></i></b>,
 934                                         // queuing them to be moved later. (#5567)
 935                                         var pendingNodes = [];
 936
 937                                         while ( sibling.data( 'cke-bookmark' )
 938                                                 || sibling.isEmptyInlineRemoveable() )
 939                                         {
 940                                                 pendingNodes.push( sibling );
 941                                                 sibling = isNext ? sibling.getNext() : sibling.getPrevious();
 942                                                 if ( !sibling || sibling.type != CKEDITOR.NODE_ELEMENT )
 943                                                         return;
 944                                         }
 945
 946                                         if ( element.isIdentical( sibling ) )
 947                                         {
 948                                                 // Save the last child to be checked too, to merge things like
 949                                                 // <b><i></i></b><b><i></i></b> => <b><i></i></b>
 950                                                 var innerSibling = isNext ? element.getLast() : element.getFirst();
 951
 952                                                 // Move pending nodes first into the target element.
 953                                                 while( pendingNodes.length )
 954                                                         pendingNodes.shift().move( element, !isNext );
 955
 956                                                 sibling.moveChildren( element, !isNext );
 957                                                 sibling.remove();
 958
 959                                                 // Now check the last inner child (see two comments above).
 960                                                 if ( innerSibling && innerSibling.type == CKEDITOR.NODE_ELEMENT )
 961                                                         innerSibling.mergeSiblings();
 962                                         }
 963                                 }
 964                         }
 965
 966                         return function( inlineOnly )
 967                                 {
 968                                         if ( ! ( inlineOnly === false
 969                                                         || CKEDITOR.dtd.$removeEmpty[ this.getName() ]
 970                                                         || this.is( 'a' ) ) )   // Merge empty links and anchors also. (#5567)
 971                                         {
 972                                                 return;
 973                                         }
 974
 975                                         mergeElements( this, this.getNext(), true );
 976                                         mergeElements( this, this.getPrevious() );
 977                                 };
 978                 } )(),
 979
 980                 /**
 981                  * Shows this element (display it).
 982                  * @example
 983                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
 984                  * <b>element.show()</b>;
 985                  */
 986                 show : function()
 987                 {
 988                         this.setStyles(
 989                                 {
 990                                         display : '',
 991                                         visibility : ''
 992                                 });
 993                 },
 994
 995                 /**
 996                  * Sets the value of an element attribute.
 997                  * @param {String} name The name of the attribute.
 998                  * @param {String} value The value to be set to the attribute.
 999                  * @function
1000                  * @returns {CKEDITOR.dom.element} This element instance.
1001                  * @example
1002                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
1003                  * <b>element.setAttribute( 'class', 'myClass' )</b>;
1004                  * <b>element.setAttribute( 'title', 'This is an example' )</b>;
1005                  */
1006                 setAttribute : (function()
1007                 {
1008                         var standard = function( name, value )
1009                         {
1010                                 this.$.setAttribute( name, value );
1011                                 return this;
1012                         };
1013
1014                         if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
1015                         {
1016                                 return function( name, value )
1017                                 {
1018                                         if ( name == 'class' )
1019                                                 this.$.className = value;
1020                                         else if ( name == 'style' )
1021                                                 this.$.style.cssText = value;
1022                                         else if ( name == 'tabindex' )  // Case sensitive.
1023                                                 this.$.tabIndex = value;
1024                                         else if ( name == 'checked' )
1025                                                 this.$.checked = value;
1026                                         else
1027                                                 standard.apply( this, arguments );
1028                                         return this;
1029                                 };
1030                         }
1031                         else
1032                                 return standard;
1033                 })(),
1034
1035                 /**
1036                  * Sets the value of several element attributes.
1037                  * @param {Object} attributesPairs An object containing the names and
1038                  *              values of the attributes.
1039                  * @returns {CKEDITOR.dom.element} This element instance.
1040                  * @example
1041                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
1042                  * <b>element.setAttributes({
1043                  *     'class' : 'myClass',
1044                  *     'title' : 'This is an example' })</b>;
1045                  */
1046                 setAttributes : function( attributesPairs )
1047                 {
1048                         for ( var name in attributesPairs )
1049                                 this.setAttribute( name, attributesPairs[ name ] );
1050                         return this;
1051                 },
1052
1053                 /**
1054                  * Sets the element value. This function is usually used with form
1055                  * field element.
1056                  * @param {String} value The element value.
1057                  * @returns {CKEDITOR.dom.element} This element instance.
1058                  */
1059                 setValue : function( value )
1060                 {
1061                         this.$.value = value;
1062                         return this;
1063                 },
1064
1065                 /**
1066                  * Removes an attribute from the element.
1067                  * @param {String} name The attribute name.
1068                  * @function
1069                  * @example
1070                  * var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
1071                  * element.removeAttribute( 'class' );
1072                  */
1073                 removeAttribute : (function()
1074                 {
1075                         var standard = function( name )
1076                         {
1077                                 this.$.removeAttribute( name );
1078                         };
1079
1080                         if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
1081                         {
1082                                 return function( name )
1083                                 {
1084                                         if ( name == 'class' )
1085                                                 name = 'className';
1086                                         else if ( name == 'tabindex' )
1087                                                 name = 'tabIndex';
1088                                         standard.call( this, name );
1089                                 };
1090                         }
1091                         else
1092                                 return standard;
1093                 })(),
1094
1095                 removeAttributes : function ( attributes )
1096                 {
1097                         if ( CKEDITOR.tools.isArray( attributes ) )
1098                         {
1099                                 for ( var i = 0 ; i < attributes.length ; i++ )
1100                                         this.removeAttribute( attributes[ i ] );
1101                         }
1102                         else
1103                         {
1104                                 for ( var attr in attributes )
1105                                         attributes.hasOwnProperty( attr ) && this.removeAttribute( attr );
1106                         }
1107                 },
1108
1109                 /**
1110                  * Removes a style from the element.
1111                  * @param {String} name The style name.
1112                  * @function
1113                  * @example
1114                  * var element = CKEDITOR.dom.element.createFromHtml( '<div style="display:none"></div>' );
1115                  * element.removeStyle( 'display' );
1116                  */
1117                 removeStyle : function( name )
1118                 {
1119                         this.setStyle( name, '' );
1120                         if ( this.$.style.removeAttribute )
1121                                 this.$.style.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) );
1122
1123                         if ( !this.$.style.cssText )
1124                                 this.removeAttribute( 'style' );
1125                 },
1126
1127                 /**
1128                  * Sets the value of an element style.
1129                  * @param {String} name The name of the style. The CSS naming notation
1130                  *              must be used (e.g. "background-color").
1131                  * @param {String} value The value to be set to the style.
1132                  * @returns {CKEDITOR.dom.element} This element instance.
1133                  * @example
1134                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
1135                  * <b>element.setStyle( 'background-color', '#ff0000' )</b>;
1136                  * <b>element.setStyle( 'margin-top', '10px' )</b>;
1137                  * <b>element.setStyle( 'float', 'right' )</b>;
1138                  */
1139                 setStyle : function( name, value )
1140                 {
1141                         this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ] = value;
1142                         return this;
1143                 },
1144
1145                 /**
1146                  * Sets the value of several element styles.
1147                  * @param {Object} stylesPairs An object containing the names and
1148                  *              values of the styles.
1149                  * @returns {CKEDITOR.dom.element} This element instance.
1150                  * @example
1151                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
1152                  * <b>element.setStyles({
1153                  *     'position' : 'absolute',
1154                  *     'float' : 'right' })</b>;
1155                  */
1156                 setStyles : function( stylesPairs )
1157                 {
1158                         for ( var name in stylesPairs )
1159                                 this.setStyle( name, stylesPairs[ name ] );
1160                         return this;
1161                 },
1162
1163                 /**
1164                  * Sets the opacity of an element.
1165                  * @param {Number} opacity A number within the range [0.0, 1.0].
1166                  * @example
1167                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
1168                  * <b>element.setOpacity( 0.75 )</b>;
1169                  */
1170                 setOpacity : function( opacity )
1171                 {
1172                         if ( CKEDITOR.env.ie )
1173                         {
1174                                 opacity = Math.round( opacity * 100 );
1175                                 this.setStyle( 'filter', opacity >= 100 ? '' : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' );
1176                         }
1177                         else
1178                                 this.setStyle( 'opacity', opacity );
1179                 },
1180
1181                 /**
1182                  * Makes the element and its children unselectable.
1183                  * @function
1184                  * @example
1185                  * var element = CKEDITOR.dom.element.getById( 'myElement' );
1186                  * element.unselectable();
1187                  */
1188                 unselectable :
1189                         CKEDITOR.env.gecko ?
1190                                 function()
1191                                 {
1192                                         this.$.style.MozUserSelect = 'none';
1193                                         this.on( 'dragstart', function( evt ) { evt.data.preventDefault(); } );
1194                                 }
1195                         : CKEDITOR.env.webkit ?
1196                                 function()
1197                                 {
1198                                         this.$.style.KhtmlUserSelect = 'none';
1199                                         this.on( 'dragstart', function( evt ) { evt.data.preventDefault(); } );
1200                                 }
1201                         :
1202                                 function()
1203                                 {
1204                                         if ( CKEDITOR.env.ie || CKEDITOR.env.opera )
1205                                         {
1206                                                 var element = this.$,
1207                                                         e,
1208                                                         i = 0;
1209
1210                                                 element.unselectable = 'on';
1211
1212                                                 while ( ( e = element.all[ i++ ] ) )
1213                                                 {
1214                                                         switch ( e.tagName.toLowerCase() )
1215                                                         {
1216                                                                 case 'iframe' :
1217                                                                 case 'textarea' :
1218                                                                 case 'input' :
1219                                                                 case 'select' :
1220                                                                         /* Ignore the above tags */
1221                                                                         break;
1222                                                                 default :
1223                                                                         e.unselectable = 'on';
1224                                                         }
1225                                                 }
1226                                         }
1227                                 },
1228
1229                 getPositionedAncestor : function()
1230                 {
1231                         var current = this;
1232                         while ( current.getName() != 'html' )
1233                         {
1234                                 if ( current.getComputedStyle( 'position' ) != 'static' )
1235                                         return current;
1236
1237                                 current = current.getParent();
1238                         }
1239                         return null;
1240                 },
1241
1242                 getDocumentPosition : function( refDocument )
1243                 {
1244                         var x = 0, y = 0,
1245                                 body = this.getDocument().getBody(),
1246                                 quirks = this.getDocument().$.compatMode == 'BackCompat';
1247
1248                         var doc = this.getDocument();
1249
1250                         if ( document.documentElement[ "getBoundingClientRect" ] )
1251                         {
1252                                 var box  = this.$.getBoundingClientRect(),
1253                                         $doc = doc.$,
1254                                         $docElem = $doc.documentElement;
1255
1256                                 var clientTop = $docElem.clientTop || body.$.clientTop || 0,
1257                                         clientLeft = $docElem.clientLeft || body.$.clientLeft || 0,
1258                                         needAdjustScrollAndBorders = true;
1259
1260                                 /*
1261                                  * #3804: getBoundingClientRect() works differently on IE and non-IE
1262                                  * browsers, regarding scroll positions.
1263                                  *
1264                                  * On IE, the top position of the <html> element is always 0, no matter
1265                                  * how much you scrolled down.
1266                                  *
1267                                  * On other browsers, the top position of the <html> element is negative
1268                                  * scrollTop.
1269                                  */
1270                                 if ( CKEDITOR.env.ie )
1271                                 {
1272                                         var inDocElem = doc.getDocumentElement().contains( this ),
1273                                                 inBody = doc.getBody().contains( this );
1274
1275                                         needAdjustScrollAndBorders = ( quirks && inBody ) || ( !quirks && inDocElem );
1276                                 }
1277
1278                                 if ( needAdjustScrollAndBorders )
1279                                 {
1280                                         x = box.left + ( !quirks && $docElem.scrollLeft || body.$.scrollLeft );
1281                                         x -= clientLeft;
1282                                         y = box.top  + ( !quirks && $docElem.scrollTop || body.$.scrollTop );
1283                                         y -= clientTop;
1284                                 }
1285                         }
1286                         else
1287                         {
1288                                 var current = this, previous = null, offsetParent;
1289                                 while ( current && !( current.getName() == 'body' || current.getName() == 'html' ) )
1290                                 {
1291                                         x += current.$.offsetLeft - current.$.scrollLeft;
1292                                         y += current.$.offsetTop - current.$.scrollTop;
1293
1294                                         // Opera includes clientTop|Left into offsetTop|Left.
1295                                         if ( !current.equals( this ) )
1296                                         {
1297                                                 x += ( current.$.clientLeft || 0 );
1298                                                 y += ( current.$.clientTop || 0 );
1299                                         }
1300
1301                                         var scrollElement = previous;
1302                                         while ( scrollElement && !scrollElement.equals( current ) )
1303                                         {
1304                                                 x -= scrollElement.$.scrollLeft;
1305                                                 y -= scrollElement.$.scrollTop;
1306                                                 scrollElement = scrollElement.getParent();
1307                                         }
1308
1309                                         previous = current;
1310                                         current = ( offsetParent = current.$.offsetParent ) ?
1311                                                   new CKEDITOR.dom.element( offsetParent ) : null;
1312                                 }
1313                         }
1314
1315                         if ( refDocument )
1316                         {
1317                                 var currentWindow = this.getWindow(),
1318                                         refWindow = refDocument.getWindow();
1319
1320                                 if ( !currentWindow.equals( refWindow ) && currentWindow.$.frameElement )
1321                                 {
1322                                         var iframePosition = ( new CKEDITOR.dom.element( currentWindow.$.frameElement ) ).getDocumentPosition( refDocument );
1323
1324                                         x += iframePosition.x;
1325                                         y += iframePosition.y;
1326                                 }
1327                         }
1328
1329                         if ( !document.documentElement[ "getBoundingClientRect" ] )
1330                         {
1331                                 // In Firefox, we'll endup one pixel before the element positions,
1332                                 // so we must add it here.
1333                                 if ( CKEDITOR.env.gecko && !quirks )
1334                                 {
1335                                         x += this.$.clientLeft ? 1 : 0;
1336                                         y += this.$.clientTop ? 1 : 0;
1337                                 }
1338                         }
1339
1340                         return { x : x, y : y };
1341                 },
1342
1343                 scrollIntoView : function( alignTop )
1344                 {
1345                         // Get the element window.
1346                         var win = this.getWindow(),
1347                                 winHeight = win.getViewPaneSize().height;
1348
1349                         // Starts from the offset that will be scrolled with the negative value of
1350                         // the visible window height.
1351                         var offset = winHeight * -1;
1352
1353                         // Append the view pane's height if align to top.
1354                         // Append element height if we are aligning to the bottom.
1355                         if ( alignTop )
1356                                 offset += winHeight;
1357                         else
1358                         {
1359                                 offset += this.$.offsetHeight || 0;
1360
1361                                 // Consider the margin in the scroll, which is ok for our current needs, but
1362                                 // needs investigation if we will be using this function in other places.
1363                                 offset += parseInt( this.getComputedStyle( 'marginBottom' ) || 0, 10 ) || 0;
1364                         }
1365
1366                         // Append the offsets for the entire element hierarchy.
1367                         var elementPosition = this.getDocumentPosition();
1368                         offset += elementPosition.y;
1369
1370                         // offset value might be out of range(nagative), fix it(#3692).
1371                         offset = offset < 0 ? 0 : offset;
1372
1373                         // Scroll the window to the desired position, if not already visible(#3795).
1374                         var currentScroll = win.getScrollPosition().y;
1375                         if ( offset > currentScroll || offset < currentScroll - winHeight )
1376                                 win.$.scrollTo( 0, offset );
1377                 },
1378
1379                 setState : function( state )
1380                 {
1381                         switch ( state )
1382                         {
1383                                 case CKEDITOR.TRISTATE_ON :
1384                                         this.addClass( 'cke_on' );
1385                                         this.removeClass( 'cke_off' );
1386                                         this.removeClass( 'cke_disabled' );
1387                                         break;
1388                                 case CKEDITOR.TRISTATE_DISABLED :
1389                                         this.addClass( 'cke_disabled' );
1390                                         this.removeClass( 'cke_off' );
1391                                         this.removeClass( 'cke_on' );
1392                                         break;
1393                                 default :
1394                                         this.addClass( 'cke_off' );
1395                                         this.removeClass( 'cke_on' );
1396                                         this.removeClass( 'cke_disabled' );
1397                                         break;
1398                         }
1399                 },
1400
1401                 /**
1402                  * Returns the inner document of this IFRAME element.
1403                  * @returns {CKEDITOR.dom.document} The inner document.
1404                  */
1405                 getFrameDocument : function()
1406                 {
1407                         var $ = this.$;
1408
1409                         try
1410                         {
1411                                 // In IE, with custom document.domain, it may happen that
1412                                 // the iframe is not yet available, resulting in "Access
1413                                 // Denied" for the following property access.
1414                                 $.contentWindow.document;
1415                         }
1416                         catch ( e )
1417                         {
1418                                 // Trick to solve this issue, forcing the iframe to get ready
1419                                 // by simply setting its "src" property.
1420                                 $.src = $.src;
1421
1422                                 // In IE6 though, the above is not enough, so we must pause the
1423                                 // execution for a while, giving it time to think.
1424                                 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
1425                                 {
1426                                         window.showModalDialog(
1427                                                 'javascript:document.write("' +
1428                                                         '<script>' +
1429                                                                 'window.setTimeout(' +
1430                                                                         'function(){window.close();}' +
1431                                                                         ',50);' +
1432                                                         '</script>")' );
1433                                 }
1434                         }
1435
1436                         return $ && new CKEDITOR.dom.document( $.contentWindow.document );
1437                 },
1438
1439                 /**
1440                  * Copy all the attributes from one node to the other, kinda like a clone
1441                  * skipAttributes is an object with the attributes that must NOT be copied.
1442                  * @param {CKEDITOR.dom.element} dest The destination element.
1443                  * @param {Object} skipAttributes A dictionary of attributes to skip.
1444                  * @example
1445                  */
1446                 copyAttributes : function( dest, skipAttributes )
1447                 {
1448                         var attributes = this.$.attributes;
1449                         skipAttributes = skipAttributes || {};
1450
1451                         for ( var n = 0 ; n < attributes.length ; n++ )
1452                         {
1453                                 var attribute = attributes[n];
1454
1455                                 // Lowercase attribute name hard rule is broken for
1456                                 // some attribute on IE, e.g. CHECKED.
1457                                 var attrName = attribute.nodeName.toLowerCase(),
1458                                         attrValue;
1459
1460                                 // We can set the type only once, so do it with the proper value, not copying it.
1461                                 if ( attrName in skipAttributes )
1462                                         continue;
1463
1464                                 if ( attrName == 'checked' && ( attrValue = this.getAttribute( attrName ) ) )
1465                                         dest.setAttribute( attrName, attrValue );
1466                                 // IE BUG: value attribute is never specified even if it exists.
1467                                 else if ( attribute.specified ||
1468                                   ( CKEDITOR.env.ie && attribute.nodeValue && attrName == 'value' ) )
1469                                 {
1470                                         attrValue = this.getAttribute( attrName );
1471                                         if ( attrValue === null )
1472                                                 attrValue = attribute.nodeValue;
1473
1474                                         dest.setAttribute( attrName, attrValue );
1475                                 }
1476                         }
1477
1478                         // The style:
1479                         if ( this.$.style.cssText !== '' )
1480                                 dest.$.style.cssText = this.$.style.cssText;
1481                 },
1482
1483                 /**
1484                  * Changes the tag name of the current element.
1485                  * @param {String} newTag The new tag for the element.
1486                  */
1487                 renameNode : function( newTag )
1488                 {
1489                         // If it's already correct exit here.
1490                         if ( this.getName() == newTag )
1491                                 return;
1492
1493                         var doc = this.getDocument();
1494
1495                         // Create the new node.
1496                         var newNode = new CKEDITOR.dom.element( newTag, doc );
1497
1498                         // Copy all attributes.
1499                         this.copyAttributes( newNode );
1500
1501                         // Move children to the new node.
1502                         this.moveChildren( newNode );
1503
1504                         // Replace the node.
1505                         this.getParent() && this.$.parentNode.replaceChild( newNode.$, this.$ );
1506                         newNode.$[ 'data-cke-expando' ] = this.$[ 'data-cke-expando' ];
1507                         this.$ = newNode.$;
1508                 },
1509
1510                 /**
1511                  * Gets a DOM tree descendant under the current node.
1512                  * @param {Array|Number} indices The child index or array of child indices under the node.
1513                  * @returns {CKEDITOR.dom.node} The specified DOM child under the current node. Null if child does not exist.
1514                  * @example
1515                  * var strong = p.getChild(0);
1516                  */
1517                 getChild : function( indices )
1518                 {
1519                         var rawNode = this.$;
1520
1521                         if ( !indices.slice )
1522                                 rawNode = rawNode.childNodes[ indices ];
1523                         else
1524                         {
1525                                 while ( indices.length > 0 && rawNode )
1526                                         rawNode = rawNode.childNodes[ indices.shift() ];
1527                         }
1528
1529                         return rawNode ? new CKEDITOR.dom.node( rawNode ) : null;
1530                 },
1531
1532                 getChildCount : function()
1533                 {
1534                         return this.$.childNodes.length;
1535                 },
1536
1537                 disableContextMenu : function()
1538                 {
1539                         this.on( 'contextmenu', function( event )
1540                                 {
1541                                         // Cancel the browser context menu.
1542                                         if ( !event.data.getTarget().hasClass( 'cke_enable_context_menu' ) )
1543                                                 event.data.preventDefault();
1544                                 } );
1545                 },
1546
1547                 /**
1548                  * Gets element's direction. Supports both CSS 'direction' prop and 'dir' attr.
1549                  */
1550                 getDirection : function( useComputed )
1551                 {
1552                         return useComputed ? this.getComputedStyle( 'direction' ) : this.getStyle( 'direction' ) || this.getAttribute( 'dir' );
1553                 },
1554
1555                 /**
1556                  * Gets, sets and removes custom data to be stored as HTML5 data-* attributes.
1557                  * @name CKEDITOR.dom.element.data
1558                  * @param {String} name The name of the attribute, execluding the 'data-' part.
1559                  * @param {String} [value] The value to set. If set to false, the attribute will be removed.
1560                  */
1561                 data : function ( name, value )
1562                 {
1563                         name = 'data-' + name;
1564                         if ( value === undefined )
1565                                 return this.getAttribute( name );
1566                         else if ( value === false )
1567                                 this.removeAttribute( name );
1568                         else
1569                                 this.setAttribute( name, value );
1570
1571                         return null;
1572                 }
1573         });
1574
1575 ( function()
1576 {
1577         var sides = {
1578                 width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],
1579                 height : [ "border-top-width", "border-bottom-width", "padding-top",  "padding-bottom" ]
1580         };
1581
1582         function marginAndPaddingSize( type )
1583         {
1584                 var adjustment = 0;
1585                 for ( var i = 0, len = sides[ type ].length; i < len; i++ )
1586                         adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;
1587                 return adjustment;
1588         }
1589
1590         /**
1591          * Update the element's size with box model awareness.
1592          * @name CKEDITOR.dom.element.setSize
1593          * @param {String} type [width|height]
1594          * @param {Number} size The length unit in px.
1595          * @param isBorderBox Apply the {@param width} and {@param height} based on border box model.
1596          */
1597         CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox )
1598                 {
1599                         if ( typeof size == 'number' )
1600                         {
1601                                 if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
1602                                         size -= marginAndPaddingSize.call( this, type );
1603
1604                                 this.setStyle( type, size + 'px' );
1605                         }
1606                 };
1607
1608         /**
1609          * Get the element's size, possibly with box model awareness.
1610          * @name CKEDITOR.dom.element.getSize
1611          * @param {String} type [width|height]
1612          * @param {Boolean} contentSize Get the {@param width} or {@param height} based on border box model.
1613          */
1614         CKEDITOR.dom.element.prototype.getSize = function( type, contentSize )
1615                 {
1616                         var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type )  ],
1617                                 this.$[ 'client' + CKEDITOR.tools.capitalize( type )  ] ) || 0;
1618
1619                         if ( contentSize )
1620                                 size -= marginAndPaddingSize.call( this, type );
1621
1622                         return size;
1623                 };
1624 })();