Your IP : 18.227.46.202
import { Dom, Tag, Type } from 'main.core';
import { Counter } from 'ui.cnt';
import { EventEmitter } from "main.core.events";
import 'ui.design-tokens';
export default class CounterItem
{
constructor(args)
{
this.id = args.id ? args.id : null;
this.separator = Type.isBoolean(args.separator) ? args.separator : true;
this.items = Type.isArray(args.items) ? args.items : [];
this.popupMenu = null;
this.isActive = Type.isBoolean(args.isActive) ? args.isActive : false;
this.isRestricted = Type.isBoolean(args.isRestricted) ? args.isRestricted : false;
this.panel = args.panel ? args.panel : null;
this.title = args.title ? args.title : null;
this.value = (Type.isNumber(args.value) && args.value !== undefined) ? args.value : null;
this.titleOrder = null;
this.valueOrder = null;
this.color = args.color ? args.color : null;
this.parent = Type.isBoolean(args.parent) ? args.parent : null;
this.parentId = args.parentId ? args.parentId : null;
this.locked = false;
this.type = Type.isString(args.type) ? args.type.toLowerCase() : null;
this.eventsForActive = Type.isObject(args.eventsForActive) ? args.eventsForActive : {};
this.eventsForUnActive = Type.isObject(args.eventsForUnActive) ? args.eventsForUnActive : {};
if (Type.isObject(args.title))
{
this.title = args.title.value ? args.title.value : null;
this.titleOrder = Type.isNumber(args.title.order) ? args.title.order : null;
}
if (Type.isObject(args.value))
{
this.value = Type.isNumber(args.value.value) ? args.value.value : null;
this.valueOrder = Type.isNumber(args.value.order) ? args.value.order : null;
}
this.layout = {
container: null,
value: null,
title: null,
cross: null,
dropdownArrow: null,
menuItem: null
};
this.counter = this.#getCounter();
if (!this.#getPanel().isMultiselect())
{
this.#bindEvents();
}
}
getItems()
{
return this.items;
}
hasParentId()
{
return this.parentId;
}
#bindEvents()
{
EventEmitter.subscribe('BX.UI.CounterPanel.Item:activate', (item) => {
const isLinkedItems = item.data.parentId === this.id;
if (item.data !== this && !isLinkedItems)
{
this.deactivate();
}
});
}
updateValue(param: Number)
{
if (Type.isNumber(param))
{
this.value = param;
this.#getCounter().update(param);
if (param === 0)
{
this.updateColor(this.parentId ? 'GRAY' : 'THEME');
}
}
}
updateValueAnimate(param: Number)
{
if (Type.isNumber(param))
{
this.value = param;
this.#getCounter().update(param);
this.#getCounter().show();
if (param === 0)
{
this.updateColor(this.parentId ? 'GRAY' : 'THEME');
}
}
}
updateColor(param: string)
{
if (Type.isString(param))
{
this.color = param;
this.#getCounter().setColor(Counter.Color[param]);
}
}
activate(isEmitEvent: boolean = true)
{
this.isActive = true;
if (this.parentId)
{
const target = BX.findParent(
this.getContainerMenu(),
{
'className': 'ui-counter-panel__popup-item'
}
);
if (target)
{
target.classList.add('--active');
}
}
else
{
this.getContainer().classList.add('--active');
}
if (isEmitEvent)
{
EventEmitter.emit('BX.UI.CounterPanel.Item:activate', this);
}
}
deactivate(isEmitEvent: boolean = true)
{
this.isActive = false;
if (this.parentId)
{
const target = BX.findParent(
this.getContainerMenu(),
{
'className': 'ui-counter-panel__popup-item'
}
);
if (target)
{
target.classList.remove('--active');
target.classList.remove('--hover');
}
}
else
{
this.getContainer().classList.remove('--active');
this.getContainer().classList.remove('--hover');
}
if (isEmitEvent)
{
EventEmitter.emit('BX.UI.CounterPanel.Item:deactivate', this);
}
}
getSeparator()
{
return this.separator;
}
#getPanel()
{
return this.panel;
}
#getCounter(value: Number, color: String)
{
if (!this.counter)
{
this.counter = new Counter({
value: this.value,
color: this.color ? Counter.Color[this.color.toUpperCase()] : (this.parentId ? Counter.Color.GRAY : Counter.Color.THEME),
animation: false
});
}
return this.counter;
}
#getValue()
{
if (!this.layout.value)
{
const counterValue = this.isRestricted
? Tag.render`<div class="ui-counter-panel__item-lock"></div>`
: this.#getCounter().getContainer();
this.layout.value = Tag.render`
<div class="ui-counter-panel__item-value">
${counterValue}
</div>
`;
this.layout.value.style.setProperty('order', this.valueOrder);
}
return this.layout.value;
}
#getTitle()
{
if (!this.layout.title)
{
this.layout.title = Tag.render`
<div class="ui-counter-panel__item-title">${this.title}</div>
`;
this.layout.title.style.setProperty('order', this.titleOrder);
}
return this.layout.title;
}
#getCross()
{
if (!this.layout.cross)
{
this.layout.cross = Tag.render`
<div class="ui-counter-panel__item-cross">
<i></i>
</div>
`;
}
return this.layout.cross;
}
setEvents(container)
{
if (!container)
{
container = this.getContainer();
}
if (this.eventsForActive)
{
const eventKeys = Object.keys(this.eventsForActive);
for (let i = 0; i < eventKeys.length; i++)
{
let event = eventKeys[i];
container.addEventListener(event, () => {
if (this.isActive)
{
this.eventsForActive[event]();
}
})
}
}
if (this.eventsForUnActive)
{
const eventKeys = Object.keys(this.eventsForUnActive);
for (let i = 0; i < eventKeys.length; i++)
{
let event = eventKeys[i];
container.addEventListener(event, () => {
if (!this.isActive)
{
this.eventsForUnActive[event]();
}
})
}
}
}
isLocked()
{
return this.locked;
}
lock()
{
this.locked = true;
this.getContainer().classList.add('--locked');
}
unLock()
{
this.locked = false;
this.getContainer().classList.remove('--locked');
}
getArrowDropdown()
{
if (!this.layout.dropdownArrow)
{
this.layout.dropdownArrow = Tag.render`
<div class="ui-counter-panel__item-dropdown">
<i></i>
</div>
`;
}
return this.layout.dropdownArrow;
}
getContainerMenu()
{
if (!this.layout.menuItem)
{
this.layout.menuItem = Tag.render`
<span>
${this.#getValue()}
${this.title}
${this.#getCross()}
</span>
`;
}
return this.layout.menuItem;
}
getContainer()
{
if (!this.layout.container)
{
const type = this.type ? `id="ui-counter-panel-item-${this.type}"` : '';
const isValue = Type.isNumber(this.value);
this.layout.container = Tag.render`
<div ${type} class="ui-counter-panel__item">
${isValue ? this.#getValue() : ''}
${this.title ? this.#getTitle() : ''}
${isValue ? this.#getCross() : ''}
</div>
`;
if (this.parent)
{
this.layout.container = Tag.render`
<div class="ui-counter-panel__item">
${this.title ? this.#getTitle() : ''}
${isValue ? this.#getValue() : ''}
${this.#getCross()}
</div>
`;
this.#getCross().addEventListener('click', (ev) => {
this.deactivate();
ev.stopPropagation();
});
Dom.addClass(this.layout.container, '--dropdown');
}
if (!isValue)
{
this.layout.container.classList.add('--string');
}
if (!isValue && !this.eventsForActive && !this.eventsForUnActive)
{
this.layout.container.classList.add('--title');
}
if (!this.separator)
{
this.layout.container.classList.add('--without-separator');
}
if (this.locked)
{
this.layout.container.classList.add('--locked');
}
if (this.isActive)
{
this.activate();
}
if (this.isRestricted)
{
this.layout.container.classList.add('--restricted');
}
this.setEvents(this.layout.container);
if (isValue && this.items.length === 0)
{
if (!this.parent)
{
this.layout.container.addEventListener('mouseenter', () => {
if (!this.isActive)
{
this.layout.container.classList.add('--hover');
}
});
this.layout.container.addEventListener('mouseleave', () => {
if (!this.isActive)
{
this.layout.container.classList.remove('--hover');
}
});
this.layout.container.addEventListener('click', () => {
this.isActive
? this.deactivate()
: this.activate();
});
}
}
if (this.parent)
{
Dom.append(this.getArrowDropdown(), this.layout.container);
}
}
return this.layout.container;
}
}