_source/plugins/menu/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.plugins.add( 'menu',\r
   7 {\r
   8         beforeInit : function( editor )\r
   9         {\r
  10                 var groups = editor.config.menu_groups.split( ',' ),\r
  11                         groupsOrder = editor._.menuGroups = {},\r
  12                         menuItems = editor._.menuItems = {};\r
  13 \r
  14                 for ( var i = 0 ; i < groups.length ; i++ )\r
  15                         groupsOrder[ groups[ i ] ] = i + 1;\r
  16 \r
  17                 editor.addMenuGroup = function( name, order )\r
  18                         {\r
  19                                 groupsOrder[ name ] = order || 100;\r
  20                         };\r
  21 \r
  22                 editor.addMenuItem = function( name, definition )\r
  23                         {\r
  24                                 if ( groupsOrder[ definition.group ] )\r
  25                                         menuItems[ name ] = new CKEDITOR.menuItem( this, name, definition );\r
  26                         };\r
  27 \r
  28                 editor.addMenuItems = function( definitions )\r
  29                         {\r
  30                                 for ( var itemName in definitions )\r
  31                                 {\r
  32                                         this.addMenuItem( itemName, definitions[ itemName ] );\r
  33                                 }\r
  34                         };\r
  35 \r
  36                 editor.getMenuItem = function( name )\r
  37                         {\r
  38                                 return menuItems[ name ];\r
  39                         };\r
  40         },\r
  41 \r
  42         requires : [ 'floatpanel' ]\r
  43 });\r
  44 \r
  45 (function()\r
  46 {\r
  47         CKEDITOR.menu = CKEDITOR.tools.createClass(\r
  48         {\r
  49                 $ : function( editor, definition )\r
  50                 {\r
  51                         definition = this._.definition = definition || {};\r
  52                         this.id = 'cke_' + CKEDITOR.tools.getNextNumber();\r
  53 \r
  54                         this.editor = editor;\r
  55                         this.items = [];\r
  56                         this._.listeners = [];\r
  57 \r
  58                         this._.level = definition.level || 1;\r
  59 \r
  60                         var panelDefinition = CKEDITOR.tools.extend( {}, definition.panel,\r
  61                         {\r
  62                                 css : editor.skin.editor.css,\r
  63                                 level : this._.level - 1,\r
  64                                 block : {}\r
  65                         } );\r
  66 \r
  67                         var attrs = panelDefinition.block.attributes = ( panelDefinition.attributes || {} );\r
  68                         // Provide default role of 'menu'.\r
  69                         !attrs.role && ( attrs.role = 'menu' );\r
  70                         this._.panelDefinition = panelDefinition;\r
  71                 },\r
  72 \r
  73                 _ :\r
  74                 {\r
  75                         onShow : function()\r
  76                         {\r
  77                                 var selection = this.editor.getSelection();\r
  78 \r
  79                                 // Selection will be unavailable after menu shows up\r
  80                                 // in IE, lock it now.\r
  81                                 if ( CKEDITOR.env.ie )\r
  82                                         selection && selection.lock();\r
  83 \r
  84                                 var element = selection && selection.getStartElement(),\r
  85                                         listeners = this._.listeners,\r
  86                                         includedItems = [];\r
  87 \r
  88                                 this.removeAll();\r
  89                                 // Call all listeners, filling the list of items to be displayed.\r
  90                                 for ( var i = 0 ; i < listeners.length ; i++ )\r
  91                                 {\r
  92                                         var listenerItems = listeners[ i ]( element, selection );\r
  93 \r
  94                                         if ( listenerItems )\r
  95                                         {\r
  96                                                 for ( var itemName in listenerItems )\r
  97                                                 {\r
  98                                                         var item = this.editor.getMenuItem( itemName );\r
  99 \r
 100                                                         if ( item )\r
 101                                                         {\r
 102                                                                 item.state = listenerItems[ itemName ];\r
 103                                                                 this.add( item );\r
 104                                                         }\r
 105                                                 }\r
 106                                         }\r
 107                                 }\r
 108                         },\r
 109 \r
 110                         onClick : function( item )\r
 111                         {\r
 112                                 this.hide();\r
 113 \r
 114                                 if ( item.onClick )\r
 115                                         item.onClick();\r
 116                                 else if ( item.command )\r
 117                                         this.editor.execCommand( item.command );\r
 118                         },\r
 119 \r
 120                         onEscape : function( keystroke )\r
 121                         {\r
 122                                 var parent = this.parent;\r
 123                                 // 1. If it's sub-menu, restore the last focused item\r
 124                                 // of upper level menu.\r
 125                                 // 2. In case of a top-menu, close it.\r
 126                                 if ( parent )\r
 127                                 {\r
 128                                         parent._.panel.hideChild();\r
 129                                         // Restore parent block item focus.\r
 130                                         var parentBlock = parent._.panel._.panel._.currentBlock,\r
 131                                                 parentFocusIndex =  parentBlock._.focusIndex;\r
 132                                         parentBlock._.markItem( parentFocusIndex );\r
 133                                 }\r
 134                                 else if ( keystroke == 27 )\r
 135                                 {\r
 136                                         this.hide();\r
 137                                         this.editor.focus();\r
 138                                 }\r
 139                                 return false;\r
 140                         },\r
 141 \r
 142                         onHide : function()\r
 143                         {\r
 144                                 if ( CKEDITOR.env.ie )\r
 145                                 {\r
 146                                         var selection = this.editor.getSelection();\r
 147                                         selection && selection.unlock();\r
 148                                 }\r
 149 \r
 150                                 this.onHide && this.onHide();\r
 151                         },\r
 152 \r
 153                         showSubMenu : function( index )\r
 154                         {\r
 155                                 var menu = this._.subMenu,\r
 156                                         item = this.items[ index ],\r
 157                                         subItemDefs = item.getItems && item.getItems();\r
 158 \r
 159                                 // If this item has no subitems, we just hide the submenu, if\r
 160                                 // available, and return back.\r
 161                                 if ( !subItemDefs )\r
 162                                 {\r
 163                                         this._.panel.hideChild();\r
 164                                         return;\r
 165                                 }\r
 166 \r
 167                                 // Record parent menu focused item first (#3389).\r
 168                                 var block = this._.panel.getBlock( this.id );\r
 169                                 block._.focusIndex = index;\r
 170 \r
 171                                 // Create the submenu, if not available, or clean the existing\r
 172                                 // one.\r
 173                                 if ( menu )\r
 174                                         menu.removeAll();\r
 175                                 else\r
 176                                 {\r
 177                                         menu = this._.subMenu = new CKEDITOR.menu( this.editor,\r
 178                                                                    CKEDITOR.tools.extend( {}, this._.definition, { level : this._.level + 1 }, true ) );\r
 179                                         menu.parent = this;\r
 180                                         menu._.onClick = CKEDITOR.tools.bind( this._.onClick, this );\r
 181                                 }\r
 182 \r
 183                                 // Add all submenu items to the menu.\r
 184                                 for ( var subItemName in subItemDefs )\r
 185                                 {\r
 186                                         var subItem = this.editor.getMenuItem( subItemName );\r
 187                                         if ( subItem )\r
 188                                         {\r
 189                                                 subItem.state = subItemDefs[ subItemName ];\r
 190                                                 menu.add( subItem );\r
 191                                         }\r
 192                                 }\r
 193 \r
 194                                 // Get the element representing the current item.\r
 195                                 var element = this._.panel.getBlock( this.id ).element.getDocument().getById( this.id + String( index ) );\r
 196 \r
 197                                 // Show the submenu.\r
 198                                 menu.show( element, 2 );\r
 199                         }\r
 200                 },\r
 201 \r
 202                 proto :\r
 203                 {\r
 204                         add : function( item )\r
 205                         {\r
 206                                 // Later we may sort the items, but Array#sort is not stable in\r
 207                                 // some browsers, here we're forcing the original sequence with\r
 208                                 // 'order' attribute if it hasn't been assigned. (#3868)\r
 209                                 if ( !item.order )\r
 210                                         item.order = this.items.length;\r
 211 \r
 212                                 this.items.push( item );\r
 213                         },\r
 214 \r
 215                         removeAll : function()\r
 216                         {\r
 217                                 this.items = [];\r
 218                         },\r
 219 \r
 220                         show : function( offsetParent, corner, offsetX, offsetY )\r
 221                         {\r
 222                                 // Not for sub menu.\r
 223                                 if ( !this.parent )\r
 224                                 {\r
 225                                         this._.onShow();\r
 226                                         // Don't menu with zero items.\r
 227                                         if ( ! this.items.length )\r
 228                                                 return;\r
 229                                 }\r
 230 \r
 231                                 corner = corner || ( this.editor.lang.dir == 'rtl' ? 2 : 1 );\r
 232 \r
 233                                 var items = this.items,\r
 234                                         editor = this.editor,\r
 235                                         panel = this._.panel,\r
 236                                         element = this._.element;\r
 237 \r
 238                                 // Create the floating panel for this menu.\r
 239                                 if ( !panel )\r
 240                                 {\r
 241                                         panel = this._.panel = new CKEDITOR.ui.floatPanel( this.editor,\r
 242                                                 CKEDITOR.document.getBody(),\r
 243                                                 this._.panelDefinition,\r
 244                                                 this._.level );\r
 245 \r
 246                                         panel.onEscape = CKEDITOR.tools.bind( function( keystroke )\r
 247                                         {\r
 248                                                 if ( this._.onEscape( keystroke ) === false )\r
 249                                                         return false;\r
 250                                         },\r
 251                                         this );\r
 252 \r
 253                                         panel.onHide = CKEDITOR.tools.bind( function()\r
 254                                         {\r
 255                                                 this._.onHide && this._.onHide();\r
 256                                         },\r
 257                                         this );\r
 258 \r
 259                                         // Create an autosize block inside the panel.\r
 260                                         var block = panel.addBlock( this.id, this._.panelDefinition.block );\r
 261                                         block.autoSize = true;\r
 262 \r
 263                                         var keys = block.keys;\r
 264                                         keys[ 40 ]      = 'next';                                       // ARROW-DOWN\r
 265                                         keys[ 9 ]       = 'next';                                       // TAB\r
 266                                         keys[ 38 ]      = 'prev';                                       // ARROW-UP\r
 267                                         keys[ CKEDITOR.SHIFT + 9 ]      = 'prev';       // SHIFT + TAB\r
 268                                         keys[ 32 ]      = 'click';                                      // SPACE\r
 269                                         keys[ ( editor.lang.dir == 'rtl' ? 37 : 39 ) ]  = 'click';  // ARROW-RIGHT/ARROW-LEFT(rtl)\r
 270 \r
 271                                         element = this._.element = block.element;\r
 272                                         element.addClass( editor.skinClass );\r
 273 \r
 274                                         var elementDoc = element.getDocument();\r
 275                                         elementDoc.getBody().setStyle( 'overflow', 'hidden' );\r
 276                                         elementDoc.getElementsByTag( 'html' ).getItem( 0 ).setStyle( 'overflow', 'hidden' );\r
 277 \r
 278                                         this._.itemOverFn = CKEDITOR.tools.addFunction( function( index )\r
 279                                                 {\r
 280                                                         clearTimeout( this._.showSubTimeout );\r
 281                                                         this._.showSubTimeout = CKEDITOR.tools.setTimeout( this._.showSubMenu, editor.config.menu_subMenuDelay || 400, this, [ index ] );\r
 282                                                 },\r
 283                                                 this );\r
 284 \r
 285                                         this._.itemOutFn = CKEDITOR.tools.addFunction( function( index )\r
 286                                                 {\r
 287                                                         clearTimeout( this._.showSubTimeout );\r
 288                                                 },\r
 289                                                 this );\r
 290 \r
 291                                         this._.itemClickFn = CKEDITOR.tools.addFunction( function( index )\r
 292                                                 {\r
 293                                                         var item = this.items[ index ];\r
 294 \r
 295                                                         if ( item.state == CKEDITOR.TRISTATE_DISABLED )\r
 296                                                         {\r
 297                                                                 this.hide();\r
 298                                                                 return;\r
 299                                                         }\r
 300 \r
 301                                                         if ( item.getItems )\r
 302                                                                 this._.showSubMenu( index );\r
 303                                                         else\r
 304                                                                 this._.onClick( item );\r
 305                                                 },\r
 306                                                 this );\r
 307                                 }\r
 308 \r
 309                                 // Put the items in the right order.\r
 310                                 sortItems( items );\r
 311 \r
 312                                 var chromeRoot = editor.container.getChild( 1 ),\r
 313                                         mixedContentClass = chromeRoot.hasClass( 'cke_mixed_dir_content' ) ? ' cke_mixed_dir_content' : '';\r
 314 \r
 315                                 // Build the HTML that composes the menu and its items.\r
 316                                 var output = [ '<div class="cke_menu' + mixedContentClass + '" role="presentation">' ];\r
 317 \r
 318                                 var length = items.length,\r
 319                                         lastGroup = length && items[ 0 ].group;\r
 320 \r
 321                                 for ( var i = 0 ; i < length ; i++ )\r
 322                                 {\r
 323                                         var item = items[ i ];\r
 324                                         if ( lastGroup != item.group )\r
 325                                         {\r
 326                                                 output.push( '<div class="cke_menuseparator" role="separator"></div>' );\r
 327                                                 lastGroup = item.group;\r
 328                                         }\r
 329 \r
 330                                         item.render( this, i, output );\r
 331                                 }\r
 332 \r
 333                                 output.push( '</div>' );\r
 334 \r
 335                                 // Inject the HTML inside the panel.\r
 336                                 element.setHtml( output.join( '' ) );\r
 337 \r
 338                                 CKEDITOR.ui.fire( 'ready', this );\r
 339 \r
 340                                 // Show the panel.\r
 341                                 if ( this.parent )\r
 342                                         this.parent._.panel.showAsChild( panel, this.id, offsetParent, corner, offsetX, offsetY );\r
 343                                 else\r
 344                                         panel.showBlock( this.id, offsetParent, corner, offsetX, offsetY );\r
 345 \r
 346                                 editor.fire( 'menuShow', [ panel ] );\r
 347                         },\r
 348 \r
 349                         addListener : function( listenerFn )\r
 350                         {\r
 351                                 this._.listeners.push( listenerFn );\r
 352                         },\r
 353 \r
 354                         hide : function()\r
 355                         {\r
 356                                 this._.onHide && this._.onHide();\r
 357                                 this._.panel && this._.panel.hide();\r
 358                         }\r
 359                 }\r
 360         });\r
 361 \r
 362         function sortItems( items )\r
 363         {\r
 364                 items.sort( function( itemA, itemB )\r
 365                         {\r
 366                                 if ( itemA.group < itemB.group )\r
 367                                         return -1;\r
 368                                 else if ( itemA.group > itemB.group )\r
 369                                         return 1;\r
 370 \r
 371                                 return itemA.order < itemB.order ? -1 :\r
 372                                         itemA.order > itemB.order ? 1 :\r
 373                                         0;\r
 374                         });\r
 375         }\r
 376         CKEDITOR.menuItem = CKEDITOR.tools.createClass(\r
 377         {\r
 378                 $ : function( editor, name, definition )\r
 379                 {\r
 380                         CKEDITOR.tools.extend( this, definition,\r
 381                                 // Defaults\r
 382                                 {\r
 383                                         order : 0,\r
 384                                         className : 'cke_button_' + name\r
 385                                 });\r
 386 \r
 387                         // Transform the group name into its order number.\r
 388                         this.group = editor._.menuGroups[ this.group ];\r
 389 \r
 390                         this.editor = editor;\r
 391                         this.name = name;\r
 392                 },\r
 393 \r
 394                 proto :\r
 395                 {\r
 396                         render : function( menu, index, output )\r
 397                         {\r
 398                                 var id = menu.id + String( index ),\r
 399                                         state = ( typeof this.state == 'undefined' ) ? CKEDITOR.TRISTATE_OFF : this.state;\r
 400 \r
 401                                 var classes = ' cke_' + (\r
 402                                         state == CKEDITOR.TRISTATE_ON ? 'on' :\r
 403                                         state == CKEDITOR.TRISTATE_DISABLED ? 'disabled' :\r
 404                                         'off' );\r
 405 \r
 406                                 var htmlLabel = this.label;\r
 407 \r
 408                                 if ( this.className )\r
 409                                         classes += ' ' + this.className;\r
 410 \r
 411                         var hasSubMenu = this.getItems;\r
 412 \r
 413                         output.push(\r
 414                                 '<span class="cke_menuitem">' +\r
 415                                 '<a id="', id, '"' +\r
 416                                         ' class="', classes, '" href="javascript:void(\'', ( this.label || '' ).replace( "'", '' ), '\')"' +\r
 417                                         ' title="', this.label, '"' +\r
 418                                         ' tabindex="-1"' +\r
 419                                         '_cke_focus=1' +\r
 420                                         ' hidefocus="true"' +\r
 421                                         ' role="menuitem"' +\r
 422                                         ( hasSubMenu ? 'aria-haspopup="true"' : '' ) +\r
 423                                         ( state == CKEDITOR.TRISTATE_DISABLED ? 'aria-disabled="true"' : '' ) +\r
 424                                         ( state == CKEDITOR.TRISTATE_ON ? 'aria-pressed="true"' : '' ) );\r
 425 \r
 426                                 // Some browsers don't cancel key events in the keydown but in the\r
 427                                 // keypress.\r
 428                                 // TODO: Check if really needed for Gecko+Mac.\r
 429                                 if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
 430                                 {\r
 431                                         output.push(\r
 432                                                 ' onkeypress="return false;"' );\r
 433                                 }\r
 434 \r
 435                                 // With Firefox, we need to force the button to redraw, otherwise it\r
 436                                 // will remain in the focus state.\r
 437                                 if ( CKEDITOR.env.gecko )\r
 438                                 {\r
 439                                         output.push(\r
 440                                                 ' onblur="this.style.cssText = this.style.cssText;"' );\r
 441                                 }\r
 442 \r
 443                                 var offset = ( this.iconOffset || 0 ) * -16;\r
 444                                 output.push(\r
 445 //                                      ' onkeydown="return CKEDITOR.ui.button._.keydown(', index, ', event);"' +\r
 446                                         ' onmouseover="CKEDITOR.tools.callFunction(', menu._.itemOverFn, ',', index, ');"' +\r
 447                                         ' onmouseout="CKEDITOR.tools.callFunction(', menu._.itemOutFn, ',', index, ');"' +\r
 448                                         ' onclick="CKEDITOR.tools.callFunction(', menu._.itemClickFn, ',', index, '); return false;"' +\r
 449                                         '>' +\r
 450                                                 '<span class="cke_icon_wrapper"><span class="cke_icon"' +\r
 451                                                         ( this.icon ? ' style="background-image:url(' + CKEDITOR.getUrl( this.icon ) + ');background-position:0 ' + offset + 'px;"'\r
 452                                                         : '' ) +\r
 453                                                         '></span></span>' +\r
 454                                                 '<span class="cke_label">' );\r
 455 \r
 456                         if ( hasSubMenu )\r
 457                         {\r
 458                                 output.push(\r
 459                                                         '<span class="cke_menuarrow">',\r
 460                                                                 '<span>&#',\r
 461                                                                         ( this.editor.lang.dir == 'rtl' ?\r
 462                                                                                 '9668' :        // BLACK LEFT-POINTING POINTER\r
 463                                                                                 '9658' ),       // BLACK RIGHT-POINTING POINTER\r
 464                                                                 ';</span>',\r
 465                                                         '</span>' );\r
 466                         }\r
 467 \r
 468                                 output.push(\r
 469                                                                 htmlLabel,\r
 470                                                         '</span>' +\r
 471                                         '</a>' +\r
 472                                         '</span>' );\r
 473                 }\r
 474                 }\r
 475         });\r
 476 \r
 477 })();\r
 478 \r
 479 \r
 480 /**\r
 481  * The amount of time, in milliseconds, the editor waits before showing submenu\r
 482  * options when moving the mouse over options that contains submenus, like the\r
 483  * "Cell Properties" entry for tables.\r
 484  * @type Number\r
 485  * @default 400\r
 486  * @example\r
 487  * // Remove the submenu delay.\r
 488  * config.menu_subMenuDelay = 0;\r
 489  */\r
 490 \r
 491 /**\r
 492  * A comma separated list of items group names to be displayed in the context\r
 493  * menu. The items order will reflect the order in this list if no priority\r
 494  * has been definted in the groups.\r
 495  * @type String\r
 496  * @default 'clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'\r
 497  * @example\r
 498  * config.menu_groups = 'clipboard,table,anchor,link,image';\r
 499  */\r
 500 CKEDITOR.config.menu_groups =\r
 501         'clipboard,' +\r
 502         'form,' +\r
 503         'tablecell,tablecellproperties,tablerow,tablecolumn,table,'+\r
 504         'anchor,link,image,flash,' +\r
 505         'checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea,div';\r