You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
3.1 KiB
147 lines
3.1 KiB
/*
|
|
** Zabbix
|
|
** Copyright (C) 2001-2023 Zabbix SIA
|
|
**
|
|
** This program is free software; you can redistribute it and/or modify
|
|
** it under the terms of the GNU General Public License as published by
|
|
** the Free Software Foundation; either version 2 of the License, or
|
|
** (at your option) any later version.
|
|
**
|
|
** This program is distributed in the hope that it will be useful,
|
|
** but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
** GNU General Public License for more details.
|
|
**
|
|
** You should have received a copy of the GNU General Public License
|
|
** along with this program; if not, write to the Free Software
|
|
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
**/
|
|
|
|
|
|
const MENUITEM_EVENT_COLLAPSE = 'collapse';
|
|
const MENUITEM_EVENT_EXPAND = 'expand';
|
|
const MENUITEM_EVENT_FOCUS = 'focus';
|
|
|
|
class CMenuItem extends CBaseComponent {
|
|
|
|
constructor(target, level) {
|
|
super(target);
|
|
|
|
this.init(level);
|
|
this.registerEvents();
|
|
}
|
|
|
|
init(level) {
|
|
this._toggle = this._target.querySelector('a');
|
|
|
|
if (this.hasClass('has-submenu')) {
|
|
this._submenu = new CMenu(this._target.querySelector('.submenu'), ++level);
|
|
}
|
|
|
|
this._is_expanded = this.hasClass('is-expanded');
|
|
this._is_selected = this.hasClass('is-selected');
|
|
}
|
|
|
|
focus() {
|
|
this._toggle.focus();
|
|
}
|
|
|
|
blur() {
|
|
this._toggle.blur();
|
|
}
|
|
|
|
isExpanded() {
|
|
return this._is_expanded;
|
|
}
|
|
|
|
isSelected() {
|
|
return this._is_selected;
|
|
}
|
|
|
|
isFocused() {
|
|
return document.activeElement === this._toggle;
|
|
}
|
|
|
|
getSubmenu() {
|
|
return this._submenu;
|
|
}
|
|
|
|
hasSubmenu() {
|
|
return typeof this._submenu !== 'undefined';
|
|
}
|
|
|
|
expandSubmenu() {
|
|
if (!this._is_expanded && this.hasSubmenu()) {
|
|
this.addClass('is-expanded');
|
|
this._is_expanded = true;
|
|
this._submenu.updateHeight();
|
|
|
|
this.fire(MENUITEM_EVENT_EXPAND);
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
collapseSubmenu(from_level) {
|
|
if (this._is_expanded && this.hasSubmenu() && this._submenu.collapseExpanded(from_level)) {
|
|
this.removeClass('is-expanded');
|
|
this._is_expanded = false;
|
|
this.fire(MENUITEM_EVENT_COLLAPSE);
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Register all DOM events.
|
|
*/
|
|
registerEvents() {
|
|
this._events = {
|
|
|
|
click: (e) => {
|
|
if (this._is_expanded) {
|
|
this.collapseSubmenu();
|
|
}
|
|
else {
|
|
this.expandSubmenu();
|
|
}
|
|
|
|
e.preventDefault();
|
|
},
|
|
|
|
focus: () => {
|
|
if (!this.isFocused()) {
|
|
if (this.hasSubmenu() && !this._is_expanded) {
|
|
this.expandSubmenu();
|
|
}
|
|
|
|
this.fire(MENUITEM_EVENT_FOCUS);
|
|
}
|
|
},
|
|
|
|
blur: () => {
|
|
if (this.hasSubmenu() && this._is_expanded) {
|
|
this.collapseSubmenu(1);
|
|
}
|
|
},
|
|
|
|
expand: () => {
|
|
if (this.hasSubmenu() && this._is_expanded) {
|
|
this.fire(MENUITEM_EVENT_EXPAND);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (this.hasSubmenu()) {
|
|
this._toggle.addEventListener('click', this._events.click);
|
|
this._toggle.addEventListener('focus', this._events.focus);
|
|
|
|
this._submenu.on(MENU_EVENT_FOCUS, this._events.focus);
|
|
this._submenu.on(MENU_EVENT_BLUR, this._events.blur);
|
|
this._submenu.on(MENU_EVENT_EXPAND, this._events.expand);
|
|
}
|
|
}
|
|
}
|