You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

155 lines
3.5 KiB

  1. /**
  2. * plugin.js
  3. *
  4. * Released under LGPL License.
  5. * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
  6. *
  7. * License: http://www.tinymce.com/license
  8. * Contributing: http://www.tinymce.com/contributing
  9. */
  10. /*global tinymce:true */
  11. tinymce.PluginManager.add('fullscreen', function(editor) {
  12. var fullscreenState = false, DOM = tinymce.DOM, iframeWidth, iframeHeight, resizeHandler;
  13. var containerWidth, containerHeight, scrollPos;
  14. if (editor.settings.inline) {
  15. return;
  16. }
  17. function getWindowSize() {
  18. var w, h, win = window, doc = document;
  19. var body = doc.body;
  20. // Old IE
  21. if (body.offsetWidth) {
  22. w = body.offsetWidth;
  23. h = body.offsetHeight;
  24. }
  25. // Modern browsers
  26. if (win.innerWidth && win.innerHeight) {
  27. w = win.innerWidth;
  28. h = win.innerHeight;
  29. }
  30. return {w: w, h: h};
  31. }
  32. function getScrollPos() {
  33. var vp = tinymce.DOM.getViewPort();
  34. return {
  35. x: vp.x,
  36. y: vp.y
  37. };
  38. }
  39. function setScrollPos(pos) {
  40. scrollTo(pos.x, pos.y);
  41. }
  42. function toggleFullscreen() {
  43. var body = document.body, documentElement = document.documentElement, editorContainerStyle;
  44. var editorContainer, iframe, iframeStyle;
  45. function resize() {
  46. DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
  47. }
  48. fullscreenState = !fullscreenState;
  49. editorContainer = editor.getContainer();
  50. editorContainerStyle = editorContainer.style;
  51. iframe = editor.getContentAreaContainer().firstChild;
  52. iframeStyle = iframe.style;
  53. if (fullscreenState) {
  54. scrollPos = getScrollPos();
  55. iframeWidth = iframeStyle.width;
  56. iframeHeight = iframeStyle.height;
  57. iframeStyle.width = iframeStyle.height = '100%';
  58. containerWidth = editorContainerStyle.width;
  59. containerHeight = editorContainerStyle.height;
  60. editorContainerStyle.width = editorContainerStyle.height = '';
  61. DOM.addClass(body, 'mce-fullscreen');
  62. DOM.addClass(documentElement, 'mce-fullscreen');
  63. DOM.addClass(editorContainer, 'mce-fullscreen');
  64. DOM.bind(window, 'resize', resize);
  65. resize();
  66. resizeHandler = resize;
  67. } else {
  68. iframeStyle.width = iframeWidth;
  69. iframeStyle.height = iframeHeight;
  70. if (containerWidth) {
  71. editorContainerStyle.width = containerWidth;
  72. }
  73. if (containerHeight) {
  74. editorContainerStyle.height = containerHeight;
  75. }
  76. DOM.removeClass(body, 'mce-fullscreen');
  77. DOM.removeClass(documentElement, 'mce-fullscreen');
  78. DOM.removeClass(editorContainer, 'mce-fullscreen');
  79. DOM.unbind(window, 'resize', resizeHandler);
  80. setScrollPos(scrollPos);
  81. }
  82. editor.fire('FullscreenStateChanged', {state: fullscreenState});
  83. }
  84. editor.on('init', function() {
  85. editor.addShortcut('Ctrl+Shift+F', '', toggleFullscreen);
  86. });
  87. editor.on('remove', function() {
  88. if (resizeHandler) {
  89. DOM.unbind(window, 'resize', resizeHandler);
  90. }
  91. });
  92. editor.addCommand('mceFullScreen', toggleFullscreen);
  93. editor.addMenuItem('fullscreen', {
  94. text: 'Fullscreen',
  95. shortcut: 'Ctrl+Shift+F',
  96. selectable: true,
  97. onClick: function() {
  98. toggleFullscreen();
  99. editor.focus();
  100. },
  101. onPostRender: function() {
  102. var self = this;
  103. editor.on('FullscreenStateChanged', function(e) {
  104. self.active(e.state);
  105. });
  106. },
  107. context: 'view'
  108. });
  109. editor.addButton('fullscreen', {
  110. tooltip: 'Fullscreen',
  111. shortcut: 'Ctrl+Shift+F',
  112. onClick: toggleFullscreen,
  113. onPostRender: function() {
  114. var self = this;
  115. editor.on('FullscreenStateChanged', function(e) {
  116. self.active(e.state);
  117. });
  118. }
  119. });
  120. return {
  121. isFullscreen: function() {
  122. return fullscreenState;
  123. }
  124. };
  125. });