Ticket #8731: element.js

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