Your IP : 172.71.120.4
import {Tag, Text, Cache, Event, Loc} from 'main.core';
import {EventEmitter, BaseEvent} from 'main.core.events';
import {Layout} from 'ui.sidepanel.layout';
import {Editor} from '../editor'
import Backend from "../backend";
import type {MaskType} from "../editor";
import UploadTab from '../tabs/upload-tab';
import 'ui.notification';
import {TagSelector, Dialog} from "ui.entity-selector";
import {Options} from '../options';
export default class MaskEditor extends EventEmitter
{
static #instance: this;
cache = new Cache.MemoryCache();
#data: ?MaskType;
#id: Number;
#changesCount: Number = 0;
constructor()
{
super();
this.setEventNamespace([Options.eventNamespace, 'mask:editor'].join(':'));
this.#id = [this.getEventNamespace(), (new Date()).getTime()].join(':');
}
getContentContainer(): HTMLElement
{
return this.cache.remember('content', () => {
const res = Tag.render
`<div class="ui-avatar-editor--scope">
<ol class="ui-avatar-editor-list">
<li class="ui-avatar-editor-list-item">
<span class="ui-avatar-editor-list-item-num">1</span>
${Loc
.getMessage('UI_AVATAR_EDITOR_MASK_CREATOR_CONTENT_1_POINT')
.replace(/#SIZE/gi, Loc.getMessage('UI_AVATAR_MASK_MAX_SIZE'))
}
<div class="ui-avatar-editor-list-link-box">
<a href="${Loc.getMessage('UI_AVATAR_MASK_PATH_ARTICLE')}" class="ui-avatar-editor-list-link">${Loc.getMessage('JS_AVATAR_EDITOR_HOW_TO')}</a>
<a href="/bitrix/js/ui/avatar-editor/dist/user_frame_template.zip" download class="ui-avatar-editor-list-link">${Loc.getMessage('UI_AVATAR_EDITOR_MASK_DOWNLOAD_TEMPLATE2')}</a>
</div>
</li>
<li class="ui-avatar-editor-list-item">
<span class="ui-avatar-editor-list-item-num">2</span>
${Loc.getMessage('UI_AVATAR_EDITOR_MASK_CREATOR_CONTENT_2_POINT')}
<div class="ui-avatar-editor-mask-file" data-bx-role="mask-file"></div>
</li>
<li class="ui-avatar-editor-list-item">${Loc.getMessage('UI_AVATAR_EDITOR_MASK_CREATOR_CONTENT_3_POINT')}
<span class="ui-avatar-editor-list-item-num">3</span>
<div class="ui-form">
<div class="ui-form-row">
<div class="ui-form-label">
<div class="ui-ctl-label-text">${Loc.getMessage('JS_AVATAR_EDITOR_TITLE')}</div>
</div>
<div class="ui-form-content">
<div class="ui-ctl ui-ctl-textbox ui-ctl-w100">
<input data-bx-role="title" type="text" class="ui-ctl-element" placeholder="${Loc.getMessage('JS_AVATAR_EDITOR_PLACEHOLDER')}">
</div>
</div>
</div>
<div class="ui-form-row">
<div class="ui-form-label">
<div class="ui-ctl-label-text">${Loc.getMessage('JS_AVATAR_EDITOR_ACCESS')}</div>
</div>
<div class="ui-form-content">
<div class="ui-ctl ui-ctl-textbox ui-ctl-w100" data-bx-role="access-container"></div>
</div>
</div>
</div>
</li>
</ol>
</div>`;
res
.querySelector('[data-bx-role="mask-file"]')
.appendChild(this.#getEditor().getContainer());
this.#getEditor().getCanvasZooming().setDefaultValue(0.5).reset();
return res;
});
}
#getEditor(): Editor
{
return this.cache.remember('editor', () => {
const res = new Editor({
enableCamera: false,
enableUpload: true,
uploadTabOptions: {fileAccept: 'image/png'},
enableMask: false,
});
res.subscribe('onChange', ({data}) => {
this.#changesCount++;
});
return res;
});
}
#initAccessSelector(): TagSelector
{
return this.cache.remember('TagSelector', () => {
const handler = ({target}) => {
if (target instanceof Dialog)
{
this.#data.accessCode = target.getSelectedItems()
.map((item) => {
return [item.entityId, item.id];
})
;
}
};
const selector = new top.BX.UI.EntitySelector.TagSelector({
id: this.constructor.name,
dialogOptions: {
id: this.constructor.name,
context: null,
preselectedItems: this.#data.accessCode,
events: {
'Item:onSelect': handler,
'Item:onDeselect': handler
},
entities: [
{
id: 'meta-user',
options: {
'all-users': {
title: 'All users',
allowView: true
}
}
},
{
id: 'user',
options: {
emailUsers: false,
inviteGuestLink: false,
myEmailUsers: false
}
},
{
id: 'department',
options: {
selectMode: 'usersAndDepartments',
allowFlatDepartments: false,
}
}
]
}
});
selector.renderTo(
this.getContentContainer()
.querySelector('[data-bx-role="access-container"]')
);
return selector;
})
}
isModified(): boolean
{
return this.#changesCount > 0;
}
openNew()
{
this
.#showSlider()
.then(() => {
this.#changesCount = 0;
this.#data = {
id: null,
title: '',
src: null,
accessCode: [['meta-user', 'all-users']]
};
this.#getEditor().reset();
this.getContentContainer()
.querySelector('[data-bx-role="title"]').value = '';
this.#initAccessSelector();
});
}
openSaved(data: MaskType)
{
this.#data = {
id: data.id,
title: data.title,
src: data.src,
accessCode: data.accessCode || null
};
this.getContentContainer().querySelector('[data-bx-role="title"]').value = Text.encode(data.title);
this
.#showSlider()
.then(() => {
this.#getEditor()
.loadSrc(data.src)
.then(() => {
this.#changesCount = 0;
if (!data.accessCode)
{
Backend.getMaskAccessCode(data.id)
.then(({data: {accessCode}}) => {
this.emit('maskAccessCodeHasGot', accessCode);
this.#data.accessCode = accessCode
this.#initAccessSelector();
})
;
}
else
{
this.#data.accessCode = Array.from(data.accessCode);
this.#initAccessSelector();
}
})
;
})
;
}
checkOpened(): Promise
{
return new Promise((resolve, reject) => {
let isSuccess = true;
if (this.#getEditor().isEmpty())
{
this.#getEditor()
.getTab(UploadTab.code)
.showError({message: Loc.getMessage('JS_AVATAR_EDITOR_ERROR_IMAGE_IS_NOT_CHOSEN')});
isSuccess = false;
}
const title = this.getContentContainer()
.querySelector('[data-bx-role="title"]').value.trim();
if (title.length <= 0)
{
this.getContentContainer()
.querySelector('[data-bx-role="title"]').style.border = '3px solid red';
isSuccess = false;
}
if (isSuccess)
{
return resolve();
}
return reject();
});
}
saveOpened(): Promise
{
return new Promise((resolve, reject) => {
const cb = ({blob}) => {
Backend
.saveMask({
id: this.#data.id,
title: this.getContentContainer()
.querySelector('[data-bx-role="title"]').value,
accessCode: this.#data.accessCode
}, blob)
.then(resolve)
.catch(reject)
;
}
if (!this.isModified())
{
return cb({blob: null});
}
return this.#getEditor()
.packBlob()
.then(cb);
})
}
destroy()
{
this.#getEditor().reset();
this.getContentContainer()
.querySelector('[data-bx-role="title"]').value = '';
this.#data = null;
this.cache.storage.clear();
}
#showSlider(): Promise
{
return new Promise((resolve, reject) => {
BX.SidePanel.Instance.open(this.#id, {
width: 800,
cacheable: false,
allowChangeHistory: false,
events: {
onCloseByEsc: (event) => {
event.denyAction();
},
onOpen: () => {
setTimeout(() => {
this.emit('onOpen', {});
}, 0);
resolve();
},
onCloseComplete: this.destroy.bind(this),
},
contentCallback: (slider) => {
return Layout.createContent({
extensions: [],
title: Loc.getMessage('UI_AVATAR_EDITOR_MASK_CREATOR_TITLE'),
content: () => {
const res = this.getContentContainer();
setTimeout(() => {
this.#getEditor().getCanvasZooming().setDefaultValue(0.5).reset();
}, 0);
return res;
},
buttons: ({CancelButton, SaveButton}) => {
return [
new SaveButton({
onclick: (button) => {
button.setWaiting(true);
this
.checkOpened()
.then(this.saveOpened.bind(this))
.then(({data}) => {
this.emit('onSave', {id: this.#data.id, data: data});
button.setWaiting(false);
slider.close();
})
.catch((error) => {
if (error)
{
BX.UI.Notification.Center.notify({
content: ['Error is here', ...arguments].join('-')
});
}
button.setWaiting(false);
});
}
}),
new CancelButton({
onclick: () => {
slider.close();
}
})
];
}
});
},
label: {
text: Loc.getMessage('UI_AVATAR_EDITOR_MASK_CREATOR_LABEL'),
}
});
}
)
}
/**
* Emits specified event with specified event object
* @param {string} eventName
* @param {BaseEvent | any} event
* @return {this}
*/
emit(eventName: string, event?: BaseEvent): this
{
BX.SidePanel.Instance.postMessageAll(this.#id, eventName, event);
return this;
}
static #subscribedToASliderEvents = false
static subscribe(eventName: string, listener: (event: BaseEvent) => void): void
{
EventEmitter.subscribe(([Options.eventNamespace, 'mask:editor', eventName].join(':')), listener);
if (this.#subscribedToASliderEvents)
{
return;
}
this.#subscribedToASliderEvents = true;
EventEmitter.subscribe('SidePanel.Slider:onMessage', ({data: [BXSidePanelMessageEvent]}) => {
if (BXSidePanelMessageEvent.getSender().getUrl().indexOf([Options.eventNamespace, 'mask:editor'].join(':')) === 0)
{
EventEmitter.emit(
[Options.eventNamespace, 'mask:editor', BXSidePanelMessageEvent.getEventId()].join(':'),
BXSidePanelMessageEvent.getData()
);
}
});
}
static getInstance(): ?this
{
if (this.#instance)
{
return this.#instance;
}
if (window === window.top)
{
if (!this.#instance)
{
this.#instance = new this();
}
return this.#instance;
}
return null;
}
static getPromiseWithInstance(): Promise
{
if (this.#instance || this.getInstance())
{
return new Promise((resolve) => {
resolve(this.#instance);
});
}
return new Promise((resolve) => {
top
.BX
.Runtime
.loadExtension(['ui.avatar-editor'])
.then(() => {
this.#instance = top.BX.UI.AvatarEditor.MaskEditor.getInstance();
resolve(this.#instance);
});
});
}
}