[Summary view] [Print] [Text view]

   1  /**
   2   * tinymce_mce_popup.js
   3   *
   4   * Released under LGPL License.
   5   * Copyright (c) 1999-2017 Ephox Corp. All rights reserved
   6   *
   7   * License: http://www.tinymce.com/license
   8   * Contributing: http://www.tinymce.com/contributing
   9   */
  10  
  11  var tinymce, tinyMCE;
  12  
  13  /**
  14   * TinyMCE popup/dialog helper class. This gives you easy access to the
  15   * parent editor instance and a bunch of other things. It's higly recommended
  16   * that you load this script into your dialogs.
  17   *
  18   * @static
  19   * @class tinyMCEPopup
  20   */
  21  var tinyMCEPopup = {
  22    /**
  23     * Initializes the popup this will be called automatically.
  24     *
  25     * @method init
  26     */
  27    init: function () {
  28      var self = this, parentWin, settings, uiWindow;
  29  
  30      // Find window & API
  31      parentWin = self.getWin();
  32      tinymce = tinyMCE = parentWin.tinymce;
  33      self.editor = tinymce.EditorManager.activeEditor;
  34      self.params = self.editor.windowManager.getParams();
  35  
  36      uiWindow = self.editor.windowManager.windows[self.editor.windowManager.windows.length - 1];
  37      self.features = uiWindow.features;
  38      self.uiWindow = uiWindow;
  39  
  40      settings = self.editor.settings;
  41  
  42      // Setup popup CSS path(s)
  43      if (settings.popup_css !== false) {
  44        if (settings.popup_css) {
  45          settings.popup_css = self.editor.documentBaseURI.toAbsolute(settings.popup_css);
  46        } else {
  47          settings.popup_css = self.editor.baseURI.toAbsolute("plugins/compat3x/css/dialog.css");
  48        }
  49      }
  50  
  51      if (settings.popup_css_add) {
  52        settings.popup_css += ',' + self.editor.documentBaseURI.toAbsolute(settings.popup_css_add);
  53      }
  54  
  55      // Setup local DOM
  56      self.dom = self.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document, {
  57        ownEvents: true,
  58        proxy: tinyMCEPopup._eventProxy
  59      });
  60  
  61      self.dom.bind(window, 'ready', self._onDOMLoaded, self);
  62  
  63      // Enables you to skip loading the default css
  64      if (self.features.popup_css !== false) {
  65        self.dom.loadCSS(self.features.popup_css || self.editor.settings.popup_css);
  66      }
  67  
  68      // Setup on init listeners
  69      self.listeners = [];
  70  
  71      /**
  72       * Fires when the popup is initialized.
  73       *
  74       * @event onInit
  75       * @param {tinymce.Editor} editor Editor instance.
  76       * @example
  77       * // Alerts the selected contents when the dialog is loaded
  78       * tinyMCEPopup.onInit.add(function(ed) {
  79       *     alert(ed.selection.getContent());
  80       * });
  81       *
  82       * // Executes the init method on page load in some object using the SomeObject scope
  83       * tinyMCEPopup.onInit.add(SomeObject.init, SomeObject);
  84       */
  85      self.onInit = {
  86        add: function (func, scope) {
  87          self.listeners.push({ func: func, scope: scope });
  88        }
  89      };
  90  
  91      self.isWindow = !self.getWindowArg('mce_inline');
  92      self.id = self.getWindowArg('mce_window_id');
  93    },
  94  
  95    /**
  96     * Returns the reference to the parent window that opened the dialog.
  97     *
  98     * @method getWin
  99     * @return {Window} Reference to the parent window that opened the dialog.
 100     */
 101    getWin: function () {
 102      // Added frameElement check to fix bug: #2817583
 103      return (!window.frameElement && window.dialogArguments) || opener || parent || top;
 104    },
 105  
 106    /**
 107     * Returns a window argument/parameter by name.
 108     *
 109     * @method getWindowArg
 110     * @param {String} name Name of the window argument to retrieve.
 111     * @param {String} defaultValue Optional default value to return.
 112     * @return {String} Argument value or default value if it wasn't found.
 113     */
 114    getWindowArg: function (name, defaultValue) {
 115      var value = this.params[name];
 116  
 117      return tinymce.is(value) ? value : defaultValue;
 118    },
 119  
 120    /**
 121     * Returns a editor parameter/config option value.
 122     *
 123     * @method getParam
 124     * @param {String} name Name of the editor config option to retrieve.
 125     * @param {String} defaultValue Optional default value to return.
 126     * @return {String} Parameter value or default value if it wasn't found.
 127     */
 128    getParam: function (name, defaultValue) {
 129      return this.editor.getParam(name, defaultValue);
 130    },
 131  
 132    /**
 133     * Returns a language item by key.
 134     *
 135     * @method getLang
 136     * @param {String} name Language item like mydialog.something.
 137     * @param {String} defaultValue Optional default value to return.
 138     * @return {String} Language value for the item like "my string" or the default value if it wasn't found.
 139     */
 140    getLang: function (name, defaultValue) {
 141      return this.editor.getLang(name, defaultValue);
 142    },
 143  
 144    /**
 145     * Executed a command on editor that opened the dialog/popup.
 146     *
 147     * @method execCommand
 148     * @param {String} cmd Command to execute.
 149     * @param {Boolean} ui Optional boolean value if the UI for the command should be presented or not.
 150     * @param {Object} val Optional value to pass with the comman like an URL.
 151     * @param {Object} a Optional arguments object.
 152     */
 153    execCommand: function (cmd, ui, val, args) {
 154      args = args || {};
 155      args.skip_focus = 1;
 156  
 157      this.restoreSelection();
 158      return this.editor.execCommand(cmd, ui, val, args);
 159    },
 160  
 161    /**
 162     * Resizes the dialog to the inner size of the window. This is needed since various browsers
 163     * have different border sizes on windows.
 164     *
 165     * @method resizeToInnerSize
 166     */
 167    resizeToInnerSize: function () {
 168      /*var self = this;
 169  
 170      // Detach it to workaround a Chrome specific bug
 171      // https://sourceforge.net/tracker/?func=detail&atid=635682&aid=2926339&group_id=103281
 172      setTimeout(function() {
 173        var vp = self.dom.getViewPort(window);
 174  
 175        self.editor.windowManager.resizeBy(
 176          self.getWindowArg('mce_width') - vp.w,
 177          self.getWindowArg('mce_height') - vp.h,
 178          self.id || window
 179        );
 180      }, 10);*/
 181    },
 182  
 183    /**
 184     * Will executed the specified string when the page has been loaded. This function
 185     * was added for compatibility with the 2.x branch.
 186     *
 187     * @method executeOnLoad
 188     * @param {String} evil String to evalutate on init.
 189     */
 190    executeOnLoad: function (evil) {
 191      this.onInit.add(function () {
 192        eval(evil);
 193      });
 194    },
 195  
 196    /**
 197     * Stores the current editor selection for later restoration. This can be useful since some browsers
 198     * looses it's selection if a control element is selected/focused inside the dialogs.
 199     *
 200     * @method storeSelection
 201     */
 202    storeSelection: function () {
 203      this.editor.windowManager.bookmark = tinyMCEPopup.editor.selection.getBookmark(1);
 204    },
 205  
 206    /**
 207     * Restores any stored selection. This can be useful since some browsers
 208     * looses it's selection if a control element is selected/focused inside the dialogs.
 209     *
 210     * @method restoreSelection
 211     */
 212    restoreSelection: function () {
 213      var self = tinyMCEPopup;
 214  
 215      if (!self.isWindow && tinymce.isIE) {
 216        self.editor.selection.moveToBookmark(self.editor.windowManager.bookmark);
 217      }
 218    },
 219  
 220    /**
 221     * Loads a specific dialog language pack. If you pass in plugin_url as a argument
 222     * when you open the window it will load the <plugin url>/langs/<code>_dlg.js lang pack file.
 223     *
 224     * @method requireLangPack
 225     */
 226    requireLangPack: function () {
 227      var self = this, url = self.getWindowArg('plugin_url') || self.getWindowArg('theme_url'), settings = self.editor.settings, lang;
 228  
 229      if (settings.language !== false) {
 230        lang = settings.language || "en";
 231      }
 232  
 233      if (url && lang && self.features.translate_i18n !== false && settings.language_load !== false) {
 234        url += '/langs/' + lang + '_dlg.js';
 235  
 236        if (!tinymce.ScriptLoader.isDone(url)) {
 237          document.write('<script type="text/javascript" src="' + url + '"></script>');
 238          tinymce.ScriptLoader.markDone(url);
 239        }
 240      }
 241    },
 242  
 243    /**
 244     * Executes a color picker on the specified element id. When the user
 245     * then selects a color it will be set as the value of the specified element.
 246     *
 247     * @method pickColor
 248     * @param {DOMEvent} e DOM event object.
 249     * @param {string} element_id Element id to be filled with the color value from the picker.
 250     */
 251    pickColor: function (e, element_id) {
 252      var el = document.getElementById(element_id), colorPickerCallback = this.editor.settings.color_picker_callback;
 253      if (colorPickerCallback) {
 254        colorPickerCallback.call(
 255          this.editor,
 256          function (value) {
 257            el.value = value;
 258            try {
 259              el.onchange();
 260            } catch (ex) {
 261              // Try fire event, ignore errors
 262            }
 263          },
 264          el.value
 265        );
 266      }
 267    },
 268  
 269    /**
 270     * Opens a filebrowser/imagebrowser this will set the output value from
 271     * the browser as a value on the specified element.
 272     *
 273     * @method openBrowser
 274     * @param {string} element_id Id of the element to set value in.
 275     * @param {string} type Type of browser to open image/file/flash.
 276     * @param {string} option Option name to get the file_broswer_callback function name from.
 277     */
 278    openBrowser: function (element_id, type) {
 279      tinyMCEPopup.restoreSelection();
 280      this.editor.execCallback('file_browser_callback', element_id, document.getElementById(element_id).value, type, window);
 281    },
 282  
 283    /**
 284     * Creates a confirm dialog. Please don't use the blocking behavior of this
 285     * native version use the callback method instead then it can be extended.
 286     *
 287     * @method confirm
 288     * @param {String} t Title for the new confirm dialog.
 289     * @param {function} cb Callback function to be executed after the user has selected ok or cancel.
 290     * @param {Object} s Optional scope to execute the callback in.
 291     */
 292    confirm: function (t, cb, s) {
 293      this.editor.windowManager.confirm(t, cb, s, window);
 294    },
 295  
 296    /**
 297     * Creates a alert dialog. Please don't use the blocking behavior of this
 298     * native version use the callback method instead then it can be extended.
 299     *
 300     * @method alert
 301     * @param {String} tx Title for the new alert dialog.
 302     * @param {function} cb Callback function to be executed after the user has selected ok.
 303     * @param {Object} s Optional scope to execute the callback in.
 304     */
 305    alert: function (tx, cb, s) {
 306      this.editor.windowManager.alert(tx, cb, s, window);
 307    },
 308  
 309    /**
 310     * Closes the current window.
 311     *
 312     * @method close
 313     */
 314    close: function () {
 315      var t = this;
 316  
 317      // To avoid domain relaxing issue in Opera
 318      function close() {
 319        t.editor.windowManager.close(window);
 320        tinymce = tinyMCE = t.editor = t.params = t.dom = t.dom.doc = null; // Cleanup
 321      }
 322  
 323      if (tinymce.isOpera) {
 324        t.getWin().setTimeout(close, 0);
 325      } else {
 326        close();
 327      }
 328    },
 329  
 330    // Internal functions
 331  
 332    _restoreSelection: function () {
 333      var e = window.event.srcElement;
 334  
 335      if (e.nodeName == 'INPUT' && (e.type == 'submit' || e.type == 'button')) {
 336        tinyMCEPopup.restoreSelection();
 337      }
 338    },
 339  
 340    /* _restoreSelection : function() {
 341        var e = window.event.srcElement;
 342  
 343        // If user focus a non text input or textarea
 344        if ((e.nodeName != 'INPUT' && e.nodeName != 'TEXTAREA') || e.type != 'text')
 345          tinyMCEPopup.restoreSelection();
 346      },*/
 347  
 348    _onDOMLoaded: function () {
 349      var t = tinyMCEPopup, ti = document.title, h, nv;
 350  
 351      // Translate page
 352      if (t.features.translate_i18n !== false) {
 353        var map = {
 354          "update": "Ok",
 355          "insert": "Ok",
 356          "cancel": "Cancel",
 357          "not_set": "--",
 358          "class_name": "Class name",
 359          "browse": "Browse"
 360        };
 361  
 362        var langCode = (tinymce.settings ? tinymce.settings : t.editor.settings).language || 'en';
 363        for (var key in map) {
 364          tinymce.i18n.data[langCode + "." + key] = tinymce.i18n.translate(map[key]);
 365        }
 366  
 367        h = document.body.innerHTML;
 368  
 369        // Replace a=x with a="x" in IE
 370        if (tinymce.isIE) {
 371          h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"');
 372        }
 373  
 374        document.dir = t.editor.getParam('directionality', '');
 375  
 376        if ((nv = t.editor.translate(h)) && nv != h) {
 377          document.body.innerHTML = nv;
 378        }
 379  
 380        if ((nv = t.editor.translate(ti)) && nv != ti) {
 381          document.title = ti = nv;
 382        }
 383      }
 384  
 385      if (!t.editor.getParam('browser_preferred_colors', false) || !t.isWindow) {
 386        t.dom.addClass(document.body, 'forceColors');
 387      }
 388  
 389      document.body.style.display = '';
 390  
 391      // Restore selection in IE when focus is placed on a non textarea or input element of the type text
 392      if (tinymce.Env.ie) {
 393        if (tinymce.Env.ie < 11) {
 394          document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
 395  
 396          // Add base target element for it since it would fail with modal dialogs
 397          t.dom.add(t.dom.select('head')[0], 'base', { target: '_self' });
 398        } else {
 399          document.addEventListener('mouseup', tinyMCEPopup._restoreSelection, false);
 400        }
 401      }
 402  
 403      t.restoreSelection();
 404      t.resizeToInnerSize();
 405  
 406      // Set inline title
 407      if (!t.isWindow) {
 408        t.editor.windowManager.setTitle(window, ti);
 409      } else {
 410        window.focus();
 411      }
 412  
 413      if (!tinymce.isIE && !t.isWindow) {
 414        t.dom.bind(document, 'focus', function () {
 415          t.editor.windowManager.focus(t.id);
 416        });
 417      }
 418  
 419      // Patch for accessibility
 420      tinymce.each(t.dom.select('select'), function (e) {
 421        e.onkeydown = tinyMCEPopup._accessHandler;
 422      });
 423  
 424      // Call onInit
 425      // Init must be called before focus so the selection won't get lost by the focus call
 426      tinymce.each(t.listeners, function (o) {
 427        o.func.call(o.scope, t.editor);
 428      });
 429  
 430      // Move focus to window
 431      if (t.getWindowArg('mce_auto_focus', true)) {
 432        window.focus();
 433  
 434        // Focus element with mceFocus class
 435        tinymce.each(document.forms, function (f) {
 436          tinymce.each(f.elements, function (e) {
 437            if (t.dom.hasClass(e, 'mceFocus') && !e.disabled) {
 438              e.focus();
 439              return false; // Break loop
 440            }
 441          });
 442        });
 443      }
 444  
 445      document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
 446  
 447      if ('textContent' in document) {
 448        t.uiWindow.getEl('head').firstChild.textContent = document.title;
 449      } else {
 450        t.uiWindow.getEl('head').firstChild.innerText = document.title;
 451      }
 452    },
 453  
 454    _accessHandler: function (e) {
 455      e = e || window.event;
 456  
 457      if (e.keyCode == 13 || e.keyCode == 32) {
 458        var elm = e.target || e.srcElement;
 459  
 460        if (elm.onchange) {
 461          elm.onchange();
 462        }
 463  
 464        return tinymce.dom.Event.cancel(e);
 465      }
 466    },
 467  
 468    _closeWinKeyHandler: function (e) {
 469      e = e || window.event;
 470  
 471      if (e.keyCode == 27) {
 472        tinyMCEPopup.close();
 473      }
 474    },
 475  
 476    _eventProxy: function (id) {
 477      return function (evt) {
 478        tinyMCEPopup.dom.events.callNativeHandler(id, evt);
 479      };
 480    }
 481  };
 482  
 483  tinyMCEPopup.init();
 484  
 485  tinymce.util.Dispatcher = function (scope) {
 486    this.scope = scope || this;
 487    this.listeners = [];
 488  
 489    this.add = function (callback, scope) {
 490      this.listeners.push({ cb: callback, scope: scope || this.scope });
 491  
 492      return callback;
 493    };
 494  
 495    this.addToTop = function (callback, scope) {
 496      var self = this, listener = { cb: callback, scope: scope || self.scope };
 497  
 498      // Create new listeners if addToTop is executed in a dispatch loop
 499      if (self.inDispatch) {
 500        self.listeners = [listener].concat(self.listeners);
 501      } else {
 502        self.listeners.unshift(listener);
 503      }
 504  
 505      return callback;
 506    };
 507  
 508    this.remove = function (callback) {
 509      var listeners = this.listeners, output = null;
 510  
 511      tinymce.each(listeners, function (listener, i) {
 512        if (callback == listener.cb) {
 513          output = listener;
 514          listeners.splice(i, 1);
 515          return false;
 516        }
 517      });
 518  
 519      return output;
 520    };
 521  
 522    this.dispatch = function () {
 523      var self = this, returnValue, args = arguments, i, listeners = self.listeners, listener;
 524  
 525      self.inDispatch = true;
 526  
 527      // Needs to be a real loop since the listener count might change while looping
 528      // And this is also more efficient
 529      for (i = 0; i < listeners.length; i++) {
 530        listener = listeners[i];
 531        returnValue = listener.cb.apply(listener.scope, args.length > 0 ? args : [listener.scope]);
 532  
 533        if (returnValue === false) {
 534          break;
 535        }
 536      }
 537  
 538      self.inDispatch = false;
 539  
 540      return returnValue;
 541    };
 542  };