Current Path : /var/www/www-root/data/www/monolith-realty.ru/bitrix/js/ui/avatar-editor/src/tabs/ |
Current File : /var/www/www-root/data/www/monolith-realty.ru/bitrix/js/ui/avatar-editor/src/tabs/default-tab.js |
import {Tag, Dom, Loc, Type, Cache} from 'main.core'; import {EventEmitter} from 'main.core.events'; export default class DefaultTab extends EventEmitter { cache = new Cache.MemoryCache(); static priority = 1; #parent: ?DefaultTab; constructor() { super(); this.setEventNamespace('Main.Avatar.Editor'); } getPriority(): Number { return this.constructor.priority; } setParentTab(tab: DefaultTab) { this.#parent = tab; } getHeaderContainer(): Element { return this.cache.remember('headerContainer', () => { const id = this.constructor.code; const title = this.getHeader(); if (title === null) { return Tag.render`<span style="display: none;" data-bx-role="tab-header" data-bx-state="hidden" data-bx-name="${id}"></span>`; } return Tag.render`<span class="ui-avatar-editor__tab-button-item" data-bx-role="tab-header" data-bx-state="visible" data-bx-name="${id}">${title}</span>`; }) } getHeader(): ?String { if (this.#parent !== null) return this.constructor.code.toUpperCase(); return null; } getBodyContainer(): Element { return this.cache.remember('bodyContainer', () => { const id = this.constructor.code; return Tag.render` <div class="ui-avatar-editor__content-block ui-avatar-editor__${id}-block" data-bx-role="tab-body" data-bx-name="${id}">${this.getBody()}</div>`; }) } getBody(): String|Element { const id = this.constructor.code; return this.cache.remember('body', () => { return Tag.render` <div> ${id.toUpperCase()} </div>`; }) } inactivate(): DefaultTab { if (this.#parent) { this.#parent.getHeaderContainer().removeAttribute('data-bx-active'); Dom.removeClass(this.#parent.getHeaderContainer(), 'ui-avatar-editor__tab-button-active'); } this.getHeaderContainer().removeAttribute('data-bx-active'); Dom.removeClass(this.getHeaderContainer(), 'ui-avatar-editor__tab-button-active'); this.getBodyContainer().removeAttribute('data-bx-active'); this.emit('onInactive'); return this; } activate(): DefaultTab { if (this.#parent) { this.#parent.getHeaderContainer().setAttribute('data-bx-active', 'Y'); Dom.addClass(this.#parent.getHeaderContainer(), 'ui-avatar-editor__tab-button-active'); } this.getHeaderContainer().setAttribute('data-bx-active', 'Y'); Dom.addClass(this.getHeaderContainer(), 'ui-avatar-editor__tab-button-active'); this.getBodyContainer().setAttribute('data-bx-active', 'Y'); this.emit('onActive'); return this; } showError({message, code}) { const errorContainer = this.getBody().querySelector('[data-bx-role="error-container"]'); if (errorContainer) { errorContainer.innerText = message || code; } Dom.addClass(this.getBodyContainer(), 'ui-avatar-editor--error'); } static isAvailable() { return true; } static get code() { return 'default'; } }