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

   1 /**
   2  * Button.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;
  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.Button
  19          * @extends tinymce.ui.Control
  20          */
  21         tinymce.create('tinymce.ui.Button:tinymce.ui.Control', {
  22                 /**
  23                  * Constructs a new button control instance.
  24                  *
  25                  * @constructor
  26                  * @method Button
  27                  * @param {String} id Control id for the button.
  28                  * @param {Object} s Optional name/value settings object.
  29                  * @param {Editor} ed Optional the editor instance this button is for.
  30                  */
  31                 Button : function(id, s, ed) {
  32                         this.parent(id, s, ed);
  33                         this.classPrefix = 'mceButton';
  34                 },
  35
  36                 /**
  37                  * Renders the button as a HTML string. This method is much faster than using the DOM and when
  38                  * creating a whole toolbar with buttons it does make a lot of difference.
  39                  *
  40                  * @method renderHTML
  41                  * @return {String} HTML for the button control element.
  42                  */
  43                 renderHTML : function() {
  44                         var cp = this.classPrefix, s = this.settings, h, l;
  45
  46                         l = DOM.encode(s.label || '');
  47                         h = '<a role="button" id="' + this.id + '" href="javascript:;" class="' + cp + ' ' + cp + 'Enabled ' + s['class'] + (l ? ' ' + cp + 'Labeled' : '') +'" onmousedown="return false;" onclick="return false;" aria-labelledby="' + this.id + '_voice" title="' + DOM.encode(s.title) + '">';
  48                         if (s.image && !(this.editor  &&this.editor.forcedHighContrastMode) )
  49                                 h += '<img class="mceIcon" src="' + s.image + '" alt="' + DOM.encode(s.title) + '" />' + l;
  50                         else
  51                                 h += '<span class="mceIcon ' + s['class'] + '"></span>' + (l ? '<span class="' + cp + 'Label">' + l + '</span>' : '');
  52
  53                         h += '<span class="mceVoiceLabel mceIconOnly" style="display: none;" id="' + this.id + '_voice">' + s.title + '</span>';
  54                         h += '</a>';
  55                         return h;
  56                 },
  57
  58                 /**
  59                  * Post render handler. This function will be called after the UI has been
  60                  * rendered so that events can be added.
  61                  *
  62                  * @method postRender
  63                  */
  64                 postRender : function() {
  65                         var t = this, s = t.settings;
  66
  67                         tinymce.dom.Event.add(t.id, 'click', function(e) {
  68                                 if (!t.isDisabled())
  69                                         return s.onclick.call(s.scope, e);
  70                         });
  71                 }
  72         });
  73 })(tinymce);