Importation initiale du code de CKEditor 3.6.1.
[ckeditor.git] / _source / plugins / div / dialogs / div.js
1 /*
2 * Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.html or http://ckeditor.com/license
4 */
5
6 (function()
7 {
8
9 /**
10 * Add to collection with DUP examination.
11 * @param {Object} collection
12 * @param {Object} element
13 * @param {Object} database
14 */
15 function addSafely( collection, element, database )
16 {
17 // 1. IE doesn't support customData on text nodes;
18 // 2. Text nodes never get chance to appear twice;
19 if ( !element.is || !element.getCustomData( 'block_processed' ) )
20 {
21 element.is && CKEDITOR.dom.element.setMarker( database, element, 'block_processed', true );
22 collection.push( element );
23 }
24 }
25
26 function getNonEmptyChildren( element )
27 {
28 var retval = [];
29 var children = element.getChildren();
30 for ( var i = 0 ; i < children.count() ; i++ )
31 {
32 var child = children.getItem( i );
33 if ( ! ( child.type === CKEDITOR.NODE_TEXT
34 && ( /^[ \t\n\r]+$/ ).test( child.getText() ) ) )
35 retval.push( child );
36 }
37 return retval;
38 }
39
40
41 /**
42 * Dialog reused by both 'creatediv' and 'editdiv' commands.
43 * @param {Object} editor
44 * @param {String} command The command name which indicate what the current command is.
45 */
46 function divDialog( editor, command )
47 {
48 // Definition of elements at which div operation should stopped.
49 var divLimitDefinition = ( function(){
50
51 // Customzie from specialize blockLimit elements
52 var definition = CKEDITOR.tools.extend( {}, CKEDITOR.dtd.$blockLimit );
53
54 // Exclude 'div' itself.
55 delete definition.div;
56
57 // Exclude 'td' and 'th' when 'wrapping table'
58 if ( editor.config.div_wrapTable )
59 {
60 delete definition.td;
61 delete definition.th;
62 }
63 return definition;
64 })();
65
66 // DTD of 'div' element
67 var dtd = CKEDITOR.dtd.div;
68
69 /**
70 * Get the first div limit element on the element's path.
71 * @param {Object} element
72 */
73 function getDivLimitElement( element )
74 {
75 var pathElements = new CKEDITOR.dom.elementPath( element ).elements;
76 var divLimit;
77 for ( var i = 0; i < pathElements.length ; i++ )
78 {
79 if ( pathElements[ i ].getName() in divLimitDefinition )
80 {
81 divLimit = pathElements[ i ];
82 break;
83 }
84 }
85 return divLimit;
86 }
87
88 /**
89 * Init all fields' setup/commit function.
90 * @memberof divDialog
91 */
92 function setupFields()
93 {
94 this.foreach( function( field )
95 {
96 // Exclude layout container elements
97 if ( /^(?!vbox|hbox)/.test( field.type ) )
98 {
99 if ( !field.setup )
100 {
101 // Read the dialog fields values from the specified
102 // element attributes.
103 field.setup = function( element )
104 {
105 field.setValue( element.getAttribute( field.id ) || '' );
106 };
107 }
108 if ( !field.commit )
109 {
110 // Set element attributes assigned by the dialog
111 // fields.
112 field.commit = function( element )
113 {
114 var fieldValue = this.getValue();
115 // ignore default element attribute values
116 if ( 'dir' == field.id && element.getComputedStyle( 'direction' ) == fieldValue )
117 return;
118
119 if ( fieldValue )
120 element.setAttribute( field.id, fieldValue );
121 else
122 element.removeAttribute( field.id );
123 };
124 }
125 }
126 } );
127 }
128
129 /**
130 * Wrapping 'div' element around appropriate blocks among the selected ranges.
131 * @param {Object} editor
132 */
133 function createDiv( editor )
134 {
135 // new adding containers OR detected pre-existed containers.
136 var containers = [];
137 // node markers store.
138 var database = {};
139 // All block level elements which contained by the ranges.
140 var containedBlocks = [], block;
141
142 // Get all ranges from the selection.
143 var selection = editor.document.getSelection(),
144 ranges = selection.getRanges();
145 var bookmarks = selection.createBookmarks();
146 var i, iterator;
147
148 // Calcualte a default block tag if we need to create blocks.
149 var blockTag = editor.config.enterMode == CKEDITOR.ENTER_DIV ? 'div' : 'p';
150
151 // collect all included elements from dom-iterator
152 for ( i = 0 ; i < ranges.length ; i++ )
153 {
154 iterator = ranges[ i ].createIterator();
155 while ( ( block = iterator.getNextParagraph() ) )
156 {
157 // include contents of blockLimit elements.
158 if ( block.getName() in divLimitDefinition )
159 {
160 var j, childNodes = block.getChildren();
161 for ( j = 0 ; j < childNodes.count() ; j++ )
162 addSafely( containedBlocks, childNodes.getItem( j ) , database );
163 }
164 else
165 {
166 // Bypass dtd disallowed elements.
167 while ( !dtd[ block.getName() ] && block.getName() != 'body' )
168 block = block.getParent();
169 addSafely( containedBlocks, block, database );
170 }
171 }
172 }
173
174 CKEDITOR.dom.element.clearAllMarkers( database );
175
176 var blockGroups = groupByDivLimit( containedBlocks );
177 var ancestor, blockEl, divElement;
178
179 for ( i = 0 ; i < blockGroups.length ; i++ )
180 {
181 var currentNode = blockGroups[ i ][ 0 ];
182
183 // Calculate the common parent node of all contained elements.
184 ancestor = currentNode.getParent();
185 for ( j = 1 ; j < blockGroups[ i ].length; j++ )
186 ancestor = ancestor.getCommonAncestor( blockGroups[ i ][ j ] );
187
188 divElement = new CKEDITOR.dom.element( 'div', editor.document );
189
190 // Normalize the blocks in each group to a common parent.
191 for ( j = 0; j < blockGroups[ i ].length ; j++ )
192 {
193 currentNode = blockGroups[ i ][ j ];
194
195 while ( !currentNode.getParent().equals( ancestor ) )
196 currentNode = currentNode.getParent();
197
198 // This could introduce some duplicated elements in array.
199 blockGroups[ i ][ j ] = currentNode;
200 }
201
202 // Wrapped blocks counting
203 var fixedBlock = null;
204 for ( j = 0 ; j < blockGroups[ i ].length ; j++ )
205 {
206 currentNode = blockGroups[ i ][ j ];
207
208 // Avoid DUP elements introduced by grouping.
209 if ( !( currentNode.getCustomData && currentNode.getCustomData( 'block_processed' ) ) )
210 {
211 currentNode.is && CKEDITOR.dom.element.setMarker( database, currentNode, 'block_processed', true );
212
213 // Establish new container, wrapping all elements in this group.
214 if ( !j )
215 divElement.insertBefore( currentNode );
216
217 divElement.append( currentNode );
218 }
219 }
220
221 CKEDITOR.dom.element.clearAllMarkers( database );
222 containers.push( divElement );
223 }
224
225 selection.selectBookmarks( bookmarks );
226 return containers;
227 }
228
229 function getDiv( editor )
230 {
231 var path = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() ),
232 blockLimit = path.blockLimit,
233 div = blockLimit && blockLimit.getAscendant( 'div', true );
234 return div;
235 }
236 /**
237 * Divide a set of nodes to different groups by their path's blocklimit element.
238 * Note: the specified nodes should be in source order naturally, which mean they are supposed to producea by following class:
239 * * CKEDITOR.dom.range.Iterator
240 * * CKEDITOR.dom.domWalker
241 * @return {Array []} the grouped nodes
242 */
243 function groupByDivLimit( nodes )
244 {
245 var groups = [],
246 lastDivLimit = null,
247 path, block;
248 for ( var i = 0 ; i < nodes.length ; i++ )
249 {
250 block = nodes[i];
251 var limit = getDivLimitElement( block );
252 if ( !limit.equals( lastDivLimit ) )
253 {
254 lastDivLimit = limit ;
255 groups.push( [] ) ;
256 }
257 groups[ groups.length - 1 ].push( block ) ;
258 }
259 return groups;
260 }
261
262 // Synchronous field values to other impacted fields is required, e.g. div styles
263 // change should also alter inline-style text.
264 function commitInternally( targetFields )
265 {
266 var dialog = this.getDialog(),
267 element = dialog._element && dialog._element.clone()
268 || new CKEDITOR.dom.element( 'div', editor.document );
269
270 // Commit this field and broadcast to target fields.
271 this.commit( element, true );
272
273 targetFields = [].concat( targetFields );
274 var length = targetFields.length, field;
275 for ( var i = 0; i < length; i++ )
276 {
277 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
278 field && field.setup && field.setup( element, true );
279 }
280 }
281
282
283 // Registered 'CKEDITOR.style' instances.
284 var styles = {} ;
285 /**
286 * Hold a collection of created block container elements.
287 */
288 var containers = [];
289 /**
290 * @type divDialog
291 */
292 return {
293 title : editor.lang.div.title,
294 minWidth : 400,
295 minHeight : 165,
296 contents :
297 [
298 {
299 id :'info',
300 label :editor.lang.common.generalTab,
301 title :editor.lang.common.generalTab,
302 elements :
303 [
304 {
305 type :'hbox',
306 widths : [ '50%', '50%' ],
307 children :
308 [
309 {
310 id :'elementStyle',
311 type :'select',
312 style :'width: 100%;',
313 label :editor.lang.div.styleSelectLabel,
314 'default' : '',
315 // Options are loaded dynamically.
316 items :
317 [
318 [ editor.lang.common.notSet , '' ]
319 ],
320 onChange : function()
321 {
322 commitInternally.call( this, [ 'info:class', 'advanced:dir', 'advanced:style' ] );
323 },
324 setup : function( element )
325 {
326 for ( var name in styles )
327 styles[ name ].checkElementRemovable( element, true ) && this.setValue( name );
328 },
329 commit: function( element )
330 {
331 var styleName;
332 if ( ( styleName = this.getValue() ) )
333 {
334 var style = styles[ styleName ];
335 var customData = element.getCustomData( 'elementStyle' ) || '';
336
337 style.applyToObject( element );
338 element.setCustomData( 'elementStyle', customData + style._.definition.attributes.style );
339 }
340 }
341 },
342 {
343 id :'class',
344 type :'text',
345 label :editor.lang.common.cssClass,
346 'default' : ''
347 }
348 ]
349 }
350 ]
351 },
352 {
353 id :'advanced',
354 label :editor.lang.common.advancedTab,
355 title :editor.lang.common.advancedTab,
356 elements :
357 [
358 {
359 type :'vbox',
360 padding :1,
361 children :
362 [
363 {
364 type :'hbox',
365 widths : [ '50%', '50%' ],
366 children :
367 [
368 {
369 type :'text',
370 id :'id',
371 label :editor.lang.common.id,
372 'default' : ''
373 },
374 {
375 type :'text',
376 id :'lang',
377 label :editor.lang.link.langCode,
378 'default' : ''
379 }
380 ]
381 },
382 {
383 type :'hbox',
384 children :
385 [
386 {
387 type :'text',
388 id :'style',
389 style :'width: 100%;',
390 label :editor.lang.common.cssStyle,
391 'default' : '',
392 commit : function( element )
393 {
394 // Merge with 'elementStyle', which is of higher priority.
395 var merged = this.getValue() + ( element.getCustomData( 'elementStyle' ) || '' );
396 element.setAttribute( 'style', merged );
397 }
398 }
399 ]
400 },
401 {
402 type :'hbox',
403 children :
404 [
405 {
406 type :'text',
407 id :'title',
408 style :'width: 100%;',
409 label :editor.lang.common.advisoryTitle,
410 'default' : ''
411 }
412 ]
413 },
414 {
415 type :'select',
416 id :'dir',
417 style :'width: 100%;',
418 label :editor.lang.common.langDir,
419 'default' : '',
420 items :
421 [
422 [ editor.lang.common.notSet , '' ],
423 [
424 editor.lang.common.langDirLtr,
425 'ltr'
426 ],
427 [
428 editor.lang.common.langDirRtl,
429 'rtl'
430 ]
431 ]
432 }
433 ]
434 }
435 ]
436 }
437 ],
438 onLoad : function()
439 {
440 setupFields.call( this );
441
442 // Preparing for the 'elementStyle' field.
443 var dialog = this,
444 stylesField = this.getContentElement( 'info', 'elementStyle' );
445
446 // Reuse the 'stylescombo' plugin's styles definition.
447 editor.getStylesSet( function( stylesDefinitions )
448 {
449 var styleName;
450
451 if ( stylesDefinitions )
452 {
453 // Digg only those styles that apply to 'div'.
454 for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
455 {
456 var styleDefinition = stylesDefinitions[ i ];
457 if ( styleDefinition.element && styleDefinition.element == 'div' )
458 {
459 styleName = styleDefinition.name;
460 styles[ styleName ] = new CKEDITOR.style( styleDefinition );
461
462 // Populate the styles field options with style name.
463 stylesField.items.push( [ styleName, styleName ] );
464 stylesField.add( styleName, styleName );
465 }
466 }
467 }
468
469 // We should disable the content element
470 // it if no options are available at all.
471 stylesField[ stylesField.items.length > 1 ? 'enable' : 'disable' ]();
472
473 // Now setup the field value manually.
474 setTimeout( function() { stylesField.setup( dialog._element ); }, 0 );
475 } );
476 },
477 onShow : function()
478 {
479 // Whether always create new container regardless of existed
480 // ones.
481 if ( command == 'editdiv' )
482 {
483 // Try to discover the containers that already existed in
484 // ranges
485 var div = getDiv( editor );
486 // update dialog field values
487 div && this.setupContent( this._element = div );
488 }
489 },
490 onOk : function()
491 {
492 if ( command == 'editdiv' )
493 containers = [ this._element ];
494 else
495 containers = createDiv( editor, true );
496
497 // Update elements attributes
498 var size = containers.length;
499 for ( var i = 0; i < size; i++ )
500 {
501 this.commitContent( containers[ i ] );
502
503 // Remove empty 'style' attribute.
504 !containers[ i ].getAttribute( 'style' ) && containers[ i ].removeAttribute( 'style' );
505 }
506
507 this.hide();
508 },
509 onHide : function()
510 {
511 // Remove style only when editing existing DIV. (#6315)
512 if ( command == 'editdiv' )
513 this._element.removeCustomData( 'elementStyle' );
514 delete this._element;
515 }
516 };
517 }
518
519 CKEDITOR.dialog.add( 'creatediv', function( editor )
520 {
521 return divDialog( editor, 'creatediv' );
522 } );
523 CKEDITOR.dialog.add( 'editdiv', function( editor )
524 {
525 return divDialog( editor, 'editdiv' );
526 } );
527 } )();
528
529 /*
530 * @name CKEDITOR.config.div_wrapTable
531 * Whether to wrap the whole table instead of indivisual cells when created 'div' in table cell.
532 * @type Boolean
533 * @default false
534 * @example config.div_wrapTable = true;
535 */