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

package/src/modules/ColorPicker.js

@@ -1,4 +1,5 @@
-import { domUtils, converter } from '../helper';
+import { dom, converter } from '../helper';
+import { isElement } from '../helper/dom/domCheck';
 import CoreInjector from '../editorInjector/_core';
 import { HueSlider } from '../modules';
 
@@ -62,71 +63,83 @@ const DEFAULT_COLOR_LIST = [
 const DEFAULLT_COLOR_SPLITNUM = 9;
 
 /**
- * @description Create a color picker element and register for related events. (this.target)
- * When calling the color selection, "submit", and "remove" buttons, the "action" method of the instance is called with the "color" value as an argument.
- * @param {Object} inst The "this" object of the calling function.
- * @param {string} styles style property ("color", "backgroundColor"..)
- * @param {Array.<string>} colorList color list
- * @param {string} _defaultColor default color
+ * @typedef {import('./HueSlider').HueSliderParams} HueSliderParams
  */
-const ColorPicker = function (inst, styles, params) {
-	const editor = inst.editor;
-	CoreInjector.call(this, editor);
-
-	// members
-	this.kind = inst.constructor.key || inst.constructor.name;
-	this.inst = inst;
-	this.target = CreateHTML(editor, params);
-	this.targetButton = null;
-	this.inputElement = this.target.querySelector('.se-color-input');
-	this.styleProperties = styles;
-	this.splitNum = params.splitNum || 0;
-	this.defaultColor = params.defaultColor;
-	this.hueSliderOptions = params.hueSliderOptions;
-	this.parentDisplay = '';
-	this.currentColor = '';
-	this.parentForm = null;
-	this.colorList = this.target.querySelectorAll('li button') || [];
-	this.hueSlider = null;
-
-	// modules - hex, hue slider
-	if (!params.disableHEXInput) {
-		this.hueSlider = new HueSlider(this, params.hueSliderOptions, 'se-dropdown');
-		this.parentFormDisplay = [];
-		this.parentForm = params.hueSliderOptions?.controllerOptions?.parents?.length > 0 && !params.hueSliderOptions?.controllerOptions?.isInsideForm ? params.hueSliderOptions.controllerOptions.parents : null;
-		// hue open
-		this.eventManager.addEvent(this.target.querySelector('.se-btn-info'), 'click', OnColorPalette.bind(this));
-		this.eventManager.addEvent(this.inputElement, 'input', OnChangeInput.bind(this));
-		this.eventManager.addEvent(this.target.querySelector('form'), 'submit', Submit.bind(this));
-	}
 
-	// remove style
-	if (!params.disableRemove) {
-		this.eventManager.addEvent(this.target.querySelector('.__se_remove'), 'click', Remove.bind(this));
-	}
+/**
+ * @typedef {import('./HueSlider').HueSliderColor} HueSliderColor
+ */
 
-	this.eventManager.addEvent(this.target, 'click', OnClickColor.bind(this));
-};
+/**
+ * @typedef {Object} ColorPickerParams
+ * @property {Array<string|{value: string, name: string}>=} [colorList=[]] color list
+ * @property {number=} [splitNum=0] Number of colors to be displayed in one line
+ * @property {string=} [defaultColor] Default color
+ * @property {boolean=} [disableHEXInput=false] Disable HEX input
+ * @property {boolean=} [disableRemove=false] Disable remove button
+ * @property {HueSliderParams=} [hueSliderOptions] hue slider options
+ */
 
-ColorPicker.prototype = {
-	hueSliderAction(color) {
-		this._setInputText(color.hex);
-	},
+/**
+ * @class
+ * @description Create a color picker element and register for related events. (this.target)
+ * - When calling the color selection, "submit", and "remove" buttons, the "action" method of the instance is called with the "color" value as an argument.
+ */
+class ColorPicker extends CoreInjector {
+	/**
+	 * @constructor
+	 * @param {*} inst The instance object that called the constructor.
+	 * @param {string} styles style property ("color", "backgroundColor"..)
+	 * @param {ColorPickerParams} params Color picker options
+	 */
+	constructor(inst, styles, params) {
+		const editor = inst.editor;
+		super(editor);
+
+		// members
+		this.kind = inst.constructor.key || inst.constructor.name;
+		this.inst = inst;
+		this.target = CreateHTML(editor, params);
+		this.targetButton = null;
+		this.inputElement = /** @type {HTMLInputElement} */ (this.target.querySelector('.se-color-input'));
+		this.styleProperties = styles;
+		this.splitNum = params.splitNum || 0;
+		this.defaultColor = params.defaultColor;
+		this.hueSliderOptions = params.hueSliderOptions;
+		this.parentDisplay = '';
+		this.currentColor = '';
+		this.parentForm = null;
+		this.colorList = this.target.querySelectorAll('li button') || [];
+		this.hueSlider = null;
+
+		// check icon
+		const parser = new DOMParser();
+		const svgDoc = parser.parseFromString(this.icons.color_checked, 'image/svg+xml');
+		this.checkedIcon = svgDoc.documentElement;
+
+		// modules - hex, hue slider
+		if (!params.disableHEXInput) {
+			this.hueSlider = new HueSlider(this, params.hueSliderOptions, 'se-dropdown');
+			this.parentFormDisplay = [];
+			this.parentForm = params.hueSliderOptions?.controllerOptions?.parents?.length > 0 && !params.hueSliderOptions?.controllerOptions?.isInsideForm ? params.hueSliderOptions.controllerOptions.parents : null;
+			// hue open
+			this.eventManager.addEvent(this.target.querySelector('.se-btn-info'), 'click', this.#OnColorPalette.bind(this));
+			this.eventManager.addEvent(this.inputElement, 'input', this.#OnChangeInput.bind(this));
+			this.eventManager.addEvent(this.target.querySelector('form'), 'submit', this.#Submit.bind(this));
+		}
 
-	hueSliderCancelAction() {
-		if (this.parentForm?.length > 0) {
-			this.parentFormDisplay.forEach((e) => (e[0].style.display = e[1]));
+		// remove style
+		if (!params.disableRemove) {
+			this.eventManager.addEvent(this.target.querySelector('.__se_remove'), 'click', this.#Remove.bind(this));
 		}
-	},
 
-	hueSliderClose() {
-		this.hueSlider.off();
-	},
+		this.eventManager.addEvent(this.target, 'click', this.#OnClickColor.bind(this));
+	}
 
 	/**
 	 * @description Displays or resets the currently selected color at color list.
-	 * @param {Node|String} nodeOrColor Current Selected node
-	 * @param {string|null} target target
+	 * @param {Node|string} nodeOrColor Current Selected node
+	 * @param {Node} target target
 	 */
 	init(nodeOrColor, target) {
 		this.targetButton = target;
@@ -138,16 +151,19 @@ ColorPicker.prototype = {
 		fillColor = converter.isHexColor(fillColor) ? fillColor : converter.rgb2hex(fillColor) || fillColor || '';
 
 		const colorList = this.colorList;
-		for (let i = 0, len = colorList.length; i < len; i++) {
-			if (fillColor.toLowerCase() === colorList[i].getAttribute('data-value').toLowerCase()) {
-				domUtils.addClass(colorList[i], 'active');
+		for (let i = 0, len = colorList.length, c; i < len; i++) {
+			c = colorList[i];
+			if (fillColor.toLowerCase() === c.getAttribute('data-value').toLowerCase()) {
+				c.appendChild(this.checkedIcon);
+				dom.utils.addClass(c, 'active');
 			} else {
-				domUtils.removeClass(colorList[i], 'active');
+				dom.utils.removeClass(c, 'active');
+				if (c.contains(this.checkedIcon)) dom.utils.removeItem(this.checkedIcon);
 			}
 		}
 
 		this._setInputText(this._colorName2hex(fillColor));
-	},
+	}
 
 	/**
 	 * @description Store color values
@@ -156,92 +172,136 @@ ColorPicker.prototype = {
 	setHexColor(hexColorStr) {
 		this.currentColor = hexColorStr;
 		this.inputElement.style.borderColor = hexColorStr;
-	},
+	}
+
+	/**
+	 * @description Close hue slider
+	 */
+	hueSliderClose() {
+		this.hueSlider.off();
+	}
 
 	/**
+	 * @private
 	 * @description Set color at input element
 	 * @param {string} hexColorStr Hax color value
-	 * @private
 	 */
 	_setInputText(hexColorStr) {
 		hexColorStr = /^#/.test(hexColorStr) ? hexColorStr : '#' + hexColorStr;
 		this.inputElement.value = hexColorStr;
 		this.setHexColor.call(this, hexColorStr);
-	},
+	}
 
 	/**
+	 * @private
 	 * @description Gets color value at color property of node
 	 * @param {Node} node Selected node
 	 * @returns {string}
-	 * @private
 	 */
 	_getColorInNode(node) {
 		let findColor = '';
 		const sp = this.styleProperties;
 
-		while (node && !domUtils.isWysiwygFrame(node) && findColor.length === 0) {
-			if (node.nodeType === 1 && node.style[sp]) findColor = node.style[sp];
+		while (node && !dom.check.isWysiwygFrame(node) && findColor.length === 0) {
+			if (isElement(node) && node.style[sp]) findColor = node.style[sp];
 			node = node.parentNode;
 		}
 
 		return findColor;
-	},
+	}
 
 	/**
+	 * @private
 	 * @description Converts color values of other formats to hex color values and returns.
 	 * @param {string} colorName Color value
 	 * @returns {string}
 	 */
 	_colorName2hex(colorName) {
 		if (/^#/.test(colorName)) return colorName;
-		const temp = domUtils.createElement('div', { style: 'display: none; color: ' + colorName });
+		const temp = dom.utils.createElement('div', { style: 'display: none; color: ' + colorName });
 		const colors = this._w
 			.getComputedStyle(this._d.body.appendChild(temp))
 			.color.match(/\d+/g)
 			.map(function (a) {
 				return parseInt(a, 10);
 			});
-		domUtils.removeItem(temp);
-		return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1) : false;
-	},
-
-	constructor: ColorPicker
-};
-
-function OnColorPalette() {
-	if (this.parentForm?.length > 0) {
-		this.parentForm.forEach((e) => {
-			this.parentFormDisplay.push([e, e.style.display]);
-			e.style.display = 'none';
-		});
+		dom.utils.removeItem(temp);
+		return colors.length >= 3 ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substring(1) : '';
 	}
-	this.hueSlider.open(this.targetButton);
-}
 
-function Submit(e) {
-	e.preventDefault();
+	/**
+	 * @editorMethod Modules.HueSlider
+	 * @description This method is called when the color is selected in the hue slider.
+	 * @param {HueSliderColor} color - Color object
+	 */
+	hueSliderAction(color) {
+		this._setInputText(color.hex);
+	}
 
-	if (typeof this.inst.colorPickerAction !== 'function') return;
-	this.inst.colorPickerAction(this.currentColor);
-}
+	/**
+	 * @editorMethod Modules.HueSlider
+	 * @description This method is called when the hue slider is closed.
+	 */
+	hueSliderCancelAction() {
+		if (this.parentForm?.length > 0) {
+			this.parentFormDisplay.forEach((e) => (e[0].style.display = e[1]));
+		}
+	}
 
-function OnClickColor(e) {
-	const color = e.target.getAttribute('data-value');
-	if (!color) return;
+	#OnColorPalette() {
+		if (this.parentForm?.length > 0) {
+			this.parentForm.forEach((e) => {
+				this.parentFormDisplay.push([e, e.style.display]);
+				e.style.display = 'none';
+			});
+		}
+		this.hueSlider.open(this.targetButton);
+	}
 
-	if (typeof this.inst.colorPickerAction !== 'function') return;
-	this.inst.colorPickerAction(color);
-}
+	/**
+	 * @param {SubmitEvent} e Event object
+	 */
+	#Submit(e) {
+		e.preventDefault();
 
-function Remove() {
-	if (typeof this.inst.colorPickerAction !== 'function') return;
-	this.inst.colorPickerAction(null);
-}
+		if (typeof this.inst.colorPickerAction !== 'function') return;
+		this.inst.colorPickerAction(this.currentColor);
+	}
 
-function OnChangeInput(e) {
-	this.setHexColor(e.target.value);
+	/**
+	 * @param {MouseEvent} e Event object
+	 */
+	#OnClickColor(e) {
+		const eventTarget = dom.query.getEventTarget(e);
+		const color = eventTarget.getAttribute('data-value');
+		if (!color) return;
+
+		if (typeof this.inst.colorPickerAction !== 'function') return;
+		this.inst.colorPickerAction(color);
+	}
+
+	#Remove() {
+		if (typeof this.inst.colorPickerAction !== 'function') return;
+		this.inst.colorPickerAction(null);
+	}
+
+	/**
+	 * @param {InputEvent} e Event object
+	 */
+	#OnChangeInput(e) {
+		/** @type {HTMLInputElement} */
+		const eventTarget = dom.query.getEventTarget(e);
+		this.setHexColor(eventTarget.value);
+	}
 }
 
+/**
+ * @private
+ * @description Create a color picker element
+ * @param {*} param0
+ * @param {*} param1
+ * @returns
+ */
 function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove, splitNum }) {
 	colorList = colorList || DEFAULT_COLOR_LIST;
 	splitNum = colorList === DEFAULT_COLOR_LIST ? DEFAULLT_COLOR_SPLITNUM : splitNum;
@@ -271,7 +331,7 @@ function CreateHTML({ lang, icons }, { colorList, disableHEXInput, disableRemove
 			${disableRemove ? '' : `<button type="button" class="se-btn __se_remove" title="${lang.remove}" aria-label="${lang.remove}">${icons.remove_color}</button>`}
 		</form>`;
 
-	return domUtils.createElement('DIV', { class: 'se-list-inner' }, list);
+	return dom.utils.createElement('DIV', { class: 'se-list-inner' }, list);
 }
 
 function _makeColor(colorList, splitNum) {