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