plugin.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. (function () {
  2. var fullscreen = (function (domGlobals) {
  3. 'use strict';
  4. var Cell = function (initial) {
  5. var value = initial;
  6. var get = function () {
  7. return value;
  8. };
  9. var set = function (v) {
  10. value = v;
  11. };
  12. var clone = function () {
  13. return Cell(get());
  14. };
  15. return {
  16. get: get,
  17. set: set,
  18. clone: clone
  19. };
  20. };
  21. var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
  22. var get = function (fullscreenState) {
  23. return {
  24. isFullscreen: function () {
  25. return fullscreenState.get() !== null;
  26. }
  27. };
  28. };
  29. var Api = { get: get };
  30. var global$1 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
  31. var fireFullscreenStateChanged = function (editor, state) {
  32. editor.fire('FullscreenStateChanged', { state: state });
  33. };
  34. var Events = { fireFullscreenStateChanged: fireFullscreenStateChanged };
  35. var DOM = global$1.DOM;
  36. var getWindowSize = function () {
  37. var w;
  38. var h;
  39. var win = domGlobals.window;
  40. var doc = domGlobals.document;
  41. var body = doc.body;
  42. if (body.offsetWidth) {
  43. w = body.offsetWidth;
  44. h = body.offsetHeight;
  45. }
  46. if (win.innerWidth && win.innerHeight) {
  47. w = win.innerWidth;
  48. h = win.innerHeight;
  49. }
  50. return {
  51. w: w,
  52. h: h
  53. };
  54. };
  55. var getScrollPos = function () {
  56. var vp = DOM.getViewPort();
  57. return {
  58. x: vp.x,
  59. y: vp.y
  60. };
  61. };
  62. var setScrollPos = function (pos) {
  63. domGlobals.window.scrollTo(pos.x, pos.y);
  64. };
  65. var toggleFullscreen = function (editor, fullscreenState) {
  66. var body = domGlobals.document.body;
  67. var documentElement = domGlobals.document.documentElement;
  68. var editorContainerStyle;
  69. var editorContainer, iframe, iframeStyle;
  70. var fullscreenInfo = fullscreenState.get();
  71. var resize = function () {
  72. DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
  73. };
  74. var removeResize = function () {
  75. DOM.unbind(domGlobals.window, 'resize', resize);
  76. };
  77. editorContainer = editor.getContainer();
  78. editorContainerStyle = editorContainer.style;
  79. iframe = editor.getContentAreaContainer().firstChild;
  80. iframeStyle = iframe.style;
  81. if (!fullscreenInfo) {
  82. var newFullScreenInfo = {
  83. scrollPos: getScrollPos(),
  84. containerWidth: editorContainerStyle.width,
  85. containerHeight: editorContainerStyle.height,
  86. iframeWidth: iframeStyle.width,
  87. iframeHeight: iframeStyle.height,
  88. resizeHandler: resize,
  89. removeHandler: removeResize
  90. };
  91. iframeStyle.width = iframeStyle.height = '100%';
  92. editorContainerStyle.width = editorContainerStyle.height = '';
  93. DOM.addClass(body, 'mce-fullscreen');
  94. DOM.addClass(documentElement, 'mce-fullscreen');
  95. DOM.addClass(editorContainer, 'mce-fullscreen');
  96. DOM.bind(domGlobals.window, 'resize', resize);
  97. editor.on('remove', removeResize);
  98. resize();
  99. fullscreenState.set(newFullScreenInfo);
  100. Events.fireFullscreenStateChanged(editor, true);
  101. } else {
  102. iframeStyle.width = fullscreenInfo.iframeWidth;
  103. iframeStyle.height = fullscreenInfo.iframeHeight;
  104. if (fullscreenInfo.containerWidth) {
  105. editorContainerStyle.width = fullscreenInfo.containerWidth;
  106. }
  107. if (fullscreenInfo.containerHeight) {
  108. editorContainerStyle.height = fullscreenInfo.containerHeight;
  109. }
  110. DOM.removeClass(body, 'mce-fullscreen');
  111. DOM.removeClass(documentElement, 'mce-fullscreen');
  112. DOM.removeClass(editorContainer, 'mce-fullscreen');
  113. setScrollPos(fullscreenInfo.scrollPos);
  114. DOM.unbind(domGlobals.window, 'resize', fullscreenInfo.resizeHandler);
  115. editor.off('remove', fullscreenInfo.removeHandler);
  116. fullscreenState.set(null);
  117. Events.fireFullscreenStateChanged(editor, false);
  118. }
  119. };
  120. var Actions = { toggleFullscreen: toggleFullscreen };
  121. var register = function (editor, fullscreenState) {
  122. editor.addCommand('mceFullScreen', function () {
  123. Actions.toggleFullscreen(editor, fullscreenState);
  124. });
  125. };
  126. var Commands = { register: register };
  127. var postRender = function (editor) {
  128. return function (e) {
  129. var ctrl = e.control;
  130. editor.on('FullscreenStateChanged', function (e) {
  131. ctrl.active(e.state);
  132. });
  133. };
  134. };
  135. var register$1 = function (editor) {
  136. editor.addMenuItem('fullscreen', {
  137. text: 'Fullscreen',
  138. shortcut: 'Ctrl+Shift+F',
  139. selectable: true,
  140. cmd: 'mceFullScreen',
  141. onPostRender: postRender(editor),
  142. context: 'view'
  143. });
  144. editor.addButton('fullscreen', {
  145. active: false,
  146. tooltip: 'Fullscreen',
  147. cmd: 'mceFullScreen',
  148. onPostRender: postRender(editor)
  149. });
  150. };
  151. var Buttons = { register: register$1 };
  152. global.add('fullscreen', function (editor) {
  153. var fullscreenState = Cell(null);
  154. if (editor.settings.inline) {
  155. return Api.get(fullscreenState);
  156. }
  157. Commands.register(editor, fullscreenState);
  158. Buttons.register(editor);
  159. editor.addShortcut('Ctrl+Shift+F', '', 'mceFullScreen');
  160. return Api.get(fullscreenState);
  161. });
  162. function Plugin () {
  163. }
  164. return Plugin;
  165. }(window));
  166. })();