include/javascript/tiny_mce/classes/ControlManager.js

   1 /**
   2  * ControlManager.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 names
  13         var DOM = tinymce.DOM, Event = tinymce.dom.Event, each = tinymce.each, extend = tinymce.extend;
  14
  15         /**
  16          * This class is responsible for managing UI control instances. It's both a factory and a collection for the controls.
  17          * @class tinymce.ControlManager
  18          */
  19         tinymce.create('tinymce.ControlManager', {
  20                 /**
  21                  * Constructs a new control manager instance.
  22                  * Consult the Wiki for more details on this class.
  23                  *
  24                  * @constructor
  25                  * @method ControlManager
  26                  * @param {tinymce.Editor} ed TinyMCE editor instance to add the control to.
  27                  * @param {Object} s Optional settings object for the control manager.
  28                  */
  29                 ControlManager : function(ed, s) {
  30                         var t = this, i;
  31
  32                         s = s || {};
  33                         t.editor = ed;
  34                         t.controls = {};
  35                         t.onAdd = new tinymce.util.Dispatcher(t);
  36                         t.onPostRender = new tinymce.util.Dispatcher(t);
  37                         t.prefix = s.prefix || ed.id + '_';
  38                         t._cls = {};
  39
  40                         t.onPostRender.add(function() {
  41                                 each(t.controls, function(c) {
  42                                         c.postRender();
  43                                 });
  44                         });
  45                 },
  46
  47                 /**
  48                  * Returns a control by id or undefined it it wasn't found.
  49                  *
  50                  * @method get
  51                  * @param {String} id Control instance name.
  52                  * @return {tinymce.ui.Control} Control instance or undefined.
  53                  */
  54                 get : function(id) {
  55                         return this.controls[this.prefix + id] || this.controls[id];
  56                 },
  57
  58                 /**
  59                  * Sets the active state of a control by id.
  60                  *
  61                  * @method setActive
  62                  * @param {String} id Control id to set state on.
  63                  * @param {Boolean} s Active state true/false.
  64                  * @return {tinymce.ui.Control} Control instance that got activated or null if it wasn't found.
  65                  */
  66                 setActive : function(id, s) {
  67                         var c = null;
  68
  69                         if (c = this.get(id))
  70                                 c.setActive(s);
  71
  72                         return c;
  73                 },
  74
  75                 /**
  76                  * Sets the dsiabled state of a control by id.
  77                  *
  78                  * @method setDisabled
  79                  * @param {String} id Control id to set state on.
  80                  * @param {Boolean} s Active state true/false.
  81                  * @return {tinymce.ui.Control} Control instance that got disabled or null if it wasn't found.
  82                  */
  83                 setDisabled : function(id, s) {
  84                         var c = null;
  85
  86                         if (c = this.get(id))
  87                                 c.setDisabled(s);
  88
  89                         return c;
  90                 },
  91
  92                 /**
  93                  * Adds a control to the control collection inside the manager.
  94                  *
  95                  * @method add
  96                  * @param {tinymce.ui.Control} Control instance to add to collection.
  97                  * @return {tinymce.ui.Control} Control instance that got passed in.
  98                  */
  99                 add : function(c) {
 100                         var t = this;
 101
 102                         if (c) {
 103                                 t.controls[c.id] = c;
 104                                 t.onAdd.dispatch(c, t);
 105                         }
 106
 107                         return c;
 108                 },
 109
 110                 /**
 111                  * Creates a control by name, when a control is created it will automatically add it to the control collection.
 112                  * It first ask all plugins for the specified control if the plugins didn't return a control then the default behavior
 113                  * will be used.
 114                  *
 115                  * @method createControl
 116                  * @param {String} n Control name to create for example "separator".
 117                  * @return {tinymce.ui.Control} Control instance that got created and added.
 118                  */
 119                 createControl : function(n) {
 120                         var c, t = this, ed = t.editor;
 121
 122                         each(ed.plugins, function(p) {
 123                                 if (p.createControl) {
 124                                         c = p.createControl(n, t);
 125
 126                                         if (c)
 127                                                 return false;
 128                                 }
 129                         });
 130
 131                         switch (n) {
 132                                 case "|":
 133                                 case "separator":
 134                                         return t.createSeparator();
 135                         }
 136
 137                         if (!c && ed.buttons && (c = ed.buttons[n]))
 138                                 return t.createButton(n, c);
 139
 140                         return t.add(c);
 141                 },
 142
 143                 /**
 144                  * Creates a drop menu control instance by id.
 145                  *
 146                  * @method createDropMenu
 147                  * @param {String} id Unique id for the new dropdown instance. For example "some menu".
 148                  * @param {Object} s Optional settings object for the control.
 149                  * @param {Object} cc Optional control class to use instead of the default one.
 150                  * @return {tinymce.ui.Control} Control instance that got created and added.
 151                  */
 152                 createDropMenu : function(id, s, cc) {
 153                         var t = this, ed = t.editor, c, bm, v, cls;
 154
 155                         s = extend({
 156                                 'class' : 'mceDropDown',
 157                                 constrain : ed.settings.constrain_menus
 158                         }, s);
 159
 160                         s['class'] = s['class'] + ' ' + ed.getParam('skin') + 'Skin';
 161                         if (v = ed.getParam('skin_variant'))
 162                                 s['class'] += ' ' + ed.getParam('skin') + 'Skin' + v.substring(0, 1).toUpperCase() + v.substring(1);
 163
 164                         id = t.prefix + id;
 165                         cls = cc || t._cls.dropmenu || tinymce.ui.DropMenu;
 166                         c = t.controls[id] = new cls(id, s);
 167                         c.onAddItem.add(function(c, o) {
 168                                 var s = o.settings;
 169
 170                                 s.title = ed.getLang(s.title, s.title);
 171
 172                                 if (!s.onclick) {
 173                                         s.onclick = function(v) {
 174                                                 if (s.cmd)
 175                                                         ed.execCommand(s.cmd, s.ui || false, s.value);
 176                                         };
 177                                 }
 178                         });
 179
 180                         ed.onRemove.add(function() {
 181                                 c.destroy();
 182                         });
 183
 184                         // Fix for bug #1897785, #1898007
 185                         if (tinymce.isIE) {
 186                                 c.onShowMenu.add(function() {
 187                                         // IE 8 needs focus in order to store away a range with the current collapsed caret location
 188                                         ed.focus();
 189
 190                                         bm = ed.selection.getBookmark(1);
 191                                 });
 192
 193                                 c.onHideMenu.add(function() {
 194                                         if (bm) {
 195                                                 ed.selection.moveToBookmark(bm);
 196                                                 bm = 0;
 197                                         }
 198                                 });
 199                         }
 200
 201                         return t.add(c);
 202                 },
 203
 204                 /**
 205                  * Creates a list box control instance by id. A list box is either a native select element or a DOM/JS based list box control. This
 206                  * depends on the use_native_selects settings state.
 207                  *
 208                  * @method createListBox
 209                  * @param {String} id Unique id for the new listbox instance. For example "styles".
 210                  * @param {Object} s Optional settings object for the control.
 211                  * @param {Object} cc Optional control class to use instead of the default one.
 212                  * @return {tinymce.ui.Control} Control instance that got created and added.
 213                  */
 214                 createListBox : function(id, s, cc) {
 215                         var t = this, ed = t.editor, cmd, c, cls;
 216
 217                         if (t.get(id))
 218                                 return null;
 219
 220                         s.title = ed.translate(s.title);
 221                         s.scope = s.scope || ed;
 222
 223                         if (!s.onselect) {
 224                                 s.onselect = function(v) {
 225                                         ed.execCommand(s.cmd, s.ui || false, v || s.value);
 226                                 };
 227                         }
 228
 229                         s = extend({
 230                                 title : s.title,
 231                                 'class' : 'mce_' + id,
 232                                 scope : s.scope,
 233                                 control_manager : t
 234                         }, s);
 235
 236                         id = t.prefix + id;
 237
 238                         if (ed.settings.use_native_selects)
 239                                 c = new tinymce.ui.NativeListBox(id, s);
 240                         else {
 241                                 cls = cc || t._cls.listbox || tinymce.ui.ListBox;
 242                                 c = new cls(id, s, ed);
 243                         }
 244
 245                         t.controls[id] = c;
 246
 247                         // Fix focus problem in Safari
 248                         if (tinymce.isWebKit) {
 249                                 c.onPostRender.add(function(c, n) {
 250                                         // Store bookmark on mousedown
 251                                         Event.add(n, 'mousedown', function() {
 252                                                 ed.bookmark = ed.selection.getBookmark(1);
 253                                         });
 254
 255                                         // Restore on focus, since it might be lost
 256                                         Event.add(n, 'focus', function() {
 257                                                 ed.selection.moveToBookmark(ed.bookmark);
 258                                                 ed.bookmark = null;
 259                                         });
 260                                 });
 261                         }
 262
 263                         if (c.hideMenu)
 264                                 ed.onMouseDown.add(c.hideMenu, c);
 265
 266                         return t.add(c);
 267                 },
 268
 269                 /**
 270                  * Creates a button control instance by id.
 271                  *
 272                  * @method createButton
 273                  * @param {String} id Unique id for the new button instance. For example "bold".
 274                  * @param {Object} s Optional settings object for the control.
 275                  * @param {Object} cc Optional control class to use instead of the default one.
 276                  * @return {tinymce.ui.Control} Control instance that got created and added.
 277                  */
 278                 createButton : function(id, s, cc) {
 279                         var t = this, ed = t.editor, o, c, cls;
 280
 281                         if (t.get(id))
 282                                 return null;
 283
 284                         s.title = ed.translate(s.title);
 285                         s.label = ed.translate(s.label);
 286                         s.scope = s.scope || ed;
 287
 288                         if (!s.onclick && !s.menu_button) {
 289                                 s.onclick = function() {
 290                                         ed.execCommand(s.cmd, s.ui || false, s.value);
 291                                 };
 292                         }
 293
 294                         s = extend({
 295                                 title : s.title,
 296                                 'class' : 'mce_' + id,
 297                                 unavailable_prefix : ed.getLang('unavailable', ''),
 298                                 scope : s.scope,
 299                                 control_manager : t
 300                         }, s);
 301
 302                         id = t.prefix + id;
 303
 304                         if (s.menu_button) {
 305                                 cls = cc || t._cls.menubutton || tinymce.ui.MenuButton;
 306                                 c = new cls(id, s, ed);
 307                                 ed.onMouseDown.add(c.hideMenu, c);
 308                         } else {
 309                                 cls = t._cls.button || tinymce.ui.Button;
 310                                 c = new cls(id, s, ed);
 311                         }
 312
 313                         return t.add(c);
 314                 },
 315
 316                 /**
 317                  * Creates a menu button control instance by id.
 318                  *
 319                  * @method createMenuButton
 320                  * @param {String} id Unique id for the new menu button instance. For example "menu1".
 321                  * @param {Object} s Optional settings object for the control.
 322                  * @param {Object} cc Optional control class to use instead of the default one.
 323                  * @return {tinymce.ui.Control} Control instance that got created and added.
 324                  */
 325                 createMenuButton : function(id, s, cc) {
 326                         s = s || {};
 327                         s.menu_button = 1;
 328
 329                         return this.createButton(id, s, cc);
 330                 },
 331
 332                 /**
 333                  * Creates a split button control instance by id.
 334                  *
 335                  * @method createSplitButton
 336                  * @param {String} id Unique id for the new split button instance. For example "spellchecker".
 337                  * @param {Object} s Optional settings object for the control.
 338                  * @param {Object} cc Optional control class to use instead of the default one.
 339                  * @return {tinymce.ui.Control} Control instance that got created and added.
 340                  */
 341                 createSplitButton : function(id, s, cc) {
 342                         var t = this, ed = t.editor, cmd, c, cls;
 343
 344                         if (t.get(id))
 345                                 return null;
 346
 347                         s.title = ed.translate(s.title);
 348                         s.scope = s.scope || ed;
 349
 350                         if (!s.onclick) {
 351                                 s.onclick = function(v) {
 352                                         ed.execCommand(s.cmd, s.ui || false, v || s.value);
 353                                 };
 354                         }
 355
 356                         if (!s.onselect) {
 357                                 s.onselect = function(v) {
 358                                         ed.execCommand(s.cmd, s.ui || false, v || s.value);
 359                                 };
 360                         }
 361
 362                         s = extend({
 363                                 title : s.title,
 364                                 'class' : 'mce_' + id,
 365                                 scope : s.scope,
 366                                 control_manager : t
 367                         }, s);
 368
 369                         id = t.prefix + id;
 370                         cls = cc || t._cls.splitbutton || tinymce.ui.SplitButton;
 371                         c = t.add(new cls(id, s, ed));
 372                         ed.onMouseDown.add(c.hideMenu, c);
 373
 374                         return c;
 375                 },
 376
 377                 /**
 378                  * Creates a color split button control instance by id.
 379                  *
 380                  * @method createColorSplitButton
 381                  * @param {String} id Unique id for the new color split button instance. For example "forecolor".
 382                  * @param {Object} s Optional settings object for the control.
 383                  * @param {Object} cc Optional control class to use instead of the default one.
 384                  * @return {tinymce.ui.Control} Control instance that got created and added.
 385                  */
 386                 createColorSplitButton : function(id, s, cc) {
 387                         var t = this, ed = t.editor, cmd, c, cls, bm;
 388
 389                         if (t.get(id))
 390                                 return null;
 391
 392                         s.title = ed.translate(s.title);
 393                         s.scope = s.scope || ed;
 394
 395                         if (!s.onclick) {
 396                                 s.onclick = function(v) {
 397                                         if (tinymce.isIE)
 398                                                 bm = ed.selection.getBookmark(1);
 399
 400                                         ed.execCommand(s.cmd, s.ui || false, v || s.value);
 401                                 };
 402                         }
 403
 404                         if (!s.onselect) {
 405                                 s.onselect = function(v) {
 406                                         ed.execCommand(s.cmd, s.ui || false, v || s.value);
 407                                 };
 408                         }
 409
 410                         s = extend({
 411                                 title : s.title,
 412                                 'class' : 'mce_' + id,
 413                                 'menu_class' : ed.getParam('skin') + 'Skin',
 414                                 scope : s.scope,
 415                                 more_colors_title : ed.getLang('more_colors')
 416                         }, s);
 417
 418                         id = t.prefix + id;
 419                         cls = cc || t._cls.colorsplitbutton || tinymce.ui.ColorSplitButton;
 420                         c = new cls(id, s, ed);
 421                         ed.onMouseDown.add(c.hideMenu, c);
 422
 423                         // Remove the menu element when the editor is removed
 424                         ed.onRemove.add(function() {
 425                                 c.destroy();
 426                         });
 427
 428                         // Fix for bug #1897785, #1898007
 429                         if (tinymce.isIE) {
 430                                 c.onShowMenu.add(function() {
 431                                         // IE 8 needs focus in order to store away a range with the current collapsed caret location
 432                                         ed.focus();
 433                                         bm = ed.selection.getBookmark(1);
 434                                 });
 435
 436                                 c.onHideMenu.add(function() {
 437                                         if (bm) {
 438                                                 ed.selection.moveToBookmark(bm);
 439                                                 bm = 0;
 440                                         }
 441                                 });
 442                         }
 443
 444                         return t.add(c);
 445                 },
 446
 447                 /**
 448                  * Creates a toolbar container control instance by id.
 449                  *
 450                  * @method createToolbar
 451                  * @param {String} id Unique id for the new toolbar container control instance. For example "toolbar1".
 452                  * @param {Object} s Optional settings object for the control.
 453                  * @param {Object} cc Optional control class to use instead of the default one.
 454                  * @return {tinymce.ui.Control} Control instance that got created and added.
 455                  */
 456                 createToolbar : function(id, s, cc) {
 457                         var c, t = this, cls;
 458
 459                         id = t.prefix + id;
 460                         cls = cc || t._cls.toolbar || tinymce.ui.Toolbar;
 461                         c = new cls(id, s, t.editor);
 462
 463                         if (t.get(id))
 464                                 return null;
 465
 466                         return t.add(c);
 467                 },
 468
 469                 createToolbarGroup : function(id, s, cc) {
 470                         var c, t = this, cls;
 471                         id = t.prefix + id;
 472                         cls = cc || this._cls.toolbarGroup || tinymce.ui.ToolbarGroup;
 473                         c = new cls(id, s, t.editor);
 474
 475                         if (t.get(id))
 476                                 return null;
 477
 478                         return t.add(c);
 479                 },
 480
 481                 /**
 482                  * Creates a separator control instance.
 483                  *
 484                  * @method createSeparator
 485                  * @param {Object} cc Optional control class to use instead of the default one.
 486                  * @return {tinymce.ui.Control} Control instance that got created and added.
 487                  */
 488                 createSeparator : function(cc) {
 489                         var cls = cc || this._cls.separator || tinymce.ui.Separator;
 490
 491                         return new cls();
 492                 },
 493
 494                 /**
 495                  * Overrides a specific control type with a custom class.
 496                  *
 497                  * @method setControlType
 498                  * @param {string} n Name of the control to override for example button or dropmenu.
 499                  * @param {function} c Class reference to use instead of the default one.
 500                  * @return {function} Same as the class reference.
 501                  */
 502                 setControlType : function(n, c) {
 503                         return this._cls[n.toLowerCase()] = c;
 504                 },
 505
 506                 /**
 507                  * Destroy.
 508                  *
 509                  * @method destroy
 510                  */
 511                 destroy : function() {
 512                         each(this.controls, function(c) {
 513                                 c.destroy();
 514                         });
 515
 516                         this.controls = null;
 517                 }
 518         });
 519 })(tinymce);