4 * Released under LGPL License.
5 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
11 /*global tinymce:true */
13 tinymce.PluginManager.add('fullscreen', function(editor) {
14 var fullscreenState = false, DOM = tinymce.DOM, iframeWidth, iframeHeight, resizeHandler;
15 var containerWidth, containerHeight, scrollPos;
17 if (editor.settings.inline) {
21 function getWindowSize() {
22 var w, h, win = window, doc = document;
26 if (body.offsetWidth) {
28 h = body.offsetHeight;
32 if (win.innerWidth && win.innerHeight) {
40 function getScrollPos() {
41 var vp = tinymce.DOM.getViewPort();
49 function setScrollPos(pos) {
50 scrollTo(pos.x, pos.y);
53 function toggleFullscreen() {
54 var body = document.body, documentElement = document.documentElement, editorContainerStyle;
55 var editorContainer, iframe, iframeStyle;
58 DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
61 fullscreenState = !fullscreenState;
63 editorContainer = editor.getContainer();
64 editorContainerStyle = editorContainer.style;
65 iframe = editor.getContentAreaContainer().firstChild;
66 iframeStyle = iframe.style;
68 if (fullscreenState) {
69 scrollPos = getScrollPos();
70 iframeWidth = iframeStyle.width;
71 iframeHeight = iframeStyle.height;
72 iframeStyle.width = iframeStyle.height = '100%';
73 containerWidth = editorContainerStyle.width;
74 containerHeight = editorContainerStyle.height;
75 editorContainerStyle.width = editorContainerStyle.height = '';
77 DOM.addClass(body, 'mce-fullscreen');
78 DOM.addClass(documentElement, 'mce-fullscreen');
79 DOM.addClass(editorContainer, 'mce-fullscreen');
81 DOM.bind(window, 'resize', resize);
83 resizeHandler = resize;
85 iframeStyle.width = iframeWidth;
86 iframeStyle.height = iframeHeight;
89 editorContainerStyle.width = containerWidth;
92 if (containerHeight) {
93 editorContainerStyle.height = containerHeight;
96 DOM.removeClass(body, 'mce-fullscreen');
97 DOM.removeClass(documentElement, 'mce-fullscreen');
98 DOM.removeClass(editorContainer, 'mce-fullscreen');
99 DOM.unbind(window, 'resize', resizeHandler);
100 setScrollPos(scrollPos);
103 editor.fire('FullscreenStateChanged', {state: fullscreenState});
106 editor.on('init', function() {
107 editor.addShortcut('Ctrl+Shift+F', '', toggleFullscreen);
110 editor.on('remove', function() {
112 DOM.unbind(window, 'resize', resizeHandler);
116 editor.addCommand('mceFullScreen', toggleFullscreen);
118 editor.addMenuItem('fullscreen', {
120 shortcut: 'Ctrl+Shift+F',
122 onClick: function() {
126 onPostRender: function() {
129 editor.on('FullscreenStateChanged', function(e) {
130 self.active(e.state);
136 editor.addButton('fullscreen', {
137 tooltip: 'Fullscreen',
138 shortcut: 'Ctrl+Shift+F',
139 onClick: toggleFullscreen,
140 onPostRender: function() {
143 editor.on('FullscreenStateChanged', function(e) {
144 self.active(e.state);
150 isFullscreen: function() {
151 return fullscreenState;