suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/core/class/ui.js

@@ -0,0 +1,422 @@
+/**
+ * @fileoverview UI class
+ */
+
+import CoreInjector from '../../editorInjector/_core';
+import { dom, converter, keyCodeMap, env } from '../../helper';
+const { _w } = env;
+
+/**
+ * @typedef {Omit<UI & Partial<__se__EditorInjector>, 'ui'>} UIThis
+ */
+
+/**
+ * @constructor
+ * @this {UIThis}
+ * @description The UI class is a class that handles operations related to the user interface of SunEditor.
+ * - This class sets the editor's style, theme, editor mode, etc., and controls the state of various UI elements.
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function UI(editor) {
+	CoreInjector.call(this, editor);
+
+	// members
+	this._controllerOnBtnDisabled = false;
+
+	// members - modal
+	const alertModal = CreateAlertHTML(editor);
+	this.alertModal = alertModal;
+	this.alertMessage = alertModal.querySelector('span');
+	this._alertArea = /** @type {HTMLElement} */ (this.carrierWrapper.querySelector('.se-alert'));
+	this._alertInner = /** @type {HTMLElement} */ (this.carrierWrapper.querySelector('.se-alert .se-modal-inner'));
+	this._alertInner.appendChild(alertModal);
+
+	this._closeListener = [CloseListener.bind(this), OnClick_alert.bind(this)];
+	this._closeSignal = !this.eventManager.addEvent(alertModal.querySelector('[data-command="close"]'), 'click', this.alertClose.bind(this));
+	this._bindClose = null;
+	this._backWrapper = /** @type {HTMLElement} */ (this.carrierWrapper.querySelector('.se-back-wrapper'));
+
+	// members - toast
+	const toastPopup = CreateToastHTML();
+	this.toastPopup = toastPopup;
+	this.toastContainer = toastPopup.querySelector('.se-toast-container');
+	this.toastMessage = toastPopup.querySelector('span');
+	this.carrierWrapper.appendChild(toastPopup);
+	this._toastToggle = null;
+}
+
+UI.prototype = {
+	/**
+	 * @this {UIThis}
+	 * @description Set "options.get('editorStyle')" style.
+	 * - Define the style of the edit area
+	 * - It can also be defined with the "setOptions" method, but the "setEditorStyle" method does not render the editor again.
+	 * @param {string} style Style string
+	 * @param {__se__FrameContext|null} fc Frame context
+	 */
+	setEditorStyle(style, fc) {
+		fc = fc || this.editor.frameContext;
+		const fo = fc.get('options');
+
+		const newStyles = converter._setDefaultOptionStyle(fo, style);
+		fo.set('_defaultStyles', newStyles);
+
+		// top area
+		fc.get('topArea').style.cssText = newStyles.top;
+
+		// code view
+		const code = fc.get('code');
+		code.style.cssText = fo.get('_defaultStyles').frame;
+		code.style.display = 'none';
+
+		// wysiwyg frame
+		if (!fo.get('iframe')) {
+			fc.get('wysiwygFrame').style.cssText = newStyles.frame + newStyles.editor;
+		} else {
+			fc.get('wysiwygFrame').style.cssText = newStyles.frame;
+			fc.get('wysiwyg').style.cssText = newStyles.editor;
+		}
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Set the theme to the editor
+	 * @param {string} theme Theme name
+	 */
+	setTheme(theme) {
+		if (typeof theme !== 'string') return;
+		const o = this.options;
+		const prevTheme = o.get('_themeClass').trim();
+		o.set('theme', theme || '');
+		o.set('_themeClass', theme ? ` se-theme-${theme}` : '');
+		theme = o.get('_themeClass').trim();
+
+		const applyTheme = (target) => {
+			if (!target) return;
+			if (prevTheme) dom.utils.removeClass(target, prevTheme);
+			if (theme) dom.utils.addClass(target, theme);
+		};
+
+		applyTheme(this.carrierWrapper);
+		this.editor.applyFrameRoots((e) => {
+			applyTheme(e.get('topArea'));
+			applyTheme(e.get('wysiwyg'));
+		});
+
+		applyTheme(this.context.get('statusbar._wrapper'));
+		applyTheme(this.context.get('toolbar._wrapper'));
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Switch to or off "ReadOnly" mode.
+	 * @param {boolean} value "readOnly" boolean value.
+	 * @param {string|undefined} rootKey Root key
+	 */
+	readOnly(value, rootKey) {
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+
+		fc.set('isReadOnly', !!value);
+		dom.utils.setDisabled(this.editor._controllerOnDisabledButtons, !!value);
+
+		if (value) {
+			this._offCurrentController();
+			this._offCurrentModal();
+
+			if (this.toolbar?.currentMoreLayerActiveButton?.disabled) this.toolbar._moreLayerOff();
+			if (this.subToolbar?.currentMoreLayerActiveButton?.disabled) this.subToolbar._moreLayerOff();
+			if (this.menu?.currentDropdownActiveButton?.disabled) this.menu.dropdownOff();
+			if (this.menu?.currentContainerActiveButton?.disabled) this.menu.containerOff();
+
+			fc.get('code').setAttribute('readOnly', 'true');
+			dom.utils.addClass(fc.get('wysiwyg'), 'se-read-only');
+		} else {
+			fc.get('code').removeAttribute('readOnly');
+			dom.utils.removeClass(fc.get('wysiwyg'), 'se-read-only');
+		}
+
+		if (this.options.get('hasCodeMirror')) {
+			this.viewer._codeMirrorEditor('readonly', !!value, rootKey);
+		}
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Disable the suneditor
+	 * @param {string|undefined} rootKey Root key
+	 */
+	disable(rootKey) {
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+
+		this.toolbar.disable();
+		this._offCurrentController();
+		this._offCurrentModal();
+
+		fc.get('wysiwyg').setAttribute('contenteditable', false);
+		fc.set('isDisabled', true);
+
+		if (this.options.get('hasCodeMirror')) {
+			this.viewer._codeMirrorEditor('readonly', true, rootKey);
+		} else {
+			fc.get('code').disabled = true;
+		}
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Enable the suneditor
+	 * @param {string|undefined} rootKey Root key
+	 */
+	enable(rootKey) {
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+
+		this.toolbar.enable();
+		fc.get('wysiwyg').setAttribute('contenteditable', true);
+		fc.set('isDisabled', false);
+
+		if (this.options.get('hasCodeMirror')) {
+			this.viewer._codeMirrorEditor('readonly', false, rootKey);
+		} else {
+			fc.get('code').disabled = false;
+		}
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Show the suneditor
+	 * @param {string|undefined} rootKey Root key
+	 */
+	show(rootKey) {
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		const topAreaStyle = fc.get('topArea').style;
+		if (topAreaStyle.display === 'none') topAreaStyle.display = 'block';
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Hide the suneditor
+	 * @param {string|undefined} rootKey Root key
+	 */
+	hide(rootKey) {
+		const fc = rootKey ? this.frameRoots.get(rootKey) : this.editor.frameContext;
+		fc.get('topArea').style.display = 'none';
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Show loading box
+	 * @param {string=} rootKey Root key
+	 */
+	showLoading(rootKey) {
+		(rootKey ? this.frameRoots.get(rootKey).get('container') : this.carrierWrapper).querySelector('.se-loading-box').style.display = 'block';
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Hide loading box
+	 * @param {string=} rootKey Root key
+	 */
+	hideLoading(rootKey) {
+		(rootKey ? this.frameRoots.get(rootKey).get('container') : this.carrierWrapper).querySelector('.se-loading-box').style.display = 'none';
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description This method disables or enables the toolbar buttons when the controller is activated or deactivated.
+	 * - When the controller is activated, the toolbar buttons are disabled; when the controller is deactivated, the buttons are enabled.
+	 * @param {boolean} active If `true`, the toolbar buttons will be disabled. If `false`, the toolbar buttons will be enabled.
+	 */
+	setControllerOnDisabledButtons(active) {
+		if (active && !this._controllerOnBtnDisabled) {
+			dom.utils.setDisabled(this.editor._controllerOnDisabledButtons, true);
+			this._controllerOnBtnDisabled = true;
+		} else if (!active && this._controllerOnBtnDisabled) {
+			dom.utils.setDisabled(this.editor._controllerOnDisabledButtons, false);
+			this._controllerOnBtnDisabled = false;
+		}
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Activate the transparent background "div" so that other elements are not affected during resizing.
+	 * @param {string} cursor cursor css property
+	 */
+	enableBackWrapper(cursor) {
+		this._backWrapper.style.cursor = cursor;
+		this._backWrapper.style.display = 'block';
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description Disabled background "div"
+	 */
+	disableBackWrapper() {
+		this._backWrapper.style.display = 'none';
+		this._backWrapper.style.cursor = 'default';
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description  Open the alert panel
+	 * @param {string} text alert message
+	 * @param {""|"error"|"success"} type alert type
+	 */
+	alertOpen(text, type) {
+		this.alertMessage.textContent = text;
+
+		dom.utils.removeClass(this.alertModal, 'se-alert-error|se-alert-success');
+		if (type) dom.utils.addClass(this.alertModal, `se-alert-${type}`);
+
+		if (this._closeSignal) this._alertInner.addEventListener('click', this._closeListener[1]);
+		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+		this._bindClose = this.eventManager.addGlobalEvent('keydown', this._closeListener[0]);
+
+		this._alertArea.style.display = 'block';
+		dom.utils.addClass(this.alertModal, 'se-modal-show');
+	},
+
+	/**
+	 * @this {UIThis}
+	 * @description  Close the alert panel
+	 */
+	alertClose() {
+		dom.utils.removeClass(this.alertModal, 'se-modal-show');
+		dom.utils.removeClass(this.alertModal, 'se-alert-*');
+		this._alertArea.style.display = 'none';
+		if (this._closeSignal) this._alertInner.removeEventListener('click', this._closeListener[1]);
+		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+	},
+
+	/**
+	 * @description Show toast
+	 * @param {string} message toast message
+	 * @param {number} [duration=1000] duration time(ms)
+	 * @param {""|"error"|"success"} [type=""] duration time(ms)
+	 */
+	showToast(message, duration = 1000, type) {
+		if (dom.utils.hasClass(this.toastContainer, 'se-toast-show')) {
+			this.closeToast();
+		}
+
+		dom.utils.removeClass(this.toastPopup, 'se-toast-error|se-toast-success');
+		if (type) dom.utils.addClass(this.toastPopup, `se-toast-${type}`);
+
+		this.toastPopup.style.display = 'block';
+		this.toastMessage.textContent = message;
+		dom.utils.addClass(this.toastContainer, 'se-toast-show');
+
+		// remove after animation
+		this._toastToggle = _w.setTimeout(() => {
+			this.closeToast();
+		}, duration);
+	},
+
+	/**
+	 * @description Close toast
+	 */
+	closeToast() {
+		if (this._toastToggle) _w.clearTimeout(this._toastToggle);
+		this._toastToggle = null;
+		dom.utils.removeClass(this.toastContainer, 'se-toast-show');
+		this.toastPopup.style.display = 'none';
+	},
+
+	/**
+	 * @private
+	 * @this {UIThis}
+	 * @description visible controllers
+	 * @param {boolean} value hidden/show
+	 * @param {?boolean=} lineBreakShow Line break hidden/show (default: Follows the value "value".)
+	 */
+	_visibleControllers(value, lineBreakShow) {
+		const visible = value ? '' : 'hidden';
+		const breakerVisible = lineBreakShow ?? visible ? '' : 'hidden';
+
+		const cont = this.editor.opendControllers;
+		for (let i = 0, c; i < cont.length; i++) {
+			c = cont[i];
+			if (c.form) c.form.style.visibility = visible;
+		}
+
+		this.editor._lineBreaker_t.style.visibility = breakerVisible;
+		this.editor._lineBreaker_b.style.visibility = breakerVisible;
+	},
+
+	/**
+	 * @private
+	 * @this {UIThis}
+	 * @description Off current controllers
+	 */
+	_offCurrentController() {
+		this.component.__deselect();
+	},
+
+	/**
+	 * @private
+	 * @this {UIThis}
+	 * @description Off controllers
+	 */
+	__offControllers() {
+		const cont = this.editor.opendControllers;
+		const fixedCont = [];
+		for (let i = 0, c; i < cont.length; i++) {
+			c = cont[i];
+			if (c.fixed) {
+				fixedCont.push(c);
+				continue;
+			}
+			if (typeof c.inst.close === 'function') c.inst.close();
+			if (c.form) c.form.style.display = 'none';
+		}
+		this.editor.opendControllers = fixedCont;
+		this.editor.currentControllerName = '';
+		this.editor._preventBlur = false;
+	},
+
+	/**
+	 * @private
+	 * @this {UIThis}
+	 * @description Off current modal
+	 */
+	_offCurrentModal() {
+		if (this.editor.opendModal) {
+			this.editor.opendModal.close();
+		}
+	},
+
+	constructor: UI
+};
+
+/**
+ * @private
+ * @this {UIThis}
+ * @param {MouseEvent} e - Event object
+ */
+function OnClick_alert(e) {
+	const eventTarget = dom.query.getEventTarget(e);
+	if (/close/.test(eventTarget.getAttribute('data-command')) || eventTarget === this._alertInner) {
+		this.alertClose();
+	}
+}
+
+/**
+ *  @private
+ * @this {UIThis}
+ * @param {KeyboardEvent} e - Event object
+ */
+function CloseListener(e) {
+	if (!keyCodeMap.isEsc(e.code)) return;
+	this.alertClose();
+}
+
+function CreateAlertHTML({ lang, icons }) {
+	const html = '<div><button class="close" data-command="close" title="' + lang.close + '">' + icons.cancel + '</button></div><div><span></span></div>';
+	return dom.utils.createElement('DIV', { class: 'se-alert-content' }, html);
+}
+
+function CreateToastHTML() {
+	const html = '<div class="se-toast-container"><span></span></div>';
+	return dom.utils.createElement('DIV', { class: 'se-toast' }, html);
+}
+
+export default UI;