Your IP : 172.70.80.239
import {Loc, Tag, Text, Cache, Dom} from 'main.core';
import {BaseEvent, EventEmitter} from 'main.core.events';
import {MaskItem} from './mask-item';
import {MaskType} from '../editor';
import Backend from "../backend";
import {Button, ButtonSize} from 'ui.buttons';
import MaskEditor from "./mask-editor";
export class MaskList extends EventEmitter
{
static repoList: WeakMap<HTMLElement, MaskList> = new WeakMap();
static paginationStates = {ready: 0, inprogress: 1, finished: 3};
static regularPageSize = 9;
static shortPageSize = 3;
#container: Element;
cache = new Cache.MemoryCache();
#state: String = this.constructor.paginationStates['ready'];
#pageSize: Number = 10;
#pageNumber: Number = 1;
constructor({initialPageSize, items})
{
super();
this.setEventNamespace('Main.Avatar.Editor');
this.#container = this.getContainer()
.querySelector('[data-bx-role="avatar-mask-list-container"]');
this.#pageSize = this.constructor.regularPageSize;
this.loadItems(items);
this.setReady();
}
static getTemplate(): String
{
return `<div>
<div class="ui-avatar-editor--scope" data-bx-role="avatar-mask-list-container">
<section class="ui-avatar-editor__mask-block-list-container" id="mask_group">
<h3 class="ui-avatar-editor__mask-title" data-bx-role="group_title" data-bx-group-id="#GROUP_ID#">#GROUP_TITLE#</h3>
<ul class="ui-avatar-editor__mask-block-mask-box" data-bx-role="group_body" data-bx-group-id="#GROUP_ID#">
<li class="ui-avatar-editor__mask-block-mask-element"
id="mask_item"
data-bx-role="mask_item"
title="#MASK_TITLE# \n #MASK_SUBTITLE#"
data-bx-id="#MASK_ID#">
<div data-bx-role="mask-thumb" class="ui-avatar-editor__mask-block-mask-image" style="background-image: url('#MASK_SRC#'); "/></div>
<div class="ui-avatar-editor__mask-block-mask-name">#MASK_TITLE#</div>
<div class="ui-avatar-editor__mask-block-mask-subname">#MASK_SUBTITLE#</div>
<div class="ui-avatar-editor__mask-block-mask-menu" data-bx-role="mask-item-menu-pointer"></div>
</li>
</ul>
</section>
</div>
<nav class="ui-avatar-editor-pagination" data-bx-role="avatar-mask-list-pagination"></nav>
</div>`
;
}
static setByNode(node, object: MaskList)
{
return this.repoList.set(node, object);
}
static getByNode(node): ?MaskList
{
return this.repoList.get(node);
}
#getTemplateGroup(): String
{
return this.cache.remember('templateGroup', () => {
const maskGroup = Tag.render`${this.constructor.getTemplate()}`.querySelector('#mask_group');
const maskItem = maskGroup.querySelector('#mask_item');
maskItem.parentNode.removeChild(maskItem);
maskGroup.removeAttribute('id');
return maskGroup.outerHTML.trim();
});
}
#getTemplateItem(): String
{
return this.cache.remember('templateItem', () => {
const maskItem = Tag.render`${this.constructor.getTemplate()}`.querySelector('#mask_item');
maskItem.removeAttribute('id');
return maskItem.outerHTML.trim();
});
}
setPageSize(pageSize: number): MaskList
{
this.#pageSize = pageSize;
return this;
}
getContainer(): HTMLElement
{
return this.cache.remember('container', () => {
const res = Tag.render`${this.constructor.getTemplate()}`;
Dom.remove(res.querySelector('#mask_item'))
Dom.remove(res.querySelector('#mask_group'))
return res;
});
}
isReady()
{
return (this.#state === this.constructor.paginationStates.ready);
}
setReady()
{
this.getMoreButton().setWaiting(false);
this.#state = this.constructor.paginationStates.ready;
}
setBusy()
{
this.getMoreButton().setWaiting(true);
this.#state = this.constructor.paginationStates.inprogress;
}
setFinished()
{
this.getMoreButton().setDisabled(true);
this.#state = this.constructor.paginationStates.finished;
Dom.remove(this.getContainer().querySelector('[data-bx-role="avatar-mask-list-pagination"]'));
}
getMoreButton(): Button
{
return this.cache.remember('moreButton', () => {
const butt = new Button({
text: Loc.getMessage('UI_AVATAR_EDITOR_MASK_LIST_PAGINATION'),
baseClass: 'ui-btn ui-btn-light-border',
size: ButtonSize.SMALL,
noCaps: true,
round: true,
onclick: this.load.bind(this)
});
butt.renderTo(this.getContainer().querySelector('[data-bx-role="avatar-mask-list-pagination"]'));
return butt;
});
}
load(): void
{
if (!this.isReady())
{
return;
}
this.setBusy();
Backend.getMaskList(
this.constructor.name.replace('Mask', ''),
{page: ++this.#pageNumber, size: this.#pageSize})
.then(this.loadItems.bind(this))
.catch(this.terminate.bind(this))
;
}
loadItems(items)
{
this.renderItems(items);
this.finish(items);
}
renderItems(data)
{
let maxCount = this.#pageSize;
Object
.values(data)
.forEach(({id, title, items}) =>
{
if (maxCount <= 0)
{
return;
}
items = Object.values(items).slice(0, maxCount);
maxCount -= items.length;
id = id || '0';
if (!this.#container.querySelector(`[data-bx-group-id="${id}"][data-bx-role="group_body"]`))
{
const groupText = this.#getTemplateGroup()
.replace(/#GROUP_ID#/gi, Text.encode(id))
.replace(/#GROUP_TITLE#/gi, Text.encode(title || ''))
this.#container.appendChild(Tag.render`${groupText}`);
}
const badgeContainer = this.#container.querySelector(`[data-bx-group-id="${id}"][data-bx-role="group_body"]`);
items.forEach((item: MaskType) => {
const maskItem = new MaskItem(item, this.#getTemplateItem());
badgeContainer.appendChild(maskItem.getContainer());
});
})
;
}
renderItemsReverse(data)
{
Object
.values(data)
.forEach(({id, title, items}) =>
{
id = id || '0';
if (!this.#container.querySelector(`[data-bx-group-id="${id}"][data-bx-role="group_body"]`))
{
const groupText = this.#getTemplateGroup()
.replace(/#GROUP_ID#/gi, Text.encode(id))
.replace(/#GROUP_TITLE#/gi, Text.encode(title || ''));
Dom.prepend(Tag.render`${groupText}`, this.#container);
}
const badgeContainer = this.#container.querySelector(`[data-bx-group-id="${id}"][data-bx-role="group_body"]`);
items.forEach((item: MaskType) => {
const maskItem = new MaskItem(item, this.#getTemplateItem());
Dom.prepend(maskItem.getContainer(), badgeContainer);
});
})
;
}
finish(data)
{
let thisPageItemCount = 0;
data.forEach(({items}) =>
{
thisPageItemCount += items.length;
});
if (thisPageItemCount >= this.#pageSize)
{
this.setReady();
}
else
{
this.setFinished();
}
}
terminate(data)
{
let errors = [];
if (data instanceof Error)
{
console.log('data: ', data);
errors.push(data);
}
else if (data['errors'])
{
errors = data.errors;
}
else
{
errors.push({message: 'Some error'});
}
this.setFinished();
errors.forEach(({code, message}) => {
this.#container.appendChild(
Tag.render`<pre>${Text.encode(message)}</pre>`
)
});
}
}
export class MaskRecentlyUsedList extends MaskList{}
export class MaskSystemList extends MaskList {}
export class MaskUserList extends MaskList {
constructor()
{
super(...arguments);
MaskEditor.subscribe(
'onSave',
(event: BaseEvent) => {
try {
const {data: {id, data}} = event;
if (id === null)
{
this.renderItemsReverse({'doesNotMatter': {items: [data]}})
}
}
catch(e)
{
console.log(e.message);
}
})
;
}
}
export class MaskSharedList extends MaskList {}