Popup.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. /**
  2. * Popup.js
  3. *
  4. * Copyright 2009, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://tinymce.moxiecode.com/license
  8. * Contributing: http://tinymce.moxiecode.com/contributing
  9. */
  10. // Some global instances
  11. var tinymce = null, tinyMCEPopup, tinyMCE;
  12. /**
  13. * TinyMCE popup/dialog helper class. This gives you easy access to the
  14. * parent editor instance and a bunch of other things. It's higly recommended
  15. * that you load this script into your dialogs.
  16. *
  17. * @static
  18. * @class tinyMCEPopup
  19. */
  20. tinyMCEPopup = {
  21. /**
  22. * Initializes the popup this will be called automatically.
  23. *
  24. * @method init
  25. */
  26. init : function() {
  27. var t = this, w, ti;
  28. // Find window & API
  29. w = t.getWin();
  30. tinymce = w.tinymce;
  31. tinyMCE = w.tinyMCE;
  32. t.editor = tinymce.EditorManager.activeEditor;
  33. t.params = t.editor.windowManager.params;
  34. t.features = t.editor.windowManager.features;
  35. // Setup local DOM
  36. t.dom = t.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document);
  37. // Enables you to skip loading the default css
  38. if (t.features.popup_css !== false)
  39. t.dom.loadCSS(t.features.popup_css || t.editor.settings.popup_css);
  40. // Setup on init listeners
  41. t.listeners = [];
  42. /**
  43. * Fires when the popup is initialized.
  44. *
  45. * @event onInit
  46. * @param {tinymce.Editor} editor Editor instance.
  47. * @example
  48. * // Alerts the selected contents when the dialog is loaded
  49. * tinyMCEPopup.onInit.add(function(ed) {
  50. * alert(ed.selection.getContent());
  51. * });
  52. *
  53. * // Executes the init method on page load in some object using the SomeObject scope
  54. * tinyMCEPopup.onInit.add(SomeObject.init, SomeObject);
  55. */
  56. t.onInit = {
  57. add : function(f, s) {
  58. t.listeners.push({func : f, scope : s});
  59. }
  60. };
  61. t.isWindow = !t.getWindowArg('mce_inline');
  62. t.id = t.getWindowArg('mce_window_id');
  63. t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
  64. },
  65. /**
  66. * Returns the reference to the parent window that opened the dialog.
  67. *
  68. * @method getWin
  69. * @return {Window} Reference to the parent window that opened the dialog.
  70. */
  71. getWin : function() {
  72. // Added frameElement check to fix bug: #2817583
  73. return (!window.frameElement && window.dialogArguments) || opener || parent || top;
  74. },
  75. /**
  76. * Returns a window argument/parameter by name.
  77. *
  78. * @method getWindowArg
  79. * @param {String} n Name of the window argument to retrive.
  80. * @param {String} dv Optional default value to return.
  81. * @return {String} Argument value or default value if it wasn't found.
  82. */
  83. getWindowArg : function(n, dv) {
  84. var v = this.params[n];
  85. return tinymce.is(v) ? v : dv;
  86. },
  87. /**
  88. * Returns a editor parameter/config option value.
  89. *
  90. * @method getParam
  91. * @param {String} n Name of the editor config option to retrive.
  92. * @param {String} dv Optional default value to return.
  93. * @return {String} Parameter value or default value if it wasn't found.
  94. */
  95. getParam : function(n, dv) {
  96. return this.editor.getParam(n, dv);
  97. },
  98. /**
  99. * Returns a language item by key.
  100. *
  101. * @method getLang
  102. * @param {String} n Language item like mydialog.something.
  103. * @param {String} dv Optional default value to return.
  104. * @return {String} Language value for the item like "my string" or the default value if it wasn't found.
  105. */
  106. getLang : function(n, dv) {
  107. return this.editor.getLang(n, dv);
  108. },
  109. /**
  110. * Executed a command on editor that opened the dialog/popup.
  111. *
  112. * @method execCommand
  113. * @param {String} cmd Command to execute.
  114. * @param {Boolean} ui Optional boolean value if the UI for the command should be presented or not.
  115. * @param {Object} val Optional value to pass with the comman like an URL.
  116. * @param {Object} a Optional arguments object.
  117. */
  118. execCommand : function(cmd, ui, val, a) {
  119. a = a || {};
  120. a.skip_focus = 1;
  121. this.restoreSelection();
  122. return this.editor.execCommand(cmd, ui, val, a);
  123. },
  124. /**
  125. * Resizes the dialog to the inner size of the window. This is needed since various browsers
  126. * have different border sizes on windows.
  127. *
  128. * @method resizeToInnerSize
  129. */
  130. resizeToInnerSize : function() {
  131. var t = this;
  132. // Detach it to workaround a Chrome specific bug
  133. // https://sourceforge.net/tracker/?func=detail&atid=635682&aid=2926339&group_id=103281
  134. setTimeout(function() {
  135. var vp = t.dom.getViewPort(window);
  136. t.editor.windowManager.resizeBy(
  137. t.getWindowArg('mce_width') - vp.w,
  138. t.getWindowArg('mce_height') - vp.h,
  139. t.id || window
  140. );
  141. }, 10);
  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. * Stores the current editor selection for later restoration. This can be useful since some browsers
  157. * looses it's selection if a control element is selected/focused inside the dialogs.
  158. *
  159. * @method storeSelection
  160. */
  161. storeSelection : function() {
  162. this.editor.windowManager.bookmark = tinyMCEPopup.editor.selection.getBookmark(1);
  163. },
  164. /**
  165. * Restores any stored selection. This can be useful since some browsers
  166. * looses it's selection if a control element is selected/focused inside the dialogs.
  167. *
  168. * @method restoreSelection
  169. */
  170. restoreSelection : function() {
  171. var t = tinyMCEPopup;
  172. if (!t.isWindow && tinymce.isIE)
  173. t.editor.selection.moveToBookmark(t.editor.windowManager.bookmark);
  174. },
  175. /**
  176. * Loads a specific dialog language pack. If you pass in plugin_url as a arugment
  177. * when you open the window it will load the <plugin url>/langs/<code>_dlg.js lang pack file.
  178. *
  179. * @method requireLangPack
  180. */
  181. requireLangPack : function() {
  182. var t = this, u = t.getWindowArg('plugin_url') || t.getWindowArg('theme_url');
  183. if (u && t.editor.settings.language && t.features.translate_i18n !== false && t.editor.settings.language_load !== false) {
  184. u += '/langs/' + t.editor.settings.language + '_dlg.js';
  185. if (!tinymce.ScriptLoader.isDone(u)) {
  186. document.write('<script type="text/javascript" src="' + tinymce._addVer(u) + '"></script>');
  187. tinymce.ScriptLoader.markDone(u);
  188. }
  189. }
  190. },
  191. /**
  192. * Executes a color picker on the specified element id. When the user
  193. * then selects a color it will be set as the value of the specified element.
  194. *
  195. * @method pickColor
  196. * @param {DOMEvent} e DOM event object.
  197. * @param {string} element_id Element id to be filled with the color value from the picker.
  198. */
  199. pickColor : function(e, element_id) {
  200. this.execCommand('mceColorPicker', true, {
  201. color : document.getElementById(element_id).value,
  202. func : function(c) {
  203. document.getElementById(element_id).value = c;
  204. try {
  205. document.getElementById(element_id).onchange();
  206. } catch (ex) {
  207. // Try fire event, ignore errors
  208. }
  209. }
  210. });
  211. },
  212. /**
  213. * Opens a filebrowser/imagebrowser this will set the output value from
  214. * the browser as a value on the specified element.
  215. *
  216. * @method openBrowser
  217. * @param {string} element_id Id of the element to set value in.
  218. * @param {string} type Type of browser to open image/file/flash.
  219. * @param {string} option Option name to get the file_broswer_callback function name from.
  220. */
  221. openBrowser : function(element_id, type, option) {
  222. tinyMCEPopup.restoreSelection();
  223. this.editor.execCallback('file_browser_callback', element_id, document.getElementById(element_id).value, type, window);
  224. },
  225. /**
  226. * Creates a confirm dialog. Please don't use the blocking behavior of this
  227. * native version use the callback method instead then it can be extended.
  228. *
  229. * @method confirm
  230. * @param {String} t Title for the new confirm dialog.
  231. * @param {function} cb Callback function to be executed after the user has selected ok or cancel.
  232. * @param {Object} s Optional scope to execute the callback in.
  233. */
  234. confirm : function(t, cb, s) {
  235. this.editor.windowManager.confirm(t, cb, s, window);
  236. },
  237. /**
  238. * Creates a alert dialog. Please don't use the blocking behavior of this
  239. * native version use the callback method instead then it can be extended.
  240. *
  241. * @method alert
  242. * @param {String} t Title for the new alert dialog.
  243. * @param {function} cb Callback function to be executed after the user has selected ok.
  244. * @param {Object} s Optional scope to execute the callback in.
  245. */
  246. alert : function(tx, cb, s) {
  247. this.editor.windowManager.alert(tx, cb, s, window);
  248. },
  249. /**
  250. * Closes the current window.
  251. *
  252. * @method close
  253. */
  254. close : function() {
  255. var t = this;
  256. // To avoid domain relaxing issue in Opera
  257. function close() {
  258. t.editor.windowManager.close(window);
  259. tinymce = tinyMCE = t.editor = t.params = t.dom = t.dom.doc = null; // Cleanup
  260. };
  261. if (tinymce.isOpera)
  262. t.getWin().setTimeout(close, 0);
  263. else
  264. close();
  265. },
  266. // Internal functions
  267. _restoreSelection : function() {
  268. var e = window.event.srcElement;
  269. if (e.nodeName == 'INPUT' && (e.type == 'submit' || e.type == 'button'))
  270. tinyMCEPopup.restoreSelection();
  271. },
  272. /* _restoreSelection : function() {
  273. var e = window.event.srcElement;
  274. // If user focus a non text input or textarea
  275. if ((e.nodeName != 'INPUT' && e.nodeName != 'TEXTAREA') || e.type != 'text')
  276. tinyMCEPopup.restoreSelection();
  277. },*/
  278. _onDOMLoaded : function() {
  279. var t = tinyMCEPopup, ti = document.title, bm, h, nv;
  280. if (t.domLoaded)
  281. return;
  282. t.domLoaded = 1;
  283. // Translate page
  284. if (t.features.translate_i18n !== false) {
  285. h = document.body.innerHTML;
  286. // Replace a=x with a="x" in IE
  287. if (tinymce.isIE)
  288. h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"')
  289. document.dir = t.editor.getParam('directionality','');
  290. if ((nv = t.editor.translate(h)) && nv != h)
  291. document.body.innerHTML = nv;
  292. if ((nv = t.editor.translate(ti)) && nv != ti)
  293. document.title = ti = nv;
  294. }
  295. if (!t.editor.getParam('browser_preferred_colors', false) || !t.isWindow)
  296. t.dom.addClass(document.body, 'forceColors');
  297. document.body.style.display = '';
  298. // Restore selection in IE when focus is placed on a non textarea or input element of the type text
  299. if (tinymce.isIE) {
  300. document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
  301. // Add base target element for it since it would fail with modal dialogs
  302. t.dom.add(t.dom.select('head')[0], 'base', {target : '_self'});
  303. }
  304. t.restoreSelection();
  305. t.resizeToInnerSize();
  306. // Set inline title
  307. if (!t.isWindow)
  308. t.editor.windowManager.setTitle(window, ti);
  309. else
  310. window.focus();
  311. if (!tinymce.isIE && !t.isWindow) {
  312. tinymce.dom.Event._add(document, 'focus', function() {
  313. t.editor.windowManager.focus(t.id);
  314. });
  315. }
  316. // Patch for accessibility
  317. tinymce.each(t.dom.select('select'), function(e) {
  318. e.onkeydown = tinyMCEPopup._accessHandler;
  319. });
  320. // Call onInit
  321. // Init must be called before focus so the selection won't get lost by the focus call
  322. tinymce.each(t.listeners, function(o) {
  323. o.func.call(o.scope, t.editor);
  324. });
  325. // Move focus to window
  326. if (t.getWindowArg('mce_auto_focus', true)) {
  327. window.focus();
  328. // Focus element with mceFocus class
  329. tinymce.each(document.forms, function(f) {
  330. tinymce.each(f.elements, function(e) {
  331. if (t.dom.hasClass(e, 'mceFocus') && !e.disabled) {
  332. e.focus();
  333. return false; // Break loop
  334. }
  335. });
  336. });
  337. }
  338. document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
  339. },
  340. _accessHandler : function(e) {
  341. e = e || window.event;
  342. if (e.keyCode == 13 || e.keyCode == 32) {
  343. e = e.target || e.srcElement;
  344. if (e.onchange)
  345. e.onchange();
  346. return tinymce.dom.Event.cancel(e);
  347. }
  348. },
  349. _closeWinKeyHandler : function(e) {
  350. e = e || window.event;
  351. if (e.keyCode == 27)
  352. tinyMCEPopup.close();
  353. },
  354. _wait : function() {
  355. // Use IE method
  356. if (document.attachEvent) {
  357. document.attachEvent("onreadystatechange", function() {
  358. if (document.readyState === "complete") {
  359. document.detachEvent("onreadystatechange", arguments.callee);
  360. tinyMCEPopup._onDOMLoaded();
  361. }
  362. });
  363. if (document.documentElement.doScroll && window == window.top) {
  364. (function() {
  365. if (tinyMCEPopup.domLoaded)
  366. return;
  367. try {
  368. // If IE is used, use the trick by Diego Perini licensed under MIT by request to the author.
  369. // http://javascript.nwbox.com/IEContentLoaded/
  370. document.documentElement.doScroll("left");
  371. } catch (ex) {
  372. setTimeout(arguments.callee, 0);
  373. return;
  374. }
  375. tinyMCEPopup._onDOMLoaded();
  376. })();
  377. }
  378. document.attachEvent('onload', tinyMCEPopup._onDOMLoaded);
  379. } else if (document.addEventListener) {
  380. window.addEventListener('DOMContentLoaded', tinyMCEPopup._onDOMLoaded, false);
  381. window.addEventListener('load', tinyMCEPopup._onDOMLoaded, false);
  382. }
  383. }
  384. };
  385. tinyMCEPopup.init();
  386. tinyMCEPopup._wait(); // Wait for DOM Content Loaded