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

   1 /**
   2  * NativeListBox.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, Dispatcher = tinymce.util.Dispatcher;
  13
  14         /**
  15          * This class is used to create list boxes/select list. This one will generate
  16          * a native control the way that the browser produces them by default.
  17          *
  18          * @class tinymce.ui.NativeListBox
  19          * @extends tinymce.ui.ListBox
  20          */
  21         tinymce.create('tinymce.ui.NativeListBox:tinymce.ui.ListBox', {
  22                 /**
  23                  * Constructs a new button control instance.
  24                  *
  25                  * @constructor
  26                  * @method NativeListBox
  27                  * @param {String} id Button control id for the button.
  28                  * @param {Object} s Optional name/value settings object.
  29                  */
  30                 NativeListBox : function(id, s) {
  31                         this.parent(id, s);
  32                         this.classPrefix = 'mceNativeListBox';
  33                 },
  34
  35                 /**
  36                  * Sets the disabled state for the control. This will add CSS classes to the
  37                  * element that contains the control. So that it can be disabled visually.
  38                  *
  39                  * @method setDisabled
  40                  * @param {Boolean} s Boolean state if the control should be disabled or not.
  41                  */
  42                 setDisabled : function(s) {
  43                         DOM.get(this.id).disabled = s;
  44                         this.setAriaProperty('disabled', s);
  45                 },
  46
  47                 /**
  48                  * Returns true/false if the control is disabled or not. This is a method since you can then
  49                  * choose to check some class or some internal bool state in subclasses.
  50                  *
  51                  * @method isDisabled
  52                  * @return {Boolean} true/false if the control is disabled or not.
  53                  */
  54                 isDisabled : function() {
  55                         return DOM.get(this.id).disabled;
  56                 },
  57
  58                 /**
  59                  * Selects a item/option by value. This will both add a visual selection to the
  60                  * item and change the title of the control to the title of the option.
  61                  *
  62                  * @method select
  63                  * @param {String/function} va Value to look for inside the list box or a function selector.
  64                  */
  65                 select : function(va) {
  66                         var t = this, fv, f;
  67
  68                         if (va == undefined)
  69                                 return t.selectByIndex(-1);
  70
  71                         // Is string or number make function selector
  72                         if (va && va.call)
  73                                 f = va;
  74                         else {
  75                                 f = function(v) {
  76                                         return v == va;
  77                                 };
  78                         }
  79
  80                         // Do we need to do something?
  81                         if (va != t.selectedValue) {
  82                                 // Find item
  83                                 each(t.items, function(o, i) {
  84                                         if (f(o.value)) {
  85                                                 fv = 1;
  86                                                 t.selectByIndex(i);
  87                                                 return false;
  88                                         }
  89                                 });
  90
  91                                 if (!fv)
  92                                         t.selectByIndex(-1);
  93                         }
  94                 },
  95
  96                 /**
  97                  * Selects a item/option by index. This will both add a visual selection to the
  98                  * item and change the title of the control to the title of the option.
  99                  *
 100                  * @method selectByIndex
 101                  * @param {String} idx Index to select, pass -1 to select menu/title of select box.
 102                  */
 103                 selectByIndex : function(idx) {
 104                         DOM.get(this.id).selectedIndex = idx + 1;
 105                         this.selectedValue = this.items[idx] ? this.items[idx].value : null;
 106                 },
 107
 108                 /**
 109                  * Adds a option item to the list box.
 110                  *
 111                  * @method add
 112                  * @param {String} n Title for the new option.
 113                  * @param {String} v Value for the new option.
 114                  * @param {Object} o Optional object with settings like for example class.
 115                  */
 116                 add : function(n, v, a) {
 117                         var o, t = this;
 118
 119                         a = a || {};
 120                         a.value = v;
 121
 122                         if (t.isRendered())
 123                                 DOM.add(DOM.get(this.id), 'option', a, n);
 124
 125                         o = {
 126                                 title : n,
 127                                 value : v,
 128                                 attribs : a
 129                         };
 130
 131                         t.items.push(o);
 132                         t.onAdd.dispatch(t, o);
 133                 },
 134
 135                 /**
 136                  * Executes the specified callback function for the menu item. In this case when the user clicks the menu item.
 137                  *
 138                  * @method getLength
 139                  */
 140                 getLength : function() {
 141                         return this.items.length;
 142                 },
 143
 144                 /**
 145                  * Renders the list box as a HTML string. This method is much faster than using the DOM and when
 146                  * creating a whole toolbar with buttons it does make a lot of difference.
 147                  *
 148                  * @method renderHTML
 149                  * @return {String} HTML for the list box control element.
 150                  */
 151                 renderHTML : function() {
 152                         var h, t = this;
 153
 154                         h = DOM.createHTML('option', {value : ''}, '-- ' + t.settings.title + ' --');
 155
 156                         each(t.items, function(it) {
 157                                 h += DOM.createHTML('option', {value : it.value}, it.title);
 158                         });
 159
 160                         h = DOM.createHTML('select', {id : t.id, 'class' : 'mceNativeListBox', 'aria-labelledby': t.id + '_aria'}, h);
 161                         h += DOM.createHTML('span', {id : t.id + '_aria', 'style': 'display: none'}, t.settings.title);
 162                         return h;
 163                 },
 164
 165                 /**
 166                  * Post render handler. This function will be called after the UI has been
 167                  * rendered so that events can be added.
 168                  *
 169                  * @method postRender
 170                  */
 171                 postRender : function() {
 172                         var t = this, ch, changeListenerAdded = true;
 173
 174                         t.rendered = true;
 175
 176                         function onChange(e) {
 177                                 var v = t.items[e.target.selectedIndex - 1];
 178
 179                                 if (v && (v = v.value)) {
 180                                         t.onChange.dispatch(t, v);
 181
 182                                         if (t.settings.onselect)
 183                                                 t.settings.onselect(v);
 184                                 }
 185                         };
 186
 187                         Event.add(t.id, 'change', onChange);
 188
 189                         // Accessibility keyhandler
 190                         Event.add(t.id, 'keydown', function(e) {
 191                                 var bf;
 192
 193                                 Event.remove(t.id, 'change', ch);
 194                                 changeListenerAdded = false;
 195
 196                                 bf = Event.add(t.id, 'blur', function() {
 197                                         if (changeListenerAdded) return;
 198                                         changeListenerAdded = true;
 199                                         Event.add(t.id, 'change', onChange);
 200                                         Event.remove(t.id, 'blur', bf);
 201                                 });
 202
 203                                 if (e.keyCode == 13 || e.keyCode == 32) {
 204                                         onChange(e);
 205                                         return Event.cancel(e);
 206                                 }
 207                         });
 208
 209                         t.onPostRender.dispatch(t, DOM.get(t.id));
 210                 }
 211         });
 212 })(tinymce);