include/javascript/tiny_mce/classes/ui/MenuButton.js

   1 /**
   2  * MenuButton.js
   3  *
   4  * Copyright 2009, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://tinymce.moxiecode.com/license
   8  * Contributing: http://tinymce.moxiecode.com/contributing
   9  */
  10
  11 (function(tinymce) {
  12         var DOM = tinymce.DOM, Event = tinymce.dom.Event, each = tinymce.each;
  13
  14         /**
  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.
  17          *
  18          * @class tinymce.ui.MenuButton
  19          * @extends tinymce.ui.Control
  20          * @example
  21          * // Creates a new plugin class and a custom menu button
  22          * tinymce.create('tinymce.plugins.ExamplePlugin', {
  23          *     createControl: function(n, cm) {
  24          *         switch (n) {
  25          *             case 'mymenubutton':
  26          *                 var c = cm.createSplitButton('mysplitbutton', {
  27          *                     title : 'My menu button',
  28          *                     image : 'some.gif'
  29          *                 });
  30          *
  31          *                 c.onRenderMenu.add(function(c, m) {
  32          *                     m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
  33          *
  34          *                     m.add({title : 'Some item 1', onclick : function() {
  35          *                         alert('Some item 1 was clicked.');
  36          *                     }});
  37          *
  38          *                     m.add({title : 'Some item 2', onclick : function() {
  39          *                         alert('Some item 2 was clicked.');
  40          *                     }});
  41          *               });
  42          *
  43          *               // Return the new menubutton instance
  44          *               return c;
  45          *         }
  46          *
  47          *         return null;
  48          *     }
  49          * });
  50          */
  51         tinymce.create('tinymce.ui.MenuButton:tinymce.ui.Button', {
  52                 /**
  53                  * Constructs a new split button control instance.
  54                  *
  55                  * @constructor
  56                  * @method MenuButton
  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.
  60                  */
  61                 MenuButton : function(id, s, ed) {
  62                         this.parent(id, s, ed);
  63
  64                         /**
  65                          * Fires when the menu is rendered.
  66                          *
  67                          * @event onRenderMenu
  68                          */
  69                         this.onRenderMenu = new tinymce.util.Dispatcher(this);
  70
  71                         s.menu_container = s.menu_container || DOM.doc.body;
  72                 },
  73
  74                 /**
  75                  * Shows the menu.
  76                  *
  77                  * @method showMenu
  78                  */
  79                 showMenu : function() {
  80                         var t = this, p1, p2, e = DOM.get(t.id), m;
  81
  82                         if (t.isDisabled())
  83                                 return;
  84
  85                         if (!t.isMenuRendered) {
  86                                 t.renderMenu();
  87                                 t.isMenuRendered = true;
  88                         }
  89
  90                         if (t.isMenuVisible)
  91                                 return t.hideMenu();
  92
  93                         p1 = DOM.getPos(t.settings.menu_container);
  94                         p2 = DOM.getPos(e);
  95
  96                         m = t.menu;
  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);
 103
 104                         Event.add(DOM.doc, 'mousedown', t.hideMenu, t);
 105                         t.setState('Selected', 1);
 106
 107                         t.isMenuVisible = 1;
 108                 },
 109
 110                 /**
 111                  * Renders the menu to the DOM.
 112                  *
 113                  * @method renderMenu
 114                  */
 115                 renderMenu : function() {
 116                         var t = this, m;
 117
 118                         m = t.settings.control_manager.createDropMenu(t.id + '_menu', {
 119                                 menu_line : 1,
 120                                 'class' : this.classPrefix + 'Menu',
 121                                 icons : t.settings.icons
 122                         });
 123
 124                         m.onHideMenu.add(function() {
 125                                 t.hideMenu();
 126                                 t.focus();
 127                         });
 128
 129                         t.onRenderMenu.dispatch(t, m);
 130                         t.menu = m;
 131                 },
 132
 133                 /**
 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.
 136                  *
 137                  * @method hideMenu
 138                  * @param {Event} e Optional event object.
 139                  */
 140                 hideMenu : function(e) {
 141                         var t = this;
 142
 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';}))
 145                                 return;
 146
 147                         if (!e || !DOM.getParent(e.target, '.mceMenu')) {
 148                                 t.setState('Selected', 0);
 149                                 Event.remove(DOM.doc, 'mousedown', t.hideMenu, t);
 150                                 if (t.menu)
 151                                         t.menu.hideMenu();
 152                         }
 153
 154                         t.isMenuVisible = 0;
 155                 },
 156
 157                 /**
 158                  * Post render handler. This function will be called after the UI has been
 159                  * rendered so that events can be added.
 160                  *
 161                  * @method postRender
 162                  */
 163                 postRender : function() {
 164                         var t = this, s = t.settings;
 165
 166                         Event.add(t.id, 'click', function() {
 167                                 if (!t.isDisabled()) {
 168                                         if (s.onclick)
 169                                                 s.onclick(t.value);
 170
 171                                         t.showMenu();
 172                                 }
 173                         });
 174                 }
 175         });
 176 })(tinymce);