suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/core/class/menu.js

@@ -1,14 +1,25 @@
 /**
- * @fileoverview Menu class
+ * @fileoverview Toolbar Menu class
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { domUtils, converter } from '../../helper';
+import { dom, converter } from '../../helper';
 
-const Menu = function (editor) {
+/**
+ * @typedef {Omit<Menu & Partial<__se__EditorInjector>, 'menu'>} MenuThis
+ */
+
+/**
+ * @constructor
+ * @this {MenuThis}
+ * @description Dropdown and container menu management class
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function Menu(editor) {
 	CoreInjector.call(this, editor);
 
-	// members--
+	// members
+	/** @type {Object<string, HTMLElement>} */
 	this.targetMap = {};
 	this.index = -1;
 	this.menus = [];
@@ -20,6 +31,7 @@ const Menu = function (editor) {
 	// container
 	this.currentContainer = null;
 	this.currentContainerActiveButton = null;
+	this.currentContainerName = '';
 	// event
 	this._dropdownCommands = [];
 	this.__globalEventHandler = {
@@ -33,37 +45,39 @@ const Menu = function (editor) {
 	this._bindClose_dropdown_key = null;
 	this._bindClose_cons_mouse = null;
 	this.currentDropdownPlugin = null;
-};
+}
 
 Menu.prototype = {
 	/**
+	 * @this {MenuThis}
 	 * @description Method for managing dropdown element.
-	 * You must add the "dropdown" element using the this method at custom plugin.
+	 * - You must add the "dropdown" element using the this method at custom plugin.
 	 * @param {{key: string, type: string}} classObj Class object
-	 * @param {Element} menu Dropdown element
+	 * @param {Node} menu Dropdown element
 	 */
 	initDropdownTarget({ key, type }, menu) {
 		if (key) {
 			if (!/free$/.test(type)) {
-				menu.setAttribute('data-key', key);
+				/** @type {HTMLElement} */ (menu).setAttribute('data-key', key);
 				this._dropdownCommands.push(key);
 			}
 			this.context.get('menuTray').appendChild(menu);
-			this.targetMap[key] = menu;
+			this.targetMap[key] = /** @type {HTMLElement} */ (menu);
 		} else {
 			throw Error("[SUNEDITOR.init.fail] The plugin's key is not added.");
 		}
 	},
 
 	/**
+	 * @this {MenuThis}
 	 * @description On dropdown
-	 * @param {Element} button Dropdown's button element to call
+	 * @param {Node} button Dropdown's button element to call
 	 */
 	dropdownOn(button) {
 		this.__removeGlobalEvent();
 		const moreBtn = this._checkMoreLayer(button);
 		if (moreBtn) {
-			const target = domUtils.getParentElement(moreBtn, '.se-btn-tray').querySelector('[data-command="' + moreBtn.getAttribute('data-ref') + '"]');
+			const target = dom.query.getParentElement(moreBtn, '.se-btn-tray').querySelector('[data-command="' + moreBtn.getAttribute('data-ref') + '"]');
 			if (target) {
 				this.editor.runFromTarget(target);
 				this.dropdownOn(button);
@@ -71,15 +85,16 @@ Menu.prototype = {
 			}
 		}
 
-		const dropdownName = (this.currentDropdownName = button.getAttribute('data-command'));
-		this.currentDropdownType = button.getAttribute('data-type');
+		const btnEl = /** @type {HTMLButtonElement} */ (button);
+		const dropdownName = (this.currentDropdownName = btnEl.getAttribute('data-command'));
+		this.currentDropdownType = btnEl.getAttribute('data-type');
 		const menu = (this.currentDropdown = this.targetMap[dropdownName]);
-		this.currentDropdownActiveButton = button;
-		this._setMenuPosition(button, menu);
+		this.currentDropdownActiveButton = btnEl;
+		this._setMenuPosition(btnEl, menu);
 
 		this._bindClose_dropdown_mouse = this.eventManager.addGlobalEvent('mousedown', this.__globalEventHandler.mousedown, false);
 		if (this._dropdownCommands.includes(dropdownName)) {
-			this.menus = converter.nodeListToArray(menu.querySelectorAll('.se-toolbar-btn[data-command]'));
+			this.menus = converter.nodeListToArray(menu.querySelectorAll('[data-command]'));
 			if (this.menus.length > 0) {
 				this._bindClose_dropdown_key = this.eventManager.addGlobalEvent('keydown', this.__globalEventHandler.keydown, false);
 				menu.addEventListener('mousemove', this.__globalEventHandler.mousemove, false);
@@ -88,11 +103,12 @@ Menu.prototype = {
 		}
 
 		this.currentDropdownPlugin = this.plugins[dropdownName];
-		if (typeof this.currentDropdownPlugin?.on === 'function') this.currentDropdownPlugin.on(button);
-		this.editor._antiBlur = true;
+		if (typeof this.currentDropdownPlugin?.on === 'function') this.currentDropdownPlugin.on(btnEl);
+		this.editor._preventBlur = true;
 	},
 
 	/**
+	 * @this {MenuThis}
 	 * @description Off dropdown
 	 */
 	dropdownOff() {
@@ -106,72 +122,82 @@ Menu.prototype = {
 			this.currentDropdown.style.display = 'none';
 			this.currentDropdown = null;
 			if (this.currentDropdownActiveButton) {
-				domUtils.removeClass(this.currentDropdownActiveButton.parentElement.children, 'on');
+				dom.utils.removeClass(this.currentDropdownActiveButton.parentElement.children, 'on');
 			}
 			this.currentDropdownActiveButton = null;
 			this.editor._notHideToolbar = false;
 		}
 
-		this.editor._antiBlur = false;
+		this.editor._preventBlur = false;
 
 		if (typeof this.currentDropdownPlugin?.off === 'function') this.currentDropdownPlugin.off();
 		this.currentDropdownPlugin = null;
 	},
 
 	/**
+	 * @this {MenuThis}
 	 * @description On menu container
-	 * @param {Element} button Container's button element to call
+	 * @param {Node} button Container's button element to call
 	 */
 	containerOn(button) {
 		this.__removeGlobalEvent();
 
-		const containerName = (this._containerName = button.getAttribute('data-command'));
-		this.currentContainerActiveButton = button;
+		this.currentContainerActiveButton = /** @type {HTMLButtonElement} */ (button);
+		const containerName = (this.currentContainerName = this.currentContainerActiveButton.getAttribute('data-command'));
 		this._setMenuPosition(button, (this.currentContainer = this.targetMap[containerName]));
 
 		this._bindClose_cons_mouse = this.eventManager.addGlobalEvent('mousedown', this.__globalEventHandler.containerDown, false);
 
 		if (this.plugins[containerName].on) this.plugins[containerName].on(button);
-		this.editor._antiBlur = true;
+		this.editor._preventBlur = true;
 	},
 
 	/**
+	 * @this {MenuThis}
 	 * @description Off menu container
 	 */
 	containerOff() {
 		this.__removeGlobalEvent();
 
 		if (this.currentContainer) {
-			this._containerName = '';
+			this.currentContainerName = '';
 			this.currentContainer.style.display = 'none';
 			this.currentContainer = null;
-			domUtils.removeClass(this.currentContainerActiveButton, 'on');
+			dom.utils.removeClass(this.currentContainerActiveButton, 'on');
 			this.currentContainerActiveButton = null;
 			this.editor._notHideToolbar = false;
 		}
 
-		this.editor._antiBlur = false;
+		this.editor._preventBlur = false;
 	},
 
 	/**
-	 * @description Set the menu position. (dropdown, container)
-	 * @param {*} element Button element
-	 * @param {*} menu Menu element
 	 * @private
+	 * @this {MenuThis}
+	 * @description Set the menu position.
+	 * @param {Node} element Button element
+	 * @param {HTMLElement} menu Menu element
 	 */
 	_setMenuPosition(element, menu) {
 		menu.style.visibility = 'hidden';
 		menu.style.display = 'block';
 		menu.style.height = '';
-		domUtils.addClass(element.parentElement.children, 'on');
+		dom.utils.addClass(element.parentElement.children, 'on');
 
-		this.offset.setRelPosition(menu, this.carrierWrapper, element.parentElement, domUtils.getParentElement(element, '.se-toolbar'), false);
+		this.offset.setRelPosition(menu, this.carrierWrapper, element.parentElement, dom.query.getParentElement(element, '.se-toolbar'), false);
 
 		menu.style.visibility = '';
 	},
 
+	/**
+	 * @private
+	 * @this {MenuThis}
+	 * @description Check if the element is part of a more layer
+	 * @param {Node} element The element to check
+	 * @returns {HTMLElement|null} The more layer element or null
+	 */
 	_checkMoreLayer(element) {
-		const more = domUtils.getParentElement(element, '.se-more-layer');
+		const more = dom.query.getParentElement(element, '.se-more-layer');
 		if (more && more.style.display !== 'block') {
 			return more.getAttribute('data-ref') ? more : null;
 		} else {
@@ -179,29 +205,40 @@ Menu.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {MenuThis}
+	 * @description Move the selected item in the dropdown menu
+	 * @param {number} num Direction and amount to move (-1 for up, 1 for down)
+	 */
 	_moveItem(num) {
-		domUtils.removeClass(this.currentDropdown, 'se-select-menu-mouse-move');
-		domUtils.addClass(this.currentDropdown, 'se-select-menu-key-action');
+		dom.utils.removeClass(this.currentDropdown, 'se-select-menu-mouse-move');
+		dom.utils.addClass(this.currentDropdown, 'se-select-menu-key-action');
 		num = this.index + num;
 		const len = this.menus.length;
 		const selectIndex = (this.index = num >= len ? 0 : num < 0 ? len - 1 : num);
 
 		for (let i = 0; i < len; i++) {
 			if (i === selectIndex) {
-				domUtils.addClass(this.menus[i], 'on');
+				dom.utils.addClass(this.menus[i], 'on');
 			} else {
-				domUtils.removeClass(this.menus[i], 'on');
+				dom.utils.removeClass(this.menus[i], 'on');
 			}
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {MenuThis}
+	 * @description Remove global event listeners
+	 */
 	__removeGlobalEvent() {
 		if (this._bindClose_dropdown_mouse) this._bindClose_dropdown_mouse = this.eventManager.removeGlobalEvent(this._bindClose_dropdown_mouse);
 		if (this._bindClose_cons_mouse) this._bindClose_cons_mouse = this.eventManager.removeGlobalEvent(this._bindClose_cons_mouse);
 		if (this._bindClose_dropdown_key) {
 			this._bindClose_dropdown_key = this.eventManager.removeGlobalEvent(this._bindClose_dropdown_key);
-			domUtils.removeClass(this.menus, 'on');
-			domUtils.removeClass(this.currentDropdown, 'se-select-menu-key-action|se-select-menu-mouse-move');
+			dom.utils.removeClass(this.menus, 'on');
+			dom.utils.removeClass(this.currentDropdown, 'se-select-menu-key-action|se-select-menu-mouse-move');
 			this.currentDropdown.removeEventListener('mousemove', this.__globalEventHandler.mousemove, false);
 			this.currentDropdown.removeEventListener('mouseout', this.__globalEventHandler.mouseout, false);
 		}
@@ -210,30 +247,55 @@ Menu.prototype = {
 	constructor: Menu
 };
 
+/**
+ * @private
+ * @this {MenuThis}
+ * @param {MouseEvent} e - Event object
+ */
 function OnMouseDown_dropdown(e) {
-	if (domUtils.getParentElement(e.target, '.se-dropdown')) return;
+	const eventTarget = dom.query.getEventTarget(e);
+	if (dom.query.getParentElement(eventTarget, '.se-dropdown')) return;
 	this.dropdownOff();
 }
 
+/**
+ * @private
+ * @this {MenuThis}
+ */
 function OnMouseout_dropdown() {
 	this.index = -1;
 }
 
+/**
+ * @private
+ * @this {MenuThis}
+ * @param {KeyboardEvent} e - Event object
+ */
 function OnKeyDown_dropdown(e) {
-	const keyCode = e.keyCode;
+	const keyCode = e.code;
 	switch (keyCode) {
-		case 38: // up
+		case 'ArrowUp': // up
+			e.preventDefault();
+			e.stopPropagation();
+			this._moveItem(-1);
+			break;
+		case 'ArrowDown': // down
+			e.preventDefault();
+			e.stopPropagation();
+			this._moveItem(1);
+			break;
+		case 'ArrowLeft': // left
 			e.preventDefault();
 			e.stopPropagation();
 			this._moveItem(-1);
 			break;
-		case 40: // down
+		case 'ArrowRight': //right
 			e.preventDefault();
 			e.stopPropagation();
 			this._moveItem(1);
 			break;
-		case 13:
-		case /* enter, space */ 32: {
+		case 'Enter':
+		case 'Space': /* enter, space */ {
 			if (this.index < 0) break;
 
 			const target = this.menus[this.index];
@@ -248,9 +310,14 @@ function OnKeyDown_dropdown(e) {
 	}
 }
 
+/**
+ * @private
+ * @this {MenuThis}
+ * @param {MouseEvent} e - Event object
+ */
 function OnMousemove_dropdown(e) {
-	domUtils.addClass(this.currentDropdown, 'se-select-menu-mouse-move');
-	domUtils.removeClass(this.currentDropdown, 'se-select-menu-key-action');
+	dom.utils.addClass(this.currentDropdown, 'se-select-menu-mouse-move');
+	dom.utils.removeClass(this.currentDropdown, 'se-select-menu-key-action');
 
 	const index = this.menus.indexOf(e.target);
 	if (index === -1) return;