4 * Copyright, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
12 * Creates a new menu item.
14 * @-x-less MenuItem.less
15 * @class tinymce.ui.MenuItem
16 * @extends tinymce.ui.Control
18 define("tinymce/ui/MenuItem", [
21 ], function(Widget, Factory) {
24 return Widget.extend({
31 * Constructs a instance with the specified settings.
34 * @param {Object} settings Name/value object with settings.
35 * @setting {Boolean} selectable Selectable menu.
36 * @setting {Array} menu Submenu array with items.
37 * @setting {String} shortcut Shortcut to display for menu item. Example: Ctrl+X
39 init: function(settings) {
44 self._super(settings);
46 settings = self.settings;
48 self.addClass('menu-item');
51 self.addClass('menu-item-expand');
54 if (settings.preview) {
55 self.addClass('menu-item-preview');
58 if (self._text === '-' || self._text === '|') {
59 self.addClass('menu-item-sep');
60 self.aria('role', 'separator');
61 self.canFocus = false;
65 if (settings.selectable) {
66 self.aria('role', 'menuitemcheckbox');
67 self.aria('checked', true);
68 self.addClass('menu-item-checkbox');
69 settings.icon = 'selected';
72 self.on('mousedown', function(e) {
76 self.on('mouseenter click', function(e) {
77 if (e.control === self) {
78 if (!settings.menu && e.type === 'click') {
79 self.parent().hideAll();
86 setTimeout(function() {
87 self.menu.items()[0].focus();
95 self.aria('haspopup', true);
100 * Returns true/false if the menuitem has sub menu.
103 * @return {Boolean} True/false state if it has submenu.
105 hasMenus: function() {
106 return !!this.settings.menu;
110 * Shows the menu for the menu item.
114 showMenu: function() {
115 var self = this, settings = self.settings, menu, parent = self.parent();
117 parent.items().each(function(ctrl) {
127 menu = settings.menu;
129 // Is menu array then auto constuct menu control
136 menu.type = menu.type || 'menu';
139 if (parent.settings.itemDefaults) {
140 menu.itemDefaults = parent.settings.itemDefaults;
143 menu = self.menu = Factory.create(menu).parent(self).renderTo(self.getContainerElm());
146 menu.on('cancel', function() {
150 menu.on('hide', function(e) {
151 if (e.control === menu) {
152 self.removeClass('selected');
159 menu._parentMenu = parent;
161 menu.addClass('menu-sub');
163 var rel = menu.testMoveRel(self.getEl(), ['tr-tl', 'br-bl', 'tl-tr', 'bl-br']);
164 menu.moveRel(self.getEl(), rel);
166 rel = 'menu-sub-' + rel;
167 menu.removeClass(menu._lastRel);
171 self.addClass('selected');
172 self.aria('expanded', true);
177 * Hides the menu for the menu item.
181 hideMenu: function() {
185 self.menu.items().each(function(item) {
192 self.aria('expanded', false);
199 * Renders the control as a HTML string.
202 * @return {String} HTML representing the control.
204 renderHtml: function() {
205 var self = this, id = self._id, settings = self.settings, prefix = self.classPrefix, text = self.encode(self._text);
206 var icon = self.settings.icon;
209 self.parent().addClass('menu-has-icons');
212 icon = prefix + 'ico ' + prefix + 'i-' + (self.settings.icon || 'none');
215 '<div id="' + id + '" class="' + self.classes() + '" tabindex="-1">' +
216 (text !== '-' ? '<i class="' + icon + '"></i> ' : '') +
217 (text !== '-' ? '<span id="' + id + '-text" class="' + prefix + 'text">' + text + '</span>' : '') +
218 (settings.shortcut ? '<div id="' + id + '-shortcut" class="' + prefix + 'menu-shortcut">' +
219 settings.shortcut + '</div>' : '') +
220 (settings.menu ? '<div class="' + prefix + 'caret"></div>' : '') +
226 * Gets invoked after the control has been rendered.
230 postRender: function() {
231 var self = this, settings = self.settings;
233 var textStyle = settings.textStyle;
234 if (typeof(textStyle) == "function") {
235 textStyle = textStyle.call(this);
239 var textElm = self.getEl('text');
241 textElm.setAttribute('style', textStyle);
245 return self._super();
249 * Removes the control and it's menus.