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

   1 /**
   2  * Control.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         // Shorten class names
  13         var DOM = tinymce.DOM, is = tinymce.is;
  14
  15         /**
  16          * This class is the base class for all controls like buttons, toolbars, containers. This class should not
  17          * be instantiated directly other controls should inherit from this one.
  18          *
  19          * @class tinymce.ui.Control
  20          */
  21         tinymce.create('tinymce.ui.Control', {
  22                 /**
  23                  * Constructs a new control instance.
  24                  *
  25                  * @constructor
  26                  * @method Control
  27                  * @param {String} id Control id.
  28                  * @param {Object} s Optional name/value settings object.
  29                  */
  30                 Control : function(id, s, editor) {
  31                         this.id = id;
  32                         this.settings = s = s || {};
  33                         this.rendered = false;
  34                         this.onRender = new tinymce.util.Dispatcher(this);
  35                         this.classPrefix = '';
  36                         this.scope = s.scope || this;
  37                         this.disabled = 0;
  38                         this.active = 0;
  39                         this.editor = editor;
  40                 },
  41
  42                 setAriaProperty : function(property, value) {
  43                         var element = DOM.get(this.id + '_aria') || DOM.get(this.id);
  44                         if (element) {
  45                                 DOM.setAttrib(element, 'aria-' + property, !!value);
  46                         }
  47                 },
  48
  49                 focus : function() {
  50                         DOM.get(this.id).focus();
  51                 },
  52
  53                 /**
  54                  * Sets the disabled state for the control. This will add CSS classes to the
  55                  * element that contains the control. So that it can be disabled visually.
  56                  *
  57                  * @method setDisabled
  58                  * @param {Boolean} s Boolean state if the control should be disabled or not.
  59                  */
  60                 setDisabled : function(s) {
  61                         if (s != this.disabled) {
  62                                 this.setAriaProperty('disabled', s);
  63
  64                                 this.setState('Disabled', s);
  65                                 this.setState('Enabled', !s);
  66                                 this.disabled = s;
  67                         }
  68                 },
  69
  70                 /**
  71                  * Returns true/false if the control is disabled or not. This is a method since you can then
  72                  * choose to check some class or some internal bool state in subclasses.
  73                  *
  74                  * @method isDisabled
  75                  * @return {Boolean} true/false if the control is disabled or not.
  76                  */
  77                 isDisabled : function() {
  78                         return this.disabled;
  79                 },
  80
  81                 /**
  82                  * Sets the activated state for the control. This will add CSS classes to the
  83                  * element that contains the control. So that it can be activated visually.
  84                  *
  85                  * @method setActive
  86                  * @param {Boolean} s Boolean state if the control should be activated or not.
  87                  */
  88                 setActive : function(s) {
  89                         if (s != this.active) {
  90                                 this.setState('Active', s);
  91                                 this.active = s;
  92                                 this.setAriaProperty('pressed', s);
  93                         }
  94                 },
  95
  96                 /**
  97                  * Returns true/false if the control is disabled or not. This is a method since you can then
  98                  * choose to check some class or some internal bool state in subclasses.
  99                  *
 100                  * @method isActive
 101                  * @return {Boolean} true/false if the control is disabled or not.
 102                  */
 103                 isActive : function() {
 104                         return this.active;
 105                 },
 106
 107                 /**
 108                  * Sets the specified class state for the control.
 109                  *
 110                  * @method setState
 111                  * @param {String} c Class name to add/remove depending on state.
 112                  * @param {Boolean} s True/false state if the class should be removed or added.
 113                  */
 114                 setState : function(c, s) {
 115                         var n = DOM.get(this.id);
 116
 117                         c = this.classPrefix + c;
 118
 119                         if (s)
 120                                 DOM.addClass(n, c);
 121                         else
 122                                 DOM.removeClass(n, c);
 123                 },
 124
 125                 /**
 126                  * Returns true/false if the control has been rendered or not.
 127                  *
 128                  * @method isRendered
 129                  * @return {Boolean} State if the control has been rendered or not.
 130                  */
 131                 isRendered : function() {
 132                         return this.rendered;
 133                 },
 134
 135                 /**
 136                  * Renders the control as a HTML string. This method is much faster than using the DOM and when
 137                  * creating a whole toolbar with buttons it does make a lot of difference.
 138                  *
 139                  * @method renderHTML
 140                  * @return {String} HTML for the button control element.
 141                  */
 142                 renderHTML : function() {
 143                 },
 144
 145                 /**
 146                  * Renders the control to the specified container element.
 147                  *
 148                  * @method renderTo
 149                  * @param {Element} n HTML DOM element to add control to.
 150                  */
 151                 renderTo : function(n) {
 152                         DOM.setHTML(n, this.renderHTML());
 153                 },
 154
 155                 /**
 156                  * Post render event. This will be executed after the control has been rendered and can be used to
 157                  * set states, add events to the control etc. It's recommended for subclasses of the control to call this method by using this.parent().
 158                  *
 159                  * @method postRender
 160                  */
 161                 postRender : function() {
 162                         var t = this, b;
 163
 164                         // Set pending states
 165                         if (is(t.disabled)) {
 166                                 b = t.disabled;
 167                                 t.disabled = -1;
 168                                 t.setDisabled(b);
 169                         }
 170
 171                         if (is(t.active)) {
 172                                 b = t.active;
 173                                 t.active = -1;
 174                                 t.setActive(b);
 175                         }
 176                 },
 177
 178                 /**
 179                  * Removes the control. This means it will be removed from the DOM and any
 180                  * events tied to it will also be removed.
 181                  *
 182                  * @method remove
 183                  */
 184                 remove : function() {
 185                         DOM.remove(this.id);
 186                         this.destroy();
 187                 },
 188
 189                 /**
 190                  * Destroys the control will free any memory by removing event listeners etc.
 191                  *
 192                  * @method destroy
 193                  */
 194                 destroy : function() {
 195                         tinymce.dom.Event.clear(this.id);
 196                 }
 197         });
 198 })(tinymce);