[Summary view] [Print] [Text view]

   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  CKEDITOR.plugins.add( 'menu',
   7  {
   8      beforeInit : function( editor )
   9      {
  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          editor.addMenuGroup = function( name, order )
  18              {
  19                  groupsOrder[ name ] = order || 100;
  20              };
  21  
  22          editor.addMenuItem = function( name, definition )
  23              {
  24                  if ( groupsOrder[ definition.group ] )
  25                      menuItems[ name ] = new CKEDITOR.menuItem( this, name, definition );
  26              };
  27  
  28          editor.addMenuItems = function( definitions )
  29              {
  30                  for ( var itemName in definitions )
  31                  {
  32                      this.addMenuItem( itemName, definitions[ itemName ] );
  33                  }
  34              };
  35  
  36          editor.getMenuItem = function( name )
  37              {
  38                  return menuItems[ name ];
  39              };
  40      },
  41  
  42      requires : [ 'floatpanel' ]
  43  });
  44  
  45  (function()
  46  {
  47      CKEDITOR.menu = CKEDITOR.tools.createClass(
  48      {
  49          $ : function( editor, definition )
  50          {
  51              definition = this._.definition = definition || {};
  52              this.id = 'cke_' + CKEDITOR.tools.getNextNumber();
  53  
  54              this.editor = editor;
  55              this.items = [];
  56  
  57              this._.level = definition.level || 1;
  58  
  59              var panelDefinition = CKEDITOR.tools.extend( {}, definition.panel,
  60              {
  61                  css : editor.skin.editor.css,
  62                  level : this._.level - 1,
  63                  block : {}
  64              } );
  65  
  66              var attrs = panelDefinition.block.attributes = ( panelDefinition.attributes || {} );
  67              // Provide default role of 'menu'.

  68              !attrs.role && ( attrs.role = 'menu' );
  69              this._.panelDefinition = panelDefinition;
  70          },
  71  
  72          _ :
  73          {
  74              showSubMenu : function( index )
  75              {
  76                  var menu = this._.subMenu,
  77                      item = this.items[ index ],
  78                      subItemDefs = item.getItems && item.getItems();
  79  
  80                  // If this item has no subitems, we just hide the submenu, if

  81                  // available, and return back.

  82                  if ( !subItemDefs )
  83                  {
  84                      this._.panel.hideChild();
  85                      return;
  86                  }
  87  
  88                  // Record parent menu focused item first (#3389).

  89                  var block = this._.panel.getBlock( this.id );
  90                  block._.focusIndex = index;
  91  
  92                  // Create the submenu, if not available, or clean the existing

  93                  // one.

  94                  if ( menu )
  95                      menu.removeAll();
  96                  else
  97                  {
  98                      menu = this._.subMenu = new CKEDITOR.menu( this.editor,
  99                                     CKEDITOR.tools.extend( {}, this._.definition, { level : this._.level + 1 }, true ) );
 100                      menu.parent = this;
 101                      menu.onClick = CKEDITOR.tools.bind( this.onClick, this );
 102                      // Sub menu use their own scope for binding onEscape.

 103                      menu.onEscape = this.onEscape;
 104                  }
 105  
 106                  // Add all submenu items to the menu.

 107                  for ( var subItemName in subItemDefs )
 108                  {
 109                      var subItem = this.editor.getMenuItem( subItemName );
 110                      if ( subItem )
 111                      {
 112                          subItem.state = subItemDefs[ subItemName ];
 113                          menu.add( subItem );
 114                      }
 115                  }
 116  
 117                  // Get the element representing the current item.

 118                  var element = this._.panel.getBlock( this.id ).element.getDocument().getById( this.id + String( index ) );
 119  
 120                  // Show the submenu.

 121                  menu.show( element, 2 );
 122              }
 123          },
 124  
 125          proto :
 126          {
 127              add : function( item )
 128              {
 129                  // Later we may sort the items, but Array#sort is not stable in

 130                  // some browsers, here we're forcing the original sequence with

 131                  // 'order' attribute if it hasn't been assigned. (#3868)

 132                  if ( !item.order )
 133                      item.order = this.items.length;
 134  
 135                  this.items.push( item );
 136              },
 137  
 138              removeAll : function()
 139              {
 140                  this.items = [];
 141              },
 142  
 143              show : function( offsetParent, corner, offsetX, offsetY )
 144              {
 145                  var items = this.items,
 146                      editor = this.editor,
 147                      panel = this._.panel,
 148                      element = this._.element;
 149  
 150                  // Create the floating panel for this menu.

 151                  if ( !panel )
 152                  {
 153                      panel = this._.panel = new CKEDITOR.ui.floatPanel( this.editor,
 154                          CKEDITOR.document.getBody(),
 155                          this._.panelDefinition,
 156                          this._.level );
 157  
 158                      panel.onEscape = CKEDITOR.tools.bind( function( keystroke )
 159                      {
 160                          if ( this.onEscape && this.onEscape( keystroke ) === false )
 161                              return false;
 162                      },
 163                      this );
 164  
 165                      panel.onHide = CKEDITOR.tools.bind( function()
 166                      {
 167                          this.onHide && this.onHide();
 168                      },
 169                      this );
 170  
 171                      // Create an autosize block inside the panel.

 172                      var block = panel.addBlock( this.id, this._.panelDefinition.block );
 173                      block.autoSize = true;
 174  
 175                      var keys = block.keys;
 176                      keys[ 40 ]    = 'next';                    // ARROW-DOWN

 177                      keys[ 9 ]    = 'next';                    // TAB

 178                      keys[ 38 ]    = 'prev';                    // ARROW-UP

 179                      keys[ CKEDITOR.SHIFT + 9 ]    = 'prev';    // SHIFT + TAB

 180                      keys[ 32 ]    = 'click';                    // SPACE

 181                      keys[ ( editor.lang.dir == 'rtl' ? 37 : 39 ) ]    = 'click';  // ARROW-RIGHT/ARROW-LEFT(rtl)

 182  
 183                      element = this._.element = block.element;
 184                      element.addClass( editor.skinClass );
 185  
 186                      var elementDoc = element.getDocument();
 187                      elementDoc.getBody().setStyle( 'overflow', 'hidden' );
 188                      elementDoc.getElementsByTag( 'html' ).getItem( 0 ).setStyle( 'overflow', 'hidden' );
 189  
 190                      this._.itemOverFn = CKEDITOR.tools.addFunction( function( index )
 191                          {
 192                              clearTimeout( this._.showSubTimeout );
 193                              this._.showSubTimeout = CKEDITOR.tools.setTimeout( this._.showSubMenu, editor.config.menu_subMenuDelay, this, [ index ] );
 194                          },
 195                          this);
 196  
 197                      this._.itemOutFn = CKEDITOR.tools.addFunction( function( index )
 198                          {
 199                              clearTimeout( this._.showSubTimeout );
 200                          },
 201                          this);
 202  
 203                      this._.itemClickFn = CKEDITOR.tools.addFunction( function( index )
 204                          {
 205                              var item = this.items[ index ];
 206  
 207                              if ( item.state == CKEDITOR.TRISTATE_DISABLED )
 208                              {
 209                                  this.hide();
 210                                  return;
 211                              }
 212  
 213                              if ( item.getItems )
 214                                  this._.showSubMenu( index );
 215                              else
 216                                  this.onClick && this.onClick( item );
 217                          },
 218                          this);
 219                  }
 220  
 221                  // Put the items in the right order.

 222                  sortItems( items );
 223  
 224                  // Build the HTML that composes the menu and its items.

 225                  var output = [ '<div class="cke_menu" role="presentation">' ];
 226  
 227                  var length = items.length,
 228                      lastGroup = length && items[ 0 ].group;
 229  
 230                  for ( var i = 0 ; i < length ; i++ )
 231                  {
 232                      var item = items[ i ];
 233                      if ( lastGroup != item.group )
 234                      {
 235                          output.push( '<div class="cke_menuseparator" role="separator"></div>' );
 236                          lastGroup = item.group;
 237                      }
 238  
 239                      item.render( this, i, output );
 240                  }
 241  
 242                  output.push( '</div>' );
 243  
 244                  // Inject the HTML inside the panel.

 245                  element.setHtml( output.join( '' ) );
 246  
 247                  // Show the panel.

 248                  if ( this.parent )
 249                      this.parent._.panel.showAsChild( panel, this.id, offsetParent, corner, offsetX, offsetY );
 250                  else
 251                      panel.showBlock( this.id, offsetParent, corner, offsetX, offsetY );
 252  
 253                  editor.fire( 'menuShow', [ panel ] );
 254              },
 255  
 256              hide : function()
 257              {
 258                  this._.panel && this._.panel.hide();
 259              }
 260          }
 261      });
 262  
 263  	function sortItems( items )
 264      {
 265          items.sort( function( itemA, itemB )
 266              {
 267                  if ( itemA.group < itemB.group )
 268                      return -1;
 269                  else if ( itemA.group > itemB.group )
 270                      return 1;
 271  
 272                  return itemA.order < itemB.order ? -1 :
 273                      itemA.order > itemB.order ? 1 :
 274                      0;
 275              });
 276      }
 277  })();
 278  
 279  CKEDITOR.menuItem = CKEDITOR.tools.createClass(
 280  {
 281      $ : function( editor, name, definition )
 282      {
 283          CKEDITOR.tools.extend( this, definition,
 284              // Defaults

 285              {
 286                  order : 0,
 287                  className : 'cke_button_' + name
 288              });
 289  
 290          // Transform the group name into its order number.

 291          this.group = editor._.menuGroups[ this.group ];
 292  
 293          this.editor = editor;
 294          this.name = name;
 295      },
 296  
 297      proto :
 298      {
 299          render : function( menu, index, output )
 300          {
 301              var id = menu.id + String( index ),
 302                  state = ( typeof this.state == 'undefined' ) ? CKEDITOR.TRISTATE_OFF : this.state;
 303  
 304              var classes = ' cke_' + (
 305                  state == CKEDITOR.TRISTATE_ON ? 'on' :
 306                  state == CKEDITOR.TRISTATE_DISABLED ? 'disabled' :
 307                  'off' );
 308  
 309              var htmlLabel = this.label;
 310  
 311              if ( this.className )
 312                  classes += ' ' + this.className;
 313  
 314              var hasSubMenu = this.getItems;
 315  
 316              output.push(
 317                  '<span class="cke_menuitem">' +
 318                  '<a id="', id, '"' +
 319                      ' class="', classes, '" href="javascript:void(\'', ( this.label || '' ).replace( "'", '' ), '\')"' +
 320                      ' title="', this.label, '"' +
 321                      ' tabindex="-1"' +
 322                      '_cke_focus=1' +
 323                      ' hidefocus="true"' +
 324                      ' role="menuitem"' +
 325                      ( hasSubMenu ? 'aria-haspopup="true"' : '' ) +
 326                      ( state == CKEDITOR.TRISTATE_DISABLED ? 'aria-disabled="true"' : '' ) +
 327                      ( state == CKEDITOR.TRISTATE_ON ? 'aria-pressed="true"' : '' ) );
 328  
 329              // Some browsers don't cancel key events in the keydown but in the

 330              // keypress.

 331              // TODO: Check if really needed for Gecko+Mac.

 332              if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )
 333              {
 334                  output.push(
 335                      ' onkeypress="return false;"' );
 336              }
 337  
 338              // With Firefox, we need to force the button to redraw, otherwise it

 339              // will remain in the focus state.

 340              if ( CKEDITOR.env.gecko )
 341              {
 342                  output.push(
 343                      ' onblur="this.style.cssText = this.style.cssText;"' );
 344              }
 345  
 346              var offset = ( this.iconOffset || 0 ) * -16;
 347              output.push(
 348  //                    ' onkeydown="return CKEDITOR.ui.button._.keydown(', index, ', event);"' +

 349                      ' onmouseover="CKEDITOR.tools.callFunction(', menu._.itemOverFn, ',', index, ');"' +
 350                      ' onmouseout="CKEDITOR.tools.callFunction(', menu._.itemOutFn, ',', index, ');"' +
 351                      ' onclick="CKEDITOR.tools.callFunction(', menu._.itemClickFn, ',', index, '); return false;"' +
 352                      '>' +
 353                          '<span class="cke_icon_wrapper"><span class="cke_icon"' +
 354                              ( this.icon ? ' style="background-image:url(' + CKEDITOR.getUrl( this.icon ) + ');background-position:0 ' + offset + 'px;"'
 355                              : '' ) +
 356                              '></span></span>' +
 357                          '<span class="cke_label">' );
 358  
 359              if ( hasSubMenu )
 360              {
 361                  output.push(
 362                              '<span class="cke_menuarrow">',
 363                                  '<span>&#',
 364                                      ( this.editor.lang.dir == 'rtl' ?
 365                                          '9668' :    // BLACK LEFT-POINTING POINTER
 366                                          '9658' ),    // BLACK RIGHT-POINTING POINTER
 367                                  ';</span>',
 368                              '</span>' );
 369              }
 370  
 371              output.push(
 372                              htmlLabel,
 373                          '</span>' +
 374                  '</a>' +
 375                  '</span>' );
 376          }
 377      }
 378  });
 379  
 380  /**

 381   * The amount of time, in milliseconds, the editor waits before showing submenu

 382   * options when moving the mouse over options that contains submenus, like the

 383   * "Cell Properties" entry for tables.

 384   * @type Number

 385   * @default 400

 386   * @example

 387   * // Remove the submenu delay.

 388   * config.menu_subMenuDelay = 0;

 389   */
 390  CKEDITOR.config.menu_subMenuDelay = 400;
 391  
 392  /**

 393   * A comma separated list of items group names to be displayed in the context

 394   * menu. The items order will reflect the order in this list if no priority

 395   * has been definted in the groups.

 396   * @type String

 397   * @default 'clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'

 398   * @example

 399   * config.menu_groups = 'clipboard,table,anchor,link,image';

 400   */
 401  CKEDITOR.config.menu_groups =
 402      'clipboard,' +
 403      'form,' +
 404      'tablecell,tablecellproperties,tablerow,tablecolumn,table,'+
 405      'anchor,link,image,flash,' +
 406      'checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea,div';