_source/plugins/menu/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2009, 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 = {};\r
  12 \r
  13                 for ( var i = 0 ; i < groups.length ; i++ )\r
  14                         groupsOrder[ groups[ i ] ] = i + 1;\r
  15 \r
  16                 editor._.menuGroups = groupsOrder;\r
  17                 editor._.menuItems = {};\r
  18         },\r
  19 \r
  20         requires : [ 'floatpanel' ]\r
  21 });\r
  22 \r
  23 CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
  24 {\r
  25         addMenuGroup : function( name, order )\r
  26         {\r
  27                 this._.menuGroups[ name ] = order || 100;\r
  28         },\r
  29 \r
  30         addMenuItem : function( name, definition )\r
  31         {\r
  32                 if ( this._.menuGroups[ definition.group ] )\r
  33                         this._.menuItems[ name ] = new CKEDITOR.menuItem( this, name, definition );\r
  34         },\r
  35 \r
  36         addMenuItems : function( definitions )\r
  37         {\r
  38                 for ( var itemName in definitions )\r
  39                 {\r
  40                         this.addMenuItem( itemName, definitions[ itemName ] );\r
  41                 }\r
  42         },\r
  43 \r
  44         getMenuItem : function( name )\r
  45         {\r
  46                 return this._.menuItems[ name ];\r
  47         }\r
  48 });\r
  49 \r
  50 (function()\r
  51 {\r
  52         CKEDITOR.menu = CKEDITOR.tools.createClass(\r
  53         {\r
  54                 $ : function( editor, level )\r
  55                 {\r
  56                         this.id = 'cke_' + CKEDITOR.tools.getNextNumber();\r
  57 \r
  58                         this.editor = editor;\r
  59                         this.items = [];\r
  60 \r
  61                         this._.level = level || 1;\r
  62                 },\r
  63 \r
  64                 _ :\r
  65                 {\r
  66                         showSubMenu : function( index )\r
  67                         {\r
  68                                 var menu = this._.subMenu,\r
  69                                         item = this.items[ index ],\r
  70                                         subItems = item.getItems && item.getItems();\r
  71 \r
  72                                 // If this item has no subitems, we just hide the submenu, if\r
  73                                 // available, and return back.\r
  74                                 if ( !subItems )\r
  75                                 {\r
  76                                         this._.panel.hideChild();\r
  77                                         return;\r
  78                                 }\r
  79 \r
  80                                 // Create the submenu, if not available, or clean the existing\r
  81                                 // one.\r
  82                                 if ( menu )\r
  83                                         menu.removeAll();\r
  84                                 else\r
  85                                 {\r
  86                                         menu = this._.subMenu = new CKEDITOR.menu( this.editor, this._.level + 1 );\r
  87                                         menu.parent = this;\r
  88                                         menu.onClick = CKEDITOR.tools.bind( this.onClick, this );\r
  89                                 }\r
  90 \r
  91                                 // Add all submenu items to the menu.\r
  92                                 for ( var itemName in subItems )\r
  93                                 {\r
  94                                         menu.add( this.editor.getMenuItem( itemName ) );\r
  95                                 }\r
  96 \r
  97                                 // Get the element representing the current item.\r
  98                                 var element = this._.panel.getBlock( this.id ).element.getDocument().getById( this.id + String( index ) );\r
  99 \r
 100                                 // Show the submenu.\r
 101                                 menu.show( element, 2 );\r
 102                         }\r
 103                 },\r
 104 \r
 105                 proto :\r
 106                 {\r
 107                         add : function( item )\r
 108                         {\r
 109                                 // Later we may sort the items, but Array#sort is not stable in\r
 110                                 // some browsers, here we're forcing the original sequence with\r
 111                                 // 'order' attribute if it hasn't been assigned. (#3868)\r
 112                                 if ( !item.order )\r
 113                                         item.order = this.items.length;\r
 114 \r
 115                                 this.items.push( item );\r
 116                         },\r
 117 \r
 118                         removeAll : function()\r
 119                         {\r
 120                                 this.items = [];\r
 121                         },\r
 122 \r
 123                         show : function( offsetParent, corner, offsetX, offsetY )\r
 124                         {\r
 125                                 var items = this.items,\r
 126                                         editor = this.editor,\r
 127                                         panel = this._.panel,\r
 128                                         element = this._.element;\r
 129 \r
 130                                 // Create the floating panel for this menu.\r
 131                                 if ( !panel )\r
 132                                 {\r
 133                                         panel = this._.panel = new CKEDITOR.ui.floatPanel( this.editor, CKEDITOR.document.getBody(),\r
 134                                                 {\r
 135                                                         css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],\r
 136                                                         level : this._.level - 1,\r
 137                                                         className : editor.skinClass + ' cke_contextmenu'\r
 138                                                 },\r
 139                                                 this._.level);\r
 140 \r
 141                                         panel.onEscape = CKEDITOR.tools.bind( function()\r
 142                                         {\r
 143                                                 this.onEscape && this.onEscape();\r
 144                                                 this.hide();\r
 145                                         },\r
 146                                         this );\r
 147 \r
 148                                         panel.onHide = CKEDITOR.tools.bind( function()\r
 149                                         {\r
 150                                                 this.onHide && this.onHide();\r
 151                                         },\r
 152                                         this );\r
 153 \r
 154                                         // Create an autosize block inside the panel.\r
 155                                         var block = panel.addBlock( this.id );\r
 156                                         block.autoSize = true;\r
 157 \r
 158                                         var keys = block.keys;\r
 159                                         keys[ 40 ]      = 'next';                                       // ARROW-DOWN\r
 160                                         keys[ 9 ]       = 'next';                                       // TAB\r
 161                                         keys[ 38 ]      = 'prev';                                       // ARROW-UP\r
 162                                         keys[ CKEDITOR.SHIFT + 9 ]      = 'prev';       // SHIFT + TAB\r
 163                                         keys[ 32 ]      = 'click';                                      // SPACE\r
 164                                         keys[ 39 ]      = 'click';                                      // ARROW-RIGHT\r
 165 \r
 166                                         element = this._.element = block.element;\r
 167                                         element.addClass( editor.skinClass );\r
 168 \r
 169                                         var elementDoc = element.getDocument();\r
 170                                         elementDoc.getBody().setStyle( 'overflow', 'hidden' );\r
 171                                         elementDoc.getElementsByTag( 'html' ).getItem( 0 ).setStyle( 'overflow', 'hidden' );\r
 172 \r
 173                                         this._.itemOverFn = CKEDITOR.tools.addFunction( function( index )\r
 174                                                 {\r
 175                                                         clearTimeout( this._.showSubTimeout );\r
 176                                                         this._.showSubTimeout = CKEDITOR.tools.setTimeout( this._.showSubMenu, editor.config.menu_subMenuDelay, this, [ index ] );\r
 177                                                 },\r
 178                                                 this);\r
 179 \r
 180                                         this._.itemOutFn = CKEDITOR.tools.addFunction( function( index )\r
 181                                                 {\r
 182                                                         clearTimeout( this._.showSubTimeout );\r
 183                                                 },\r
 184                                                 this);\r
 185 \r
 186                                         this._.itemClickFn = CKEDITOR.tools.addFunction( function( index )\r
 187                                                 {\r
 188                                                         var item = this.items[ index ];\r
 189 \r
 190                                                         if ( item.state == CKEDITOR.TRISTATE_DISABLED )\r
 191                                                         {\r
 192                                                                 this.hide();\r
 193                                                                 return;\r
 194                                                         }\r
 195 \r
 196                                                         if ( item.getItems )\r
 197                                                                 this._.showSubMenu( index );\r
 198                                                         else\r
 199                                                                 this.onClick && this.onClick( item );\r
 200                                                 },\r
 201                                                 this);\r
 202                                 }\r
 203 \r
 204                                 // Put the items in the right order.\r
 205                                 sortItems( items );\r
 206 \r
 207                                 // Build the HTML that composes the menu and its items.\r
 208                                 var output = [ '<div class="cke_menu">' ];\r
 209 \r
 210                                 var length = items.length,\r
 211                                         lastGroup = length && items[ 0 ].group;\r
 212 \r
 213                                 for ( var i = 0 ; i < length ; i++ )\r
 214                                 {\r
 215                                         var item = items[ i ];\r
 216                                         if ( lastGroup != item.group )\r
 217                                         {\r
 218                                                 output.push( '<div class="cke_menuseparator"></div>' );\r
 219                                                 lastGroup = item.group;\r
 220                                         }\r
 221 \r
 222                                         item.render( this, i, output );\r
 223                                 }\r
 224 \r
 225                                 output.push( '</div>' );\r
 226 \r
 227                                 // Inject the HTML inside the panel.\r
 228                                 element.setHtml( output.join( '' ) );\r
 229 \r
 230                                 // Show the panel.\r
 231                                 if ( this.parent )\r
 232                                         this.parent._.panel.showAsChild( panel, this.id, offsetParent, corner, offsetX, offsetY );\r
 233                                 else\r
 234                                         panel.showBlock( this.id, offsetParent, corner, offsetX, offsetY );\r
 235 \r
 236                                 editor.fire( 'menuShow', [ panel ] );\r
 237                         },\r
 238 \r
 239                         hide : function()\r
 240                         {\r
 241                                 this._.panel && this._.panel.hide();\r
 242                         }\r
 243                 }\r
 244         });\r
 245 \r
 246         function sortItems( items )\r
 247         {\r
 248                 items.sort( function( itemA, itemB )\r
 249                         {\r
 250                                 if ( itemA.group < itemB.group )\r
 251                                         return -1;\r
 252                                 else if ( itemA.group > itemB.group )\r
 253                                         return 1;\r
 254 \r
 255                                 return itemA.order < itemB.order ? -1 :\r
 256                                         itemA.order > itemB.order ? 1 :\r
 257                                         0;\r
 258                         });\r
 259         }\r
 260 })();\r
 261 \r
 262 CKEDITOR.menuItem = CKEDITOR.tools.createClass(\r
 263 {\r
 264         $ : function( editor, name, definition )\r
 265         {\r
 266                 CKEDITOR.tools.extend( this, definition,\r
 267                         // Defaults\r
 268                         {\r
 269                                 order : 0,\r
 270                                 className : 'cke_button_' + name\r
 271                         });\r
 272 \r
 273                 // Transform the group name into its order number.\r
 274                 this.group = editor._.menuGroups[ this.group ];\r
 275 \r
 276                 this.editor = editor;\r
 277                 this.name = name;\r
 278         },\r
 279 \r
 280         proto :\r
 281         {\r
 282                 render : function( menu, index, output )\r
 283                 {\r
 284                         var id = menu.id + String( index ),\r
 285                                 state = ( typeof this.state == 'undefined' ) ? CKEDITOR.TRISTATE_OFF : this.state;\r
 286 \r
 287                         var classes = ' cke_' + (\r
 288                                 state == CKEDITOR.TRISTATE_ON ? 'on' :\r
 289                                 state == CKEDITOR.TRISTATE_DISABLED ? 'disabled' :\r
 290                                 'off' );\r
 291 \r
 292                         var htmlLabel = this.label;\r
 293                         if ( state == CKEDITOR.TRISTATE_DISABLED )\r
 294                                 htmlLabel = this.editor.lang.common.unavailable.replace( '%1', htmlLabel );\r
 295 \r
 296                         if ( this.className )\r
 297                                 classes += ' ' + this.className;\r
 298 \r
 299                         output.push(\r
 300                                 '<span class="cke_menuitem">' +\r
 301                                 '<a id="', id, '"' +\r
 302                                         ' class="', classes, '" href="javascript:void(\'', ( this.label || '' ).replace( "'", '' ), '\')"' +\r
 303                                         ' title="', this.label, '"' +\r
 304                                         ' tabindex="-1"' +\r
 305                                         '_cke_focus=1' +\r
 306                                         ' hidefocus="true"' );\r
 307 \r
 308                         // Some browsers don't cancel key events in the keydown but in the\r
 309                         // keypress.\r
 310                         // TODO: Check if really needed for Gecko+Mac.\r
 311                         if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
 312                         {\r
 313                                 output.push(\r
 314                                         ' onkeypress="return false;"' );\r
 315                         }\r
 316 \r
 317                         // With Firefox, we need to force the button to redraw, otherwise it\r
 318                         // will remain in the focus state.\r
 319                         if ( CKEDITOR.env.gecko )\r
 320                         {\r
 321                                 output.push(\r
 322                                         ' onblur="this.style.cssText = this.style.cssText;"' );\r
 323                         }\r
 324 \r
 325                         var offset = ( this.iconOffset || 0 ) * -16;\r
 326                         output.push(\r
 327 //                                      ' onkeydown="return CKEDITOR.ui.button._.keydown(', index, ', event);"' +\r
 328                                         ' onmouseover="CKEDITOR.tools.callFunction(', menu._.itemOverFn, ',', index, ');"' +\r
 329                                         ' onmouseout="CKEDITOR.tools.callFunction(', menu._.itemOutFn, ',', index, ');"' +\r
 330                                         ' onclick="CKEDITOR.tools.callFunction(', menu._.itemClickFn, ',', index, '); return false;"' +\r
 331                                         '>' +\r
 332                                                 '<span class="cke_icon_wrapper"><span class="cke_icon"' +\r
 333                                                         ( this.icon ? ' style="background-image:url(' + CKEDITOR.getUrl( this.icon ) + ');background-position:0 ' + offset + 'px;"'\r
 334                                                         : '' ) +\r
 335                                                         '></span></span>' +\r
 336                                                 '<span class="cke_label">' );\r
 337 \r
 338                         if ( this.getItems )\r
 339                         {\r
 340                                 output.push(\r
 341                                                         '<span class="cke_menuarrow"></span>' );\r
 342                         }\r
 343 \r
 344                         output.push(\r
 345                                                         htmlLabel,\r
 346                                                 '</span>' +\r
 347                                 '</a>' +\r
 348                                 '</span>' );\r
 349                 }\r
 350         }\r
 351 });\r
 352 \r
 353 /**\r
 354  * The amount of time, in milliseconds, the editor waits before showing submenu\r
 355  * options when moving the mouse over options that contains submenus, like the\r
 356  * "Cell Properties" entry for tables.\r
 357  * @type Number\r
 358  * @default 400\r
 359  * @example\r
 360  * // Remove the submenu delay.\r
 361  * config.menu_subMenuDelay = 0;\r
 362  */\r
 363 CKEDITOR.config.menu_subMenuDelay = 400;\r
 364 \r
 365 /**\r
 366  * A comma separated list of items group names to be displayed in the context\r
 367  * menu. The items order will reflect the order in this list if no priority\r
 368  * has been definted in the groups.\r
 369  * @type String\r
 370  * @default 'clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'\r
 371  * @example\r
 372  * config.menu_groups = 'clipboard,table,anchor,link,image';\r
 373  */\r
 374 CKEDITOR.config.menu_groups =\r
 375         'clipboard,' +\r
 376         'form,' +\r
 377         'tablecell,tablecellproperties,tablerow,tablecolumn,table,'+\r
 378         'anchor,link,image,flash,' +\r
 379         'checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';\r