-// Some global instances
-var tinymce = null, tinyMCEPopup, tinyMCE;
-
-tinyMCEPopup = {
- init : function() {
- var t = this, w, ti, li, q, i, it;
-
- li = ('' + document.location.search).replace(/^\?/, '').split('&');
- q = {};
- for (i=0; i<li.length; i++) {
- it = li[i].split('=');
- q[unescape(it[0])] = unescape(it[1]);
- }
-
- if (q.mce_rdomain)
- document.domain = q.mce_rdomain;
+/**
+ * Popup.js
+ *
+ * Copyright, Moxiecode Systems AB
+ * Released under LGPL License.
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+var tinymce, tinyMCE;
+
+/**
+ * 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
- w = t.getWin();
- tinymce = w.tinymce;
- tinyMCE = w.tinyMCE;
- t.editor = tinymce.EditorManager.activeEditor;
- t.params = t.editor.windowManager.params;
+ 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");
+ }
+ }
+
+ if (settings.popup_css_add) {
+ settings.popup_css += ',' + self.editor.documentBaseURI.toAbsolute(settings.popup_css_add);
+ }
// Setup local DOM
- t.dom = t.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document);
- t.dom.loadCSS(t.editor.settings.popup_css);
+ self.dom = self.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document, {
+ ownEvents: true,
+ proxy: tinyMCEPopup._eventProxy
+ });
+
+ self.dom.bind(window, 'ready', self._onDOMLoaded, self);
+
+ // 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);
+ }
// Setup on init listeners
- t.listeners = [];
- t.onInit = {
- add : function(f, s) {
- t.listeners.push({func : f, scope : s});
+ 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});
}
};
- t.isWindow = !t.getWindowArg('mce_inline');
- t.id = t.getWindowArg('mce_window_id');
- t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
+ self.isWindow = !self.getWindowArg('mce_inline');
+ self.id = self.getWindowArg('mce_window_id');
},
- getWin : function() {
- return window.dialogArguments || opener || parent || top;
+ /**
+ * 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;
},
- getWindowArg : function(n, dv) {
- var v = this.params[n];
-
- return tinymce.is(v) ? v : dv;
+ /**
+ * Returns a window argument/parameter by name.
+ *
+ * @method getWindowArg
+ * @param {String} name Name of the window argument to retrive.
+ * @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;
},
- getParam : function(n, dv) {
- return this.editor.getParam(n, dv);
+ /**
+ * Returns a editor parameter/config option value.
+ *
+ * @method getParam
+ * @param {String} name Name of the editor config option to retrive.
+ * @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);
},
- getLang : function(n, dv) {
- return this.editor.getLang(n, dv);
+ /**
+ * 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);
},
- execCommand : function(cmd, ui, val, a) {
- a = a || {};
- a.skip_focus = 1;
+ /**
+ * 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, a);
+ 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 t = this, n, b = document.body, vp = t.dom.getViewPort(window), dw, dh;
-
- dw = t.getWindowArg('mce_width') - vp.w;
- dh = t.getWindowArg('mce_height') - vp.h;
-
- if (t.isWindow)
- window.resizeBy(dw, dh);
- else
- t.editor.windowManager.resizeBy(dw, dh, t.id);
+ /*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);*/
},
- executeOnLoad : function(s) {
+ /**
+ * 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(s);
+ 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('simple');
+ 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 t = tinyMCEPopup;
+ var self = tinyMCEPopup;
- if (!t.isWindow && tinymce.isIE)
- t.editor.selection.moveToBookmark(t.editor.windowManager.bookmark);
+ 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 u = this.getWindowArg('plugin_url') || this.getWindowArg('theme_url');
+ 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";
+ }
- if (u && this.editor.settings.language) {
- u += '/langs/' + this.editor.settings.language + '_dlg.js';
+ if (url && lang && self.features.translate_i18n !== false && settings.language_load !== false) {
+ url += '/langs/' + lang + '_dlg.js';
- if (!tinymce.ScriptLoader.isDone(u)) {
- document.write('<script type="text/javascript" src="' + tinymce._addVer(u) + '"></script>');
- tinymce.ScriptLoader.markDone(u);
+ 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) {
- this.execCommand('mceColorPicker', true, {
- color : document.getElementById(element_id).value,
- func : function(c) {
- document.getElementById(element_id).value = c;
-
- try {
- document.getElementById(element_id).onchange();
- } catch (ex) {
- // Try fire event, ignore errors
- }
- }
- });
+ 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
+ );
+ }
},
- openBrowser : function(element_id, type, option) {
+ /**
+ * 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, t.id);
+ t.editor.windowManager.close(window);
tinymce = tinyMCE = t.editor = t.params = t.dom = t.dom.doc = null; // Cleanup
- };
+ }
- if (tinymce.isOpera)
+ if (tinymce.isOpera) {
t.getWin().setTimeout(close, 0);
- else
+ } else {
close();
+ }
},
// Internal functions
_restoreSelection : function() {
var e = window.event.srcElement;
- if (e.nodeName == 'INPUT' && (e.type == 'submit' || e.type == 'button'))
+ if (e.nodeName == 'INPUT' && (e.type == 'submit' || e.type == 'button')) {
tinyMCEPopup.restoreSelection();
+ }
},
/* _restoreSelection : function() {
},*/
_onDOMLoaded : function() {
- var t = this, ti = document.title, bm, h;
+ var t = tinyMCEPopup, ti = document.title, h, nv;
// Translate page
- h = document.body.innerHTML;
+ 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.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','');
- // Replace a=x with a="x" in IE
- if (tinymce.isIE)
- h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"')
+ if ((nv = t.editor.translate(h)) && nv != h) {
+ document.body.innerHTML = nv;
+ }
+
+ if ((nv = t.editor.translate(ti)) && nv != ti) {
+ document.title = ti = nv;
+ }
+ }
+
+ if (!t.editor.getParam('browser_preferred_colors', false) || !t.isWindow) {
+ t.dom.addClass(document.body, 'forceColors');
+ }
- document.dir = t.editor.getParam('directionality','');
- document.body.innerHTML = t.editor.translate(h);
- document.title = ti = t.editor.translate(ti);
document.body.style.display = '';
// Restore selection in IE when focus is placed on a non textarea or input element of the type text
- if (tinymce.isIE)
- document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
+ if (tinymce.Env.ie) {
+ if (tinymce.Env.ie < 11) {
+ document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
+
+ // 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);
+ }
+ }
t.restoreSelection();
t.resizeToInnerSize();
// Set inline title
- if (!t.isWindow)
- t.editor.windowManager.setTitle(ti, t.id);
- else
+ if (!t.isWindow) {
+ t.editor.windowManager.setTitle(window, ti);
+ } else {
window.focus();
+ }
if (!tinymce.isIE && !t.isWindow) {
- tinymce.dom.Event._add(document, 'focus', function() {
- t.editor.windowManager.focus(t.id)
+ t.dom.bind(document, 'focus', function() {
+ t.editor.windowManager.focus(t.id);
});
}
}
document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
+
+ if ('textContent' in document) {
+ t.uiWindow.getEl('head').firstChild.textContent = document.title;
+ } else {
+ t.uiWindow.getEl('head').firstChild.innerText = document.title;
+ }
},
_accessHandler : function(e) {
e = e || window.event;
if (e.keyCode == 13 || e.keyCode == 32) {
- e = e.target || e.srcElement;
+ var elm = e.target || e.srcElement;
- if (e.onchange)
- e.onchange();
+ if (elm.onchange) {
+ elm.onchange();
+ }
return tinymce.dom.Event.cancel(e);
}
_closeWinKeyHandler : function(e) {
e = e || window.event;
- if (e.keyCode == 27)
+ if (e.keyCode == 27) {
tinyMCEPopup.close();
+ }
},
- _wait : function() {
- var t = this, ti;
-
- if (tinymce.isIE && document.location.protocol != 'https:') {
- // Fake DOMContentLoaded on IE
- document.write('<script id=__ie_onload defer src=\'javascript:""\';><\/script>');
- document.getElementById("__ie_onload").onreadystatechange = function() {
- if (this.readyState == "complete") {
- t._onDOMLoaded();
- document.getElementById("__ie_onload").onreadystatechange = null; // Prevent leak
- }
- };
- } else {
- if (tinymce.isIE || tinymce.isWebKit) {
- ti = setInterval(function() {
- if (/loaded|complete/.test(document.readyState)) {
- clearInterval(ti);
- t._onDOMLoaded();
- }
- }, 10);
- } else {
- window.addEventListener('DOMContentLoaded', function() {
- t._onDOMLoaded();
- }, false);
- }
- }
+ _eventProxy: function(id) {
+ return function(evt) {
+ tinyMCEPopup.dom.events.callNativeHandler(id, evt);
+ };
}
};
tinyMCEPopup.init();
-tinyMCEPopup._wait(); // Wait for DOM Content Loaded
+
+tinymce.util.Dispatcher = function(scope) {
+ this.scope = scope || this;
+ this.listeners = [];
+
+ this.add = function(callback, scope) {
+ this.listeners.push({cb : callback, scope : scope || this.scope});
+
+ return callback;
+ };
+
+ this.addToTop = function(callback, scope) {
+ var self = this, listener = {cb : callback, scope : scope || self.scope};
+
+ // 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);
+ }
+
+ return callback;
+ };
+
+ this.remove = function(callback) {
+ var listeners = this.listeners, output = null;
+
+ tinymce.each(listeners, function(listener, i) {
+ if (callback == listener.cb) {
+ output = listener;
+ listeners.splice(i, 1);
+ return false;
+ }
+ });
+
+ return output;
+ };
+
+ this.dispatch = function() {
+ var self = this, returnValue, args = arguments, i, listeners = self.listeners, listener;
+
+ 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;
+ };
+};