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