submenuBase.js
2.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
* Submenu Base Class
* @class
* @ignore
*/
class Submenu {
/**
* @param {HTMLElement} subMenuElement - submenu dom element
* @param {Locale} locale - translate text
* @param {string} name - name of sub menu
* @param {Object} iconStyle - style of icon
* @param {string} menuBarPosition - position of menu
* @param {*} templateHtml - template for SubMenuElement
* @param {boolean} [usageStatistics=false] - template for SubMenuElement
*/
constructor(
subMenuElement,
{ locale, name, makeSvgIcon, menuBarPosition, templateHtml, usageStatistics }
) {
this.subMenuElement = subMenuElement;
this.menuBarPosition = menuBarPosition;
this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
this.colorPickerControls = [];
this.usageStatistics = usageStatistics;
this.eventHandler = {};
this._makeSubMenuElement({
locale,
name,
makeSvgIcon,
templateHtml,
});
}
/**
* editor dom ui query selector
* @param {string} selectName - query selector string name
* @returns {HTMLElement}
*/
selector(selectName) {
return this.subMenuElement.querySelector(selectName);
}
/**
* change show state change for colorpicker instance
* @param {Colorpicker} occurredControl - target Colorpicker Instance
*/
colorPickerChangeShow(occurredControl) {
this.colorPickerControls.forEach((pickerControl) => {
if (occurredControl !== pickerControl) {
pickerControl.hide();
}
});
}
/**
* Get butten type
* @param {HTMLElement} button - event target element
* @param {array} buttonNames - Array of button names
* @returns {string} - button type
*/
getButtonType(button, buttonNames) {
return button.className.match(RegExp(`(${buttonNames.join('|')})`))[0];
}
/**
* Get butten type
* @param {HTMLElement} target - event target element
* @param {string} removeClass - remove class name
* @param {string} addClass - add class name
*/
changeClass(target, removeClass, addClass) {
target.classList.remove(removeClass);
target.classList.add(addClass);
}
/**
* Interface method whose implementation is optional.
* Returns the menu to its default state.
*/
changeStandbyMode() {}
/**
* Interface method whose implementation is optional.
* Executed when the menu starts.
*/
changeStartMode() {}
/**
* Make submenu dom element
* @param {Locale} locale - translate text
* @param {string} name - submenu name
* @param {Object} iconStyle - icon style
* @param {*} templateHtml - template for SubMenuElement
* @private
*/
_makeSubMenuElement({ locale, name, iconStyle, makeSvgIcon, templateHtml }) {
const iconSubMenu = document.createElement('div');
iconSubMenu.className = `tui-image-editor-menu-${name}`;
iconSubMenu.innerHTML = templateHtml({
locale,
iconStyle,
makeSvgIcon,
});
this.subMenuElement.appendChild(iconSubMenu);
}
}
export default Submenu;