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