plugin.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /**
  2. * plugin.js
  3. *
  4. * Copyright, Moxiecode Systems AB
  5. * Released under LGPL License.
  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;
  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 toggleFullscreen() {
  33. var body = document.body, documentElement = document.documentElement, editorContainerStyle;
  34. var editorContainer, iframe, iframeStyle;
  35. function resize() {
  36. DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
  37. }
  38. fullscreenState = !fullscreenState;
  39. editorContainer = editor.getContainer();
  40. editorContainerStyle = editorContainer.style;
  41. iframe = editor.getContentAreaContainer().firstChild;
  42. iframeStyle = iframe.style;
  43. if (fullscreenState) {
  44. iframeWidth = iframeStyle.width;
  45. iframeHeight = iframeStyle.height;
  46. iframeStyle.width = iframeStyle.height = '100%';
  47. containerWidth = editorContainerStyle.width;
  48. containerHeight = editorContainerStyle.height;
  49. editorContainerStyle.width = editorContainerStyle.height = '';
  50. DOM.addClass(body, 'mce-fullscreen');
  51. DOM.addClass(documentElement, 'mce-fullscreen');
  52. DOM.addClass(editorContainer, 'mce-fullscreen');
  53. DOM.bind(window, 'resize', resize);
  54. resize();
  55. resizeHandler = resize;
  56. } else {
  57. iframeStyle.width = iframeWidth;
  58. iframeStyle.height = iframeHeight;
  59. if (containerWidth) {
  60. editorContainerStyle.width = containerWidth;
  61. }
  62. if (containerHeight) {
  63. editorContainerStyle.height = containerHeight;
  64. }
  65. DOM.removeClass(body, 'mce-fullscreen');
  66. DOM.removeClass(documentElement, 'mce-fullscreen');
  67. DOM.removeClass(editorContainer, 'mce-fullscreen');
  68. DOM.unbind(window, 'resize', resizeHandler);
  69. }
  70. editor.fire('FullscreenStateChanged', {state: fullscreenState});
  71. }
  72. editor.on('init', function() {
  73. editor.addShortcut('Ctrl+Alt+F', '', toggleFullscreen);
  74. });
  75. editor.on('remove', function() {
  76. if (resizeHandler) {
  77. DOM.unbind(window, 'resize', resizeHandler);
  78. }
  79. });
  80. editor.addCommand('mceFullScreen', toggleFullscreen);
  81. editor.addMenuItem('fullscreen', {
  82. text: 'Fullscreen',
  83. shortcut: 'Ctrl+Alt+F',
  84. selectable: true,
  85. onClick: toggleFullscreen,
  86. onPostRender: function() {
  87. var self = this;
  88. editor.on('FullscreenStateChanged', function(e) {
  89. self.active(e.state);
  90. });
  91. },
  92. context: 'view'
  93. });
  94. editor.addButton('fullscreen', {
  95. tooltip: 'Fullscreen',
  96. shortcut: 'Ctrl+Alt+F',
  97. onClick: toggleFullscreen,
  98. onPostRender: function() {
  99. var self = this;
  100. editor.on('FullscreenStateChanged', function(e) {
  101. self.active(e.state);
  102. });
  103. }
  104. });
  105. return {
  106. isFullscreen: function() {
  107. return fullscreenState;
  108. }
  109. };
  110. });