4 * Copyright, Moxiecode Systems AB
5 * Released under LGPL License.
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;
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 toggleFullscreen() {
41 var body = document.body, documentElement = document.documentElement, editorContainerStyle;
42 var editorContainer, iframe, iframeStyle;
45 DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
48 fullscreenState = !fullscreenState;
50 editorContainer = editor.getContainer();
51 editorContainerStyle = editorContainer.style;
52 iframe = editor.getContentAreaContainer().firstChild;
53 iframeStyle = iframe.style;
55 if (fullscreenState) {
56 iframeWidth = iframeStyle.width;
57 iframeHeight = iframeStyle.height;
58 iframeStyle.width = iframeStyle.height = '100%';
59 containerWidth = editorContainerStyle.width;
60 containerHeight = editorContainerStyle.height;
61 editorContainerStyle.width = editorContainerStyle.height = '';
63 DOM.addClass(body, 'mce-fullscreen');
64 DOM.addClass(documentElement, 'mce-fullscreen');
65 DOM.addClass(editorContainer, 'mce-fullscreen');
67 DOM.bind(window, 'resize', resize);
69 resizeHandler = resize;
71 iframeStyle.width = iframeWidth;
72 iframeStyle.height = iframeHeight;
75 editorContainerStyle.width = containerWidth;
78 if (containerHeight) {
79 editorContainerStyle.height = containerHeight;
82 DOM.removeClass(body, 'mce-fullscreen');
83 DOM.removeClass(documentElement, 'mce-fullscreen');
84 DOM.removeClass(editorContainer, 'mce-fullscreen');
85 DOM.unbind(window, 'resize', resizeHandler);
88 editor.fire('FullscreenStateChanged', {state: fullscreenState});
91 editor.on('init', function() {
92 editor.addShortcut('Meta+Alt+F', '', toggleFullscreen);
95 editor.on('remove', function() {
97 DOM.unbind(window, 'resize', resizeHandler);
101 editor.addCommand('mceFullScreen', toggleFullscreen);
103 editor.addMenuItem('fullscreen', {
105 shortcut: 'Meta+Alt+F',
107 onClick: toggleFullscreen,
108 onPostRender: function() {
111 editor.on('FullscreenStateChanged', function(e) {
112 self.active(e.state);
118 editor.addButton('fullscreen', {
119 tooltip: 'Fullscreen',
120 shortcut: 'Meta+Alt+F',
121 onClick: toggleFullscreen,
122 onPostRender: function() {
125 editor.on('FullscreenStateChanged', function(e) {
126 self.active(e.state);
132 isFullscreen: function() {
133 return fullscreenState;