_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  */