sources/plugins/menu/plugin.js

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