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

   1 /**
   2  * SplitButton.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 split button. A button with a menu attached to it.
  16          *
  17          * @class tinymce.ui.SplitButton
  18          * @extends tinymce.ui.Button
  19          * @example
  20          * // Creates a new plugin class and a custom split button
  21          * tinymce.create('tinymce.plugins.ExamplePlugin', {
  22          *     createControl: function(n, cm) {
  23          *         switch (n) {
  24          *             case 'mysplitbutton':
  25          *                 var c = cm.createSplitButton('mysplitbutton', {
  26          *                     title : 'My split button',
  27          *                     image : 'some.gif',
  28          *                     onclick : function() {
  29          *                         alert('Button was clicked.');
  30          *                     }
  31          *                 });
  32          *
  33          *                 c.onRenderMenu.add(function(c, m) {
  34          *                     m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
  35          *
  36          *                     m.add({title : 'Some item 1', onclick : function() {
  37          *                         alert('Some item 1 was clicked.');
  38          *                     }});
  39          *
  40          *                     m.add({title : 'Some item 2', onclick : function() {
  41          *                         alert('Some item 2 was clicked.');
  42          *                     }});
  43          *                 });
  44          *
  45          *               // Return the new splitbutton instance
  46          *               return c;
  47          *         }
  48          *
  49          *         return null;
  50          *     }
  51          * });
  52          */
  53         tinymce.create('tinymce.ui.SplitButton:tinymce.ui.MenuButton', {
  54                 /**
  55                  * Constructs a new split button control instance.
  56                  *
  57                  * @constructor
  58                  * @method SplitButton
  59                  * @param {String} id Control id for the split button.
  60                  * @param {Object} s Optional name/value settings object.
  61                  * @param {Editor} ed Optional the editor instance this button is for.
  62                  */
  63                 SplitButton : function(id, s, ed) {
  64                         this.parent(id, s, ed);
  65                         this.classPrefix = 'mceSplitButton';
  66                 },
  67
  68                 /**
  69                  * Renders the split button as a HTML string. This method is much faster than using the DOM and when
  70                  * creating a whole toolbar with buttons it does make a lot of difference.
  71                  *
  72                  * @method renderHTML
  73                  * @return {String} HTML for the split button control element.
  74                  */
  75                 renderHTML : function() {
  76                         var h, t = this, s = t.settings, h1;
  77
  78                         h = '<tbody><tr>';
  79
  80                         if (s.image)
  81                                 h1 = DOM.createHTML('img ', {src : s.image, role: 'presentation', 'class' : 'mceAction ' + s['class']});
  82                         else
  83                                 h1 = DOM.createHTML('span', {'class' : 'mceAction ' + s['class']}, '');
  84
  85                         h1 += DOM.createHTML('span', {'class': 'mceVoiceLabel mceIconOnly', id: t.id + '_voice', style: 'display:none;'}, s.title);
  86                         h += '<td >' + DOM.createHTML('a', {role: 'button', id : t.id + '_action', tabindex: '-1', href : 'javascript:;', 'class' : 'mceAction ' + s['class'], onclick : "return false;", onmousedown : 'return false;', title : s.title}, h1) + '</td>';
  87
  88                         h1 = DOM.createHTML('span', {'class' : 'mceOpen ' + s['class']}, '<span style="display:none;" class="mceIconOnly" aria-hidden="true">\u25BC</span>');
  89                         h += '<td >' + DOM.createHTML('a', {role: 'button', id : t.id + '_open', tabindex: '-1', href : 'javascript:;', 'class' : 'mceOpen ' + s['class'], onclick : "return false;", onmousedown : 'return false;', title : s.title}, h1) + '</td>';
  90
  91                         h += '</tr></tbody>';
  92                         h = DOM.createHTML('table', {id : t.id, role: 'presentation', tabindex: '0',  'class' : 'mceSplitButton mceSplitButtonEnabled ' + s['class'], cellpadding : '0', cellspacing : '0', title : s.title}, h);
  93                         return DOM.createHTML('span', {role: 'button', 'aria-labelledby': t.id + '_voice', 'aria-haspopup': 'true'}, h);
  94                 },
  95
  96                 /**
  97                  * Post render handler. This function will be called after the UI has been
  98                  * rendered so that events can be added.
  99                  *
 100                  * @method postRender
 101                  */
 102                 postRender : function() {
 103                         var t = this, s = t.settings, activate;
 104
 105                         if (s.onclick) {
 106                                 activate = function(evt) {
 107                                         if (!t.isDisabled()) {
 108                                                 s.onclick(t.value);
 109                                                 Event.cancel(evt);
 110                                         }
 111                                 };
 112                                 Event.add(t.id + '_action', 'click', activate);
 113                                 Event.add(t.id, ['click', 'keydown'], function(evt) {
 114                                         var DOM_VK_SPACE = 32, DOM_VK_ENTER = 14, DOM_VK_RETURN = 13, DOM_VK_UP = 38, DOM_VK_DOWN = 40;
 115                                         if ((evt.keyCode === 32 || evt.keyCode === 13 || evt.keyCode === 14) && !evt.altKey && !evt.ctrlKey && !evt.metaKey) {
 116                                                 activate();
 117                                                 Event.cancel(evt);
 118                                         } else if (evt.type === 'click' || evt.keyCode === DOM_VK_DOWN) {
 119                                                 t.showMenu();
 120                                                 Event.cancel(evt);
 121                                         }
 122                                 });
 123                         }
 124
 125                         Event.add(t.id + '_open', 'click', function (evt) {
 126                                 t.showMenu();
 127                                 Event.cancel(evt);
 128                         });
 129                         Event.add([t.id, t.id + '_open'], 'focus', function() {t._focused = 1;});
 130                         Event.add([t.id, t.id + '_open'], 'blur', function() {t._focused = 0;});
 131
 132                         // Old IE doesn't have hover on all elements
 133                         if (tinymce.isIE6 || !DOM.boxModel) {
 134                                 Event.add(t.id, 'mouseover', function() {
 135                                         if (!DOM.hasClass(t.id, 'mceSplitButtonDisabled'))
 136                                                 DOM.addClass(t.id, 'mceSplitButtonHover');
 137                                 });
 138
 139                                 Event.add(t.id, 'mouseout', function() {
 140                                         if (!DOM.hasClass(t.id, 'mceSplitButtonDisabled'))
 141                                                 DOM.removeClass(t.id, 'mceSplitButtonHover');
 142                                 });
 143                         }
 144                 },
 145
 146                 destroy : function() {
 147                         this.parent();
 148
 149                         Event.clear(this.id + '_action');
 150                         Event.clear(this.id + '_open');
 151                         Event.clear(this.id);
 152                 }
 153         });
 154 })(tinymce);