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