wp-includes/js/tinymce/plugins/wpdialogs/js/popup.js

   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
  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          * loses its 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          * loses its 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         /**
 181          * Loads a specific dialog language pack. If you pass in plugin_url as a arugment
 182          * when you open the window it will load the <plugin url>/langs/<code>_dlg.js lang pack file.
 183          *
 184          * @method requireLangPack
 185          */
 186         requireLangPack : function() {
 187                 var t = this, u = t.getWindowArg('plugin_url') || t.getWindowArg('theme_url');
 188
 189                 if (u && t.editor.settings.language && t.features.translate_i18n !== false) {
 190                         u += '/langs/' + t.editor.settings.language + '_dlg.js';
 191
 192                         if (!tinymce.ScriptLoader.isDone(u)) {
 193                                 document.write('<script type="text/javascript" src="' + tinymce._addVer(u) + '"></script>');
 194                                 tinymce.ScriptLoader.markDone(u);
 195                         }
 196                 }
 197         },
 198
 199         /**
 200          * Executes a color picker on the specified element id. When the user
 201          * then selects a color it will be set as the value of the specified element.
 202          *
 203          * @method pickColor
 204          * @param {DOMEvent} e DOM event object.
 205          * @param {string} element_id Element id to be filled with the color value from the picker.
 206          */
 207         pickColor : function(e, element_id) {
 208                 this.execCommand('mceColorPicker', true, {
 209                         color : document.getElementById(element_id).value,
 210                         func : function(c) {
 211                                 document.getElementById(element_id).value = c;
 212
 213                                 try {
 214                                         document.getElementById(element_id).onchange();
 215                                 } catch (ex) {
 216                                         // Try fire event, ignore errors
 217                                 }
 218                         }
 219                 });
 220         },
 221
 222         /**
 223          * Opens a filebrowser/imagebrowser this will set the output value from
 224          * the browser as a value on the specified element.
 225          *
 226          * @method openBrowser
 227          * @param {string} element_id Id of the element to set value in.
 228          * @param {string} type Type of browser to open image/file/flash.
 229          * @param {string} option Option name to get the file_broswer_callback function name from.
 230          */
 231         openBrowser : function(element_id, type, option) {
 232                 tinyMCEPopup.restoreSelection();
 233                 this.editor.execCallback('file_browser_callback', element_id, document.getElementById(element_id).value, type, window);
 234         },
 235
 236         /**
 237          * Creates a confirm dialog. Please don't use the blocking behavior of this
 238          * native version use the callback method instead then it can be extended.
 239          *
 240          * @method confirm
 241          * @param {String} t Title for the new confirm dialog.
 242          * @param {function} cb Callback function to be executed after the user has selected ok or cancel.
 243          * @param {Object} s Optional scope to execute the callback in.
 244          */
 245         confirm : function(t, cb, s) {
 246                 this.editor.windowManager.confirm(t, cb, s, window);
 247         },
 248
 249         /**
 250          * Creates an alert dialog. Please don't use the blocking behavior of this
 251          * native version use the callback method instead then it can be extended.
 252          *
 253          * @method alert
 254          * @param {String} t Title for the new alert dialog.
 255          * @param {function} cb Callback function to be executed after the user has selected ok.
 256          * @param {Object} s Optional scope to execute the callback in.
 257          */
 258         alert : function(tx, cb, s) {
 259                 this.editor.windowManager.alert(tx, cb, s, window);
 260         },
 261
 262         /**
 263          * Closes the current window.
 264          *
 265          * @method close
 266          */
 267         close : function() {
 268                 var t = this;
 269
 270                 // To avoid domain relaxing issue in Opera
 271                 function close() {
 272                         t.editor.windowManager.close(window);
 273                         t.editor = null;
 274                 };
 275
 276                 if (tinymce.isOpera)
 277                         t.getWin().setTimeout(close, 0);
 278                 else
 279                         close();
 280         },
 281
 282         // Internal functions
 283
 284         _restoreSelection : function(e) {
 285                 var el = e && e.target ? e.target : window.event.srcElement;
 286
 287                 if ( el.nodeName == 'INPUT' && ( el.type == 'submit' || el.type == 'button' ) ) {
 288                         tinyMCEPopup.restoreSelection();
 289                 }
 290         },
 291
 292 /*      _restoreSelection : function() {
 293                 var e = window.event.srcElement;
 294
 295                 // If user focus a non text input or textarea
 296                 if ((e.nodeName != 'INPUT' && e.nodeName != 'TEXTAREA') || e.type != 'text')
 297                         tinyMCEPopup.restoreSelection();
 298         },*/
 299
 300         _onDOMLoaded : function() {
 301                 var t = tinyMCEPopup, ti = document.title, bm, h, nv;
 302
 303                 if (t.domLoaded)
 304                         return;
 305
 306                 t.domLoaded = 1;
 307
 308                 tinyMCEPopup.init();
 309
 310                 // Translate page
 311                 if (t.features.translate_i18n !== false) {
 312                         h = document.body.innerHTML;
 313
 314                         // Replace a=x with a="x" in IE
 315                         if (tinymce.isIE)
 316                                 h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"')
 317
 318                         document.dir = t.editor.getParam('directionality','');
 319
 320                         if ((nv = t.editor.translate(h)) && nv != h)
 321                                 document.body.innerHTML = nv;
 322
 323                         if ((nv = t.editor.translate(ti)) && nv != ti)
 324                                 document.title = ti = nv;
 325                 }
 326
 327                 document.body.style.display = '';
 328
 329                 // Restore selection in IE when focus is placed on a non textarea or input element of the type text
 330                 if ( tinymce.isIE && ! tinymce.isIE11 ) {
 331                         document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
 332
 333                         // Add base target element for it since it would fail with modal dialogs
 334                         t.dom.add(t.dom.select('head')[0], 'base', {target : '_self'});
 335                 } else if ( tinymce.isIE11 ) {
 336                         document.addEventListener('mouseup', tinyMCEPopup._restoreSelection, false);
 337                 }
 338
 339                 t.restoreSelection();
 340
 341                 // Set inline title
 342                 if (!t.isWindow)
 343                         t.editor.windowManager.setTitle(window, ti);
 344                 else
 345                         window.focus();
 346
 347                 if (!tinymce.isIE && !t.isWindow) {
 348                         tinymce.dom.Event._add(document, 'focus', function() {
 349                                 t.editor.windowManager.focus(t.id);
 350                         });
 351                 }
 352
 353                 // Patch for accessibility
 354                 tinymce.each(t.dom.select('select'), function(e) {
 355                         e.onkeydown = tinyMCEPopup._accessHandler;
 356                 });
 357
 358                 // Call onInit
 359                 // Init must be called before focus so the selection won't get lost by the focus call
 360                 tinymce.each(t.listeners, function(o) {
 361                         o.func.call(o.scope, t.editor);
 362                 });
 363
 364                 // Move focus to window
 365                 if (t.getWindowArg('mce_auto_focus', true)) {
 366                         window.focus();
 367
 368                         // Focus element with mceFocus class
 369                         tinymce.each(document.forms, function(f) {
 370                                 tinymce.each(f.elements, function(e) {
 371                                         if (t.dom.hasClass(e, 'mceFocus') && !e.disabled) {
 372                                                 e.focus();
 373                                                 return false; // Break loop
 374                                         }
 375                                 });
 376                         });
 377                 }
 378
 379                 document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
 380         },
 381
 382         _accessHandler : function(e) {
 383                 e = e || window.event;
 384
 385                 if (e.keyCode == 13 || e.keyCode == 32) {
 386                         e = e.target || e.srcElement;
 387
 388                         if (e.onchange)
 389                                 e.onchange();
 390
 391                         return tinymce.dom.Event.cancel(e);
 392                 }
 393         },
 394
 395         _closeWinKeyHandler : function(e) {
 396                 e = e || window.event;
 397
 398                 if (e.keyCode == 27)
 399                         tinyMCEPopup.close();
 400         },
 401
 402         _wait : function() {
 403                 // Use IE method
 404                 if (document.attachEvent) {
 405                         document.attachEvent("onreadystatechange", function() {
 406                                 if (document.readyState === "complete") {
 407                                         document.detachEvent("onreadystatechange", arguments.callee);
 408                                         tinyMCEPopup._onDOMLoaded();
 409                                 }
 410                         });
 411
 412                         if (document.documentElement.doScroll && window == window.top) {
 413                                 (function() {
 414                                         if (tinyMCEPopup.domLoaded)
 415                                                 return;
 416
 417                                         try {
 418                                                 // If IE is used, use the trick by Diego Perini
 419                                                 // http://javascript.nwbox.com/IEContentLoaded/
 420                                                 document.documentElement.doScroll("left");
 421                                         } catch (ex) {
 422                                                 setTimeout(arguments.callee, 0);
 423                                                 return;
 424                                         }
 425
 426                                         tinyMCEPopup._onDOMLoaded();
 427                                 })();
 428                         }
 429
 430                         document.attachEvent('onload', tinyMCEPopup._onDOMLoaded);
 431                 } else if (document.addEventListener) {
 432                         window.addEventListener('DOMContentLoaded', tinyMCEPopup._onDOMLoaded, false);
 433                         window.addEventListener('load', tinyMCEPopup._onDOMLoaded, false);
 434                 }
 435         }
 436 };