library/custom_template/ckeditor/_source/plugins/toolbar/plugin.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 /**
   7  * @fileOverview The "toolbar" plugin. Renders the default toolbar interface in
   8  * the editor.
   9  */
  10
  11 (function()
  12 {
  13         var toolbox = function()
  14         {
  15                 this.toolbars = [];
  16                 this.focusCommandExecuted = false;
  17         };
  18
  19         toolbox.prototype.focus = function()
  20         {
  21                 for ( var t = 0, toolbar ; toolbar = this.toolbars[ t++ ] ; )
  22                 {
  23                         for ( var i = 0, item ; item = toolbar.items[ i++ ] ; )
  24                         {
  25                                 if ( item.focus )
  26                                 {
  27                                         item.focus();
  28                                         return;
  29                                 }
  30                         }
  31                 }
  32         };
  33
  34         var commands =
  35         {
  36                 toolbarFocus :
  37                 {
  38                         modes : { wysiwyg : 1, source : 1 },
  39
  40                         exec : function( editor )
  41                         {
  42                                 if ( editor.toolbox )
  43                                 {
  44                                         editor.toolbox.focusCommandExecuted = true;
  45
  46                                         // Make the first button focus accessible for IE. (#3417)
  47                                         // Adobe AIR instead need while of delay.
  48                                         if ( CKEDITOR.env.ie || CKEDITOR.env.air )
  49                                                 setTimeout( function(){ editor.toolbox.focus(); }, 100 );
  50                                         else
  51                                                 editor.toolbox.focus();
  52                                 }
  53                         }
  54                 }
  55         };
  56
  57         CKEDITOR.plugins.add( 'toolbar',
  58         {
  59                 init : function( editor )
  60                 {
  61                         var itemKeystroke = function( item, keystroke )
  62                         {
  63                                 var next, nextToolGroup, groupItemsCount;
  64                                 var rtl = editor.lang.dir == 'rtl';
  65
  66                                 switch ( keystroke )
  67                                 {
  68                                         case rtl ? 37 : 39 :                                    // RIGHT-ARROW
  69                                         case 9 :                                        // TAB
  70                                                 do
  71                                                 {
  72                                                         // Look for the next item in the toolbar.
  73                                                         next = item.next;
  74
  75                                                         if ( !next )
  76                                                         {
  77                                                                 nextToolGroup = item.toolbar.next;
  78                                                                 groupItemsCount = nextToolGroup && nextToolGroup.items.length;
  79
  80                                                                 // Bypass the empty toolgroups.
  81                                                                 while ( groupItemsCount === 0 )
  82                                                                 {
  83                                                                         nextToolGroup = nextToolGroup.next;
  84                                                                         groupItemsCount = nextToolGroup && nextToolGroup.items.length;
  85                                                                 }
  86
  87                                                                 if ( nextToolGroup )
  88                                                                         next = nextToolGroup.items[ 0 ];
  89                                                         }
  90
  91                                                         item = next;
  92                                                 }
  93                                                 while ( item && !item.focus )
  94
  95                                                 // If available, just focus it, otherwise focus the
  96                                                 // first one.
  97                                                 if ( item )
  98                                                         item.focus();
  99                                                 else
 100                                                         editor.toolbox.focus();
 101
 102                                                 return false;
 103
 104                                         case rtl ? 39 : 37 :                                    // LEFT-ARROW
 105                                         case CKEDITOR.SHIFT + 9 :       // SHIFT + TAB
 106                                                 do
 107                                                 {
 108                                                         // Look for the previous item in the toolbar.
 109                                                         next = item.previous;
 110
 111                                                         if ( !next )
 112                                                         {
 113                                                                 nextToolGroup = item.toolbar.previous;
 114                                                                 groupItemsCount = nextToolGroup && nextToolGroup.items.length;
 115
 116                                                                 // Bypass the empty toolgroups.
 117                                                                 while ( groupItemsCount === 0 )
 118                                                                 {
 119                                                                         nextToolGroup = nextToolGroup.previous;
 120                                                                         groupItemsCount = nextToolGroup && nextToolGroup.items.length;
 121                                                                 }
 122
 123                                                                 if ( nextToolGroup )
 124                                                                         next = nextToolGroup.items[ groupItemsCount - 1 ];
 125                                                         }
 126
 127                                                         item = next;
 128                                                 }
 129                                                 while ( item && !item.focus )
 130
 131                                                 // If available, just focus it, otherwise focus the
 132                                                 // last one.
 133                                                 if ( item )
 134                                                         item.focus();
 135                                                 else
 136                                                 {
 137                                                         var lastToolbarItems = editor.toolbox.toolbars[ editor.toolbox.toolbars.length - 1 ].items;
 138                                                         lastToolbarItems[ lastToolbarItems.length - 1 ].focus();
 139                                                 }
 140
 141                                                 return false;
 142
 143                                         case 27 :                                       // ESC
 144                                                 editor.focus();
 145                                                 return false;
 146
 147                                         case 13 :                                       // ENTER
 148                                         case 32 :                                       // SPACE
 149                                                 item.execute();
 150                                                 return false;
 151                                 }
 152                                 return true;
 153                         };
 154
 155                         editor.on( 'themeSpace', function( event )
 156                                 {
 157                                         if ( event.data.space == editor.config.toolbarLocation )
 158                                         {
 159                                                 editor.toolbox = new toolbox();
 160
 161                                                 var labelId = CKEDITOR.tools.getNextId();
 162
 163                                                 var output = [ '<div class="cke_toolbox" role="toolbar" aria-labelledby="', labelId, '" onmousedown="return false;"' ],
 164                                                         expanded =  editor.config.toolbarStartupExpanded !== false,
 165                                                         groupStarted;
 166
 167                                                 output.push( expanded ? '>' : ' style="display:none">' );
 168
 169                                                 // Sends the ARIA label.
 170                                                 output.push( '<span id="', labelId, '" class="cke_voice_label">', editor.lang.toolbar, '</span>' );
 171
 172                                                 var toolbars = editor.toolbox.toolbars,
 173                                                         toolbar =
 174                                                                         ( editor.config.toolbar instanceof Array ) ?
 175                                                                                 editor.config.toolbar
 176                                                                         :
 177                                                                                 editor.config[ 'toolbar_' + editor.config.toolbar ];
 178
 179                                                 for ( var r = 0 ; r < toolbar.length ; r++ )
 180                                                 {
 181                                                         var row = toolbar[ r ];
 182
 183                                                         // It's better to check if the row object is really
 184                                                         // available because it's a common mistake to leave
 185                                                         // an extra comma in the toolbar definition
 186                                                         // settings, which leads on the editor not loading
 187                                                         // at all in IE. (#3983)
 188                                                         if ( !row )
 189                                                                 continue;
 190
 191                                                         var toolbarId = CKEDITOR.tools.getNextId(),
 192                                                                 toolbarObj = { id : toolbarId, items : [] };
 193
 194                                                         if ( groupStarted )
 195                                                         {
 196                                                                 output.push( '</div>' );
 197                                                                 groupStarted = 0;
 198                                                         }
 199
 200                                                         if ( row === '/' )
 201                                                         {
 202                                                                 output.push( '<div class="cke_break"></div>' );
 203                                                                 continue;
 204                                                         }
 205
 206                                                         output.push( '<span id="', toolbarId, '" class="cke_toolbar" role="presentation"><span class="cke_toolbar_start"></span>' );
 207
 208                                                         // Add the toolbar to the "editor.toolbox.toolbars"
 209                                                         // array.
 210                                                         var index = toolbars.push( toolbarObj ) - 1;
 211
 212                                                         // Create the next/previous reference.
 213                                                         if ( index > 0 )
 214                                                         {
 215                                                                 toolbarObj.previous = toolbars[ index - 1 ];
 216                                                                 toolbarObj.previous.next = toolbarObj;
 217                                                         }
 218
 219                                                         // Create all items defined for this toolbar.
 220                                                         for ( var i = 0 ; i < row.length ; i++ )
 221                                                         {
 222                                                                 var item,
 223                                                                         itemName = row[ i ];
 224
 225                                                                 if ( itemName == '-' )
 226                                                                         item = CKEDITOR.ui.separator;
 227                                                                 else
 228                                                                         item = editor.ui.create( itemName );
 229
 230                                                                 if ( item )
 231                                                                 {
 232                                                                         if ( item.canGroup )
 233                                                                         {
 234                                                                                 if ( !groupStarted )
 235                                                                                 {
 236                                                                                         output.push( '<span class="cke_toolgroup" role="presentation">' );
 237                                                                                         groupStarted = 1;
 238                                                                                 }
 239                                                                         }
 240                                                                         else if ( groupStarted )
 241                                                                         {
 242                                                                                 output.push( '</span>' );
 243                                                                                 groupStarted = 0;
 244                                                                         }
 245
 246                                                                         var itemObj = item.render( editor, output );
 247                                                                         index = toolbarObj.items.push( itemObj ) - 1;
 248
 249                                                                         if ( index > 0 )
 250                                                                         {
 251                                                                                 itemObj.previous = toolbarObj.items[ index - 1 ];
 252                                                                                 itemObj.previous.next = itemObj;
 253                                                                         }
 254
 255                                                                         itemObj.toolbar = toolbarObj;
 256                                                                         itemObj.onkey = itemKeystroke;
 257
 258                                                                         /*
 259                                                                          * Fix for #3052:
 260                                                                          * Prevent JAWS from focusing the toolbar after document load.
 261                                                                          */
 262                                                                         itemObj.onfocus = function()
 263                                                                         {
 264                                                                                 if ( !editor.toolbox.focusCommandExecuted )
 265                                                                                         editor.focus();
 266                                                                         };
 267                                                                 }
 268                                                         }
 269
 270                                                         if ( groupStarted )
 271                                                         {
 272                                                                 output.push( '</span>' );
 273                                                                 groupStarted = 0;
 274                                                         }
 275
 276                                                         output.push( '<span class="cke_toolbar_end"></span></span>' );
 277                                                 }
 278
 279                                                 output.push( '</div>' );
 280
 281                                                 if ( editor.config.toolbarCanCollapse )
 282                                                 {
 283                                                         var collapserFn = CKEDITOR.tools.addFunction(
 284                                                                 function()
 285                                                                 {
 286                                                                         editor.execCommand( 'toolbarCollapse' );
 287                                                                 });
 288
 289                                                         editor.on( 'destroy', function () {
 290                                                                         CKEDITOR.tools.removeFunction( collapserFn );
 291                                                                 });
 292
 293                                                         var collapserId = CKEDITOR.tools.getNextId();
 294
 295                                                         editor.addCommand( 'toolbarCollapse',
 296                                                                 {
 297                                                                         exec : function( editor )
 298                                                                         {
 299                                                                                 var collapser = CKEDITOR.document.getById( collapserId ),
 300                                                                                         toolbox = collapser.getPrevious(),
 301                                                                                         contents = editor.getThemeSpace( 'contents' ),
 302                                                                                         toolboxContainer = toolbox.getParent(),
 303                                                                                         contentHeight = parseInt( contents.$.style.height, 10 ),
 304                                                                                         previousHeight = toolboxContainer.$.offsetHeight,
 305                                                                                         collapsed = !toolbox.isVisible();
 306
 307                                                                                 if ( !collapsed )
 308                                                                                 {
 309                                                                                         toolbox.hide();
 310                                                                                         collapser.addClass( 'cke_toolbox_collapser_min' );
 311                                                                                         collapser.setAttribute( 'title', editor.lang.toolbarExpand );
 312                                                                                 }
 313                                                                                 else
 314                                                                                 {
 315                                                                                         toolbox.show();
 316                                                                                         collapser.removeClass( 'cke_toolbox_collapser_min' );
 317                                                                                         collapser.setAttribute( 'title', editor.lang.toolbarCollapse );
 318                                                                                 }
 319
 320                                                                                 // Update collapser symbol.
 321                                                                                 collapser.getFirst().setText( collapsed ?
 322                                                                                         '\u25B2' :              // BLACK UP-POINTING TRIANGLE
 323                                                                                         '\u25C0' );             // BLACK LEFT-POINTING TRIANGLE
 324
 325                                                                                 var dy = toolboxContainer.$.offsetHeight - previousHeight;
 326                                                                                 contents.setStyle( 'height', ( contentHeight - dy ) + 'px' );
 327
 328                                                                                 editor.fire( 'resize' );
 329                                                                         },
 330
 331                                                                         modes : { wysiwyg : 1, source : 1 }
 332                                                                 } );
 333
 334                                                         output.push( '<a title="' + ( expanded ? editor.lang.toolbarCollapse : editor.lang.toolbarExpand )
 335                                                                                                           + '" id="' + collapserId + '" tabIndex="-1" class="cke_toolbox_collapser' );
 336
 337                                                         if ( !expanded )
 338                                                                 output.push( ' cke_toolbox_collapser_min' );
 339
 340                                                         output.push( '" onclick="CKEDITOR.tools.callFunction(' + collapserFn + ')">',
 341                                                                                 '<span>&#9650;</span>',         // BLACK UP-POINTING TRIANGLE
 342                                                                                 '</a>' );
 343                                                 }
 344
 345                                                 event.data.html += output.join( '' );
 346                                         }
 347                                 });
 348
 349                         editor.on( 'destroy', function()
 350                         {
 351                                 var toolbars, index = 0, i,
 352                                                 items, instance;
 353                                 toolbars = this.toolbox.toolbars;
 354                                 for ( ; index < toolbars.length; index++ )
 355                                 {
 356                                         items = toolbars[ index ].items;
 357                                         for ( i = 0; i < items.length; i++ )
 358                                         {
 359                                                 instance = items[ i ];
 360                                                 if ( instance.clickFn ) CKEDITOR.tools.removeFunction( instance.clickFn );
 361                                                 if ( instance.keyDownFn ) CKEDITOR.tools.removeFunction( instance.keyDownFn );
 362
 363                                                 if ( instance.index ) CKEDITOR.ui.button._.instances[ instance.index ] = null;
 364                                         }
 365                                 }
 366                         });
 367
 368                         editor.addCommand( 'toolbarFocus', commands.toolbarFocus );
 369                 }
 370         });
 371 })();
 372
 373 /**
 374  * The UI element that renders a toolbar separator.
 375  * @type Object
 376  * @example
 377  */
 378 CKEDITOR.ui.separator =
 379 {
 380         render : function( editor, output )
 381         {
 382                 output.push( '<span class="cke_separator" role="separator"></span>' );
 383                 return {};
 384         }
 385 };
 386
 387 /**
 388  * The "theme space" to which rendering the toolbar. For the default theme,
 389  * the recommended options are "top" and "bottom".
 390  * @type String
 391  * @default 'top'
 392  * @see CKEDITOR.config.theme
 393  * @example
 394  * config.toolbarLocation = 'bottom';
 395  */
 396 CKEDITOR.config.toolbarLocation = 'top';
 397
 398 /**
 399  * The toolbar definition. It is an array of toolbars (strips),
 400  * each one being also an array, containing a list of UI items.
 401  * Note that this setting is composed by "toolbar_" added by the toolbar name,
 402  * which in this case is called "Basic". This second part of the setting name
 403  * can be anything. You must use this name in the
 404  * {@link CKEDITOR.config.toolbar} setting, so you instruct the editor which
 405  * toolbar_(name) setting to you.
 406  * @type Array
 407  * @example
 408  * // Defines a toolbar with only one strip containing the "Source" button, a
 409  * // separator and the "Bold" and "Italic" buttons.
 410  * <b>config.toolbar_Basic =
 411  * [
 412  *     [ 'Source', '-', 'Bold', 'Italic' ]
 413  * ]</b>;
 414  * config.toolbar = 'Basic';
 415  */
 416 CKEDITOR.config.toolbar_Basic =
 417 [
 418         ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
 419 ];
 420
 421 /**
 422  * This is the default toolbar definition used by the editor. It contains all
 423  * editor features.
 424  * @type Array
 425  * @default (see example)
 426  * @example
 427  * // This is actually the default value.
 428  * config.toolbar_Full =
 429  * [
 430  *     ['Source','-','Save','NewPage','Preview','-','Templates'],
 431  *     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
 432  *     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 433  *     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
 434  *     '/',
 435  *     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
 436  *     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
 437  *     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 438  *     ['BidiLtr', 'BidiRtl' ],
 439  *     ['Link','Unlink','Anchor'],
 440  *     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
 441  *     '/',
 442  *     ['Styles','Format','Font','FontSize'],
 443  *     ['TextColor','BGColor'],
 444  *     ['Maximize', 'ShowBlocks','-','About']
 445  * ];
 446  */
 447 CKEDITOR.config.toolbar_Full =
 448 [
 449         ['Source','-','Save','NewPage','Preview','-','Templates'],
 450         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
 451         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 452         ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
 453         '/',
 454         ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
 455         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
 456         ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 457         ['BidiLtr', 'BidiRtl' ],
 458         ['Link','Unlink','Anchor'],
 459         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
 460         '/',
 461         ['Styles','Format','Font','FontSize'],
 462         ['TextColor','BGColor'],
 463         ['Maximize', 'ShowBlocks','-','About']
 464 ];
 465
 466 /**
 467  * The toolbox (alias toolbar) definition. It is a toolbar name or an array of
 468  * toolbars (strips), each one being also an array, containing a list of UI items.
 469  * @type Array|String
 470  * @default 'Full'
 471  * @example
 472  * // Defines a toolbar with only one strip containing the "Source" button, a
 473  * // separator and the "Bold" and "Italic" buttons.
 474  * config.toolbar =
 475  * [
 476  *     [ 'Source', '-', 'Bold', 'Italic' ]
 477  * ];
 478  * @example
 479  * // Load toolbar_Name where Name = Basic.
 480  * config.toolbar = 'Basic';
 481  */
 482 CKEDITOR.config.toolbar = 'Full';
 483
 484 /**
 485  * Whether the toolbar can be collapsed by the user. If disabled, the collapser
 486  * button will not be displayed.
 487  * @type Boolean
 488  * @default true
 489  * @example
 490  * config.toolbarCanCollapse = false;
 491  */
 492 CKEDITOR.config.toolbarCanCollapse = true;
 493
 494 /**
 495  * Whether the toolbar must start expanded when the editor is loaded.
 496  * @name CKEDITOR.config.toolbarStartupExpanded
 497  * @type Boolean
 498  * @default true
 499  * @example
 500  * config.toolbarStartupExpanded = false;
 501  */