4 * Copyright 2009, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://tinymce.moxiecode.com/license
8 * Contributing: http://tinymce.moxiecode.com/contributing
12 var DOM = tinymce.DOM, Event = tinymce.dom.Event, each = tinymce.each;
15 * This class is used to create a UI button. A button is basically a link
16 * that is styled to look like a button or icon.
18 * @class tinymce.ui.MenuButton
19 * @extends tinymce.ui.Control
21 * // Creates a new plugin class and a custom menu button
22 * tinymce.create('tinymce.plugins.ExamplePlugin', {
23 * createControl: function(n, cm) {
25 * case 'mymenubutton':
26 * var c = cm.createSplitButton('mysplitbutton', {
27 * title : 'My menu button',
31 * c.onRenderMenu.add(function(c, m) {
32 * m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
34 * m.add({title : 'Some item 1', onclick : function() {
35 * alert('Some item 1 was clicked.');
38 * m.add({title : 'Some item 2', onclick : function() {
39 * alert('Some item 2 was clicked.');
43 * // Return the new menubutton instance
51 tinymce.create('tinymce.ui.MenuButton:tinymce.ui.Button', {
53 * Constructs a new split button control instance.
57 * @param {String} id Control id for the split button.
58 * @param {Object} s Optional name/value settings object.
59 * @param {Editor} ed Optional the editor instance this button is for.
61 MenuButton : function(id, s, ed) {
62 this.parent(id, s, ed);
65 * Fires when the menu is rendered.
69 this.onRenderMenu = new tinymce.util.Dispatcher(this);
71 s.menu_container = s.menu_container || DOM.doc.body;
79 showMenu : function() {
80 var t = this, p1, p2, e = DOM.get(t.id), m;
85 if (!t.isMenuRendered) {
87 t.isMenuRendered = true;
93 p1 = DOM.getPos(t.settings.menu_container);
97 m.settings.offset_x = p2.x;
98 m.settings.offset_y = p2.y;
99 m.settings.vp_offset_x = p2.x;
100 m.settings.vp_offset_y = p2.y;
101 m.settings.keyboard_focus = t._focused;
102 m.showMenu(0, e.clientHeight);
104 Event.add(DOM.doc, 'mousedown', t.hideMenu, t);
105 t.setState('Selected', 1);
111 * Renders the menu to the DOM.
115 renderMenu : function() {
118 m = t.settings.control_manager.createDropMenu(t.id + '_menu', {
120 'class' : this.classPrefix + 'Menu',
121 icons : t.settings.icons
124 m.onHideMenu.add(function() {
129 t.onRenderMenu.dispatch(t, m);
134 * Hides the menu. The optional event parameter is used to check where the event occured so it
135 * doesn't close them menu if it was a event inside the menu.
138 * @param {Event} e Optional event object.
140 hideMenu : function(e) {
143 // Prevent double toogles by canceling the mouse click event to the button
144 if (e && e.type == "mousedown" && DOM.getParent(e.target, function(e) {return e.id === t.id || e.id === t.id + '_open';}))
147 if (!e || !DOM.getParent(e.target, '.mceMenu')) {
148 t.setState('Selected', 0);
149 Event.remove(DOM.doc, 'mousedown', t.hideMenu, t);
158 * Post render handler. This function will be called after the UI has been
159 * rendered so that events can be added.
163 postRender : function() {
164 var t = this, s = t.settings;
166 Event.add(t.id, 'click', function() {
167 if (!t.isDisabled()) {