_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 \r
 237                         hide : function()\r
 238                         {\r
 239                                 this._.panel && this._.panel.hide();\r
 240                         }\r
 241                 }\r
 242         });\r
 243 \r
 244         function sortItems( items )\r
 245         {\r
 246                 items.sort( function( itemA, itemB )\r
 247                         {\r
 248                                 if ( itemA.group < itemB.group )\r
 249                                         return -1;\r
 250                                 else if ( itemA.group > itemB.group )\r
 251                                         return 1;\r
 252 \r
 253                                 return itemA.order < itemB.order ? -1 :\r
 254                                         itemA.order > itemB.order ? 1 :\r
 255                                         0;\r
 256                         });\r
 257         }\r
 258 })();\r
 259 \r
 260 CKEDITOR.menuItem = CKEDITOR.tools.createClass(\r
 261 {\r
 262         $ : function( editor, name, definition )\r
 263         {\r
 264                 CKEDITOR.tools.extend( this, definition,\r
 265                         // Defaults\r
 266                         {\r
 267                                 order : 0,\r
 268                                 className : 'cke_button_' + name\r
 269                         });\r
 270 \r
 271                 // Transform the group name into its order number.\r
 272                 this.group = editor._.menuGroups[ this.group ];\r
 273 \r
 274                 this.editor = editor;\r
 275                 this.name = name;\r
 276         },\r
 277 \r
 278         proto :\r
 279         {\r
 280                 render : function( menu, index, output )\r
 281                 {\r
 282                         var id = menu.id + String( index ),\r
 283                                 state = ( typeof this.state == 'undefined' ) ? CKEDITOR.TRISTATE_OFF : this.state;\r
 284 \r
 285                         var classes = ' cke_' + (\r
 286                                 state == CKEDITOR.TRISTATE_ON ? 'on' :\r
 287                                 state == CKEDITOR.TRISTATE_DISABLED ? 'disabled' :\r
 288                                 'off' );\r
 289 \r
 290                         var htmlLabel = this.label;\r
 291                         if ( state == CKEDITOR.TRISTATE_DISABLED )\r
 292                                 htmlLabel = this.editor.lang.common.unavailable.replace( '%1', htmlLabel );\r
 293 \r
 294                         if ( this.className )\r
 295                                 classes += ' ' + this.className;\r
 296 \r
 297                         output.push(\r
 298                                 '<span class="cke_menuitem">' +\r
 299                                 '<a id="', id, '"' +\r
 300                                         ' class="', classes, '" href="javascript:void(\'', ( this.label || '' ).replace( "'", '' ), '\')"' +\r
 301                                         ' title="', this.label, '"' +\r
 302                                         ' tabindex="-1"' +\r
 303                                         '_cke_focus=1' +\r
 304                                         ' hidefocus="true"' );\r
 305 \r
 306                         // Some browsers don't cancel key events in the keydown but in the\r
 307                         // keypress.\r
 308                         // TODO: Check if really needed for Gecko+Mac.\r
 309                         if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
 310                         {\r
 311                                 output.push(\r
 312                                         ' onkeypress="return false;"' );\r
 313                         }\r
 314 \r
 315                         // With Firefox, we need to force the button to redraw, otherwise it\r
 316                         // will remain in the focus state.\r
 317                         if ( CKEDITOR.env.gecko )\r
 318                         {\r
 319                                 output.push(\r
 320                                         ' onblur="this.style.cssText = this.style.cssText;"' );\r
 321                         }\r
 322 \r
 323                         var offset = ( this.iconOffset || 0 ) * -16;\r
 324                         output.push(\r
 325 //                                      ' onkeydown="return CKEDITOR.ui.button._.keydown(', index, ', event);"' +\r
 326                                         ' onmouseover="CKEDITOR.tools.callFunction(', menu._.itemOverFn, ',', index, ');"' +\r
 327                                         ' onmouseout="CKEDITOR.tools.callFunction(', menu._.itemOutFn, ',', index, ');"' +\r
 328                                         ' onclick="CKEDITOR.tools.callFunction(', menu._.itemClickFn, ',', index, '); return false;"' +\r
 329                                         '>' +\r
 330                                                 '<span class="cke_icon_wrapper"><span class="cke_icon"' +\r
 331                                                         ( this.icon ? ' style="background-image:url(' + CKEDITOR.getUrl( this.icon ) + ');background-position:0 ' + offset + 'px;"></span>'\r
 332                                                         : '' ) +\r
 333                                                         '></span></span>' +\r
 334                                                 '<span class="cke_label">' );\r
 335 \r
 336                         if ( this.getItems )\r
 337                         {\r
 338                                 output.push(\r
 339                                                         '<span class="cke_menuarrow"></span>' );\r
 340                         }\r
 341 \r
 342                         output.push(\r
 343                                                         htmlLabel,\r
 344                                                 '</span>' +\r
 345                                 '</a>' +\r
 346                                 '</span>' );\r
 347                 }\r
 348         }\r
 349 });\r
 350 \r
 351 /**\r
 352  * The amount of time, in milliseconds, the editor waits before showing submenu\r
 353  * options when moving the mouse over options that contains submenus, like the\r
 354  * "Cell Properties" entry for tables.\r
 355  * @type Number\r
 356  * @default 400\r
 357  * @example\r
 358  * // Remove the submenu delay.\r
 359  * config.menu_subMenuDelay = 0;\r
 360  */\r
 361 CKEDITOR.config.menu_subMenuDelay = 400;\r
 362 \r
 363 /**\r
 364  * A comma separated list of items group names to be displayed in the context\r
 365  * menu. The items order will reflect the order in this list if no priority\r
 366  * has been definted in the groups.\r
 367  * @type String\r
 368  * @default 'clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'\r
 369  * @example\r
 370  * config.menu_groups = 'clipboard,table,anchor,link,image';\r
 371  */\r
 372 CKEDITOR.config.menu_groups =\r
 373         'clipboard,' +\r
 374         'form,' +\r
 375         'tablecell,tablecellproperties,tablerow,tablecolumn,table,'+\r
 376         'anchor,link,image,flash,' +\r
 377         'checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';\r