_source/core/dom/element.js

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