ckeditor/_source/plugins/toolbar/plugin.js

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