jodit/src/plugins/fullsize.ts

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
 * For GPL see LICENSE-GPL.txt in the project root for license information.
 * For MIT see LICENSE-MIT.txt in the project root for license information.
 * For commercial licenses see https://xdsoft.net/jodit/commercial/
 * Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

import { Config } from '../Config';
import * as consts from '../constants';
import { css } from '../modules/helpers/';
import { ToolbarIcon } from '../modules/toolbar/icon';
import { IControlType } from '../types/toolbar';
import { IJodit, IViewWithToolbar } from '../types';

/**
 * Fullsize plugin
 *
 * @module Fullsize
 */

/**
 * @property{boolean} fullsize=false true Editor toWYSIWYG open toWYSIWYG full screen
 * @property{boolean} globalFullsize=true if true, after `fullsize` -  all editors element
 * get jodit_fullsize_box class (z-index: 100000 !important;)
 * @example
 * ```javascript
 * var editor = new jodit({
 *     fullsize: true // fullsize editor
 * });
 * ```
 * @example
 * ```javascript
 * var editor = new Jodit();
 * editor.events.fire('toggleFullSize');
 * editor.events.fire('toggleFullSize', true); // fullsize
 * editor.events.fire('toggleFullSize', false); // usual mode
 * ```
 */

declare module '../Config' {
	interface Config {
		fullsize: boolean;
		globalFullsize: boolean;
	}
}

Config.prototype.fullsize = false;
Config.prototype.globalFullsize = true;
Config.prototype.controls.fullsize = {
	exec: (editor: IJodit) => {
		editor.toggleFullSize();
	},
	isActive: (editor: IJodit) => editor.isFullSize(),
	getLabel: (editor: IJodit, btn, button) => {
		const mode: string = editor.isFullSize() ? 'shrink' : 'fullsize';

		if (button) {
			button.textBox.innerHTML = !editor.options.textIcons
				? ToolbarIcon.getIcon(mode)
				: `<span>${editor.i18n(mode)}</span>`;
			(button.textBox.firstChild as HTMLElement).classList.add(
				'jodit_icon'
			);
		}
	},
	tooltip: 'Open editor in fullsize',
	mode: consts.MODE_SOURCE + consts.MODE_WYSIWYG
} as IControlType;

/**
 * Process `toggleFullSize` event, and behavior - set/unset fullsize mode
 *
 * @param {Jodit} editor
 */
export function fullsize(editor: IViewWithToolbar) {
	let shown: boolean = false,
		oldHeight: number = 0,
		oldWidth: number = 0,
		wasToggled = false;

	const resize = () => {
			if (editor.events) {
				if (shown) {
					oldHeight = css(editor.container, 'height') as number;
					oldWidth = css(editor.container, 'width') as number;
					css(editor.container, {
						height: editor.ownerWindow.innerHeight,
						width: editor.ownerWindow.innerWidth
					});
					wasToggled = true;
				} else if (wasToggled) {
					css(editor.container, {
						height: oldHeight || 'auto',
						width: oldWidth || 'auto'
					});
				}
			}
		},
		toggle = (condition?: boolean) => {
			if (!editor.container) {
				return;
			}

			if (condition === undefined) {
				condition = !editor.container.classList.contains(
					'jodit_fullsize'
				);
			}

			editor.options.fullsize = !!condition;

			shown = condition;

			editor.container.classList.toggle('jodit_fullsize', condition);

			if (editor.toolbar) {
				css(editor.toolbar.container, 'width', 'auto');
			}

			if (editor.options.globalFullsize) {
				let node = editor.container.parentNode as HTMLElement;

				while (node && node.nodeType !== Node.DOCUMENT_NODE) {
					node.classList.toggle('jodit_fullsize_box', condition);
					node = node.parentNode as HTMLElement;
				}

				resize();
			}

			editor.events.fire('afterResize');
		};

	if (editor.options.globalFullsize) {
		editor.events.on(editor.ownerWindow, 'resize', resize);
	}

	editor.events
		.on('afterInit afterOpen', () => {
			editor.toggleFullSize(editor.options.fullsize);
		})
		.on('toggleFullSize', toggle)
		.on('beforeDestruct beforeClose', () => {
			toggle(false);
		})
		.on('beforeDestruct', () => {
			editor.events &&
				editor.events.off(editor.ownerWindow, 'resize', resize);
		});
}