Your IP : 172.70.80.239
import {Runtime, Dom, Type, Loc} from 'main.core';
import {EventEmitter, BaseEvent} from 'main.core.events';
import {Menu as MainMenu, MenuManager} from 'main.popup';
import type {MenuItemOptions} from "main.popup";
import {Draggable} from 'ui.draganddrop.draggable';
export type Parameters = {
id: string,
items: Item[],
bindElement: ?HTMLElement,
maxVisibleItems: ?number,
}
export type Item = {
isHidden: boolean,
text: ?string,
html: ?string,
id: ?string,
onclick: ?Function,
}
export class Menu extends EventEmitter
{
#id: string;
#items: Array;
#menu: MainMenu;
#bindElement: ?HTMLElement;
#draggable: Draggable;
#promise: Promise;
#closeResolver: Function;
#maxVisibleItems: number = 0;
constructor(parameters: Parameters)
{
super();
this.#id = Type.isStringFilled(parameters.id) ? parameters.id : 'settings-popup-' + Math.random().toString().substring(2);
this.#items = parameters.items;
this.#bindElement = parameters.bindElement;
this.#maxVisibleItems = Number(parameters.maxVisibleItems);
this.#createMenu();
this.setEventNamespace('BX.UI.MenuConfigurable.Menu');
}
open(bindElement: ?HTMLElement): Promise
{
if (bindElement)
{
this.#menu?.getPopupWindow().setBindElement(bindElement);
}
this.#menu?.show();
if (!this.#promise)
{
this.#promise = new Promise((resolve) => {
this.#closeResolver = resolve;
});
}
return this.#promise;
}
#resolveWithCancel(): void
{
this.#promise = null;
if (this.#closeResolver)
{
this.#closeResolver({isCanceled: true});
}
this.#closeResolver = null;
}
#resolveWithItems(): void
{
this.#promise = null;
if (this.#closeResolver)
{
this.#closeResolver({items: this.#items});
}
this.#closeResolver = null;
}
close(): void
{
this.#createMenu();
this.#resolveWithCancel();
}
setItems(items: Item[]): this
{
this.#items = items;
return this;
}
#getItemById(id: string): ?Item
{
return this.#items.find(item => item.id === id);
}
getItemsFromMenu(): Item[]
{
const items = [];
let isHidden = false;
this.#menu.itemsContainer.querySelectorAll('.menu-configurable-item').forEach((node: HTMLElement) => {
if (node.classList.contains('menu-configurable-hidden-section-title'))
{
isHidden = true;
}
const itemId = node.dataset.id;
const item = this.#getItemById(itemId);
if (item)
{
const clonedItem = Runtime.clone(item);
clonedItem.isHidden = isHidden;
items.push(clonedItem);
}
});
return items;
}
#createMenu(bindElement: ?HTLMElement): Menu
{
if (this.#menu)
{
this.#menu.destroy();
this.#draggable = null;
}
const menuItems = [];
menuItems.push(this.#getVisibleSectionTitleItem());
const visibleItems = this.#items.filter(item => !item.isHidden);
const hiddenItems = this.#items.filter(item => item.isHidden);
visibleItems.forEach((item) => {
menuItems.push(this.#getMenuItem(item));
});
menuItems.push(this.#getHiddenSectionTitleItem());
hiddenItems.forEach((item) => {
menuItems.push(this.#getMenuItem(item));
});
menuItems.push(this.#getSaveItem());
menuItems.push(this.#getCancelItem());
this.#menu = MenuManager.create({
id: this.#id,
items: menuItems,
bindElement: bindElement ?? this.#bindElement,
events: {
onClose: this.close.bind(this),
}
});
this.#initDraggable();
return this.#menu;
}
#getSaveItem(): MenuItemOptions
{
return {
text: Loc.getMessage('UI_JS_MENU_CONFIGURABLE_SAVE'),
onclick: this.#save.bind(this),
}
}
#getCancelItem(): MenuItemOptions
{
return {
text: Loc.getMessage('UI_JS_MENU_CONFIGURABLE_CANCEL'),
onclick: this.#cancel.bind(this),
}
}
#save(): void
{
const event = new BaseEvent();
this.emit('Save', event);
if (event.isDefaultPrevented())
{
return;
}
this.#saveItemsFromMenu();
this.#resolveWithItems();
this.#createMenu();
}
#cancel(): void
{
const event = new BaseEvent();
this.emit('Cancel', event);
if (event.isDefaultPrevented())
{
return;
}
this.close();
}
#getMenuItem(item: Item): MenuItemOptions
{
return {
id: item.id,
text: item.text,
html: item.html,
className: 'menu-configurable-item',
dataset: {
id: item.id,
},
}
}
#getVisibleSectionTitleItem(): MenuItemOptions
{
return {
delimiter: true,
html: '<span>' + Loc.getMessage('UI_JS_MENU_CONFIGURABLE_VISIBLE') + '</span>',
className: 'menu-configurable-visible-section-title menu-configurable-delimiter-item',
}
}
#getHiddenSectionTitleItem(): MenuItemOptions
{
return {
delimiter: true,
html: '<span>' + Loc.getMessage('UI_JS_MENU_CONFIGURABLE_HIDDEN') + '</span>',
className: 'menu-configurable-hidden-section-title menu-configurable-delimiter-item menu-configurable-item',
}
}
#initDraggable(): void
{
this.#draggable = new Draggable({
container: this.#menu.itemsContainer,
draggable: '.menu-configurable-item',
dragElement: '.menu-popup-item-icon',
type: Draggable.MOVE,
});
this.#draggable.subscribe('end', this.#adjustMaxVisibleItems.bind(this));
}
#saveItemsFromMenu(): void
{
this.setItems(this.getItemsFromMenu());
}
#getItemNode(item: Item): ?HTMLElement
{
return this.#menu.itemsContainer.querySelector('.menu-configurable-item[data-id="' + item.id + '"]');
}
#getHiddenSectionTitleNode(): ?HTMLElement
{
return this.#menu.itemsContainer.querySelector('.menu-configurable-hidden-section-title');
}
#adjustMaxVisibleItems(): void
{
if (this.#maxVisibleItems <= 0)
{
return;
}
const runtimeItems = this.getItemsFromMenu();
const visibleItems = runtimeItems.filter(item => !item.isHidden);
const visibleItemsCount = visibleItems.length;
const hiddenSectionTitleNode = this.#getHiddenSectionTitleNode();
if (hiddenSectionTitleNode && visibleItemsCount > this.#maxVisibleItems)
{
for (let index = this.#maxVisibleItems; index < visibleItemsCount; index++)
{
const item = visibleItems[index];
const node = this.#getItemNode(item);
if (node)
{
Dom.insertAfter(node, hiddenSectionTitleNode);
}
}
}
}
}