plugin.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /**
  2. * Copyright (c) Tiny Technologies, Inc. All rights reserved.
  3. * Licensed under the LGPL or a commercial license.
  4. * For LGPL see License.txt in the project root for license information.
  5. * For commercial licenses see https://www.tiny.cloud/
  6. *
  7. * Version: 5.0.1 (2019-02-21)
  8. */
  9. (function () {
  10. var fullscreen = (function (domGlobals) {
  11. 'use strict';
  12. var Cell = function (initial) {
  13. var value = initial;
  14. var get = function () {
  15. return value;
  16. };
  17. var set = function (v) {
  18. value = v;
  19. };
  20. var clone = function () {
  21. return Cell(get());
  22. };
  23. return {
  24. get: get,
  25. set: set,
  26. clone: clone
  27. };
  28. };
  29. var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
  30. var get = function (fullscreenState) {
  31. return {
  32. isFullscreen: function () {
  33. return fullscreenState.get() !== null;
  34. }
  35. };
  36. };
  37. var Api = { get: get };
  38. var global$1 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
  39. var fireFullscreenStateChanged = function (editor, state) {
  40. editor.fire('FullscreenStateChanged', { state: state });
  41. };
  42. var Events = { fireFullscreenStateChanged: fireFullscreenStateChanged };
  43. var DOM = global$1.DOM;
  44. var getWindowSize = function () {
  45. var w;
  46. var h;
  47. var win = domGlobals.window;
  48. var doc = domGlobals.document;
  49. var body = doc.body;
  50. if (body.offsetWidth) {
  51. w = body.offsetWidth;
  52. h = body.offsetHeight;
  53. }
  54. if (win.innerWidth && win.innerHeight) {
  55. w = win.innerWidth;
  56. h = win.innerHeight;
  57. }
  58. return {
  59. w: w,
  60. h: h
  61. };
  62. };
  63. var getScrollPos = function () {
  64. var vp = DOM.getViewPort();
  65. return {
  66. x: vp.x,
  67. y: vp.y
  68. };
  69. };
  70. var setScrollPos = function (pos) {
  71. domGlobals.window.scrollTo(pos.x, pos.y);
  72. };
  73. var toggleFullscreen = function (editor, fullscreenState) {
  74. var body = domGlobals.document.body;
  75. var documentElement = domGlobals.document.documentElement;
  76. var editorContainerStyle;
  77. var editorContainer, iframe, iframeStyle;
  78. var fullscreenInfo = fullscreenState.get();
  79. var resize = function () {
  80. DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
  81. };
  82. var removeResize = function () {
  83. DOM.unbind(domGlobals.window, 'resize', resize);
  84. };
  85. editorContainer = editor.getContainer();
  86. editorContainerStyle = editorContainer.style;
  87. iframe = editor.getContentAreaContainer().firstChild;
  88. iframeStyle = iframe.style;
  89. if (!fullscreenInfo) {
  90. var newFullScreenInfo = {
  91. scrollPos: getScrollPos(),
  92. containerWidth: editorContainerStyle.width,
  93. containerHeight: editorContainerStyle.height,
  94. iframeWidth: iframeStyle.width,
  95. iframeHeight: iframeStyle.height,
  96. resizeHandler: resize,
  97. removeHandler: removeResize
  98. };
  99. iframeStyle.width = iframeStyle.height = '100%';
  100. editorContainerStyle.width = editorContainerStyle.height = '';
  101. DOM.addClass(body, 'tox-fullscreen');
  102. DOM.addClass(documentElement, 'tox-fullscreen');
  103. DOM.addClass(editorContainer, 'tox-fullscreen');
  104. DOM.bind(domGlobals.window, 'resize', resize);
  105. editor.on('remove', removeResize);
  106. resize();
  107. fullscreenState.set(newFullScreenInfo);
  108. Events.fireFullscreenStateChanged(editor, true);
  109. } else {
  110. iframeStyle.width = fullscreenInfo.iframeWidth;
  111. iframeStyle.height = fullscreenInfo.iframeHeight;
  112. if (fullscreenInfo.containerWidth) {
  113. editorContainerStyle.width = fullscreenInfo.containerWidth;
  114. }
  115. if (fullscreenInfo.containerHeight) {
  116. editorContainerStyle.height = fullscreenInfo.containerHeight;
  117. }
  118. DOM.removeClass(body, 'tox-fullscreen');
  119. DOM.removeClass(documentElement, 'tox-fullscreen');
  120. DOM.removeClass(editorContainer, 'tox-fullscreen');
  121. setScrollPos(fullscreenInfo.scrollPos);
  122. DOM.unbind(domGlobals.window, 'resize', fullscreenInfo.resizeHandler);
  123. editor.off('remove', fullscreenInfo.removeHandler);
  124. fullscreenState.set(null);
  125. Events.fireFullscreenStateChanged(editor, false);
  126. }
  127. };
  128. var Actions = { toggleFullscreen: toggleFullscreen };
  129. var register = function (editor, fullscreenState) {
  130. editor.addCommand('mceFullScreen', function () {
  131. Actions.toggleFullscreen(editor, fullscreenState);
  132. });
  133. };
  134. var Commands = { register: register };
  135. var makeSetupHandler = function (editor, fullscreenState) {
  136. return function (api) {
  137. api.setActive(fullscreenState.get() !== null);
  138. var editorEventCallback = function (e) {
  139. return api.setActive(e.state);
  140. };
  141. editor.on('FullscreenStateChanged', editorEventCallback);
  142. return function () {
  143. return editor.off('FullscreenStateChanged', editorEventCallback);
  144. };
  145. };
  146. };
  147. var register$1 = function (editor, fullscreenState) {
  148. editor.ui.registry.addToggleMenuItem('fullscreen', {
  149. text: 'Fullscreen',
  150. shortcut: 'Meta+Shift+F',
  151. onAction: function () {
  152. return editor.execCommand('mceFullScreen');
  153. },
  154. onSetup: makeSetupHandler(editor, fullscreenState)
  155. });
  156. editor.ui.registry.addToggleButton('fullscreen', {
  157. tooltip: 'Fullscreen',
  158. icon: 'fullscreen',
  159. onAction: function () {
  160. return editor.execCommand('mceFullScreen');
  161. },
  162. onSetup: makeSetupHandler(editor, fullscreenState)
  163. });
  164. };
  165. var Buttons = { register: register$1 };
  166. global.add('fullscreen', function (editor) {
  167. var fullscreenState = Cell(null);
  168. if (editor.settings.inline) {
  169. return Api.get(fullscreenState);
  170. }
  171. Commands.register(editor, fullscreenState);
  172. Buttons.register(editor, fullscreenState);
  173. editor.addShortcut('Meta+Shift+F', '', 'mceFullScreen');
  174. return Api.get(fullscreenState);
  175. });
  176. function Plugin () {
  177. }
  178. return Plugin;
  179. }(window));
  180. })();