sources/plugins/menu/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 CKEDITOR.plugins.add( 'menu', {
   7         requires: 'floatpanel',
   8
   9         beforeInit: function( editor ) {
  10                 var groups = editor.config.menu_groups.split( ',' ),
  11                         groupsOrder = editor._.menuGroups = {},
  12                         menuItems = editor._.menuItems = {};
  13
  14                 for ( var i = 0; i < groups.length; i++ )
  15                         groupsOrder[ groups[ i ] ] = i + 1;
  16
  17                 /**
  18                  * Registers an item group to the editor context menu in order to make it
  19                  * possible to associate it with menu items later.
  20                  *
  21                  * @param {String} name Specify a group name.
  22                  * @param {Number} [order=100] Define the display sequence of this group
  23                  * inside the menu. A smaller value gets displayed first.
  24                  * @member CKEDITOR.editor
  25                  */
  26                 editor.addMenuGroup = function( name, order ) {
  27                         groupsOrder[ name ] = order || 100;
  28                 };
  29
  30                 /**
  31                  * Adds an item from the specified definition to the editor context menu.
  32                  *
  33                  * @method
  34                  * @param {String} name The menu item name.
  35                  * @param {Object} definition The menu item definition.
  36                  * @member CKEDITOR.editor
  37                  */
  38                 editor.addMenuItem = function( name, definition ) {
  39                         if ( groupsOrder[ definition.group ] )
  40                                 menuItems[ name ] = new CKEDITOR.menuItem( this, name, definition );
  41                 };
  42
  43                 /**
  44                  * Adds one or more items from the specified definition array to the editor context menu.
  45                  *
  46                  * @method
  47                  * @param {Array} definitions List of definitions for each menu item as if {@link #addMenuItem} is called.
  48                  * @member CKEDITOR.editor
  49                  */
  50                 editor.addMenuItems = function( definitions ) {
  51                         for ( var itemName in definitions ) {
  52                                 this.addMenuItem( itemName, definitions[ itemName ] );
  53                         }
  54                 };
  55
  56                 /**
  57                  * Retrieves a particular menu item definition from the editor context menu.
  58                  *
  59                  * @method
  60                  * @param {String} name The name of the desired menu item.
  61                  * @returns {Object}
  62                  * @member CKEDITOR.editor
  63                  */
  64                 editor.getMenuItem = function( name ) {
  65                         return menuItems[ name ];
  66                 };
  67
  68                 /**
  69                  * Removes a particular menu item added before from the editor context menu.
  70                  *
  71                  * @since 3.6.1
  72                  * @method
  73                  * @param {String} name The name of the desired menu item.
  74                  * @member CKEDITOR.editor
  75                  */
  76                 editor.removeMenuItem = function( name ) {
  77                         delete menuItems[ name ];
  78                 };
  79         }
  80 } );
  81
  82 ( function() {
  83         var menuItemSource = '<span class="cke_menuitem">' +
  84                 '<a id="{id}"' +
  85                 ' class="cke_menubutton cke_menubutton__{name} cke_menubutton_{state} {cls}" href="{href}"' +
  86                 ' title="{title}"' +
  87                 ' tabindex="-1"' +
  88                 '_cke_focus=1' +
  89                 ' hidefocus="true"' +
  90                 ' role="{role}"' +
  91                 ' aria-haspopup="{hasPopup}"' +
  92                 ' aria-disabled="{disabled}"' +
  93                 ' {ariaChecked}';
  94
  95         // Some browsers don't cancel key events in the keydown but in the
  96         // keypress.
  97         // TODO: Check if really needed.
  98         if ( CKEDITOR.env.gecko && CKEDITOR.env.mac )
  99                 menuItemSource += ' onkeypress="return false;"';
 100
 101         // With Firefox, we need to force the button to redraw, otherwise it
 102         // will remain in the focus state.
 103         if ( CKEDITOR.env.gecko )
 104                 menuItemSource += ' onblur="this.style.cssText = this.style.cssText;"';
 105
 106         // #188
 107         menuItemSource += ' onmouseover="CKEDITOR.tools.callFunction({hoverFn},{index});"' +
 108                         ' onmouseout="CKEDITOR.tools.callFunction({moveOutFn},{index});" ' +
 109                         ( CKEDITOR.env.ie ? 'onclick="return false;" onmouseup' : 'onclick' ) +
 110                                 '="CKEDITOR.tools.callFunction({clickFn},{index}); return false;"' +
 111                         '>';
 112
 113         menuItemSource +=
 114                                 '<span class="cke_menubutton_inner">' +
 115                                         '<span class="cke_menubutton_icon">' +
 116                                                 '<span class="cke_button_icon cke_button__{iconName}_icon" style="{iconStyle}"></span>' +
 117                                         '</span>' +
 118                                         '<span class="cke_menubutton_label">' +
 119                                                 '{label}' +
 120                                         '</span>' +
 121                                         '{arrowHtml}' +
 122                                 '</span>' +
 123                         '</a></span>';
 124
 125         var menuArrowSource = '<span class="cke_menuarrow">' +
 126                                 '<span>{label}</span>' +
 127                         '</span>';
 128
 129         var menuItemTpl = CKEDITOR.addTemplate( 'menuItem', menuItemSource ),
 130                 menuArrowTpl = CKEDITOR.addTemplate( 'menuArrow', menuArrowSource );
 131
 132         /**
 133          * @class
 134          * @todo
 135          */
 136         CKEDITOR.menu = CKEDITOR.tools.createClass( {
 137                 /**
 138                  * @constructor
 139                  */
 140                 $: function( editor, definition ) {
 141                         definition = this._.definition = definition || {};
 142                         this.id = CKEDITOR.tools.getNextId();
 143
 144                         this.editor = editor;
 145                         this.items = [];
 146                         this._.listeners = [];
 147
 148                         this._.level = definition.level || 1;
 149
 150                         var panelDefinition = CKEDITOR.tools.extend( {}, definition.panel, {
 151                                 css: [ CKEDITOR.skin.getPath( 'editor' ) ],
 152                                 level: this._.level - 1,
 153                                 block: {}
 154                         } );
 155
 156                         var attrs = panelDefinition.block.attributes = ( panelDefinition.attributes || {} );
 157                         // Provide default role of 'menu'.
 158                         !attrs.role && ( attrs.role = 'menu' );
 159                         this._.panelDefinition = panelDefinition;
 160                 },
 161
 162                 _: {
 163                         onShow: function() {
 164                                 var selection = this.editor.getSelection(),
 165                                         start = selection && selection.getStartElement(),
 166                                         path = this.editor.elementPath(),
 167                                         listeners = this._.listeners;
 168
 169                                 this.removeAll();
 170                                 // Call all listeners, filling the list of items to be displayed.
 171                                 for ( var i = 0; i < listeners.length; i++ ) {
 172                                         var listenerItems = listeners[ i ]( start, selection, path );
 173
 174                                         if ( listenerItems ) {
 175                                                 for ( var itemName in listenerItems ) {
 176                                                         var item = this.editor.getMenuItem( itemName );
 177
 178                                                         if ( item && ( !item.command || this.editor.getCommand( item.command ).state ) ) {
 179                                                                 item.state = listenerItems[ itemName ];
 180                                                                 this.add( item );
 181                                                         }
 182                                                 }
 183                                         }
 184                                 }
 185                         },
 186
 187                         onClick: function( item ) {
 188                                 this.hide();
 189
 190                                 if ( item.onClick )
 191                                         item.onClick();
 192                                 else if ( item.command )
 193                                         this.editor.execCommand( item.command );
 194                         },
 195
 196                         onEscape: function( keystroke ) {
 197                                 var parent = this.parent;
 198                                 // 1. If it's sub-menu, close it, with focus restored on this.
 199                                 // 2. In case of a top-menu, close it, with focus returned to page.
 200                                 if ( parent )
 201                                         parent._.panel.hideChild( 1 );
 202                                 else if ( keystroke == 27 )
 203                                         this.hide( 1 );
 204
 205                                 return false;
 206                         },
 207
 208                         onHide: function() {
 209                                 this.onHide && this.onHide();
 210                         },
 211
 212                         showSubMenu: function( index ) {
 213                                 var menu = this._.subMenu,
 214                                         item = this.items[ index ],
 215                                         subItemDefs = item.getItems && item.getItems();
 216
 217                                 // If this item has no subitems, we just hide the submenu, if
 218                                 // available, and return back.
 219                                 if ( !subItemDefs ) {
 220                                         // Hide sub menu with focus returned.
 221                                         this._.panel.hideChild( 1 );
 222                                         return;
 223                                 }
 224
 225                                 // Create the submenu, if not available, or clean the existing
 226                                 // one.
 227                                 if ( menu )
 228                                         menu.removeAll();
 229                                 else {
 230                                         menu = this._.subMenu = new CKEDITOR.menu( this.editor, CKEDITOR.tools.extend( {}, this._.definition, { level: this._.level + 1 }, true ) );
 231                                         menu.parent = this;
 232                                         menu._.onClick = CKEDITOR.tools.bind( this._.onClick, this );
 233                                 }
 234
 235                                 // Add all submenu items to the menu.
 236                                 for ( var subItemName in subItemDefs ) {
 237                                         var subItem = this.editor.getMenuItem( subItemName );
 238                                         if ( subItem ) {
 239                                                 subItem.state = subItemDefs[ subItemName ];
 240                                                 menu.add( subItem );
 241                                         }
 242                                 }
 243
 244                                 // Get the element representing the current item.
 245                                 var element = this._.panel.getBlock( this.id ).element.getDocument().getById( this.id + String( index ) );
 246
 247                                 // Show the submenu.
 248                                 // This timeout is needed to give time for the sub-menu get
 249                                 // focus when JAWS is running. (#9844)
 250                                 setTimeout( function() {
 251                                         menu.show( element, 2 );
 252                                 }, 0 );
 253                         }
 254                 },
 255
 256                 proto: {
 257                         /**
 258                          * Adds an item.
 259                          *
 260                          * @param item
 261                          */
 262                         add: function( item ) {
 263                                 // Later we may sort the items, but Array#sort is not stable in
 264                                 // some browsers, here we're forcing the original sequence with
 265                                 // 'order' attribute if it hasn't been assigned. (#3868)
 266                                 if ( !item.order )
 267                                         item.order = this.items.length;
 268
 269                                 this.items.push( item );
 270                         },
 271
 272                         /**
 273                          * Removes all items.
 274                          */
 275                         removeAll: function() {
 276                                 this.items = [];
 277                         },
 278
 279                         /**
 280                          * Shows the menu in given location.
 281                          *
 282                          * @param {CKEDITOR.dom.element} offsetParent
 283                          * @param {Number} [corner]
 284                          * @param {Number} [offsetX]
 285                          * @param {Number} [offsetY]
 286                          */
 287                         show: function( offsetParent, corner, offsetX, offsetY ) {
 288                                 // Not for sub menu.
 289                                 if ( !this.parent ) {
 290                                         this._.onShow();
 291                                         // Don't menu with zero items.
 292                                         if ( !this.items.length )
 293                                                 return;
 294                                 }
 295
 296                                 corner = corner || ( this.editor.lang.dir == 'rtl' ? 2 : 1 );
 297
 298                                 var items = this.items,
 299                                         editor = this.editor,
 300                                         panel = this._.panel,
 301                                         element = this._.element;
 302
 303                                 // Create the floating panel for this menu.
 304                                 if ( !panel ) {
 305                                         panel = this._.panel = new CKEDITOR.ui.floatPanel( this.editor, CKEDITOR.document.getBody(), this._.panelDefinition, this._.level );
 306
 307                                         panel.onEscape = CKEDITOR.tools.bind( function( keystroke ) {
 308                                                 if ( this._.onEscape( keystroke ) === false )
 309                                                         return false;
 310                                         }, this );
 311
 312                                         panel.onShow = function() {
 313                                                 // Menu need CSS resets, compensate class name.
 314                                                 var holder = panel._.panel.getHolderElement();
 315                                                 holder.getParent().addClass( 'cke' ).addClass( 'cke_reset_all' );
 316                                         };
 317
 318                                         panel.onHide = CKEDITOR.tools.bind( function() {
 319                                                 this._.onHide && this._.onHide();
 320                                         }, this );
 321
 322                                         // Create an autosize block inside the panel.
 323                                         var block = panel.addBlock( this.id, this._.panelDefinition.block );
 324                                         block.autoSize = true;
 325
 326                                         var keys = block.keys;
 327                                         keys[ 40 ] = 'next'; // ARROW-DOWN
 328                                         keys[ 9 ] = 'next'; // TAB
 329                                         keys[ 38 ] = 'prev'; // ARROW-UP
 330                                         keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
 331                                         keys[ ( editor.lang.dir == 'rtl' ? 37 : 39 ) ] = CKEDITOR.env.ie ? 'mouseup' : 'click'; // ARROW-RIGHT/ARROW-LEFT(rtl)
 332                                         keys[ 32 ] = CKEDITOR.env.ie ? 'mouseup' : 'click'; // SPACE
 333                                         CKEDITOR.env.ie && ( keys[ 13 ] = 'mouseup' ); // Manage ENTER, since onclick is blocked in IE (#8041).
 334
 335                                         element = this._.element = block.element;
 336
 337                                         var elementDoc = element.getDocument();
 338                                         elementDoc.getBody().setStyle( 'overflow', 'hidden' );
 339                                         elementDoc.getElementsByTag( 'html' ).getItem( 0 ).setStyle( 'overflow', 'hidden' );
 340
 341                                         this._.itemOverFn = CKEDITOR.tools.addFunction( function( index ) {
 342                                                 clearTimeout( this._.showSubTimeout );
 343                                                 this._.showSubTimeout = CKEDITOR.tools.setTimeout( this._.showSubMenu, editor.config.menu_subMenuDelay || 400, this, [ index ] );
 344                                         }, this );
 345
 346                                         this._.itemOutFn = CKEDITOR.tools.addFunction( function() {
 347                                                 clearTimeout( this._.showSubTimeout );
 348                                         }, this );
 349
 350                                         this._.itemClickFn = CKEDITOR.tools.addFunction( function( index ) {
 351                                                 var item = this.items[ index ];
 352
 353                                                 if ( item.state == CKEDITOR.TRISTATE_DISABLED ) {
 354                                                         this.hide( 1 );
 355                                                         return;
 356                                                 }
 357
 358                                                 if ( item.getItems )
 359                                                         this._.showSubMenu( index );
 360                                                 else
 361                                                         this._.onClick( item );
 362                                         }, this );
 363                                 }
 364
 365                                 // Put the items in the right order.
 366                                 sortItems( items );
 367
 368                                 // Apply the editor mixed direction status to menu.
 369                                 var path = editor.elementPath(),
 370                                         mixedDirCls = ( path && path.direction() != editor.lang.dir ) ? ' cke_mixed_dir_content' : '';
 371
 372                                 // Build the HTML that composes the menu and its items.
 373                                 var output = [ '<div class="cke_menu' + mixedDirCls + '" role="presentation">' ];
 374
 375                                 var length = items.length,
 376                                         lastGroup = length && items[ 0 ].group;
 377
 378                                 for ( var i = 0; i < length; i++ ) {
 379                                         var item = items[ i ];
 380                                         if ( lastGroup != item.group ) {
 381                                                 output.push( '<div class="cke_menuseparator" role="separator"></div>' );
 382                                                 lastGroup = item.group;
 383                                         }
 384
 385                                         item.render( this, i, output );
 386                                 }
 387
 388                                 output.push( '</div>' );
 389
 390                                 // Inject the HTML inside the panel.
 391                                 element.setHtml( output.join( '' ) );
 392
 393                                 CKEDITOR.ui.fire( 'ready', this );
 394
 395                                 // Show the panel.
 396                                 if ( this.parent )
 397                                         this.parent._.panel.showAsChild( panel, this.id, offsetParent, corner, offsetX, offsetY );
 398                                 else
 399                                         panel.showBlock( this.id, offsetParent, corner, offsetX, offsetY );
 400
 401                                 editor.fire( 'menuShow', [ panel ] );
 402                         },
 403
 404                         /**
 405                          * Adds a callback executed on opening the menu. Items
 406                          * returned by that callback are added to the menu.
 407                          *
 408                          * @param {Function} listenerFn
 409                          * @param {CKEDITOR.dom.element} listenerFn.startElement The selection start anchor element.
 410                          * @param {CKEDITOR.dom.selection} listenerFn.selection The current selection.
 411                          * @param {CKEDITOR.dom.elementPath} listenerFn.path The current elements path.
 412                          * @param listenerFn.return Object (`commandName` => `state`) of items that should be added to the menu.
 413                          */
 414                         addListener: function( listenerFn ) {
 415                                 this._.listeners.push( listenerFn );
 416                         },
 417
 418                         /**
 419                          * Hides the menu.
 420                          *
 421                          * @param {Boolean} [returnFocus]
 422                          */
 423                         hide: function( returnFocus ) {
 424                                 this._.onHide && this._.onHide();
 425                                 this._.panel && this._.panel.hide( returnFocus );
 426                         }
 427                 }
 428         } );
 429
 430         function sortItems( items ) {
 431                 items.sort( function( itemA, itemB ) {
 432                         if ( itemA.group < itemB.group )
 433                                 return -1;
 434                         else if ( itemA.group > itemB.group )
 435                                 return 1;
 436
 437                         return itemA.order < itemB.order ? -1 : itemA.order > itemB.order ? 1 : 0;
 438                 } );
 439         }
 440
 441         /**
 442          * @class
 443          * @todo
 444          */
 445         CKEDITOR.menuItem = CKEDITOR.tools.createClass( {
 446                 $: function( editor, name, definition ) {
 447                         CKEDITOR.tools.extend( this, definition,
 448                         // Defaults
 449                         {
 450                                 order: 0,
 451                                 className: 'cke_menubutton__' + name
 452                         } );
 453
 454                         // Transform the group name into its order number.
 455                         this.group = editor._.menuGroups[ this.group ];
 456
 457                         this.editor = editor;
 458                         this.name = name;
 459                 },
 460
 461                 proto: {
 462                         render: function( menu, index, output ) {
 463                                 var id = menu.id + String( index ),
 464                                         state = ( typeof this.state == 'undefined' ) ? CKEDITOR.TRISTATE_OFF : this.state,
 465                                         ariaChecked = '';
 466
 467                                 var stateName = state == CKEDITOR.TRISTATE_ON ? 'on' : state == CKEDITOR.TRISTATE_DISABLED ? 'disabled' : 'off';
 468
 469                                 if ( this.role in { menuitemcheckbox: 1, menuitemradio: 1 } )
 470                                         ariaChecked = ' aria-checked="' + ( state == CKEDITOR.TRISTATE_ON ? 'true' : 'false' ) + '"';
 471
 472                                 var hasSubMenu = this.getItems;
 473                                 // ltr: BLACK LEFT-POINTING POINTER
 474                                 // rtl: BLACK RIGHT-POINTING POINTER
 475                                 var arrowLabel = '&#' + ( this.editor.lang.dir == 'rtl' ? '9668' : '9658' ) + ';';
 476
 477                                 var iconName = this.name;
 478                                 if ( this.icon && !( /\./ ).test( this.icon ) )
 479                                         iconName = this.icon;
 480
 481                                 var params = {
 482                                         id: id,
 483                                         name: this.name,
 484                                         iconName: iconName,
 485                                         label: this.label,
 486                                         cls: this.className || '',
 487                                         state: stateName,
 488                                         hasPopup: hasSubMenu ? 'true' : 'false',
 489                                         disabled: state == CKEDITOR.TRISTATE_DISABLED,
 490                                         title: this.label,
 491                                         href: 'javascript:void(\'' + ( this.label || '' ).replace( "'" + '' ) + '\')', // jshint ignore:line
 492                                         hoverFn: menu._.itemOverFn,
 493                                         moveOutFn: menu._.itemOutFn,
 494                                         clickFn: menu._.itemClickFn,
 495                                         index: index,
 496                                         iconStyle: CKEDITOR.skin.getIconStyle( iconName, ( this.editor.lang.dir == 'rtl' ), iconName == this.icon ? null : this.icon, this.iconOffset ),
 497                                         arrowHtml: hasSubMenu ? menuArrowTpl.output( { label: arrowLabel } ) : '',
 498                                         role: this.role ? this.role : 'menuitem',
 499                                         ariaChecked: ariaChecked
 500                                 };
 501
 502                                 menuItemTpl.output( params, output );
 503                         }
 504                 }
 505         } );
 506
 507 } )();
 508
 509
 510 /**
 511  * The amount of time, in milliseconds, the editor waits before displaying submenu
 512  * options when moving the mouse over options that contain submenus, like the
 513  * "Cell Properties" entry for tables.
 514  *
 515  *              // Remove the submenu delay.
 516  *              config.menu_subMenuDelay = 0;
 517  *
 518  * @cfg {Number} [menu_subMenuDelay=400]
 519  * @member CKEDITOR.config
 520  */
 521
 522 /**
 523  * Fired when a menu is shown.
 524  *
 525  * @event menuShow
 526  * @member CKEDITOR.editor
 527  * @param {CKEDITOR.editor} editor This editor instance.
 528  * @param {CKEDITOR.ui.panel[]} data
 529  */
 530
 531 /**
 532  * A comma separated list of items group names to be displayed in the context
 533  * menu. The order of items will reflect the order specified in this list if
 534  * no priority was defined in the groups.
 535  *
 536  *              config.menu_groups = 'clipboard,table,anchor,link,image';
 537  *
 538  * @cfg {String} [menu_groups=see source]
 539  * @member CKEDITOR.config
 540  */
 541 CKEDITOR.config.menu_groups = 'clipboard,' +
 542         'form,' +
 543         'tablecell,tablecellproperties,tablerow,tablecolumn,table,' +
 544         'anchor,link,image,flash,' +
 545         'checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea,div';