2017-05-08 01:32:46 -04:00
|
|
|
(function () {
|
2019-05-15 19:45:52 -04:00
|
|
|
var fullscreen = (function (domGlobals) {
|
2019-01-29 15:19:51 -05:00
|
|
|
'use strict';
|
2018-04-25 18:35:21 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var Cell = function (initial) {
|
|
|
|
var value = initial;
|
|
|
|
var get = function () {
|
|
|
|
return value;
|
|
|
|
};
|
|
|
|
var set = function (v) {
|
|
|
|
value = v;
|
|
|
|
};
|
|
|
|
var clone = function () {
|
|
|
|
return Cell(get());
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
get: get,
|
|
|
|
set: set,
|
|
|
|
clone: clone
|
|
|
|
};
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2017-05-08 01:32:46 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
|
2017-05-08 01:32:46 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var get = function (fullscreenState) {
|
|
|
|
return {
|
|
|
|
isFullscreen: function () {
|
|
|
|
return fullscreenState.get() !== null;
|
|
|
|
}
|
|
|
|
};
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var Api = { get: get };
|
2017-05-08 01:32:46 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var global$1 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
|
2018-04-25 18:35:21 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var fireFullscreenStateChanged = function (editor, state) {
|
|
|
|
editor.fire('FullscreenStateChanged', { state: state });
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var Events = { fireFullscreenStateChanged: fireFullscreenStateChanged };
|
|
|
|
|
|
|
|
var DOM = global$1.DOM;
|
|
|
|
var getWindowSize = function () {
|
|
|
|
var w;
|
|
|
|
var h;
|
2019-05-15 19:45:52 -04:00
|
|
|
var win = domGlobals.window;
|
|
|
|
var doc = domGlobals.document;
|
2019-01-29 15:19:51 -05:00
|
|
|
var body = doc.body;
|
|
|
|
if (body.offsetWidth) {
|
|
|
|
w = body.offsetWidth;
|
|
|
|
h = body.offsetHeight;
|
|
|
|
}
|
|
|
|
if (win.innerWidth && win.innerHeight) {
|
|
|
|
w = win.innerWidth;
|
|
|
|
h = win.innerHeight;
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
w: w,
|
|
|
|
h: h
|
|
|
|
};
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var getScrollPos = function () {
|
|
|
|
var vp = DOM.getViewPort();
|
|
|
|
return {
|
|
|
|
x: vp.x,
|
|
|
|
y: vp.y
|
|
|
|
};
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var setScrollPos = function (pos) {
|
2019-05-15 19:45:52 -04:00
|
|
|
domGlobals.window.scrollTo(pos.x, pos.y);
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var toggleFullscreen = function (editor, fullscreenState) {
|
2019-05-15 19:45:52 -04:00
|
|
|
var body = domGlobals.document.body;
|
|
|
|
var documentElement = domGlobals.document.documentElement;
|
2019-01-29 15:19:51 -05:00
|
|
|
var editorContainerStyle;
|
|
|
|
var editorContainer, iframe, iframeStyle;
|
|
|
|
var fullscreenInfo = fullscreenState.get();
|
|
|
|
var resize = function () {
|
|
|
|
DOM.setStyle(iframe, 'height', getWindowSize().h - (editorContainer.clientHeight - iframe.clientHeight));
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var removeResize = function () {
|
2019-05-15 19:45:52 -04:00
|
|
|
DOM.unbind(domGlobals.window, 'resize', resize);
|
2019-01-29 15:19:51 -05:00
|
|
|
};
|
|
|
|
editorContainer = editor.getContainer();
|
|
|
|
editorContainerStyle = editorContainer.style;
|
|
|
|
iframe = editor.getContentAreaContainer().firstChild;
|
|
|
|
iframeStyle = iframe.style;
|
|
|
|
if (!fullscreenInfo) {
|
|
|
|
var newFullScreenInfo = {
|
|
|
|
scrollPos: getScrollPos(),
|
|
|
|
containerWidth: editorContainerStyle.width,
|
|
|
|
containerHeight: editorContainerStyle.height,
|
|
|
|
iframeWidth: iframeStyle.width,
|
|
|
|
iframeHeight: iframeStyle.height,
|
|
|
|
resizeHandler: resize,
|
|
|
|
removeHandler: removeResize
|
|
|
|
};
|
|
|
|
iframeStyle.width = iframeStyle.height = '100%';
|
|
|
|
editorContainerStyle.width = editorContainerStyle.height = '';
|
|
|
|
DOM.addClass(body, 'mce-fullscreen');
|
|
|
|
DOM.addClass(documentElement, 'mce-fullscreen');
|
|
|
|
DOM.addClass(editorContainer, 'mce-fullscreen');
|
2019-05-15 19:45:52 -04:00
|
|
|
DOM.bind(domGlobals.window, 'resize', resize);
|
2019-01-29 15:19:51 -05:00
|
|
|
editor.on('remove', removeResize);
|
|
|
|
resize();
|
|
|
|
fullscreenState.set(newFullScreenInfo);
|
|
|
|
Events.fireFullscreenStateChanged(editor, true);
|
|
|
|
} else {
|
|
|
|
iframeStyle.width = fullscreenInfo.iframeWidth;
|
|
|
|
iframeStyle.height = fullscreenInfo.iframeHeight;
|
|
|
|
if (fullscreenInfo.containerWidth) {
|
|
|
|
editorContainerStyle.width = fullscreenInfo.containerWidth;
|
|
|
|
}
|
|
|
|
if (fullscreenInfo.containerHeight) {
|
|
|
|
editorContainerStyle.height = fullscreenInfo.containerHeight;
|
|
|
|
}
|
|
|
|
DOM.removeClass(body, 'mce-fullscreen');
|
|
|
|
DOM.removeClass(documentElement, 'mce-fullscreen');
|
|
|
|
DOM.removeClass(editorContainer, 'mce-fullscreen');
|
|
|
|
setScrollPos(fullscreenInfo.scrollPos);
|
2019-05-15 19:45:52 -04:00
|
|
|
DOM.unbind(domGlobals.window, 'resize', fullscreenInfo.resizeHandler);
|
2019-01-29 15:19:51 -05:00
|
|
|
editor.off('remove', fullscreenInfo.removeHandler);
|
|
|
|
fullscreenState.set(null);
|
|
|
|
Events.fireFullscreenStateChanged(editor, false);
|
2017-05-08 01:32:46 -04:00
|
|
|
}
|
2019-01-29 15:19:51 -05:00
|
|
|
};
|
|
|
|
var Actions = { toggleFullscreen: toggleFullscreen };
|
2017-05-08 01:32:46 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var register = function (editor, fullscreenState) {
|
|
|
|
editor.addCommand('mceFullScreen', function () {
|
|
|
|
Actions.toggleFullscreen(editor, fullscreenState);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var Commands = { register: register };
|
2017-05-08 01:32:46 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
var postRender = function (editor) {
|
|
|
|
return function (e) {
|
|
|
|
var ctrl = e.control;
|
|
|
|
editor.on('FullscreenStateChanged', function (e) {
|
|
|
|
ctrl.active(e.state);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
var register$1 = function (editor) {
|
|
|
|
editor.addMenuItem('fullscreen', {
|
|
|
|
text: 'Fullscreen',
|
|
|
|
shortcut: 'Ctrl+Shift+F',
|
|
|
|
selectable: true,
|
|
|
|
cmd: 'mceFullScreen',
|
|
|
|
onPostRender: postRender(editor),
|
|
|
|
context: 'view'
|
|
|
|
});
|
|
|
|
editor.addButton('fullscreen', {
|
|
|
|
active: false,
|
|
|
|
tooltip: 'Fullscreen',
|
|
|
|
cmd: 'mceFullScreen',
|
|
|
|
onPostRender: postRender(editor)
|
2017-05-08 01:32:46 -04:00
|
|
|
});
|
2018-04-25 18:35:21 -04:00
|
|
|
};
|
2019-01-29 15:19:51 -05:00
|
|
|
var Buttons = { register: register$1 };
|
2017-05-08 01:32:46 -04:00
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
global.add('fullscreen', function (editor) {
|
|
|
|
var fullscreenState = Cell(null);
|
|
|
|
if (editor.settings.inline) {
|
|
|
|
return Api.get(fullscreenState);
|
|
|
|
}
|
|
|
|
Commands.register(editor, fullscreenState);
|
|
|
|
Buttons.register(editor);
|
|
|
|
editor.addShortcut('Ctrl+Shift+F', '', 'mceFullScreen');
|
|
|
|
return Api.get(fullscreenState);
|
|
|
|
});
|
|
|
|
function Plugin () {
|
2018-04-25 18:35:21 -04:00
|
|
|
}
|
|
|
|
|
2019-01-29 15:19:51 -05:00
|
|
|
return Plugin;
|
2018-04-25 18:35:21 -04:00
|
|
|
|
2019-05-15 19:45:52 -04:00
|
|
|
}(window));
|
2017-05-08 01:32:46 -04:00
|
|
|
})();
|