/**
- * $RCSfile: tiny_mce_popup.js,v $
- * $Revision: 1.18 $
- * $Date: 2005/10/29 19:13:20 $
+ * tinymce_mce_popup.js
*
- * @author Moxiecode
- * @copyright Copyright © 2004, Moxiecode Systems AB, All rights reserved.
+ * Released under LGPL License.
+ * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
*/
-var tinyMCE = null, tinyMCELang = null;
+var tinymce, tinyMCE;
-function TinyMCEPopup() {
-};
+/**
+ * TinyMCE popup/dialog helper class. This gives you easy access to the
+ * parent editor instance and a bunch of other things. It's higly recommended
+ * that you load this script into your dialogs.
+ *
+ * @static
+ * @class tinyMCEPopup
+ */
+var tinyMCEPopup = {
+ /**
+ * Initializes the popup this will be called automatically.
+ *
+ * @method init
+ */
+ init: function() {
+ var self = this, parentWin, settings, uiWindow;
+
+ // Find window & API
+ parentWin = self.getWin();
+ tinymce = tinyMCE = parentWin.tinymce;
+ self.editor = tinymce.EditorManager.activeEditor;
+ self.params = self.editor.windowManager.getParams();
+
+ uiWindow = self.editor.windowManager.windows[self.editor.windowManager.windows.length - 1];
+ self.features = uiWindow.features;
+ self.uiWindow = uiWindow;
+
+ settings = self.editor.settings;
+
+ // Setup popup CSS path(s)
+ if (settings.popup_css !== false) {
+ if (settings.popup_css) {
+ settings.popup_css = self.editor.documentBaseURI.toAbsolute(settings.popup_css);
+ } else {
+ settings.popup_css = self.editor.baseURI.toAbsolute("plugins/compat3x/css/dialog.css");
+ }
+ }
-TinyMCEPopup.prototype.init = function() {
- var win = window.opener ? window.opener : window.dialogArguments;
+ if (settings.popup_css_add) {
+ settings.popup_css += ',' + self.editor.documentBaseURI.toAbsolute(settings.popup_css_add);
+ }
- if (!win)
- win = top;
+ // Setup local DOM
+ self.dom = self.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document, {
+ ownEvents: true,
+ proxy: tinyMCEPopup._eventProxy
+ });
- window.opener = win;
- this.windowOpener = win;
- this.onLoadEval = "";
+ self.dom.bind(window, 'ready', self._onDOMLoaded, self);
- // Setup parent references
- tinyMCE = win.tinyMCE;
- tinyMCELang = win.tinyMCELang;
+ // Enables you to skip loading the default css
+ if (self.features.popup_css !== false) {
+ self.dom.loadCSS(self.features.popup_css || self.editor.settings.popup_css);
+ }
- if (!tinyMCE) {
- alert("tinyMCE object reference not found from popup.");
- return;
- }
+ // Setup on init listeners
+ self.listeners = [];
+
+ /**
+ * Fires when the popup is initialized.
+ *
+ * @event onInit
+ * @param {tinymce.Editor} editor Editor instance.
+ * @example
+ * // Alerts the selected contents when the dialog is loaded
+ * tinyMCEPopup.onInit.add(function(ed) {
+ * alert(ed.selection.getContent());
+ * });
+ *
+ * // Executes the init method on page load in some object using the SomeObject scope
+ * tinyMCEPopup.onInit.add(SomeObject.init, SomeObject);
+ */
+ self.onInit = {
+ add: function(func, scope) {
+ self.listeners.push({func : func, scope : scope});
+ }
+ };
+
+ self.isWindow = !self.getWindowArg('mce_inline');
+ self.id = self.getWindowArg('mce_window_id');
+ },
+
+ /**
+ * Returns the reference to the parent window that opened the dialog.
+ *
+ * @method getWin
+ * @return {Window} Reference to the parent window that opened the dialog.
+ */
+ getWin: function() {
+ // Added frameElement check to fix bug: #2817583
+ return (!window.frameElement && window.dialogArguments) || opener || parent || top;
+ },
+
+ /**
+ * Returns a window argument/parameter by name.
+ *
+ * @method getWindowArg
+ * @param {String} name Name of the window argument to retrieve.
+ * @param {String} defaultValue Optional default value to return.
+ * @return {String} Argument value or default value if it wasn't found.
+ */
+ getWindowArg : function(name, defaultValue) {
+ var value = this.params[name];
+
+ return tinymce.is(value) ? value : defaultValue;
+ },
+
+ /**
+ * Returns a editor parameter/config option value.
+ *
+ * @method getParam
+ * @param {String} name Name of the editor config option to retrieve.
+ * @param {String} defaultValue Optional default value to return.
+ * @return {String} Parameter value or default value if it wasn't found.
+ */
+ getParam : function(name, defaultValue) {
+ return this.editor.getParam(name, defaultValue);
+ },
+
+ /**
+ * Returns a language item by key.
+ *
+ * @method getLang
+ * @param {String} name Language item like mydialog.something.
+ * @param {String} defaultValue Optional default value to return.
+ * @return {String} Language value for the item like "my string" or the default value if it wasn't found.
+ */
+ getLang : function(name, defaultValue) {
+ return this.editor.getLang(name, defaultValue);
+ },
+
+ /**
+ * Executed a command on editor that opened the dialog/popup.
+ *
+ * @method execCommand
+ * @param {String} cmd Command to execute.
+ * @param {Boolean} ui Optional boolean value if the UI for the command should be presented or not.
+ * @param {Object} val Optional value to pass with the comman like an URL.
+ * @param {Object} a Optional arguments object.
+ */
+ execCommand : function(cmd, ui, val, args) {
+ args = args || {};
+ args.skip_focus = 1;
+
+ this.restoreSelection();
+ return this.editor.execCommand(cmd, ui, val, args);
+ },
+
+ /**
+ * Resizes the dialog to the inner size of the window. This is needed since various browsers
+ * have different border sizes on windows.
+ *
+ * @method resizeToInnerSize
+ */
+ resizeToInnerSize : function() {
+ /*var self = this;
+
+ // Detach it to workaround a Chrome specific bug
+ // https://sourceforge.net/tracker/?func=detail&atid=635682&aid=2926339&group_id=103281
+ setTimeout(function() {
+ var vp = self.dom.getViewPort(window);
+
+ self.editor.windowManager.resizeBy(
+ self.getWindowArg('mce_width') - vp.w,
+ self.getWindowArg('mce_height') - vp.h,
+ self.id || window
+ );
+ }, 10);*/
+ },
+
+ /**
+ * Will executed the specified string when the page has been loaded. This function
+ * was added for compatibility with the 2.x branch.
+ *
+ * @method executeOnLoad
+ * @param {String} evil String to evalutate on init.
+ */
+ executeOnLoad : function(evil) {
+ this.onInit.add(function() {
+ eval(evil);
+ });
+ },
+
+ /**
+ * Stores the current editor selection for later restoration. This can be useful since some browsers
+ * looses it's selection if a control element is selected/focused inside the dialogs.
+ *
+ * @method storeSelection
+ */
+ storeSelection : function() {
+ this.editor.windowManager.bookmark = tinyMCEPopup.editor.selection.getBookmark(1);
+ },
+
+ /**
+ * Restores any stored selection. This can be useful since some browsers
+ * looses it's selection if a control element is selected/focused inside the dialogs.
+ *
+ * @method restoreSelection
+ */
+ restoreSelection : function() {
+ var self = tinyMCEPopup;
+
+ if (!self.isWindow && tinymce.isIE) {
+ self.editor.selection.moveToBookmark(self.editor.windowManager.bookmark);
+ }
+ },
+
+ /**
+ * Loads a specific dialog language pack. If you pass in plugin_url as a argument
+ * when you open the window it will load the <plugin url>/langs/<code>_dlg.js lang pack file.
+ *
+ * @method requireLangPack
+ */
+ requireLangPack : function() {
+ var self = this, url = self.getWindowArg('plugin_url') || self.getWindowArg('theme_url'), settings = self.editor.settings, lang;
+
+ if (settings.language !== false) {
+ lang = settings.language || "en";
+ }
- this.isWindow = tinyMCE.getWindowArg('mce_inside_iframe', false) == false;
- this.storeSelection = tinyMCE.isMSIE && !this.isWindow && tinyMCE.getWindowArg('mce_store_selection', true);
+ if (url && lang && self.features.translate_i18n !== false && settings.language_load !== false) {
+ url += '/langs/' + lang + '_dlg.js';
- if (this.isWindow)
- window.focus();
+ if (!tinymce.ScriptLoader.isDone(url)) {
+ document.write('<script type="text/javascript" src="' + url + '"></script>');
+ tinymce.ScriptLoader.markDone(url);
+ }
+ }
+ },
+
+ /**
+ * Executes a color picker on the specified element id. When the user
+ * then selects a color it will be set as the value of the specified element.
+ *
+ * @method pickColor
+ * @param {DOMEvent} e DOM event object.
+ * @param {string} element_id Element id to be filled with the color value from the picker.
+ */
+ pickColor : function(e, element_id) {
+ var el = document.getElementById(element_id), colorPickerCallback = this.editor.settings.color_picker_callback;
+ if (colorPickerCallback) {
+ colorPickerCallback.call(
+ this.editor,
+ function (value) {
+ el.value = value;
+ try {
+ el.onchange();
+ } catch (ex) {
+ // Try fire event, ignore errors
+ }
+ },
+ el.value
+ );
+ }
+ },
+
+ /**
+ * Opens a filebrowser/imagebrowser this will set the output value from
+ * the browser as a value on the specified element.
+ *
+ * @method openBrowser
+ * @param {string} element_id Id of the element to set value in.
+ * @param {string} type Type of browser to open image/file/flash.
+ * @param {string} option Option name to get the file_broswer_callback function name from.
+ */
+ openBrowser : function(element_id, type) {
+ tinyMCEPopup.restoreSelection();
+ this.editor.execCallback('file_browser_callback', element_id, document.getElementById(element_id).value, type, window);
+ },
+
+ /**
+ * Creates a confirm dialog. Please don't use the blocking behavior of this
+ * native version use the callback method instead then it can be extended.
+ *
+ * @method confirm
+ * @param {String} t Title for the new confirm dialog.
+ * @param {function} cb Callback function to be executed after the user has selected ok or cancel.
+ * @param {Object} s Optional scope to execute the callback in.
+ */
+ confirm : function(t, cb, s) {
+ this.editor.windowManager.confirm(t, cb, s, window);
+ },
+
+ /**
+ * Creates a alert dialog. Please don't use the blocking behavior of this
+ * native version use the callback method instead then it can be extended.
+ *
+ * @method alert
+ * @param {String} tx Title for the new alert dialog.
+ * @param {function} cb Callback function to be executed after the user has selected ok.
+ * @param {Object} s Optional scope to execute the callback in.
+ */
+ alert : function(tx, cb, s) {
+ this.editor.windowManager.alert(tx, cb, s, window);
+ },
+
+ /**
+ * Closes the current window.
+ *
+ * @method close
+ */
+ close : function() {
+ var t = this;
+
+ // To avoid domain relaxing issue in Opera
+ function close() {
+ t.editor.windowManager.close(window);
+ tinymce = tinyMCE = t.editor = t.params = t.dom = t.dom.doc = null; // Cleanup
+ }
- // Store selection
- if (this.storeSelection)
- tinyMCE.selectedInstance.execCommand('mceStoreSelection');
+ if (tinymce.isOpera) {
+ t.getWin().setTimeout(close, 0);
+ } else {
+ close();
+ }
+ },
- // Setup dir
- if (tinyMCELang['lang_dir'])
- document.dir = tinyMCELang['lang_dir'];
+ // Internal functions
- // Setup title
- var re = new RegExp('{|\\\$|}', 'g');
- var title = document.title.replace(re, "");
- if (typeof tinyMCELang[title] != "undefined") {
- var divElm = document.createElement("div");
- divElm.innerHTML = tinyMCELang[title];
- document.title = divElm.innerHTML;
+ _restoreSelection : function() {
+ var e = window.event.srcElement;
- if (tinyMCE.setWindowTitle != null)
- tinyMCE.setWindowTitle(window, divElm.innerHTML);
- }
+ if (e.nodeName == 'INPUT' && (e.type == 'submit' || e.type == 'button')) {
+ tinyMCEPopup.restoreSelection();
+ }
+ },
+
+/* _restoreSelection : function() {
+ var e = window.event.srcElement;
+
+ // If user focus a non text input or textarea
+ if ((e.nodeName != 'INPUT' && e.nodeName != 'TEXTAREA') || e.type != 'text')
+ tinyMCEPopup.restoreSelection();
+ },*/
+
+ _onDOMLoaded : function() {
+ var t = tinyMCEPopup, ti = document.title, h, nv;
+
+ // Translate page
+ if (t.features.translate_i18n !== false) {
+ var map = {
+ "update": "Ok",
+ "insert": "Ok",
+ "cancel": "Cancel",
+ "not_set": "--",
+ "class_name": "Class name",
+ "browse": "Browse"
+ };
+
+ var langCode = (tinymce.settings ? tinymce.settings : t.editor.settings).language || 'en';
+ for (var key in map) {
+ tinymce.i18n.data[langCode + "." + key] = tinymce.i18n.translate(map[key]);
+ }
+
+ h = document.body.innerHTML;
+
+ // Replace a=x with a="x" in IE
+ if (tinymce.isIE) {
+ h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"');
+ }
+
+ document.dir = t.editor.getParam('directionality','');
+
+ if ((nv = t.editor.translate(h)) && nv != h) {
+ document.body.innerHTML = nv;
+ }
+
+ if ((nv = t.editor.translate(ti)) && nv != ti) {
+ document.title = ti = nv;
+ }
+ }
- // Output Popup CSS class
- document.write('<link href="' + tinyMCE.getParam("popups_css") + '" rel="stylesheet" type="text/css">');
+ if (!t.editor.getParam('browser_preferred_colors', false) || !t.isWindow) {
+ t.dom.addClass(document.body, 'forceColors');
+ }
- tinyMCE.addEvent(window, "load", this.onLoad);
-};
+ document.body.style.display = '';
-TinyMCEPopup.prototype.onLoad = function() {
- var body = document.body;
+ // Restore selection in IE when focus is placed on a non textarea or input element of the type text
+ if (tinymce.Env.ie) {
+ if (tinymce.Env.ie < 11) {
+ document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
- body.onkeydown = function (e) {
- e = e ? e : window.event;
- if ( e.keyCode == 27 && !e.shiftKey && !e.controlKey && !e.altKey ) {
- tinyMCEPopup.close();
+ // Add base target element for it since it would fail with modal dialogs
+ t.dom.add(t.dom.select('head')[0], 'base', {target: '_self'});
+ } else {
+ document.addEventListener('mouseup', tinyMCEPopup._restoreSelection, false);
+ }
}
- }
- if (tinyMCE.getWindowArg('mce_replacevariables', true))
- body.innerHTML = tinyMCE.applyTemplate(body.innerHTML, tinyMCE.windowArgs);
+ t.restoreSelection();
+ t.resizeToInnerSize();
- var dir = tinyMCE.selectedInstance.settings['directionality'];
- if (dir == "rtl") {
- var elms = document.forms[0].elements;
- for (var i=0; i<elms.length; i++) {
- if ((elms[i].type == "text" || elms[i].type == "textarea") && elms[i].getAttribute("dir") != "ltr")
- elms[i].dir = dir;
+ // Set inline title
+ if (!t.isWindow) {
+ t.editor.windowManager.setTitle(window, ti);
+ } else {
+ window.focus();
}
- }
- if (body.style.display == 'none')
- body.style.display = 'block';
+ if (!tinymce.isIE && !t.isWindow) {
+ t.dom.bind(document, 'focus', function() {
+ t.editor.windowManager.focus(t.id);
+ });
+ }
- // Execute real onload (Opera fix)
- if (tinyMCEPopup.onLoadEval != "") {
- eval(tinyMCEPopup.onLoadEval);
- }
-};
+ // Patch for accessibility
+ tinymce.each(t.dom.select('select'), function(e) {
+ e.onkeydown = tinyMCEPopup._accessHandler;
+ });
+
+ // Call onInit
+ // Init must be called before focus so the selection won't get lost by the focus call
+ tinymce.each(t.listeners, function(o) {
+ o.func.call(o.scope, t.editor);
+ });
+
+ // Move focus to window
+ if (t.getWindowArg('mce_auto_focus', true)) {
+ window.focus();
+
+ // Focus element with mceFocus class
+ tinymce.each(document.forms, function(f) {
+ tinymce.each(f.elements, function(e) {
+ if (t.dom.hasClass(e, 'mceFocus') && !e.disabled) {
+ e.focus();
+ return false; // Break loop
+ }
+ });
+ });
+ }
-TinyMCEPopup.prototype.executeOnLoad = function(str) {
- if (tinyMCE.isOpera)
- this.onLoadEval = str;
- else
- eval(str);
-};
+ document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
-TinyMCEPopup.prototype.resizeToInnerSize = function() {
- // Netscape 7.1 workaround
- if (this.isWindow && tinyMCE.isNS71) {
- window.resizeBy(0, 10);
- return;
- }
+ if ('textContent' in document) {
+ t.uiWindow.getEl('head').firstChild.textContent = document.title;
+ } else {
+ t.uiWindow.getEl('head').firstChild.innerText = document.title;
+ }
+ },
- if (this.isWindow) {
- var doc = document;
- var body = doc.body;
- var oldMargin, wrapper, iframe, nodes, dx, dy;
-
- if (body.style.display == 'none')
- body.style.display = 'block';
-
- // Remove margin
- oldMargin = body.style.margin;
- body.style.margin = '0px';
-
- // Create wrapper
- wrapper = doc.createElement("div");
- wrapper.id = 'mcBodyWrapper';
- wrapper.style.display = 'none';
- wrapper.style.margin = '0px';
-
- // Wrap body elements
- nodes = doc.body.childNodes;
- for (var i=nodes.length-1; i>=0; i--) {
- if (wrapper.hasChildNodes())
- wrapper.insertBefore(nodes[i].cloneNode(true), wrapper.firstChild);
- else
- wrapper.appendChild(nodes[i].cloneNode(true));
-
- nodes[i].parentNode.removeChild(nodes[i]);
- }
-
- // Add wrapper
- doc.body.appendChild(wrapper);
-
- // Create iframe
- iframe = document.createElement("iframe");
- iframe.id = "mcWinIframe";
- iframe.src = document.location.href.toLowerCase().indexOf('https') == -1 ? "about:blank" : tinyMCE.settings['default_document'];
- iframe.width = "100%";
- iframe.height = "100%";
- iframe.style.margin = '0px';
-
- // Add iframe
- doc.body.appendChild(iframe);
-
- // Measure iframe
- iframe = document.getElementById('mcWinIframe');
- dx = tinyMCE.getWindowArg('mce_width') - iframe.clientWidth;
- dy = tinyMCE.getWindowArg('mce_height') - iframe.clientHeight;
-
- // Resize window
- // tinyMCE.debug(tinyMCE.getWindowArg('mce_width') + "," + tinyMCE.getWindowArg('mce_height') + " - " + dx + "," + dy);
- window.resizeBy(dx, dy);
-
- // Hide iframe and show wrapper
- body.style.margin = oldMargin;
- iframe.style.display = 'none';
- wrapper.style.display = 'block';
- }
-};
+ _accessHandler : function(e) {
+ e = e || window.event;
+
+ if (e.keyCode == 13 || e.keyCode == 32) {
+ var elm = e.target || e.srcElement;
+
+ if (elm.onchange) {
+ elm.onchange();
+ }
-TinyMCEPopup.prototype.resizeToContent = function() {
- var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
- var isOpera = (navigator.userAgent.indexOf("Opera") != -1);
-
- if (isOpera)
- return;
-
- if (isMSIE) {
- try { window.resizeTo(10, 10); } catch (e) {}
-
- var elm = document.body;
- var width = elm.offsetWidth;
- var height = elm.offsetHeight;
- var dx = (elm.scrollWidth - width) + 4;
- var dy = elm.scrollHeight - height;
-
- try { window.resizeBy(dx, dy); } catch (e) {}
- } else {
- window.scrollBy(1000, 1000);
- if (window.scrollX > 0 || window.scrollY > 0) {
- window.resizeBy(window.innerWidth * 2, window.innerHeight * 2);
- window.sizeToContent();
- window.scrollTo(0, 0);
- var x = parseInt(screen.width / 2.0) - (window.outerWidth / 2.0);
- var y = parseInt(screen.height / 2.0) - (window.outerHeight / 2.0);
- window.moveTo(x, y);
+ return tinymce.dom.Event.cancel(e);
}
+ },
+
+ _closeWinKeyHandler : function(e) {
+ e = e || window.event;
+
+ if (e.keyCode == 27) {
+ tinyMCEPopup.close();
+ }
+ },
+
+ _eventProxy: function(id) {
+ return function(evt) {
+ tinyMCEPopup.dom.events.callNativeHandler(id, evt);
+ };
}
};
-TinyMCEPopup.prototype.getWindowArg = function(name, default_value) {
- return tinyMCE.getWindowArg(name, default_value);
-};
+tinyMCEPopup.init();
-TinyMCEPopup.prototype.execCommand = function(command, user_interface, value) {
- var inst = tinyMCE.selectedInstance;
+tinymce.util.Dispatcher = function(scope) {
+ this.scope = scope || this;
+ this.listeners = [];
- // Restore selection
- if (this.storeSelection) {
- inst.getWin().focus();
- inst.execCommand('mceRestoreSelection');
- }
+ this.add = function(callback, scope) {
+ this.listeners.push({cb : callback, scope : scope || this.scope});
- inst.execCommand(command, user_interface, value);
+ return callback;
+ };
- // Store selection
- if (this.storeSelection)
- inst.execCommand('mceStoreSelection');
-};
+ this.addToTop = function(callback, scope) {
+ var self = this, listener = {cb : callback, scope : scope || self.scope};
-TinyMCEPopup.prototype.close = function() {
- tinyMCE.closeWindow(window);
-};
+ // Create new listeners if addToTop is executed in a dispatch loop
+ if (self.inDispatch) {
+ self.listeners = [listener].concat(self.listeners);
+ } else {
+ self.listeners.unshift(listener);
+ }
-TinyMCEPopup.prototype.pickColor = function(e, element_id) {
- tinyMCE.selectedInstance.execCommand('mceColorPicker', true, {
- element_id : element_id,
- document : document,
- window : window,
- store_selection : false
- });
-};
+ return callback;
+ };
-TinyMCEPopup.prototype.openBrowser = function(element_id, type, option) {
- var cb = tinyMCE.getParam(option, tinyMCE.getParam("file_browser_callback"));
- var url = document.getElementById(element_id).value;
+ this.remove = function(callback) {
+ var listeners = this.listeners, output = null;
- tinyMCE.setWindowArg("window", window);
- tinyMCE.setWindowArg("document", document);
+ tinymce.each(listeners, function(listener, i) {
+ if (callback == listener.cb) {
+ output = listener;
+ listeners.splice(i, 1);
+ return false;
+ }
+ });
- // Call to external callback
- if (eval('typeof(tinyMCEPopup.windowOpener.' + cb + ')') == "undefined")
- alert("Callback function: " + cb + " could not be found.");
- else
- eval("tinyMCEPopup.windowOpener." + cb + "(element_id, url, type, window);");
-};
+ return output;
+ };
-// Setup global instance
-var tinyMCEPopup = new TinyMCEPopup();
+ this.dispatch = function() {
+ var self = this, returnValue, args = arguments, i, listeners = self.listeners, listener;
-tinyMCEPopup.init();
+ self.inDispatch = true;
+
+ // Needs to be a real loop since the listener count might change while looping
+ // And this is also more efficient
+ for (i = 0; i < listeners.length; i++) {
+ listener = listeners[i];
+ returnValue = listener.cb.apply(listener.scope, args.length > 0 ? args : [listener.scope]);
+
+ if (returnValue === false) {
+ break;
+ }
+ }
+
+ self.inDispatch = false;
+
+ return returnValue;
+ };
+};