[Summary view] [Print] [Text view]

   1  /**
   2   * popup.js
   3   *
   4   * An altered version of tinyMCEPopup to work in the same window as tinymce.
   5   *
   6   * ------------------------------------------------------------------
   7   *
   8   * Copyright 2009, Moxiecode Systems AB
   9   * Released under LGPL License.
  10   *
  11   * License: http://tinymce.moxiecode.com/license
  12   * Contributing: http://tinymce.moxiecode.com/contributing
  13   */
  14  
  15  // Some global instances
  16  
  17  /**
  18   * TinyMCE popup/dialog helper class. This gives you easy access to the
  19   * parent editor instance and a bunch of other things. It's higly recommended
  20   * that you load this script into your dialogs.
  21   *
  22   * @static
  23   * @class tinyMCEPopup
  24   */
  25  var tinyMCEPopup = {
  26      /**
  27       * Initializes the popup this will be called automatically.
  28       *
  29       * @method init
  30       */
  31      init : function() {
  32          var t = this, w, ti;
  33  
  34          // Find window & API
  35          w = t.getWin();
  36          tinymce = w.tinymce;
  37          tinyMCE = w.tinyMCE;
  38          t.editor = tinymce.EditorManager.activeEditor;
  39          t.params = t.editor.windowManager.params;
  40          t.features = t.editor.windowManager.features;
  41          t.dom = tinymce.dom;
  42  
  43          // Setup on init listeners
  44          t.listeners = [];
  45          t.onInit = {
  46              add : function(f, s) {
  47                  t.listeners.push({func : f, scope : s});
  48              }
  49          };
  50  
  51          t.isWindow = false;
  52          t.id = t.features.id;
  53          t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
  54      },
  55  
  56      /**
  57       * Returns the reference to the parent window that opened the dialog.
  58       *
  59       * @method getWin
  60       * @return {Window} Reference to the parent window that opened the dialog.
  61       */
  62      getWin : function() {
  63          return window;
  64      },
  65  
  66      /**
  67       * Returns a window argument/parameter by name.
  68       *
  69       * @method getWindowArg
  70       * @param {String} n Name of the window argument to retrieve.
  71       * @param {String} dv Optional default value to return.
  72       * @return {String} Argument value or default value if it wasn't found.
  73       */
  74      getWindowArg : function(n, dv) {
  75          var v = this.params[n];
  76  
  77          return tinymce.is(v) ? v : dv;
  78      },
  79  
  80      /**
  81       * Returns a editor parameter/config option value.
  82       *
  83       * @method getParam
  84       * @param {String} n Name of the editor config option to retrieve.
  85       * @param {String} dv Optional default value to return.
  86       * @return {String} Parameter value or default value if it wasn't found.
  87       */
  88      getParam : function(n, dv) {
  89          return this.editor.getParam(n, dv);
  90      },
  91  
  92      /**
  93       * Returns a language item by key.
  94       *
  95       * @method getLang
  96       * @param {String} n Language item like mydialog.something.
  97       * @param {String} dv Optional default value to return.
  98       * @return {String} Language value for the item like "my string" or the default value if it wasn't found.
  99       */
 100      getLang : function(n, dv) {
 101          return this.editor.getLang(n, dv);
 102      },
 103  
 104      /**
 105       * Executed a command on editor that opened the dialog/popup.
 106       *
 107       * @method execCommand
 108       * @param {String} cmd Command to execute.
 109       * @param {Boolean} ui Optional boolean value if the UI for the command should be presented or not.
 110       * @param {Object} val Optional value to pass with the comman like an URL.
 111       * @param {Object} a Optional arguments object.
 112       */
 113      execCommand : function(cmd, ui, val, a) {
 114          a = a || {};
 115          a.skip_focus = 1;
 116  
 117          this.restoreSelection();
 118          return this.editor.execCommand(cmd, ui, val, a);
 119      },
 120  
 121      /**
 122       * Resizes the dialog to the inner size of the window. This is needed since various browsers
 123       * have different border sizes on windows.
 124       *
 125       * @method resizeToInnerSize
 126       */
 127      resizeToInnerSize : function() {
 128          var t = this;
 129  
 130          // Detach it to workaround a Chrome specific bug
 131          // https://sourceforge.net/tracker/?func=detail&atid=635682&aid=2926339&group_id=103281
 132          setTimeout(function() {
 133              var vp = t.dom.getViewPort(window);
 134  
 135              t.editor.windowManager.resizeBy(
 136                  t.getWindowArg('mce_width') - vp.w,
 137                  t.getWindowArg('mce_height') - vp.h,
 138                  t.id || window
 139              );
 140          }, 0);
 141      },
 142  
 143      /**
 144       * Will executed the specified string when the page has been loaded. This function
 145       * was added for compatibility with the 2.x branch.
 146       *
 147       * @method executeOnLoad
 148       * @param {String} s String to evalutate on init.
 149       */
 150      executeOnLoad : function(s) {
 151          this.onInit.add(function() {
 152              eval(s);
 153          });
 154      },
 155  
 156      /**
 157       * Stores the current editor selection for later restoration. This can be useful since some browsers
 158       * looses it's selection if a control element is selected/focused inside the dialogs.
 159       *
 160       * @method storeSelection
 161       */
 162      storeSelection : function() {
 163          this.editor.windowManager.bookmark = tinyMCEPopup.editor.selection.getBookmark(1);
 164      },
 165  
 166      /**
 167       * Restores any stored selection. This can be useful since some browsers
 168       * looses it's selection if a control element is selected/focused inside the dialogs.
 169       *
 170       * @method restoreSelection
 171       */
 172      restoreSelection : function() {
 173          var t = tinyMCEPopup;
 174  
 175          if (!t.isWindow && tinymce.isIE)
 176              t.editor.selection.moveToBookmark(t.editor.windowManager.bookmark);
 177      },
 178  
 179      /**
 180       * Loads a specific dialog language pack. If you pass in plugin_url as a arugment
 181       * when you open the window it will load the <plugin url>/langs/<code>_dlg.js lang pack file.
 182       *
 183       * @method requireLangPack
 184       */
 185      requireLangPack : function() {
 186          var t = this, u = t.getWindowArg('plugin_url') || t.getWindowArg('theme_url');
 187  
 188          if (u && t.editor.settings.language && t.features.translate_i18n !== false) {
 189              u += '/langs/' + t.editor.settings.language + '_dlg.js';
 190  
 191              if (!tinymce.ScriptLoader.isDone(u)) {
 192                  document.write('<script type="text/javascript" src="' + tinymce._addVer(u) + '"></script>');
 193                  tinymce.ScriptLoader.markDone(u);
 194              }
 195          }
 196      },
 197  
 198      /**
 199       * Executes a color picker on the specified element id. When the user
 200       * then selects a color it will be set as the value of the specified element.
 201       *
 202       * @method pickColor
 203       * @param {DOMEvent} e DOM event object.
 204       * @param {string} element_id Element id to be filled with the color value from the picker.
 205       */
 206      pickColor : function(e, element_id) {
 207          this.execCommand('mceColorPicker', true, {
 208              color : document.getElementById(element_id).value,
 209              func : function(c) {
 210                  document.getElementById(element_id).value = c;
 211  
 212                  try {
 213                      document.getElementById(element_id).onchange();
 214                  } catch (ex) {
 215                      // Try fire event, ignore errors
 216                  }
 217              }
 218          });
 219      },
 220  
 221      /**
 222       * Opens a filebrowser/imagebrowser this will set the output value from
 223       * the browser as a value on the specified element.
 224       *
 225       * @method openBrowser
 226       * @param {string} element_id Id of the element to set value in.
 227       * @param {string} type Type of browser to open image/file/flash.
 228       * @param {string} option Option name to get the file_broswer_callback function name from.
 229       */
 230      openBrowser : function(element_id, type, option) {
 231          tinyMCEPopup.restoreSelection();
 232          this.editor.execCallback('file_browser_callback', element_id, document.getElementById(element_id).value, type, window);
 233      },
 234  
 235      /**
 236       * Creates a confirm dialog. Please don't use the blocking behavior of this
 237       * native version use the callback method instead then it can be extended.
 238       *
 239       * @method confirm
 240       * @param {String} t Title for the new confirm dialog.
 241       * @param {function} cb Callback function to be executed after the user has selected ok or cancel.
 242       * @param {Object} s Optional scope to execute the callback in.
 243       */
 244      confirm : function(t, cb, s) {
 245          this.editor.windowManager.confirm(t, cb, s, window);
 246      },
 247  
 248      /**
 249       * Creates a alert dialog. Please don't use the blocking behavior of this
 250       * native version use the callback method instead then it can be extended.
 251       *
 252       * @method alert
 253       * @param {String} t Title for the new alert dialog.
 254       * @param {function} cb Callback function to be executed after the user has selected ok.
 255       * @param {Object} s Optional scope to execute the callback in.
 256       */
 257      alert : function(tx, cb, s) {
 258          this.editor.windowManager.alert(tx, cb, s, window);
 259      },
 260  
 261      /**
 262       * Closes the current window.
 263       *
 264       * @method close
 265       */
 266      close : function() {
 267          var t = this;
 268  
 269          // To avoid domain relaxing issue in Opera
 270  		function close() {
 271              t.editor.windowManager.close(window);
 272              t.editor = null;
 273          };
 274  
 275          if (tinymce.isOpera)
 276              t.getWin().setTimeout(close, 0);
 277          else
 278              close();
 279      },
 280  
 281      // Internal functions
 282  
 283      _restoreSelection : function() {
 284          var e = window.event.srcElement;
 285  
 286          if (e.nodeName == 'INPUT' && (e.type == 'submit' || e.type == 'button'))
 287              tinyMCEPopup.restoreSelection();
 288      },
 289  
 290  /*    _restoreSelection : function() {
 291          var e = window.event.srcElement;
 292  
 293          // If user focus a non text input or textarea
 294          if ((e.nodeName != 'INPUT' && e.nodeName != 'TEXTAREA') || e.type != 'text')
 295              tinyMCEPopup.restoreSelection();
 296      },*/
 297  
 298      _onDOMLoaded : function() {
 299          var t = tinyMCEPopup, ti = document.title, bm, h, nv;
 300  
 301          if (t.domLoaded)
 302              return;
 303  
 304          t.domLoaded = 1;
 305  
 306          tinyMCEPopup.init();
 307  
 308          // Translate page
 309          if (t.features.translate_i18n !== false) {
 310              h = document.body.innerHTML;
 311  
 312              // Replace a=x with a="x" in IE
 313              if (tinymce.isIE)
 314                  h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"')
 315  
 316              document.dir = t.editor.getParam('directionality','');
 317  
 318              if ((nv = t.editor.translate(h)) && nv != h)
 319                  document.body.innerHTML = nv;
 320  
 321              if ((nv = t.editor.translate(ti)) && nv != ti)
 322                  document.title = ti = nv;
 323          }
 324  
 325          document.body.style.display = '';
 326  
 327          // Restore selection in IE when focus is placed on a non textarea or input element of the type text
 328          if (tinymce.isIE) {
 329              document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
 330  
 331              // Add base target element for it since it would fail with modal dialogs
 332              t.dom.add(t.dom.select('head')[0], 'base', {target : '_self'});
 333          }
 334  
 335          t.restoreSelection();
 336  
 337          // Set inline title
 338          if (!t.isWindow)
 339              t.editor.windowManager.setTitle(window, ti);
 340          else
 341              window.focus();
 342  
 343          if (!tinymce.isIE && !t.isWindow) {
 344              tinymce.dom.Event._add(document, 'focus', function() {
 345                  t.editor.windowManager.focus(t.id);
 346              });
 347          }
 348  
 349          // Patch for accessibility
 350          tinymce.each(t.dom.select('select'), function(e) {
 351              e.onkeydown = tinyMCEPopup._accessHandler;
 352          });
 353  
 354          // Call onInit
 355          // Init must be called before focus so the selection won't get lost by the focus call
 356          tinymce.each(t.listeners, function(o) {
 357              o.func.call(o.scope, t.editor);
 358          });
 359  
 360          // Move focus to window
 361          if (t.getWindowArg('mce_auto_focus', true)) {
 362              window.focus();
 363  
 364              // Focus element with mceFocus class
 365              tinymce.each(document.forms, function(f) {
 366                  tinymce.each(f.elements, function(e) {
 367                      if (t.dom.hasClass(e, 'mceFocus') && !e.disabled) {
 368                          e.focus();
 369                          return false; // Break loop
 370                      }
 371                  });
 372              });
 373          }
 374  
 375          document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
 376      },
 377  
 378      _accessHandler : function(e) {
 379          e = e || window.event;
 380  
 381          if (e.keyCode == 13 || e.keyCode == 32) {
 382              e = e.target || e.srcElement;
 383  
 384              if (e.onchange)
 385                  e.onchange();
 386  
 387              return tinymce.dom.Event.cancel(e);
 388          }
 389      },
 390  
 391      _closeWinKeyHandler : function(e) {
 392          e = e || window.event;
 393  
 394          if (e.keyCode == 27)
 395              tinyMCEPopup.close();
 396      },
 397  
 398      _wait : function() {
 399          // Use IE method
 400          if (document.attachEvent) {
 401              document.attachEvent("onreadystatechange", function() {
 402                  if (document.readyState === "complete") {
 403                      document.detachEvent("onreadystatechange", arguments.callee);
 404                      tinyMCEPopup._onDOMLoaded();
 405                  }
 406              });
 407  
 408              if (document.documentElement.doScroll && window == window.top) {
 409                  (function() {
 410                      if (tinyMCEPopup.domLoaded)
 411                          return;
 412  
 413                      try {
 414                          // If IE is used, use the trick by Diego Perini
 415                          // http://javascript.nwbox.com/IEContentLoaded/
 416                          document.documentElement.doScroll("left");
 417                      } catch (ex) {
 418                          setTimeout(arguments.callee, 0);
 419                          return;
 420                      }
 421  
 422                      tinyMCEPopup._onDOMLoaded();
 423                  })();
 424              }
 425  
 426              document.attachEvent('onload', tinyMCEPopup._onDOMLoaded);
 427          } else if (document.addEventListener) {
 428              window.addEventListener('DOMContentLoaded', tinyMCEPopup._onDOMLoaded, false);
 429              window.addEventListener('load', tinyMCEPopup._onDOMLoaded, false);
 430          }
 431      }
 432  };