]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-includes/js/tinymce/tiny_mce_popup.js
WordPress 4.1
[autoinstalls/wordpress.git] / wp-includes / js / tinymce / tiny_mce_popup.js
index 6c8f73b67b53062e0a7ce577790fcc7b54384804..733f4397ed7d3d4f7d53b10b2314a6a5d53c2f23 100644 (file)
-// 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;
 
@@ -134,12 +318,13 @@ tinyMCEPopup = {
                function close() {
                        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   
@@ -147,8 +332,9 @@ tinyMCEPopup = {
        _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() {
@@ -160,36 +346,73 @@ tinyMCEPopup = {
        },*/
 
        _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)
+               if (!t.isWindow) {
                        t.editor.windowManager.setTitle(window, ti);
-               else
+               } 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);
                        });
                }
 
@@ -220,16 +443,23 @@ tinyMCEPopup = {
                }
 
                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);
                }
@@ -238,38 +468,75 @@ tinyMCEPopup = {
        _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;
+       };
+};