diff options
Diffstat (limited to 'sources/core/dom/element.js')
-rw-r--r-- | sources/core/dom/element.js | 2183 |
1 files changed, 2183 insertions, 0 deletions
diff --git a/sources/core/dom/element.js b/sources/core/dom/element.js new file mode 100644 index 0000000..e02ff17 --- /dev/null +++ b/sources/core/dom/element.js | |||
@@ -0,0 +1,2183 @@ | |||
1 | /** | ||
2 | * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
3 | * For licensing, see LICENSE.md 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 | * | ||
14 | * // Create a new <span> element. | ||
15 | * var element = new CKEDITOR.dom.element( 'span' ); | ||
16 | * | ||
17 | * // Create an element based on a native DOM element. | ||
18 | * var element = new CKEDITOR.dom.element( document.getElementById( 'myId' ) ); | ||
19 | * | ||
20 | * @class | ||
21 | * @extends CKEDITOR.dom.node | ||
22 | * @constructor Creates an element class instance. | ||
23 | * @param {Object/String} element A native DOM element or the element name for | ||
24 | * new elements. | ||
25 | * @param {CKEDITOR.dom.document} [ownerDocument] The document that will contain | ||
26 | * the element in case of element creation. | ||
27 | */ | ||
28 | CKEDITOR.dom.element = function( element, ownerDocument ) { | ||
29 | if ( typeof element == 'string' ) | ||
30 | element = ( ownerDocument ? ownerDocument.$ : document ).createElement( element ); | ||
31 | |||
32 | // Call the base constructor (we must not call CKEDITOR.dom.node). | ||
33 | CKEDITOR.dom.domObject.call( this, element ); | ||
34 | }; | ||
35 | |||
36 | // PACKAGER_RENAME( CKEDITOR.dom.element ) | ||
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 | * | ||
42 | * var element = new CKEDITOR.dom.element( 'span' ); | ||
43 | * alert( element == CKEDITOR.dom.element.get( element ) ); // true | ||
44 | * | ||
45 | * var element = document.getElementById( 'myElement' ); | ||
46 | * alert( CKEDITOR.dom.element.get( element ).getName() ); // (e.g.) 'p' | ||
47 | * | ||
48 | * @static | ||
49 | * @param {String/Object} element Element's id or name or native DOM element. | ||
50 | * @returns {CKEDITOR.dom.element} The transformed element. | ||
51 | */ | ||
52 | CKEDITOR.dom.element.get = function( element ) { | ||
53 | var el = typeof element == 'string' ? document.getElementById( element ) || document.getElementsByName( element )[ 0 ] : element; | ||
54 | |||
55 | return el && ( el.$ ? el : new CKEDITOR.dom.element( el ) ); | ||
56 | }; | ||
57 | |||
58 | CKEDITOR.dom.element.prototype = new CKEDITOR.dom.node(); | ||
59 | |||
60 | /** | ||
61 | * Creates an instance of the {@link CKEDITOR.dom.element} class based on the | ||
62 | * HTML representation of an element. | ||
63 | * | ||
64 | * var element = CKEDITOR.dom.element.createFromHtml( '<strong class="anyclass">My element</strong>' ); | ||
65 | * alert( element.getName() ); // 'strong' | ||
66 | * | ||
67 | * @static | ||
68 | * @param {String} html The element HTML. It should define only one element in | ||
69 | * the "root" level. The "root" element can have child nodes, but not siblings. | ||
70 | * @returns {CKEDITOR.dom.element} The element instance. | ||
71 | */ | ||
72 | CKEDITOR.dom.element.createFromHtml = function( html, ownerDocument ) { | ||
73 | var temp = new CKEDITOR.dom.element( 'div', ownerDocument ); | ||
74 | temp.setHtml( html ); | ||
75 | |||
76 | // When returning the node, remove it from its parent to detach it. | ||
77 | return temp.getFirst().remove(); | ||
78 | }; | ||
79 | |||
80 | /** | ||
81 | * Sets {@link CKEDITOR.dom.element#setCustomData custom data} on an element in a way that it is later | ||
82 | * possible to {@link #clearAllMarkers clear all data} set on all elements sharing the same database. | ||
83 | * | ||
84 | * This mechanism is very useful when processing some portion of DOM. All markers can later be removed | ||
85 | * by calling the {@link #clearAllMarkers} method, hence markers will not leak to second pass of this algorithm. | ||
86 | * | ||
87 | * var database = {}; | ||
88 | * CKEDITOR.dom.element.setMarker( database, element1, 'foo', 'bar' ); | ||
89 | * CKEDITOR.dom.element.setMarker( database, element2, 'oof', [ 1, 2, 3 ] ); | ||
90 | * | ||
91 | * element1.getCustomData( 'foo' ); // 'bar' | ||
92 | * element2.getCustomData( 'oof' ); // [ 1, 2, 3 ] | ||
93 | * | ||
94 | * CKEDITOR.dom.element.clearAllMarkers( database ); | ||
95 | * | ||
96 | * element1.getCustomData( 'foo' ); // null | ||
97 | * | ||
98 | * @static | ||
99 | * @param {Object} database | ||
100 | * @param {CKEDITOR.dom.element} element | ||
101 | * @param {String} name | ||
102 | * @param {Object} value | ||
103 | * @returns {CKEDITOR.dom.element} The element. | ||
104 | */ | ||
105 | CKEDITOR.dom.element.setMarker = function( database, element, name, value ) { | ||
106 | var id = element.getCustomData( 'list_marker_id' ) || ( element.setCustomData( 'list_marker_id', CKEDITOR.tools.getNextNumber() ).getCustomData( 'list_marker_id' ) ), | ||
107 | markerNames = element.getCustomData( 'list_marker_names' ) || ( element.setCustomData( 'list_marker_names', {} ).getCustomData( 'list_marker_names' ) ); | ||
108 | database[ id ] = element; | ||
109 | markerNames[ name ] = 1; | ||
110 | |||
111 | return element.setCustomData( name, value ); | ||
112 | }; | ||
113 | |||
114 | /** | ||
115 | * Removes all markers added using this database. See the {@link #setMarker} method for more information. | ||
116 | * | ||
117 | * @param {Object} database | ||
118 | * @static | ||
119 | */ | ||
120 | CKEDITOR.dom.element.clearAllMarkers = function( database ) { | ||
121 | for ( var i in database ) | ||
122 | CKEDITOR.dom.element.clearMarkers( database, database[ i ], 1 ); | ||
123 | }; | ||
124 | |||
125 | /** | ||
126 | * Removes all markers added to this element and removes it from the database if | ||
127 | * `removeFromDatabase` was passed. See the {@link #setMarker} method for more information. | ||
128 | * | ||
129 | * var database = {}; | ||
130 | * CKEDITOR.dom.element.setMarker( database, element1, 'foo', 'bar' ); | ||
131 | * CKEDITOR.dom.element.setMarker( database, element2, 'oof', [ 1, 2, 3 ] ); | ||
132 | * | ||
133 | * element1.getCustomData( 'foo' ); // 'bar' | ||
134 | * element2.getCustomData( 'oof' ); // [ 1, 2, 3 ] | ||
135 | * | ||
136 | * CKEDITOR.dom.element.clearMarkers( database, element1, true ); | ||
137 | * | ||
138 | * element1.getCustomData( 'foo' ); // null | ||
139 | * element2.getCustomData( 'oof' ); // [ 1, 2, 3 ] | ||
140 | * | ||
141 | * @param {Object} database | ||
142 | * @static | ||
143 | */ | ||
144 | CKEDITOR.dom.element.clearMarkers = function( database, element, removeFromDatabase ) { | ||
145 | var names = element.getCustomData( 'list_marker_names' ), | ||
146 | id = element.getCustomData( 'list_marker_id' ); | ||
147 | for ( var i in names ) | ||
148 | element.removeCustomData( i ); | ||
149 | element.removeCustomData( 'list_marker_names' ); | ||
150 | if ( removeFromDatabase ) { | ||
151 | element.removeCustomData( 'list_marker_id' ); | ||
152 | delete database[ id ]; | ||
153 | } | ||
154 | }; | ||
155 | |||
156 | ( function() { | ||
157 | var elementsClassList = document.createElement( '_' ).classList, | ||
158 | supportsClassLists = typeof elementsClassList !== 'undefined' && String( elementsClassList.add ).match( /\[Native code\]/gi ) !== null, | ||
159 | rclass = /[\n\t\r]/g; | ||
160 | |||
161 | function hasClass( classNames, className ) { | ||
162 | // Source: jQuery. | ||
163 | return ( ' ' + classNames + ' ' ).replace( rclass, ' ' ).indexOf( ' ' + className + ' ' ) > -1; | ||
164 | } | ||
165 | |||
166 | CKEDITOR.tools.extend( CKEDITOR.dom.element.prototype, { | ||
167 | /** | ||
168 | * The node type. This is a constant value set to {@link CKEDITOR#NODE_ELEMENT}. | ||
169 | * | ||
170 | * @readonly | ||
171 | * @property {Number} [=CKEDITOR.NODE_ELEMENT] | ||
172 | */ | ||
173 | type: CKEDITOR.NODE_ELEMENT, | ||
174 | |||
175 | /** | ||
176 | * Adds a CSS class to the element. It appends the class to the | ||
177 | * already existing names. | ||
178 | * | ||
179 | * var element = new CKEDITOR.dom.element( 'div' ); | ||
180 | * element.addClass( 'classA' ); // <div class="classA"> | ||
181 | * element.addClass( 'classB' ); // <div class="classA classB"> | ||
182 | * element.addClass( 'classA' ); // <div class="classA classB"> | ||
183 | * | ||
184 | * **Note:** Since CKEditor 4.5 this method cannot be used with multiple classes (`'classA classB'`). | ||
185 | * | ||
186 | * @chainable | ||
187 | * @method addClass | ||
188 | * @param {String} className The name of the class to be added. | ||
189 | */ | ||
190 | addClass: supportsClassLists ? | ||
191 | function( className ) { | ||
192 | this.$.classList.add( className ); | ||
193 | |||
194 | return this; | ||
195 | } : function( className ) { | ||
196 | var c = this.$.className; | ||
197 | if ( c ) { | ||
198 | if ( !hasClass( c, className ) ) | ||
199 | c += ' ' + className; | ||
200 | } | ||
201 | this.$.className = c || className; | ||
202 | |||
203 | return this; | ||
204 | }, | ||
205 | |||
206 | /** | ||
207 | * Removes a CSS class name from the elements classes. Other classes | ||
208 | * remain untouched. | ||
209 | * | ||
210 | * var element = new CKEDITOR.dom.element( 'div' ); | ||
211 | * element.addClass( 'classA' ); // <div class="classA"> | ||
212 | * element.addClass( 'classB' ); // <div class="classA classB"> | ||
213 | * element.removeClass( 'classA' ); // <div class="classB"> | ||
214 | * element.removeClass( 'classB' ); // <div> | ||
215 | * | ||
216 | * @chainable | ||
217 | * @method removeClass | ||
218 | * @param {String} className The name of the class to remove. | ||
219 | */ | ||
220 | removeClass: supportsClassLists ? | ||
221 | function( className ) { | ||
222 | var $ = this.$; | ||
223 | $.classList.remove( className ); | ||
224 | |||
225 | if ( !$.className ) | ||
226 | $.removeAttribute( 'class' ); | ||
227 | |||
228 | return this; | ||
229 | } : function( className ) { | ||
230 | var c = this.getAttribute( 'class' ); | ||
231 | if ( c && hasClass( c, className ) ) { | ||
232 | c = c | ||
233 | .replace( new RegExp( '(?:^|\\s+)' + className + '(?=\\s|$)' ), '' ) | ||
234 | .replace( /^\s+/, '' ); | ||
235 | |||
236 | if ( c ) | ||
237 | this.setAttribute( 'class', c ); | ||
238 | else | ||
239 | this.removeAttribute( 'class' ); | ||
240 | } | ||
241 | |||
242 | return this; | ||
243 | }, | ||
244 | |||
245 | /** | ||
246 | * Checks if element has class name. | ||
247 | * | ||
248 | * @param {String} className | ||
249 | * @returns {Boolean} | ||
250 | */ | ||
251 | hasClass: function( className ) { | ||
252 | return hasClass( this.$.className, className ); | ||
253 | }, | ||
254 | |||
255 | /** | ||
256 | * Append a node as a child of this element. | ||
257 | * | ||
258 | * var p = new CKEDITOR.dom.element( 'p' ); | ||
259 | * | ||
260 | * var strong = new CKEDITOR.dom.element( 'strong' ); | ||
261 | * p.append( strong ); | ||
262 | * | ||
263 | * var em = p.append( 'em' ); | ||
264 | * | ||
265 | * // Result: '<p><strong></strong><em></em></p>' | ||
266 | * | ||
267 | * @param {CKEDITOR.dom.node/String} node The node or element name to be appended. | ||
268 | * @param {Boolean} [toStart=false] Indicates that the element is to be appended at the start. | ||
269 | * @returns {CKEDITOR.dom.node} The appended node. | ||
270 | */ | ||
271 | append: function( node, toStart ) { | ||
272 | if ( typeof node == 'string' ) | ||
273 | node = this.getDocument().createElement( node ); | ||
274 | |||
275 | if ( toStart ) | ||
276 | this.$.insertBefore( node.$, this.$.firstChild ); | ||
277 | else | ||
278 | this.$.appendChild( node.$ ); | ||
279 | |||
280 | return node; | ||
281 | }, | ||
282 | |||
283 | /** | ||
284 | * Append HTML as a child(ren) of this element. | ||
285 | * | ||
286 | * @param {String} html | ||
287 | */ | ||
288 | appendHtml: function( html ) { | ||
289 | if ( !this.$.childNodes.length ) | ||
290 | this.setHtml( html ); | ||
291 | else { | ||
292 | var temp = new CKEDITOR.dom.element( 'div', this.getDocument() ); | ||
293 | temp.setHtml( html ); | ||
294 | temp.moveChildren( this ); | ||
295 | } | ||
296 | }, | ||
297 | |||
298 | /** | ||
299 | * Append text to this element. | ||
300 | * | ||
301 | * var p = new CKEDITOR.dom.element( 'p' ); | ||
302 | * p.appendText( 'This is' ); | ||
303 | * p.appendText( ' some text' ); | ||
304 | * | ||
305 | * // Result: '<p>This is some text</p>' | ||
306 | * | ||
307 | * @param {String} text The text to be appended. | ||
308 | */ | ||
309 | appendText: function( text ) { | ||
310 | // On IE8 it is impossible to append node to script tag, so we use its text. | ||
311 | // On the contrary, on Safari the text property is unpredictable in links. (#13232) | ||
312 | if ( this.$.text != null && CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) | ||
313 | this.$.text += text; | ||
314 | else | ||
315 | this.append( new CKEDITOR.dom.text( text ) ); | ||
316 | }, | ||
317 | |||
318 | /** | ||
319 | * Appends a `<br>` filler element to this element if the filler is not present already. | ||
320 | * By default filler is appended only if {@link CKEDITOR.env#needsBrFiller} is `true`, | ||
321 | * however when `force` is set to `true` filler will be appended regardless of the environment. | ||
322 | * | ||
323 | * @param {Boolean} [force] Append filler regardless of the environment. | ||
324 | */ | ||
325 | appendBogus: function( force ) { | ||
326 | if ( !force && !CKEDITOR.env.needsBrFiller ) | ||
327 | return; | ||
328 | |||
329 | var lastChild = this.getLast(); | ||
330 | |||
331 | // Ignore empty/spaces text. | ||
332 | while ( lastChild && lastChild.type == CKEDITOR.NODE_TEXT && !CKEDITOR.tools.rtrim( lastChild.getText() ) ) | ||
333 | lastChild = lastChild.getPrevious(); | ||
334 | if ( !lastChild || !lastChild.is || !lastChild.is( 'br' ) ) { | ||
335 | var bogus = this.getDocument().createElement( 'br' ); | ||
336 | |||
337 | CKEDITOR.env.gecko && bogus.setAttribute( 'type', '_moz' ); | ||
338 | |||
339 | this.append( bogus ); | ||
340 | } | ||
341 | }, | ||
342 | |||
343 | /** | ||
344 | * Breaks one of the ancestor element in the element position, moving | ||
345 | * this element between the broken parts. | ||
346 | * | ||
347 | * // Before breaking: | ||
348 | * // <b>This <i>is some<span /> sample</i> test text</b> | ||
349 | * // If "element" is <span /> and "parent" is <i>: | ||
350 | * // <b>This <i>is some</i><span /><i> sample</i> test text</b> | ||
351 | * element.breakParent( parent ); | ||
352 | * | ||
353 | * // Before breaking: | ||
354 | * // <b>This <i>is some<span /> sample</i> test text</b> | ||
355 | * // If "element" is <span /> and "parent" is <b>: | ||
356 | * // <b>This <i>is some</i></b><span /><b><i> sample</i> test text</b> | ||
357 | * element.breakParent( parent ); | ||
358 | * | ||
359 | * @param {CKEDITOR.dom.element} parent The anscestor element to get broken. | ||
360 | * @param {Boolean} [cloneId=false] Whether to preserve ancestor ID attributes while breaking. | ||
361 | */ | ||
362 | breakParent: function( parent, cloneId ) { | ||
363 | var range = new CKEDITOR.dom.range( this.getDocument() ); | ||
364 | |||
365 | // We'll be extracting part of this element, so let's use our | ||
366 | // range to get the correct piece. | ||
367 | range.setStartAfter( this ); | ||
368 | range.setEndAfter( parent ); | ||
369 | |||
370 | // Extract it. | ||
371 | var docFrag = range.extractContents( false, cloneId || false ), | ||
372 | tmpElement, | ||
373 | current; | ||
374 | |||
375 | // Move the element outside the broken element. | ||
376 | range.insertNode( this.remove() ); | ||
377 | |||
378 | // In case of Internet Explorer, we must check if there is no background-color | ||
379 | // added to the element. In such case, we have to overwrite it to prevent "switching it off" | ||
380 | // by a browser (#14667). | ||
381 | if ( CKEDITOR.env.ie && !CKEDITOR.env.edge ) { | ||
382 | tmpElement = new CKEDITOR.dom.element( 'div' ); | ||
383 | |||
384 | while ( current = docFrag.getFirst() ) { | ||
385 | if ( current.$.style.backgroundColor ) { | ||
386 | // This is a necessary hack to make sure that IE will track backgroundColor CSS property, see | ||
387 | // http://dev.ckeditor.com/ticket/14667#comment:8 for more details. | ||
388 | current.$.style.backgroundColor = current.$.style.backgroundColor; | ||
389 | } | ||
390 | |||
391 | tmpElement.append( current ); | ||
392 | } | ||
393 | |||
394 | // Re-insert the extracted piece after the element. | ||
395 | tmpElement.insertAfter( this ); | ||
396 | tmpElement.remove( true ); | ||
397 | } else { | ||
398 | // Re-insert the extracted piece after the element. | ||
399 | docFrag.insertAfterNode( this ); | ||
400 | } | ||
401 | }, | ||
402 | |||
403 | /** | ||
404 | * Checks if this element contains given node. | ||
405 | * | ||
406 | * @method | ||
407 | * @param {CKEDITOR.dom.node} node | ||
408 | * @returns {Boolean} | ||
409 | */ | ||
410 | contains: !document.compareDocumentPosition ? | ||
411 | function( node ) { | ||
412 | var $ = this.$; | ||
413 | |||
414 | return node.type != CKEDITOR.NODE_ELEMENT ? $.contains( node.getParent().$ ) : $ != node.$ && $.contains( node.$ ); | ||
415 | } : function( node ) { | ||
416 | return !!( this.$.compareDocumentPosition( node.$ ) & 16 ); | ||
417 | }, | ||
418 | |||
419 | /** | ||
420 | * Moves the selection focus to this element. | ||
421 | * | ||
422 | * var element = CKEDITOR.document.getById( 'myTextarea' ); | ||
423 | * element.focus(); | ||
424 | * | ||
425 | * @method | ||
426 | * @param {Boolean} defer Whether to asynchronously defer the | ||
427 | * execution by 100 ms. | ||
428 | */ | ||
429 | focus: ( function() { | ||
430 | function exec() { | ||
431 | // IE throws error if the element is not visible. | ||
432 | try { | ||
433 | this.$.focus(); | ||
434 | } catch ( e ) {} | ||
435 | } | ||
436 | |||
437 | return function( defer ) { | ||
438 | if ( defer ) | ||
439 | CKEDITOR.tools.setTimeout( exec, 100, this ); | ||
440 | else | ||
441 | exec.call( this ); | ||
442 | }; | ||
443 | } )(), | ||
444 | |||
445 | /** | ||
446 | * Gets the inner HTML of this element. | ||
447 | * | ||
448 | * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' ); | ||
449 | * alert( element.getHtml() ); // '<b>Example</b>' | ||
450 | * | ||
451 | * @returns {String} The inner HTML of this element. | ||
452 | */ | ||
453 | getHtml: function() { | ||
454 | var retval = this.$.innerHTML; | ||
455 | // Strip <?xml:namespace> tags in IE. (#3341). | ||
456 | return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval; | ||
457 | }, | ||
458 | |||
459 | /** | ||
460 | * Gets the outer (inner plus tags) HTML of this element. | ||
461 | * | ||
462 | * var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' ); | ||
463 | * alert( element.getOuterHtml() ); // '<div class="bold"><b>Example</b></div>' | ||
464 | * | ||
465 | * @returns {String} The outer HTML of this element. | ||
466 | */ | ||
467 | getOuterHtml: function() { | ||
468 | if ( this.$.outerHTML ) { | ||
469 | // IE includes the <?xml:namespace> tag in the outerHTML of | ||
470 | // namespaced element. So, we must strip it here. (#3341) | ||
471 | return this.$.outerHTML.replace( /<\?[^>]*>/, '' ); | ||
472 | } | ||
473 | |||
474 | var tmpDiv = this.$.ownerDocument.createElement( 'div' ); | ||
475 | tmpDiv.appendChild( this.$.cloneNode( true ) ); | ||
476 | return tmpDiv.innerHTML; | ||
477 | }, | ||
478 | |||
479 | /** | ||
480 | * Retrieve the bounding rectangle of the current element, in pixels, | ||
481 | * relative to the upper-left corner of the browser's client area. | ||
482 | * | ||
483 | * @returns {Object} The dimensions of the DOM element including | ||
484 | * `left`, `top`, `right`, `bottom`, `width` and `height`. | ||
485 | */ | ||
486 | getClientRect: function() { | ||
487 | // http://help.dottoro.com/ljvmcrrn.php | ||
488 | var rect = CKEDITOR.tools.extend( {}, this.$.getBoundingClientRect() ); | ||
489 | |||
490 | !rect.width && ( rect.width = rect.right - rect.left ); | ||
491 | !rect.height && ( rect.height = rect.bottom - rect.top ); | ||
492 | |||
493 | return rect; | ||
494 | }, | ||
495 | |||
496 | /** | ||
497 | * Sets the inner HTML of this element. | ||
498 | * | ||
499 | * var p = new CKEDITOR.dom.element( 'p' ); | ||
500 | * p.setHtml( '<b>Inner</b> HTML' ); | ||
501 | * | ||
502 | * // Result: '<p><b>Inner</b> HTML</p>' | ||
503 | * | ||
504 | * @method | ||
505 | * @param {String} html The HTML to be set for this element. | ||
506 | * @returns {String} The inserted HTML. | ||
507 | */ | ||
508 | setHtml: ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) ? | ||
509 | // old IEs throws error on HTML manipulation (through the "innerHTML" property) | ||
510 | // on the element which resides in an DTD invalid position, e.g. <span><div></div></span> | ||
511 | // fortunately it can be worked around with DOM manipulation. | ||
512 | function( html ) { | ||
513 | try { | ||
514 | var $ = this.$; | ||
515 | |||
516 | // Fix the case when setHtml is called on detached element. | ||
517 | // HTML5 shiv used for document in which this element was created | ||
518 | // won't affect that detached element. So get document fragment with | ||
519 | // all HTML5 elements enabled and set innerHTML while this element is appended to it. | ||
520 | if ( this.getParent() ) | ||
521 | return ( $.innerHTML = html ); | ||
522 | else { | ||
523 | var $frag = this.getDocument()._getHtml5ShivFrag(); | ||
524 | $frag.appendChild( $ ); | ||
525 | $.innerHTML = html; | ||
526 | $frag.removeChild( $ ); | ||
527 | |||
528 | return html; | ||
529 | } | ||
530 | } | ||
531 | catch ( e ) { | ||
532 | this.$.innerHTML = ''; | ||
533 | |||
534 | var temp = new CKEDITOR.dom.element( 'body', this.getDocument() ); | ||
535 | temp.$.innerHTML = html; | ||
536 | |||
537 | var children = temp.getChildren(); | ||
538 | while ( children.count() ) | ||
539 | this.append( children.getItem( 0 ) ); | ||
540 | |||
541 | return html; | ||
542 | } | ||
543 | } : function( html ) { | ||
544 | return ( this.$.innerHTML = html ); | ||
545 | }, | ||
546 | |||
547 | /** | ||
548 | * Sets the element contents as plain text. | ||
549 | * | ||
550 | * var element = new CKEDITOR.dom.element( 'div' ); | ||
551 | * element.setText( 'A > B & C < D' ); | ||
552 | * alert( element.innerHTML ); // 'A > B & C < D' | ||
553 | * | ||
554 | * @param {String} text The text to be set. | ||
555 | * @returns {String} The inserted text. | ||
556 | */ | ||
557 | setText: ( function() { | ||
558 | var supportsTextContent = document.createElement( 'p' ); | ||
559 | supportsTextContent.innerHTML = 'x'; | ||
560 | supportsTextContent = supportsTextContent.textContent; | ||
561 | |||
562 | return function( text ) { | ||
563 | this.$[ supportsTextContent ? 'textContent' : 'innerText' ] = text; | ||
564 | }; | ||
565 | } )(), | ||
566 | |||
567 | /** | ||
568 | * Gets the value of an element attribute. | ||
569 | * | ||
570 | * var element = CKEDITOR.dom.element.createFromHtml( '<input type="text" />' ); | ||
571 | * alert( element.getAttribute( 'type' ) ); // 'text' | ||
572 | * | ||
573 | * @method | ||
574 | * @param {String} name The attribute name. | ||
575 | * @returns {String} The attribute value or null if not defined. | ||
576 | */ | ||
577 | getAttribute: ( function() { | ||
578 | var standard = function( name ) { | ||
579 | return this.$.getAttribute( name, 2 ); | ||
580 | }; | ||
581 | |||
582 | if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks ) ) { | ||
583 | return function( name ) { | ||
584 | switch ( name ) { | ||
585 | case 'class': | ||
586 | name = 'className'; | ||
587 | break; | ||
588 | |||
589 | case 'http-equiv': | ||
590 | name = 'httpEquiv'; | ||
591 | break; | ||
592 | |||
593 | case 'name': | ||
594 | return this.$.name; | ||
595 | |||
596 | case 'tabindex': | ||
597 | var tabIndex = standard.call( this, name ); | ||
598 | |||
599 | // IE returns tabIndex=0 by default for all | ||
600 | // elements. For those elements, | ||
601 | // getAtrribute( 'tabindex', 2 ) returns 32768 | ||
602 | // instead. So, we must make this check to give a | ||
603 | // uniform result among all browsers. | ||
604 | if ( tabIndex !== 0 && this.$.tabIndex === 0 ) | ||
605 | tabIndex = null; | ||
606 | |||
607 | return tabIndex; | ||
608 | |||
609 | case 'checked': | ||
610 | var attr = this.$.attributes.getNamedItem( name ), | ||
611 | attrValue = attr.specified ? attr.nodeValue // For value given by parser. | ||
612 | : this.$.checked; // For value created via DOM interface. | ||
613 | |||
614 | return attrValue ? 'checked' : null; | ||
615 | |||
616 | case 'hspace': | ||
617 | case 'value': | ||
618 | return this.$[ name ]; | ||
619 | |||
620 | case 'style': | ||
621 | // IE does not return inline styles via getAttribute(). See #2947. | ||
622 | return this.$.style.cssText; | ||
623 | |||
624 | case 'contenteditable': | ||
625 | case 'contentEditable': | ||
626 | return this.$.attributes.getNamedItem( 'contentEditable' ).specified ? this.$.getAttribute( 'contentEditable' ) : null; | ||
627 | } | ||
628 | |||
629 | return standard.call( this, name ); | ||
630 | }; | ||
631 | } else { | ||
632 | return standard; | ||
633 | } | ||
634 | } )(), | ||
635 | |||
636 | /** | ||
637 | * Gets the values of all element attributes. | ||
638 | * | ||
639 | * @param {Array} exclude The names of attributes to be excluded from the returned object. | ||
640 | * @return {Object} An object containing all element attributes with their values. | ||
641 | */ | ||
642 | getAttributes: function( exclude ) { | ||
643 | var attributes = {}, | ||
644 | attrDefs = this.$.attributes, | ||
645 | i; | ||
646 | |||
647 | exclude = CKEDITOR.tools.isArray( exclude ) ? exclude : []; | ||
648 | |||
649 | for ( i = 0; i < attrDefs.length; i++ ) { | ||
650 | if ( CKEDITOR.tools.indexOf( exclude, attrDefs[ i ].name ) === -1 ) { | ||
651 | attributes[ attrDefs[ i ].name ] = attrDefs[ i ].value; | ||
652 | } | ||
653 | } | ||
654 | |||
655 | return attributes; | ||
656 | }, | ||
657 | |||
658 | /** | ||
659 | * Gets the nodes list containing all children of this element. | ||
660 | * | ||
661 | * @returns {CKEDITOR.dom.nodeList} | ||
662 | */ | ||
663 | getChildren: function() { | ||
664 | return new CKEDITOR.dom.nodeList( this.$.childNodes ); | ||
665 | }, | ||
666 | |||
667 | /** | ||
668 | * Gets the current computed value of one of the element CSS style | ||
669 | * properties. | ||
670 | * | ||
671 | * var element = new CKEDITOR.dom.element( 'span' ); | ||
672 | * alert( element.getComputedStyle( 'display' ) ); // 'inline' | ||
673 | * | ||
674 | * @method | ||
675 | * @param {String} propertyName The style property name. | ||
676 | * @returns {String} The property value. | ||
677 | */ | ||
678 | getComputedStyle: ( document.defaultView && document.defaultView.getComputedStyle ) ? | ||
679 | function( propertyName ) { | ||
680 | var style = this.getWindow().$.getComputedStyle( this.$, null ); | ||
681 | |||
682 | // Firefox may return null if we call the above on a hidden iframe. (#9117) | ||
683 | return style ? style.getPropertyValue( propertyName ) : ''; | ||
684 | } : function( propertyName ) { | ||
685 | return this.$.currentStyle[ CKEDITOR.tools.cssStyleToDomStyle( propertyName ) ]; | ||
686 | }, | ||
687 | |||
688 | /** | ||
689 | * Gets the DTD entries for this element. | ||
690 | * | ||
691 | * @returns {Object} An object containing the list of elements accepted | ||
692 | * by this element. | ||
693 | */ | ||
694 | getDtd: function() { | ||
695 | var dtd = CKEDITOR.dtd[ this.getName() ]; | ||
696 | |||
697 | this.getDtd = function() { | ||
698 | return dtd; | ||
699 | }; | ||
700 | |||
701 | return dtd; | ||
702 | }, | ||
703 | |||
704 | /** | ||
705 | * Gets all this element's descendants having given tag name. | ||
706 | * | ||
707 | * @method | ||
708 | * @param {String} tagName | ||
709 | */ | ||
710 | getElementsByTag: CKEDITOR.dom.document.prototype.getElementsByTag, | ||
711 | |||
712 | /** | ||
713 | * Gets the computed tabindex for this element. | ||
714 | * | ||
715 | * var element = CKEDITOR.document.getById( 'myDiv' ); | ||
716 | * alert( element.getTabIndex() ); // (e.g.) '-1' | ||
717 | * | ||
718 | * @method | ||
719 | * @returns {Number} The tabindex value. | ||
720 | */ | ||
721 | getTabIndex: function() { | ||
722 | var tabIndex = this.$.tabIndex; | ||
723 | |||
724 | // IE returns tabIndex=0 by default for all elements. In | ||
725 | // those cases we must check that the element really has | ||
726 | // the tabindex attribute set to zero, or it is one of | ||
727 | // those element that should have zero by default. | ||
728 | if ( tabIndex === 0 && !CKEDITOR.dtd.$tabIndex[ this.getName() ] && parseInt( this.getAttribute( 'tabindex' ), 10 ) !== 0 ) | ||
729 | return -1; | ||
730 | |||
731 | return tabIndex; | ||
732 | }, | ||
733 | |||
734 | /** | ||
735 | * Gets the text value of this element. | ||
736 | * | ||
737 | * Only in IE (which uses innerText), `<br>` will cause linebreaks, | ||
738 | * and sucessive whitespaces (including line breaks) will be reduced to | ||
739 | * a single space. This behavior is ok for us, for now. It may change | ||
740 | * in the future. | ||
741 | * | ||
742 | * var element = CKEDITOR.dom.element.createFromHtml( '<div>Sample <i>text</i>.</div>' ); | ||
743 | * alert( <b>element.getText()</b> ); // 'Sample text.' | ||
744 | * | ||
745 | * @returns {String} The text value. | ||
746 | */ | ||
747 | getText: function() { | ||
748 | return this.$.textContent || this.$.innerText || ''; | ||
749 | }, | ||
750 | |||
751 | /** | ||
752 | * Gets the window object that contains this element. | ||
753 | * | ||
754 | * @returns {CKEDITOR.dom.window} The window object. | ||
755 | */ | ||
756 | getWindow: function() { | ||
757 | return this.getDocument().getWindow(); | ||
758 | }, | ||
759 | |||
760 | /** | ||
761 | * Gets the value of the `id` attribute of this element. | ||
762 | * | ||
763 | * var element = CKEDITOR.dom.element.createFromHtml( '<p id="myId"></p>' ); | ||
764 | * alert( element.getId() ); // 'myId' | ||
765 | * | ||
766 | * @returns {String} The element id, or null if not available. | ||
767 | */ | ||
768 | getId: function() { | ||
769 | return this.$.id || null; | ||
770 | }, | ||
771 | |||
772 | /** | ||
773 | * Gets the value of the `name` attribute of this element. | ||
774 | * | ||
775 | * var element = CKEDITOR.dom.element.createFromHtml( '<input name="myName"></input>' ); | ||
776 | * alert( <b>element.getNameAtt()</b> ); // 'myName' | ||
777 | * | ||
778 | * @returns {String} The element name, or null if not available. | ||
779 | */ | ||
780 | getNameAtt: function() { | ||
781 | return this.$.name || null; | ||
782 | }, | ||
783 | |||
784 | /** | ||
785 | * Gets the element name (tag name). The returned name is guaranteed to | ||
786 | * be always full lowercased. | ||
787 | * | ||
788 | * var element = new CKEDITOR.dom.element( 'span' ); | ||
789 | * alert( element.getName() ); // 'span' | ||
790 | * | ||
791 | * @returns {String} The element name. | ||
792 | */ | ||
793 | getName: function() { | ||
794 | // Cache the lowercased name inside a closure. | ||
795 | var nodeName = this.$.nodeName.toLowerCase(); | ||
796 | |||
797 | if ( CKEDITOR.env.ie && ( document.documentMode <= 8 ) ) { | ||
798 | var scopeName = this.$.scopeName; | ||
799 | if ( scopeName != 'HTML' ) | ||
800 | nodeName = scopeName.toLowerCase() + ':' + nodeName; | ||
801 | } | ||
802 | |||
803 | this.getName = function() { | ||
804 | return nodeName; | ||
805 | }; | ||
806 | |||
807 | return this.getName(); | ||
808 | }, | ||
809 | |||
810 | /** | ||
811 | * Gets the value set to this element. This value is usually available | ||
812 | * for form field elements. | ||
813 | * | ||
814 | * @returns {String} The element value. | ||
815 | */ | ||
816 | getValue: function() { | ||
817 | return this.$.value; | ||
818 | }, | ||
819 | |||
820 | /** | ||
821 | * Gets the first child node of this element. | ||
822 | * | ||
823 | * var element = CKEDITOR.dom.element.createFromHtml( '<div><b>Example</b></div>' ); | ||
824 | * var first = element.getFirst(); | ||
825 | * alert( first.getName() ); // 'b' | ||
826 | * | ||
827 | * @param {Function} evaluator Filtering the result node. | ||
828 | * @returns {CKEDITOR.dom.node} The first child node or null if not available. | ||
829 | */ | ||
830 | getFirst: function( evaluator ) { | ||
831 | var first = this.$.firstChild, | ||
832 | retval = first && new CKEDITOR.dom.node( first ); | ||
833 | if ( retval && evaluator && !evaluator( retval ) ) | ||
834 | retval = retval.getNext( evaluator ); | ||
835 | |||
836 | return retval; | ||
837 | }, | ||
838 | |||
839 | /** | ||
840 | * See {@link #getFirst}. | ||
841 | * | ||
842 | * @param {Function} evaluator Filtering the result node. | ||
843 | * @returns {CKEDITOR.dom.node} | ||
844 | */ | ||
845 | getLast: function( evaluator ) { | ||
846 | var last = this.$.lastChild, | ||
847 | retval = last && new CKEDITOR.dom.node( last ); | ||
848 | if ( retval && evaluator && !evaluator( retval ) ) | ||
849 | retval = retval.getPrevious( evaluator ); | ||
850 | |||
851 | return retval; | ||
852 | }, | ||
853 | |||
854 | /** | ||
855 | * Gets CSS style value. | ||
856 | * | ||
857 | * @param {String} name The CSS property name. | ||
858 | * @returns {String} Style value. | ||
859 | */ | ||
860 | getStyle: function( name ) { | ||
861 | return this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ]; | ||
862 | }, | ||
863 | |||
864 | /** | ||
865 | * Checks if the element name matches the specified criteria. | ||
866 | * | ||
867 | * var element = new CKEDITOR.element( 'span' ); | ||
868 | * alert( element.is( 'span' ) ); // true | ||
869 | * alert( element.is( 'p', 'span' ) ); // true | ||
870 | * alert( element.is( 'p' ) ); // false | ||
871 | * alert( element.is( 'p', 'div' ) ); // false | ||
872 | * alert( element.is( { p:1,span:1 } ) ); // true | ||
873 | * | ||
874 | * @param {String.../Object} name One or more names to be checked, or a {@link CKEDITOR.dtd} object. | ||
875 | * @returns {Boolean} `true` if the element name matches any of the names. | ||
876 | */ | ||
877 | is: function() { | ||
878 | var name = this.getName(); | ||
879 | |||
880 | // Check against the specified DTD liternal. | ||
881 | if ( typeof arguments[ 0 ] == 'object' ) | ||
882 | return !!arguments[ 0 ][ name ]; | ||
883 | |||
884 | // Check for tag names | ||
885 | for ( var i = 0; i < arguments.length; i++ ) { | ||
886 | if ( arguments[ i ] == name ) | ||
887 | return true; | ||
888 | } | ||
889 | return false; | ||
890 | }, | ||
891 | |||
892 | /** | ||
893 | * Decide whether one element is able to receive cursor. | ||
894 | * | ||
895 | * @param {Boolean} [textCursor=true] Only consider element that could receive text child. | ||
896 | */ | ||
897 | isEditable: function( textCursor ) { | ||
898 | var name = this.getName(); | ||
899 | |||
900 | if ( this.isReadOnly() || this.getComputedStyle( 'display' ) == 'none' || | ||
901 | this.getComputedStyle( 'visibility' ) == 'hidden' || | ||
902 | CKEDITOR.dtd.$nonEditable[ name ] || | ||
903 | CKEDITOR.dtd.$empty[ name ] || | ||
904 | ( this.is( 'a' ) && | ||
905 | ( this.data( 'cke-saved-name' ) || this.hasAttribute( 'name' ) ) && | ||
906 | !this.getChildCount() | ||
907 | ) ) { | ||
908 | return false; | ||
909 | } | ||
910 | |||
911 | if ( textCursor !== false ) { | ||
912 | // Get the element DTD (defaults to span for unknown elements). | ||
913 | var dtd = CKEDITOR.dtd[ name ] || CKEDITOR.dtd.span; | ||
914 | // In the DTD # == text node. | ||
915 | return !!( dtd && dtd[ '#' ] ); | ||
916 | } | ||
917 | |||
918 | return true; | ||
919 | }, | ||
920 | |||
921 | /** | ||
922 | * Compare this element's inner html, tag name, attributes, etc. with other one. | ||
923 | * | ||
924 | * See [W3C's DOM Level 3 spec - node#isEqualNode](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isEqualNode) | ||
925 | * for more details. | ||
926 | * | ||
927 | * @param {CKEDITOR.dom.element} otherElement Element to compare. | ||
928 | * @returns {Boolean} | ||
929 | */ | ||
930 | isIdentical: function( otherElement ) { | ||
931 | // do shallow clones, but with IDs | ||
932 | var thisEl = this.clone( 0, 1 ), | ||
933 | otherEl = otherElement.clone( 0, 1 ); | ||
934 | |||
935 | // Remove distractions. | ||
936 | thisEl.removeAttributes( [ '_moz_dirty', 'data-cke-expando', 'data-cke-saved-href', 'data-cke-saved-name' ] ); | ||
937 | otherEl.removeAttributes( [ '_moz_dirty', 'data-cke-expando', 'data-cke-saved-href', 'data-cke-saved-name' ] ); | ||
938 | |||
939 | // Native comparison available. | ||
940 | if ( thisEl.$.isEqualNode ) { | ||
941 | // Styles order matters. | ||
942 | thisEl.$.style.cssText = CKEDITOR.tools.normalizeCssText( thisEl.$.style.cssText ); | ||
943 | otherEl.$.style.cssText = CKEDITOR.tools.normalizeCssText( otherEl.$.style.cssText ); | ||
944 | return thisEl.$.isEqualNode( otherEl.$ ); | ||
945 | } else { | ||
946 | thisEl = thisEl.getOuterHtml(); | ||
947 | otherEl = otherEl.getOuterHtml(); | ||
948 | |||
949 | // Fix tiny difference between link href in older IEs. | ||
950 | if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 && this.is( 'a' ) ) { | ||
951 | var parent = this.getParent(); | ||
952 | if ( parent.type == CKEDITOR.NODE_ELEMENT ) { | ||
953 | var el = parent.clone(); | ||
954 | el.setHtml( thisEl ), thisEl = el.getHtml(); | ||
955 | el.setHtml( otherEl ), otherEl = el.getHtml(); | ||
956 | } | ||
957 | } | ||
958 | |||
959 | return thisEl == otherEl; | ||
960 | } | ||
961 | }, | ||
962 | |||
963 | /** | ||
964 | * Checks if this element is visible. May not work if the element is | ||
965 | * child of an element with visibility set to `hidden`, but works well | ||
966 | * on the great majority of cases. | ||
967 | * | ||
968 | * @returns {Boolean} True if the element is visible. | ||
969 | */ | ||
970 | isVisible: function() { | ||
971 | var isVisible = ( this.$.offsetHeight || this.$.offsetWidth ) && this.getComputedStyle( 'visibility' ) != 'hidden', | ||
972 | elementWindow, elementWindowFrame; | ||
973 | |||
974 | // Webkit and Opera report non-zero offsetHeight despite that | ||
975 | // element is inside an invisible iframe. (#4542) | ||
976 | if ( isVisible && CKEDITOR.env.webkit ) { | ||
977 | elementWindow = this.getWindow(); | ||
978 | |||
979 | if ( !elementWindow.equals( CKEDITOR.document.getWindow() ) && ( elementWindowFrame = elementWindow.$.frameElement ) ) | ||
980 | isVisible = new CKEDITOR.dom.element( elementWindowFrame ).isVisible(); | ||
981 | |||
982 | } | ||
983 | |||
984 | return !!isVisible; | ||
985 | }, | ||
986 | |||
987 | /** | ||
988 | * Whether it's an empty inline elements which has no visual impact when removed. | ||
989 | * | ||
990 | * @returns {Boolean} | ||
991 | */ | ||
992 | isEmptyInlineRemoveable: function() { | ||
993 | if ( !CKEDITOR.dtd.$removeEmpty[ this.getName() ] ) | ||
994 | return false; | ||
995 | |||
996 | var children = this.getChildren(); | ||
997 | for ( var i = 0, count = children.count(); i < count; i++ ) { | ||
998 | var child = children.getItem( i ); | ||
999 | |||
1000 | if ( child.type == CKEDITOR.NODE_ELEMENT && child.data( 'cke-bookmark' ) ) | ||
1001 | continue; | ||
1002 | |||
1003 | if ( child.type == CKEDITOR.NODE_ELEMENT && !child.isEmptyInlineRemoveable() || child.type == CKEDITOR.NODE_TEXT && CKEDITOR.tools.trim( child.getText() ) ) | ||
1004 | return false; | ||
1005 | |||
1006 | } | ||
1007 | return true; | ||
1008 | }, | ||
1009 | |||
1010 | /** | ||
1011 | * Checks if the element has any defined attributes. | ||
1012 | * | ||
1013 | * var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test">Example</div>' ); | ||
1014 | * alert( element.hasAttributes() ); // true | ||
1015 | * | ||
1016 | * var element = CKEDITOR.dom.element.createFromHtml( '<div>Example</div>' ); | ||
1017 | * alert( element.hasAttributes() ); // false | ||
1018 | * | ||
1019 | * @method | ||
1020 | * @returns {Boolean} True if the element has attributes. | ||
1021 | */ | ||
1022 | hasAttributes: CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks ) ? | ||
1023 | function() { | ||
1024 | var attributes = this.$.attributes; | ||
1025 | |||
1026 | for ( var i = 0; i < attributes.length; i++ ) { | ||
1027 | var attribute = attributes[ i ]; | ||
1028 | |||
1029 | switch ( attribute.nodeName ) { | ||
1030 | case 'class': | ||
1031 | // IE has a strange bug. If calling removeAttribute('className'), | ||
1032 | // the attributes collection will still contain the "class" | ||
1033 | // attribute, which will be marked as "specified", even if the | ||
1034 | // outerHTML of the element is not displaying the class attribute. | ||
1035 | // Note : I was not able to reproduce it outside the editor, | ||
1036 | // but I've faced it while working on the TC of #1391. | ||
1037 | if ( this.getAttribute( 'class' ) ) { | ||
1038 | return true; | ||
1039 | } | ||
1040 | |||
1041 | // Attributes to be ignored. | ||
1042 | /* falls through */ | ||
1043 | case 'data-cke-expando': | ||
1044 | continue; | ||
1045 | |||
1046 | |||
1047 | /* falls through */ | ||
1048 | default: | ||
1049 | if ( attribute.specified ) { | ||
1050 | return true; | ||
1051 | } | ||
1052 | } | ||
1053 | } | ||
1054 | |||
1055 | return false; | ||
1056 | } : function() { | ||
1057 | var attrs = this.$.attributes, | ||
1058 | attrsNum = attrs.length; | ||
1059 | |||
1060 | // The _moz_dirty attribute might get into the element after pasting (#5455) | ||
1061 | var execludeAttrs = { 'data-cke-expando': 1, _moz_dirty: 1 }; | ||
1062 | |||
1063 | return attrsNum > 0 && ( attrsNum > 2 || !execludeAttrs[ attrs[ 0 ].nodeName ] || ( attrsNum == 2 && !execludeAttrs[ attrs[ 1 ].nodeName ] ) ); | ||
1064 | }, | ||
1065 | |||
1066 | /** | ||
1067 | * Checks if the specified attribute is defined for this element. | ||
1068 | * | ||
1069 | * @method | ||
1070 | * @param {String} name The attribute name. | ||
1071 | * @returns {Boolean} `true` if the specified attribute is defined. | ||
1072 | */ | ||
1073 | hasAttribute: ( function() { | ||
1074 | function ieHasAttribute( name ) { | ||
1075 | var $attr = this.$.attributes.getNamedItem( name ); | ||
1076 | |||
1077 | if ( this.getName() == 'input' ) { | ||
1078 | switch ( name ) { | ||
1079 | case 'class': | ||
1080 | return this.$.className.length > 0; | ||
1081 | case 'checked': | ||
1082 | return !!this.$.checked; | ||
1083 | case 'value': | ||
1084 | var type = this.getAttribute( 'type' ); | ||
1085 | return type == 'checkbox' || type == 'radio' ? this.$.value != 'on' : !!this.$.value; | ||
1086 | } | ||
1087 | } | ||
1088 | |||
1089 | if ( !$attr ) | ||
1090 | return false; | ||
1091 | |||
1092 | return $attr.specified; | ||
1093 | } | ||
1094 | |||
1095 | if ( CKEDITOR.env.ie ) { | ||
1096 | if ( CKEDITOR.env.version < 8 ) { | ||
1097 | return function( name ) { | ||
1098 | // On IE < 8 the name attribute cannot be retrieved | ||
1099 | // right after the element creation and setting the | ||
1100 | // name with setAttribute. | ||
1101 | if ( name == 'name' ) | ||
1102 | return !!this.$.name; | ||
1103 | |||
1104 | return ieHasAttribute.call( this, name ); | ||
1105 | }; | ||
1106 | } else { | ||
1107 | return ieHasAttribute; | ||
1108 | } | ||
1109 | } else { | ||
1110 | return function( name ) { | ||
1111 | // On other browsers specified property is deprecated and return always true, | ||
1112 | // but fortunately $.attributes contains only specified attributes. | ||
1113 | return !!this.$.attributes.getNamedItem( name ); | ||
1114 | }; | ||
1115 | } | ||
1116 | } )(), | ||
1117 | |||
1118 | /** | ||
1119 | * Hides this element (sets `display: none`). | ||
1120 | * | ||
1121 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1122 | * element.hide(); | ||
1123 | */ | ||
1124 | hide: function() { | ||
1125 | this.setStyle( 'display', 'none' ); | ||
1126 | }, | ||
1127 | |||
1128 | /** | ||
1129 | * Moves this element's children to the target element. | ||
1130 | * | ||
1131 | * @param {CKEDITOR.dom.element} target | ||
1132 | * @param {Boolean} [toStart=false] Insert moved children at the | ||
1133 | * beginning of the target element. | ||
1134 | */ | ||
1135 | moveChildren: function( target, toStart ) { | ||
1136 | var $ = this.$; | ||
1137 | target = target.$; | ||
1138 | |||
1139 | if ( $ == target ) | ||
1140 | return; | ||
1141 | |||
1142 | var child; | ||
1143 | |||
1144 | if ( toStart ) { | ||
1145 | while ( ( child = $.lastChild ) ) | ||
1146 | target.insertBefore( $.removeChild( child ), target.firstChild ); | ||
1147 | } else { | ||
1148 | while ( ( child = $.firstChild ) ) | ||
1149 | target.appendChild( $.removeChild( child ) ); | ||
1150 | } | ||
1151 | }, | ||
1152 | |||
1153 | /** | ||
1154 | * Merges sibling elements that are identical to this one. | ||
1155 | * | ||
1156 | * Identical child elements are also merged. For example: | ||
1157 | * | ||
1158 | * <b><i></i></b><b><i></i></b> => <b><i></i></b> | ||
1159 | * | ||
1160 | * @method | ||
1161 | * @param {Boolean} [inlineOnly=true] Allow only inline elements to be merged. | ||
1162 | */ | ||
1163 | mergeSiblings: ( function() { | ||
1164 | function mergeElements( element, sibling, isNext ) { | ||
1165 | if ( sibling && sibling.type == CKEDITOR.NODE_ELEMENT ) { | ||
1166 | // Jumping over bookmark nodes and empty inline elements, e.g. <b><i></i></b>, | ||
1167 | // queuing them to be moved later. (#5567) | ||
1168 | var pendingNodes = []; | ||
1169 | |||
1170 | while ( sibling.data( 'cke-bookmark' ) || sibling.isEmptyInlineRemoveable() ) { | ||
1171 | pendingNodes.push( sibling ); | ||
1172 | sibling = isNext ? sibling.getNext() : sibling.getPrevious(); | ||
1173 | if ( !sibling || sibling.type != CKEDITOR.NODE_ELEMENT ) | ||
1174 | return; | ||
1175 | } | ||
1176 | |||
1177 | if ( element.isIdentical( sibling ) ) { | ||
1178 | // Save the last child to be checked too, to merge things like | ||
1179 | // <b><i></i></b><b><i></i></b> => <b><i></i></b> | ||
1180 | var innerSibling = isNext ? element.getLast() : element.getFirst(); | ||
1181 | |||
1182 | // Move pending nodes first into the target element. | ||
1183 | while ( pendingNodes.length ) | ||
1184 | pendingNodes.shift().move( element, !isNext ); | ||
1185 | |||
1186 | sibling.moveChildren( element, !isNext ); | ||
1187 | sibling.remove(); | ||
1188 | |||
1189 | // Now check the last inner child (see two comments above). | ||
1190 | if ( innerSibling && innerSibling.type == CKEDITOR.NODE_ELEMENT ) | ||
1191 | innerSibling.mergeSiblings(); | ||
1192 | } | ||
1193 | } | ||
1194 | } | ||
1195 | |||
1196 | return function( inlineOnly ) { | ||
1197 | // Merge empty links and anchors also. (#5567) | ||
1198 | if ( !( inlineOnly === false || CKEDITOR.dtd.$removeEmpty[ this.getName() ] || this.is( 'a' ) ) ) { | ||
1199 | return; | ||
1200 | } | ||
1201 | |||
1202 | mergeElements( this, this.getNext(), true ); | ||
1203 | mergeElements( this, this.getPrevious() ); | ||
1204 | }; | ||
1205 | } )(), | ||
1206 | |||
1207 | /** | ||
1208 | * Shows this element (displays it). | ||
1209 | * | ||
1210 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1211 | * element.show(); | ||
1212 | */ | ||
1213 | show: function() { | ||
1214 | this.setStyles( { | ||
1215 | display: '', | ||
1216 | visibility: '' | ||
1217 | } ); | ||
1218 | }, | ||
1219 | |||
1220 | /** | ||
1221 | * Sets the value of an element attribute. | ||
1222 | * | ||
1223 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1224 | * element.setAttribute( 'class', 'myClass' ); | ||
1225 | * element.setAttribute( 'title', 'This is an example' ); | ||
1226 | * | ||
1227 | * @method | ||
1228 | * @param {String} name The name of the attribute. | ||
1229 | * @param {String} value The value to be set to the attribute. | ||
1230 | * @returns {CKEDITOR.dom.element} This element instance. | ||
1231 | */ | ||
1232 | setAttribute: ( function() { | ||
1233 | var standard = function( name, value ) { | ||
1234 | this.$.setAttribute( name, value ); | ||
1235 | return this; | ||
1236 | }; | ||
1237 | |||
1238 | if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks ) ) { | ||
1239 | return function( name, value ) { | ||
1240 | if ( name == 'class' ) | ||
1241 | this.$.className = value; | ||
1242 | else if ( name == 'style' ) | ||
1243 | this.$.style.cssText = value; | ||
1244 | else if ( name == 'tabindex' ) // Case sensitive. | ||
1245 | this.$.tabIndex = value; | ||
1246 | else if ( name == 'checked' ) | ||
1247 | this.$.checked = value; | ||
1248 | else if ( name == 'contenteditable' ) | ||
1249 | standard.call( this, 'contentEditable', value ); | ||
1250 | else | ||
1251 | standard.apply( this, arguments ); | ||
1252 | return this; | ||
1253 | }; | ||
1254 | } else if ( CKEDITOR.env.ie8Compat && CKEDITOR.env.secure ) { | ||
1255 | return function( name, value ) { | ||
1256 | // IE8 throws error when setting src attribute to non-ssl value. (#7847) | ||
1257 | if ( name == 'src' && value.match( /^http:\/\// ) ) { | ||
1258 | try { | ||
1259 | standard.apply( this, arguments ); | ||
1260 | } catch ( e ) {} | ||
1261 | } else { | ||
1262 | standard.apply( this, arguments ); | ||
1263 | } | ||
1264 | return this; | ||
1265 | }; | ||
1266 | } else { | ||
1267 | return standard; | ||
1268 | } | ||
1269 | } )(), | ||
1270 | |||
1271 | /** | ||
1272 | * Sets the value of several element attributes. | ||
1273 | * | ||
1274 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1275 | * element.setAttributes( { | ||
1276 | * 'class': 'myClass', | ||
1277 | * title: 'This is an example' | ||
1278 | * } ); | ||
1279 | * | ||
1280 | * @chainable | ||
1281 | * @param {Object} attributesPairs An object containing the names and | ||
1282 | * values of the attributes. | ||
1283 | * @returns {CKEDITOR.dom.element} This element instance. | ||
1284 | */ | ||
1285 | setAttributes: function( attributesPairs ) { | ||
1286 | for ( var name in attributesPairs ) | ||
1287 | this.setAttribute( name, attributesPairs[ name ] ); | ||
1288 | return this; | ||
1289 | }, | ||
1290 | |||
1291 | /** | ||
1292 | * Sets the element value. This function is usually used with form | ||
1293 | * field element. | ||
1294 | * | ||
1295 | * @chainable | ||
1296 | * @param {String} value The element value. | ||
1297 | * @returns {CKEDITOR.dom.element} This element instance. | ||
1298 | */ | ||
1299 | setValue: function( value ) { | ||
1300 | this.$.value = value; | ||
1301 | return this; | ||
1302 | }, | ||
1303 | |||
1304 | /** | ||
1305 | * Removes an attribute from the element. | ||
1306 | * | ||
1307 | * var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' ); | ||
1308 | * element.removeAttribute( 'class' ); | ||
1309 | * | ||
1310 | * @method | ||
1311 | * @param {String} name The attribute name. | ||
1312 | */ | ||
1313 | removeAttribute: ( function() { | ||
1314 | var standard = function( name ) { | ||
1315 | this.$.removeAttribute( name ); | ||
1316 | }; | ||
1317 | |||
1318 | if ( CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks ) ) { | ||
1319 | return function( name ) { | ||
1320 | if ( name == 'class' ) | ||
1321 | name = 'className'; | ||
1322 | else if ( name == 'tabindex' ) | ||
1323 | name = 'tabIndex'; | ||
1324 | else if ( name == 'contenteditable' ) | ||
1325 | name = 'contentEditable'; | ||
1326 | standard.call( this, name ); | ||
1327 | }; | ||
1328 | } else { | ||
1329 | return standard; | ||
1330 | } | ||
1331 | } )(), | ||
1332 | |||
1333 | /** | ||
1334 | * Removes all element's attributes or just given ones. | ||
1335 | * | ||
1336 | * @param {Array} [attributes] The array with attributes names. | ||
1337 | */ | ||
1338 | removeAttributes: function( attributes ) { | ||
1339 | if ( CKEDITOR.tools.isArray( attributes ) ) { | ||
1340 | for ( var i = 0; i < attributes.length; i++ ) { | ||
1341 | this.removeAttribute( attributes[ i ] ); | ||
1342 | } | ||
1343 | } else { | ||
1344 | attributes = attributes || this.getAttributes(); | ||
1345 | |||
1346 | for ( var attr in attributes ) { | ||
1347 | attributes.hasOwnProperty( attr ) && this.removeAttribute( attr ); | ||
1348 | } | ||
1349 | } | ||
1350 | }, | ||
1351 | |||
1352 | /** | ||
1353 | * Removes a style from the element. | ||
1354 | * | ||
1355 | * var element = CKEDITOR.dom.element.createFromHtml( '<div style="display:none"></div>' ); | ||
1356 | * element.removeStyle( 'display' ); | ||
1357 | * | ||
1358 | * @method | ||
1359 | * @param {String} name The style name. | ||
1360 | */ | ||
1361 | removeStyle: function( name ) { | ||
1362 | // Removes the specified property from the current style object. | ||
1363 | var $ = this.$.style; | ||
1364 | |||
1365 | // "removeProperty" need to be specific on the following styles. | ||
1366 | if ( !$.removeProperty && ( name == 'border' || name == 'margin' || name == 'padding' ) ) { | ||
1367 | var names = expandedRules( name ); | ||
1368 | for ( var i = 0 ; i < names.length ; i++ ) | ||
1369 | this.removeStyle( names[ i ] ); | ||
1370 | return; | ||
1371 | } | ||
1372 | |||
1373 | $.removeProperty ? $.removeProperty( name ) : $.removeAttribute( CKEDITOR.tools.cssStyleToDomStyle( name ) ); | ||
1374 | |||
1375 | // Eventually remove empty style attribute. | ||
1376 | if ( !this.$.style.cssText ) | ||
1377 | this.removeAttribute( 'style' ); | ||
1378 | }, | ||
1379 | |||
1380 | /** | ||
1381 | * Sets the value of an element style. | ||
1382 | * | ||
1383 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1384 | * element.setStyle( 'background-color', '#ff0000' ); | ||
1385 | * element.setStyle( 'margin-top', '10px' ); | ||
1386 | * element.setStyle( 'float', 'right' ); | ||
1387 | * | ||
1388 | * @param {String} name The name of the style. The CSS naming notation | ||
1389 | * must be used (e.g. `background-color`). | ||
1390 | * @param {String} value The value to be set to the style. | ||
1391 | * @returns {CKEDITOR.dom.element} This element instance. | ||
1392 | */ | ||
1393 | setStyle: function( name, value ) { | ||
1394 | this.$.style[ CKEDITOR.tools.cssStyleToDomStyle( name ) ] = value; | ||
1395 | return this; | ||
1396 | }, | ||
1397 | |||
1398 | /** | ||
1399 | * Sets the value of several element styles. | ||
1400 | * | ||
1401 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1402 | * element.setStyles( { | ||
1403 | * position: 'absolute', | ||
1404 | * float: 'right' | ||
1405 | * } ); | ||
1406 | * | ||
1407 | * @param {Object} stylesPairs An object containing the names and | ||
1408 | * values of the styles. | ||
1409 | * @returns {CKEDITOR.dom.element} This element instance. | ||
1410 | */ | ||
1411 | setStyles: function( stylesPairs ) { | ||
1412 | for ( var name in stylesPairs ) | ||
1413 | this.setStyle( name, stylesPairs[ name ] ); | ||
1414 | return this; | ||
1415 | }, | ||
1416 | |||
1417 | /** | ||
1418 | * Sets the opacity of an element. | ||
1419 | * | ||
1420 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1421 | * element.setOpacity( 0.75 ); | ||
1422 | * | ||
1423 | * @param {Number} opacity A number within the range `[0.0, 1.0]`. | ||
1424 | */ | ||
1425 | setOpacity: function( opacity ) { | ||
1426 | if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) { | ||
1427 | opacity = Math.round( opacity * 100 ); | ||
1428 | this.setStyle( 'filter', opacity >= 100 ? '' : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' ); | ||
1429 | } else { | ||
1430 | this.setStyle( 'opacity', opacity ); | ||
1431 | } | ||
1432 | }, | ||
1433 | |||
1434 | /** | ||
1435 | * Makes the element and its children unselectable. | ||
1436 | * | ||
1437 | * var element = CKEDITOR.document.getById( 'myElement' ); | ||
1438 | * element.unselectable(); | ||
1439 | * | ||
1440 | * @method | ||
1441 | */ | ||
1442 | unselectable: function() { | ||
1443 | // CSS unselectable. | ||
1444 | this.setStyles( CKEDITOR.tools.cssVendorPrefix( 'user-select', 'none' ) ); | ||
1445 | |||
1446 | // For IE/Opera which doesn't support for the above CSS style, | ||
1447 | // the unselectable="on" attribute only specifies the selection | ||
1448 | // process cannot start in the element itself, and it doesn't inherit. | ||
1449 | if ( CKEDITOR.env.ie ) { | ||
1450 | this.setAttribute( 'unselectable', 'on' ); | ||
1451 | |||
1452 | var element, | ||
1453 | elements = this.getElementsByTag( '*' ); | ||
1454 | |||
1455 | for ( var i = 0, count = elements.count() ; i < count ; i++ ) { | ||
1456 | element = elements.getItem( i ); | ||
1457 | element.setAttribute( 'unselectable', 'on' ); | ||
1458 | } | ||
1459 | } | ||
1460 | }, | ||
1461 | |||
1462 | /** | ||
1463 | * Gets closest positioned (`position != static`) ancestor. | ||
1464 | * | ||
1465 | * @returns {CKEDITOR.dom.element} Positioned ancestor or `null`. | ||
1466 | */ | ||
1467 | getPositionedAncestor: function() { | ||
1468 | var current = this; | ||
1469 | while ( current.getName() != 'html' ) { | ||
1470 | if ( current.getComputedStyle( 'position' ) != 'static' ) | ||
1471 | return current; | ||
1472 | |||
1473 | current = current.getParent(); | ||
1474 | } | ||
1475 | return null; | ||
1476 | }, | ||
1477 | |||
1478 | /** | ||
1479 | * Gets this element's position in document. | ||
1480 | * | ||
1481 | * @param {CKEDITOR.dom.document} [refDocument] | ||
1482 | * @returns {Object} Element's position. | ||
1483 | * @returns {Number} return.x | ||
1484 | * @returns {Number} return.y | ||
1485 | * @todo refDocument | ||
1486 | */ | ||
1487 | getDocumentPosition: function( refDocument ) { | ||
1488 | var x = 0, | ||
1489 | y = 0, | ||
1490 | doc = this.getDocument(), | ||
1491 | body = doc.getBody(), | ||
1492 | quirks = doc.$.compatMode == 'BackCompat'; | ||
1493 | |||
1494 | if ( document.documentElement.getBoundingClientRect && | ||
1495 | ( CKEDITOR.env.ie ? CKEDITOR.env.version !== 8 : true ) ) { | ||
1496 | var box = this.$.getBoundingClientRect(), | ||
1497 | $doc = doc.$, | ||
1498 | $docElem = $doc.documentElement; | ||
1499 | |||
1500 | var clientTop = $docElem.clientTop || body.$.clientTop || 0, | ||
1501 | clientLeft = $docElem.clientLeft || body.$.clientLeft || 0, | ||
1502 | needAdjustScrollAndBorders = true; | ||
1503 | |||
1504 | // #3804: getBoundingClientRect() works differently on IE and non-IE | ||
1505 | // browsers, regarding scroll positions. | ||
1506 | // | ||
1507 | // On IE, the top position of the <html> element is always 0, no matter | ||
1508 | // how much you scrolled down. | ||
1509 | // | ||
1510 | // On other browsers, the top position of the <html> element is negative | ||
1511 | // scrollTop. | ||
1512 | if ( CKEDITOR.env.ie ) { | ||
1513 | var inDocElem = doc.getDocumentElement().contains( this ), | ||
1514 | inBody = doc.getBody().contains( this ); | ||
1515 | |||
1516 | needAdjustScrollAndBorders = ( quirks && inBody ) || ( !quirks && inDocElem ); | ||
1517 | } | ||
1518 | |||
1519 | // #12747. | ||
1520 | if ( needAdjustScrollAndBorders ) { | ||
1521 | var scrollRelativeLeft, | ||
1522 | scrollRelativeTop; | ||
1523 | |||
1524 | // See #12758 to know more about document.(documentElement|body).scroll(Left|Top) in Webkit. | ||
1525 | if ( CKEDITOR.env.webkit || ( CKEDITOR.env.ie && CKEDITOR.env.version >= 12 ) ) { | ||
1526 | scrollRelativeLeft = body.$.scrollLeft || $docElem.scrollLeft; | ||
1527 | scrollRelativeTop = body.$.scrollTop || $docElem.scrollTop; | ||
1528 | } else { | ||
1529 | var scrollRelativeElement = quirks ? body.$ : $docElem; | ||
1530 | |||
1531 | scrollRelativeLeft = scrollRelativeElement.scrollLeft; | ||
1532 | scrollRelativeTop = scrollRelativeElement.scrollTop; | ||
1533 | } | ||
1534 | |||
1535 | x = box.left + scrollRelativeLeft - clientLeft; | ||
1536 | y = box.top + scrollRelativeTop - clientTop; | ||
1537 | } | ||
1538 | } else { | ||
1539 | var current = this, | ||
1540 | previous = null, | ||
1541 | offsetParent; | ||
1542 | while ( current && !( current.getName() == 'body' || current.getName() == 'html' ) ) { | ||
1543 | x += current.$.offsetLeft - current.$.scrollLeft; | ||
1544 | y += current.$.offsetTop - current.$.scrollTop; | ||
1545 | |||
1546 | // Opera includes clientTop|Left into offsetTop|Left. | ||
1547 | if ( !current.equals( this ) ) { | ||
1548 | x += ( current.$.clientLeft || 0 ); | ||
1549 | y += ( current.$.clientTop || 0 ); | ||
1550 | } | ||
1551 | |||
1552 | var scrollElement = previous; | ||
1553 | while ( scrollElement && !scrollElement.equals( current ) ) { | ||
1554 | x -= scrollElement.$.scrollLeft; | ||
1555 | y -= scrollElement.$.scrollTop; | ||
1556 | scrollElement = scrollElement.getParent(); | ||
1557 | } | ||
1558 | |||
1559 | previous = current; | ||
1560 | current = ( offsetParent = current.$.offsetParent ) ? new CKEDITOR.dom.element( offsetParent ) : null; | ||
1561 | } | ||
1562 | } | ||
1563 | |||
1564 | if ( refDocument ) { | ||
1565 | var currentWindow = this.getWindow(), | ||
1566 | refWindow = refDocument.getWindow(); | ||
1567 | |||
1568 | if ( !currentWindow.equals( refWindow ) && currentWindow.$.frameElement ) { | ||
1569 | var iframePosition = ( new CKEDITOR.dom.element( currentWindow.$.frameElement ) ).getDocumentPosition( refDocument ); | ||
1570 | |||
1571 | x += iframePosition.x; | ||
1572 | y += iframePosition.y; | ||
1573 | } | ||
1574 | } | ||
1575 | |||
1576 | if ( !document.documentElement.getBoundingClientRect ) { | ||
1577 | // In Firefox, we'll endup one pixel before the element positions, | ||
1578 | // so we must add it here. | ||
1579 | if ( CKEDITOR.env.gecko && !quirks ) { | ||
1580 | x += this.$.clientLeft ? 1 : 0; | ||
1581 | y += this.$.clientTop ? 1 : 0; | ||
1582 | } | ||
1583 | } | ||
1584 | |||
1585 | return { x: x, y: y }; | ||
1586 | }, | ||
1587 | |||
1588 | /** | ||
1589 | * Make any page element visible inside the browser viewport. | ||
1590 | * | ||
1591 | * @param {Boolean} [alignToTop=false] | ||
1592 | */ | ||
1593 | scrollIntoView: function( alignToTop ) { | ||
1594 | var parent = this.getParent(); | ||
1595 | if ( !parent ) | ||
1596 | return; | ||
1597 | |||
1598 | // Scroll the element into parent container from the inner out. | ||
1599 | do { | ||
1600 | // Check ancestors that overflows. | ||
1601 | var overflowed = | ||
1602 | parent.$.clientWidth && parent.$.clientWidth < parent.$.scrollWidth || | ||
1603 | parent.$.clientHeight && parent.$.clientHeight < parent.$.scrollHeight; | ||
1604 | |||
1605 | // Skip body element, which will report wrong clientHeight when containing | ||
1606 | // floated content. (#9523) | ||
1607 | if ( overflowed && !parent.is( 'body' ) ) | ||
1608 | this.scrollIntoParent( parent, alignToTop, 1 ); | ||
1609 | |||
1610 | // Walk across the frame. | ||
1611 | if ( parent.is( 'html' ) ) { | ||
1612 | var win = parent.getWindow(); | ||
1613 | |||
1614 | // Avoid security error. | ||
1615 | try { | ||
1616 | var iframe = win.$.frameElement; | ||
1617 | iframe && ( parent = new CKEDITOR.dom.element( iframe ) ); | ||
1618 | } catch ( er ) {} | ||
1619 | } | ||
1620 | } | ||
1621 | while ( ( parent = parent.getParent() ) ); | ||
1622 | }, | ||
1623 | |||
1624 | /** | ||
1625 | * Make any page element visible inside one of the ancestors by scrolling the parent. | ||
1626 | * | ||
1627 | * @param {CKEDITOR.dom.element/CKEDITOR.dom.window} parent The container to scroll into. | ||
1628 | * @param {Boolean} [alignToTop] Align the element's top side with the container's | ||
1629 | * when `true` is specified; align the bottom with viewport bottom when | ||
1630 | * `false` is specified. Otherwise scroll on either side with the minimum | ||
1631 | * amount to show the element. | ||
1632 | * @param {Boolean} [hscroll] Whether horizontal overflow should be considered. | ||
1633 | */ | ||
1634 | scrollIntoParent: function( parent, alignToTop, hscroll ) { | ||
1635 | !parent && ( parent = this.getWindow() ); | ||
1636 | |||
1637 | var doc = parent.getDocument(); | ||
1638 | var isQuirks = doc.$.compatMode == 'BackCompat'; | ||
1639 | |||
1640 | // On window <html> is scrolled while quirks scrolls <body>. | ||
1641 | if ( parent instanceof CKEDITOR.dom.window ) | ||
1642 | parent = isQuirks ? doc.getBody() : doc.getDocumentElement(); | ||
1643 | |||
1644 | // Scroll the parent by the specified amount. | ||
1645 | function scrollBy( x, y ) { | ||
1646 | // Webkit doesn't support "scrollTop/scrollLeft" | ||
1647 | // on documentElement/body element. | ||
1648 | if ( /body|html/.test( parent.getName() ) ) | ||
1649 | parent.getWindow().$.scrollBy( x, y ); | ||
1650 | else { | ||
1651 | parent.$.scrollLeft += x; | ||
1652 | parent.$.scrollTop += y; | ||
1653 | } | ||
1654 | } | ||
1655 | |||
1656 | // Figure out the element position relative to the specified window. | ||
1657 | function screenPos( element, refWin ) { | ||
1658 | var pos = { x: 0, y: 0 }; | ||
1659 | |||
1660 | if ( !( element.is( isQuirks ? 'body' : 'html' ) ) ) { | ||
1661 | var box = element.$.getBoundingClientRect(); | ||
1662 | pos.x = box.left, pos.y = box.top; | ||
1663 | } | ||
1664 | |||
1665 | var win = element.getWindow(); | ||
1666 | if ( !win.equals( refWin ) ) { | ||
1667 | var outerPos = screenPos( CKEDITOR.dom.element.get( win.$.frameElement ), refWin ); | ||
1668 | pos.x += outerPos.x, pos.y += outerPos.y; | ||
1669 | } | ||
1670 | |||
1671 | return pos; | ||
1672 | } | ||
1673 | |||
1674 | // calculated margin size. | ||
1675 | function margin( element, side ) { | ||
1676 | return parseInt( element.getComputedStyle( 'margin-' + side ) || 0, 10 ) || 0; | ||
1677 | } | ||
1678 | |||
1679 | // [WebKit] Reset stored scrollTop value to not break scrollIntoView() method flow. | ||
1680 | // Scrolling breaks when range.select() is used right after element.scrollIntoView(). (#14659) | ||
1681 | if ( CKEDITOR.env.webkit ) { | ||
1682 | var editor = this.getEditor( false ); | ||
1683 | |||
1684 | if ( editor ) { | ||
1685 | editor._.previousScrollTop = null; | ||
1686 | } | ||
1687 | } | ||
1688 | |||
1689 | var win = parent.getWindow(); | ||
1690 | |||
1691 | var thisPos = screenPos( this, win ), | ||
1692 | parentPos = screenPos( parent, win ), | ||
1693 | eh = this.$.offsetHeight, | ||
1694 | ew = this.$.offsetWidth, | ||
1695 | ch = parent.$.clientHeight, | ||
1696 | cw = parent.$.clientWidth, | ||
1697 | lt, br; | ||
1698 | |||
1699 | // Left-top margins. | ||
1700 | lt = { | ||
1701 | x: thisPos.x - margin( this, 'left' ) - parentPos.x || 0, | ||
1702 | y: thisPos.y - margin( this, 'top' ) - parentPos.y || 0 | ||
1703 | }; | ||
1704 | |||
1705 | // Bottom-right margins. | ||
1706 | br = { | ||
1707 | x: thisPos.x + ew + margin( this, 'right' ) - ( ( parentPos.x ) + cw ) || 0, | ||
1708 | y: thisPos.y + eh + margin( this, 'bottom' ) - ( ( parentPos.y ) + ch ) || 0 | ||
1709 | }; | ||
1710 | |||
1711 | // 1. Do the specified alignment as much as possible; | ||
1712 | // 2. Otherwise be smart to scroll only the minimum amount; | ||
1713 | // 3. Never cut at the top; | ||
1714 | // 4. DO NOT scroll when already visible. | ||
1715 | if ( lt.y < 0 || br.y > 0 ) | ||
1716 | scrollBy( 0, alignToTop === true ? lt.y : alignToTop === false ? br.y : lt.y < 0 ? lt.y : br.y ); | ||
1717 | |||
1718 | if ( hscroll && ( lt.x < 0 || br.x > 0 ) ) | ||
1719 | scrollBy( lt.x < 0 ? lt.x : br.x, 0 ); | ||
1720 | }, | ||
1721 | |||
1722 | /** | ||
1723 | * Switch the `class` attribute to reflect one of the triple states of an | ||
1724 | * element in one of {@link CKEDITOR#TRISTATE_ON}, {@link CKEDITOR#TRISTATE_OFF} | ||
1725 | * or {@link CKEDITOR#TRISTATE_DISABLED}. | ||
1726 | * | ||
1727 | * link.setState( CKEDITOR.TRISTATE_ON ); | ||
1728 | * // <a class="cke_on" aria-pressed="true">...</a> | ||
1729 | * link.setState( CKEDITOR.TRISTATE_OFF ); | ||
1730 | * // <a class="cke_off">...</a> | ||
1731 | * link.setState( CKEDITOR.TRISTATE_DISABLED ); | ||
1732 | * // <a class="cke_disabled" aria-disabled="true">...</a> | ||
1733 | * | ||
1734 | * span.setState( CKEDITOR.TRISTATE_ON, 'cke_button' ); | ||
1735 | * // <span class="cke_button_on">...</span> | ||
1736 | * | ||
1737 | * @param {Number} state Indicate the element state. One of {@link CKEDITOR#TRISTATE_ON}, | ||
1738 | * {@link CKEDITOR#TRISTATE_OFF}, {@link CKEDITOR#TRISTATE_DISABLED}. | ||
1739 | * @param [base='cke'] The prefix apply to each of the state class name. | ||
1740 | * @param [useAria=true] Whether toggle the ARIA state attributes besides of class name change. | ||
1741 | */ | ||
1742 | setState: function( state, base, useAria ) { | ||
1743 | base = base || 'cke'; | ||
1744 | |||
1745 | switch ( state ) { | ||
1746 | case CKEDITOR.TRISTATE_ON: | ||
1747 | this.addClass( base + '_on' ); | ||
1748 | this.removeClass( base + '_off' ); | ||
1749 | this.removeClass( base + '_disabled' ); | ||
1750 | useAria && this.setAttribute( 'aria-pressed', true ); | ||
1751 | useAria && this.removeAttribute( 'aria-disabled' ); | ||
1752 | break; | ||
1753 | |||
1754 | case CKEDITOR.TRISTATE_DISABLED: | ||
1755 | this.addClass( base + '_disabled' ); | ||
1756 | this.removeClass( base + '_off' ); | ||
1757 | this.removeClass( base + '_on' ); | ||
1758 | useAria && this.setAttribute( 'aria-disabled', true ); | ||
1759 | useAria && this.removeAttribute( 'aria-pressed' ); | ||
1760 | break; | ||
1761 | |||
1762 | default: | ||
1763 | this.addClass( base + '_off' ); | ||
1764 | this.removeClass( base + '_on' ); | ||
1765 | this.removeClass( base + '_disabled' ); | ||
1766 | useAria && this.removeAttribute( 'aria-pressed' ); | ||
1767 | useAria && this.removeAttribute( 'aria-disabled' ); | ||
1768 | break; | ||
1769 | } | ||
1770 | }, | ||
1771 | |||
1772 | /** | ||
1773 | * Returns the inner document of this `<iframe>` element. | ||
1774 | * | ||
1775 | * @returns {CKEDITOR.dom.document} The inner document. | ||
1776 | */ | ||
1777 | getFrameDocument: function() { | ||
1778 | var $ = this.$; | ||
1779 | |||
1780 | try { | ||
1781 | // In IE, with custom document.domain, it may happen that | ||
1782 | // the iframe is not yet available, resulting in "Access | ||
1783 | // Denied" for the following property access. | ||
1784 | $.contentWindow.document; | ||
1785 | } catch ( e ) { | ||
1786 | // Trick to solve this issue, forcing the iframe to get ready | ||
1787 | // by simply setting its "src" property. | ||
1788 | $.src = $.src; | ||
1789 | } | ||
1790 | |||
1791 | return $ && new CKEDITOR.dom.document( $.contentWindow.document ); | ||
1792 | }, | ||
1793 | |||
1794 | /** | ||
1795 | * Copy all the attributes from one node to the other, kinda like a clone | ||
1796 | * skipAttributes is an object with the attributes that must **not** be copied. | ||
1797 | * | ||
1798 | * @param {CKEDITOR.dom.element} dest The destination element. | ||
1799 | * @param {Object} skipAttributes A dictionary of attributes to skip. | ||
1800 | */ | ||
1801 | copyAttributes: function( dest, skipAttributes ) { | ||
1802 | var attributes = this.$.attributes; | ||
1803 | skipAttributes = skipAttributes || {}; | ||
1804 | |||
1805 | for ( var n = 0; n < attributes.length; n++ ) { | ||
1806 | var attribute = attributes[ n ]; | ||
1807 | |||
1808 | // Lowercase attribute name hard rule is broken for | ||
1809 | // some attribute on IE, e.g. CHECKED. | ||
1810 | var attrName = attribute.nodeName.toLowerCase(), | ||
1811 | attrValue; | ||
1812 | |||
1813 | // We can set the type only once, so do it with the proper value, not copying it. | ||
1814 | if ( attrName in skipAttributes ) | ||
1815 | continue; | ||
1816 | |||
1817 | if ( attrName == 'checked' && ( attrValue = this.getAttribute( attrName ) ) ) | ||
1818 | dest.setAttribute( attrName, attrValue ); | ||
1819 | // IE contains not specified attributes in $.attributes so we need to check | ||
1820 | // if elements attribute is specified using hasAttribute. | ||
1821 | else if ( !CKEDITOR.env.ie || this.hasAttribute( attrName ) ) { | ||
1822 | attrValue = this.getAttribute( attrName ); | ||
1823 | if ( attrValue === null ) | ||
1824 | attrValue = attribute.nodeValue; | ||
1825 | |||
1826 | dest.setAttribute( attrName, attrValue ); | ||
1827 | } | ||
1828 | } | ||
1829 | |||
1830 | // The style: | ||
1831 | if ( this.$.style.cssText !== '' ) | ||
1832 | dest.$.style.cssText = this.$.style.cssText; | ||
1833 | }, | ||
1834 | |||
1835 | /** | ||
1836 | * Changes the tag name of the current element. | ||
1837 | * | ||
1838 | * @param {String} newTag The new tag for the element. | ||
1839 | */ | ||
1840 | renameNode: function( newTag ) { | ||
1841 | // If it's already correct exit here. | ||
1842 | if ( this.getName() == newTag ) | ||
1843 | return; | ||
1844 | |||
1845 | var doc = this.getDocument(); | ||
1846 | |||
1847 | // Create the new node. | ||
1848 | var newNode = new CKEDITOR.dom.element( newTag, doc ); | ||
1849 | |||
1850 | // Copy all attributes. | ||
1851 | this.copyAttributes( newNode ); | ||
1852 | |||
1853 | // Move children to the new node. | ||
1854 | this.moveChildren( newNode ); | ||
1855 | |||
1856 | // Replace the node. | ||
1857 | this.getParent( true ) && this.$.parentNode.replaceChild( newNode.$, this.$ ); | ||
1858 | newNode.$[ 'data-cke-expando' ] = this.$[ 'data-cke-expando' ]; | ||
1859 | this.$ = newNode.$; | ||
1860 | // Bust getName's cache. (#8663) | ||
1861 | delete this.getName; | ||
1862 | }, | ||
1863 | |||
1864 | /** | ||
1865 | * Gets a DOM tree descendant under the current node. | ||
1866 | * | ||
1867 | * var strong = p.getChild( 0 ); | ||
1868 | * | ||
1869 | * @method | ||
1870 | * @param {Array/Number} indices The child index or array of child indices under the node. | ||
1871 | * @returns {CKEDITOR.dom.node} The specified DOM child under the current node. Null if child does not exist. | ||
1872 | */ | ||
1873 | getChild: ( function() { | ||
1874 | function getChild( rawNode, index ) { | ||
1875 | var childNodes = rawNode.childNodes; | ||
1876 | |||
1877 | if ( index >= 0 && index < childNodes.length ) | ||
1878 | return childNodes[ index ]; | ||
1879 | } | ||
1880 | |||
1881 | return function( indices ) { | ||
1882 | var rawNode = this.$; | ||
1883 | |||
1884 | if ( !indices.slice ) | ||
1885 | rawNode = getChild( rawNode, indices ); | ||
1886 | else { | ||
1887 | indices = indices.slice(); | ||
1888 | while ( indices.length > 0 && rawNode ) | ||
1889 | rawNode = getChild( rawNode, indices.shift() ); | ||
1890 | } | ||
1891 | |||
1892 | return rawNode ? new CKEDITOR.dom.node( rawNode ) : null; | ||
1893 | }; | ||
1894 | } )(), | ||
1895 | |||
1896 | /** | ||
1897 | * Gets number of element's children. | ||
1898 | * | ||
1899 | * @returns {Number} | ||
1900 | */ | ||
1901 | getChildCount: function() { | ||
1902 | return this.$.childNodes.length; | ||
1903 | }, | ||
1904 | |||
1905 | /** | ||
1906 | * Disables browser's context menu in this element. | ||
1907 | */ | ||
1908 | disableContextMenu: function() { | ||
1909 | this.on( 'contextmenu', function( evt ) { | ||
1910 | // Cancel the browser context menu. | ||
1911 | if ( !evt.data.getTarget().getAscendant( enablesContextMenu, true ) ) | ||
1912 | evt.data.preventDefault(); | ||
1913 | } ); | ||
1914 | |||
1915 | function enablesContextMenu( node ) { | ||
1916 | return node.type == CKEDITOR.NODE_ELEMENT && node.hasClass( 'cke_enable_context_menu' ); | ||
1917 | } | ||
1918 | }, | ||
1919 | |||
1920 | /** | ||
1921 | * Gets element's direction. Supports both CSS `direction` prop and `dir` attr. | ||
1922 | */ | ||
1923 | getDirection: function( useComputed ) { | ||
1924 | if ( useComputed ) { | ||
1925 | return this.getComputedStyle( 'direction' ) || | ||
1926 | this.getDirection() || | ||
1927 | this.getParent() && this.getParent().getDirection( 1 ) || | ||
1928 | this.getDocument().$.dir || | ||
1929 | 'ltr'; | ||
1930 | } | ||
1931 | else { | ||
1932 | return this.getStyle( 'direction' ) || this.getAttribute( 'dir' ); | ||
1933 | } | ||
1934 | }, | ||
1935 | |||
1936 | /** | ||
1937 | * Gets, sets and removes custom data to be stored as HTML5 data-* attributes. | ||
1938 | * | ||
1939 | * element.data( 'extra-info', 'test' ); // Appended the attribute data-extra-info="test" to the element. | ||
1940 | * alert( element.data( 'extra-info' ) ); // 'test' | ||
1941 | * element.data( 'extra-info', false ); // Remove the data-extra-info attribute from the element. | ||
1942 | * | ||
1943 | * @param {String} name The name of the attribute, excluding the `data-` part. | ||
1944 | * @param {String} [value] The value to set. If set to false, the attribute will be removed. | ||
1945 | */ | ||
1946 | data: function( name, value ) { | ||
1947 | name = 'data-' + name; | ||
1948 | if ( value === undefined ) | ||
1949 | return this.getAttribute( name ); | ||
1950 | else if ( value === false ) | ||
1951 | this.removeAttribute( name ); | ||
1952 | else | ||
1953 | this.setAttribute( name, value ); | ||
1954 | |||
1955 | return null; | ||
1956 | }, | ||
1957 | |||
1958 | /** | ||
1959 | * Retrieves an editor instance which is based on this element (if any). | ||
1960 | * It basically loops over {@link CKEDITOR#instances} in search for an instance | ||
1961 | * that uses the element. | ||
1962 | * | ||
1963 | * var element = new CKEDITOR.dom.element( 'div' ); | ||
1964 | * element.appendTo( CKEDITOR.document.getBody() ); | ||
1965 | * CKEDITOR.replace( element ); | ||
1966 | * alert( element.getEditor().name ); // 'editor1' | ||
1967 | * | ||
1968 | * By default this method considers only original DOM elements upon which the editor | ||
1969 | * was created. Setting `optimized` parameter to `false` will consider editor editable | ||
1970 | * and its children. | ||
1971 | * | ||
1972 | * @param {Boolean} [optimized=true] If set to `false` it will scan every editor editable. | ||
1973 | * @returns {CKEDITOR.editor} An editor instance or null if nothing has been found. | ||
1974 | */ | ||
1975 | getEditor: function( optimized ) { | ||
1976 | var instances = CKEDITOR.instances, | ||
1977 | name, instance, editable; | ||
1978 | |||
1979 | optimized = optimized || optimized === undefined; | ||
1980 | |||
1981 | for ( name in instances ) { | ||
1982 | instance = instances[ name ]; | ||
1983 | |||
1984 | if ( instance.element.equals( this ) && instance.elementMode != CKEDITOR.ELEMENT_MODE_APPENDTO ) | ||
1985 | return instance; | ||
1986 | |||
1987 | if ( !optimized ) { | ||
1988 | editable = instance.editable(); | ||
1989 | |||
1990 | if ( editable && ( editable.equals( this ) || editable.contains( this ) ) ) { | ||
1991 | return instance; | ||
1992 | } | ||
1993 | } | ||
1994 | } | ||
1995 | |||
1996 | return null; | ||
1997 | }, | ||
1998 | |||
1999 | /** | ||
2000 | * Returns list of elements within this element that match specified `selector`. | ||
2001 | * | ||
2002 | * **Notes:** | ||
2003 | * | ||
2004 | * * Not available in IE7. | ||
2005 | * * Returned list is not a live collection (like a result of native `querySelectorAll`). | ||
2006 | * * Unlike native `querySelectorAll` this method ensures selector contextualization. This is: | ||
2007 | * | ||
2008 | * HTML: '<body><div><i>foo</i></div></body>' | ||
2009 | * Native: div.querySelectorAll( 'body i' ) // -> [ <i>foo</i> ] | ||
2010 | * Method: div.find( 'body i' ) // -> [] | ||
2011 | * div.find( 'i' ) // -> [ <i>foo</i> ] | ||
2012 | * | ||
2013 | * @since 4.3 | ||
2014 | * @param {String} selector | ||
2015 | * @returns {CKEDITOR.dom.nodeList} | ||
2016 | */ | ||
2017 | find: function( selector ) { | ||
2018 | var removeTmpId = createTmpId( this ), | ||
2019 | list = new CKEDITOR.dom.nodeList( | ||
2020 | this.$.querySelectorAll( getContextualizedSelector( this, selector ) ) | ||
2021 | ); | ||
2022 | |||
2023 | removeTmpId(); | ||
2024 | |||
2025 | return list; | ||
2026 | }, | ||
2027 | |||
2028 | /** | ||
2029 | * Returns first element within this element that matches specified `selector`. | ||
2030 | * | ||
2031 | * **Notes:** | ||
2032 | * | ||
2033 | * * Not available in IE7. | ||
2034 | * * Unlike native `querySelectorAll` this method ensures selector contextualization. This is: | ||
2035 | * | ||
2036 | * HTML: '<body><div><i>foo</i></div></body>' | ||
2037 | * Native: div.querySelector( 'body i' ) // -> <i>foo</i> | ||
2038 | * Method: div.findOne( 'body i' ) // -> null | ||
2039 | * div.findOne( 'i' ) // -> <i>foo</i> | ||
2040 | * | ||
2041 | * @since 4.3 | ||
2042 | * @param {String} selector | ||
2043 | * @returns {CKEDITOR.dom.element} | ||
2044 | */ | ||
2045 | findOne: function( selector ) { | ||
2046 | var removeTmpId = createTmpId( this ), | ||
2047 | found = this.$.querySelector( getContextualizedSelector( this, selector ) ); | ||
2048 | |||
2049 | removeTmpId(); | ||
2050 | |||
2051 | return found ? new CKEDITOR.dom.element( found ) : null; | ||
2052 | }, | ||
2053 | |||
2054 | /** | ||
2055 | * Traverse the DOM of this element (inclusive), executing a callback for | ||
2056 | * each node. | ||
2057 | * | ||
2058 | * var element = CKEDITOR.dom.element.createFromHtml( '<div><p>foo<b>bar</b>bom</p></div>' ); | ||
2059 | * element.forEach( function( node ) { | ||
2060 | * console.log( node ); | ||
2061 | * } ); | ||
2062 | * // Will log: | ||
2063 | * // 1. <div> element, | ||
2064 | * // 2. <p> element, | ||
2065 | * // 3. "foo" text node, | ||
2066 | * // 4. <b> element, | ||
2067 | * // 5. "bar" text node, | ||
2068 | * // 6. "bom" text node. | ||
2069 | * | ||
2070 | * @since 4.3 | ||
2071 | * @param {Function} callback Function to be executed on every node. | ||
2072 | * If `callback` returns `false` descendants of the node will be ignored. | ||
2073 | * @param {CKEDITOR.htmlParser.node} callback.node Node passed as argument. | ||
2074 | * @param {Number} [type] If specified `callback` will be executed only on | ||
2075 | * nodes of this type. | ||
2076 | * @param {Boolean} [skipRoot] Don't execute `callback` on this element. | ||
2077 | */ | ||
2078 | forEach: function( callback, type, skipRoot ) { | ||
2079 | if ( !skipRoot && ( !type || this.type == type ) ) | ||
2080 | var ret = callback( this ); | ||
2081 | |||
2082 | // Do not filter children if callback returned false. | ||
2083 | if ( ret === false ) | ||
2084 | return; | ||
2085 | |||
2086 | var children = this.getChildren(), | ||
2087 | node, | ||
2088 | i = 0; | ||
2089 | |||
2090 | // We do not cache the size, because the live list of nodes may be changed by the callback. | ||
2091 | for ( ; i < children.count(); i++ ) { | ||
2092 | node = children.getItem( i ); | ||
2093 | if ( node.type == CKEDITOR.NODE_ELEMENT ) | ||
2094 | node.forEach( callback, type ); | ||
2095 | else if ( !type || node.type == type ) | ||
2096 | callback( node ); | ||
2097 | } | ||
2098 | } | ||
2099 | } ); | ||
2100 | |||
2101 | function createTmpId( element ) { | ||
2102 | var hadId = true; | ||
2103 | |||
2104 | if ( !element.$.id ) { | ||
2105 | element.$.id = 'cke_tmp_' + CKEDITOR.tools.getNextNumber(); | ||
2106 | hadId = false; | ||
2107 | } | ||
2108 | |||
2109 | return function() { | ||
2110 | if ( !hadId ) | ||
2111 | element.removeAttribute( 'id' ); | ||
2112 | }; | ||
2113 | } | ||
2114 | |||
2115 | function getContextualizedSelector( element, selector ) { | ||
2116 | var id = CKEDITOR.tools.escapeCss( element.$.id ); | ||
2117 | return '#' + id + ' ' + selector.split( /,\s*/ ).join( ', #' + id + ' ' ); | ||
2118 | } | ||
2119 | |||
2120 | var sides = { | ||
2121 | width: [ 'border-left-width', 'border-right-width', 'padding-left', 'padding-right' ], | ||
2122 | height: [ 'border-top-width', 'border-bottom-width', 'padding-top', 'padding-bottom' ] | ||
2123 | }; | ||
2124 | |||
2125 | // Generate list of specific style rules, applicable to margin/padding/border. | ||
2126 | function expandedRules( style ) { | ||
2127 | var sides = [ 'top', 'left', 'right', 'bottom' ], components; | ||
2128 | |||
2129 | if ( style == 'border' ) | ||
2130 | components = [ 'color', 'style', 'width' ]; | ||
2131 | |||
2132 | var styles = []; | ||
2133 | for ( var i = 0 ; i < sides.length ; i++ ) { | ||
2134 | |||
2135 | if ( components ) { | ||
2136 | for ( var j = 0 ; j < components.length ; j++ ) | ||
2137 | styles.push( [ style, sides[ i ], components[ j ] ].join( '-' ) ); | ||
2138 | } else { | ||
2139 | styles.push( [ style, sides[ i ] ].join( '-' ) ); | ||
2140 | } | ||
2141 | } | ||
2142 | |||
2143 | return styles; | ||
2144 | } | ||
2145 | |||
2146 | function marginAndPaddingSize( type ) { | ||
2147 | var adjustment = 0; | ||
2148 | for ( var i = 0, len = sides[ type ].length; i < len; i++ ) | ||
2149 | adjustment += parseFloat( this.getComputedStyle( sides[ type ][ i ] ) || 0, 10 ) || 0; | ||
2150 | return adjustment; | ||
2151 | } | ||
2152 | |||
2153 | /** | ||
2154 | * Sets the element size considering the box model. | ||
2155 | * | ||
2156 | * @param {'width'/'height'} type The dimension to set. | ||
2157 | * @param {Number} size The length unit in px. | ||
2158 | * @param {Boolean} isBorderBox Apply the size based on the border box model. | ||
2159 | */ | ||
2160 | CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox ) { | ||
2161 | if ( typeof size == 'number' ) { | ||
2162 | if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) ) | ||
2163 | size -= marginAndPaddingSize.call( this, type ); | ||
2164 | |||
2165 | this.setStyle( type, size + 'px' ); | ||
2166 | } | ||
2167 | }; | ||
2168 | |||
2169 | /** | ||
2170 | * Gets the element size, possibly considering the box model. | ||
2171 | * | ||
2172 | * @param {'width'/'height'} type The dimension to get. | ||
2173 | * @param {Boolean} isBorderBox Get the size based on the border box model. | ||
2174 | */ | ||
2175 | CKEDITOR.dom.element.prototype.getSize = function( type, isBorderBox ) { | ||
2176 | var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type ) ], this.$[ 'client' + CKEDITOR.tools.capitalize( type ) ] ) || 0; | ||
2177 | |||
2178 | if ( isBorderBox ) | ||
2179 | size -= marginAndPaddingSize.call( this, type ); | ||
2180 | |||
2181 | return size; | ||
2182 | }; | ||
2183 | } )(); | ||