Your IP : 216.73.216.86
import { Dom, Tag, Event, Type, Loc } from 'main.core';
import { EventEmitter } from 'main.core.events';
import './style.css';
import { Actions, Icon } from 'ui.icon-set.api.core';
import 'ui.icon-set.actions';
import { Loader } from 'main.loader';
type Option = {
slider: BX.SidePanel.Slider,
container: HTMLElement,
pagesHref: Array<PagesHref>,
useLoader: boolean,
pageType: string,
};
type PagesHref = {
ID: number,
HREF: string,
};
export class PageSwapper extends EventEmitter
{
#disableClass = 'ui-swap-btn-disabled';
btnSize = 20;
constructor(options: Option)
{
super(options);
this.setEventNamespace('BX.UI.Sidepanel.PageSwapper');
this.slider = options.slider || null;
this.container = options.container || null;
this.pagesHref = options.pagesHref || null;
this.useLoader = options.useLoader || false;
this.pageType = options.pageType || 'default';
}
init(): void
{
if (!this.slider)
{
console.warn('BX.UI.SliderPageSwapper.Preview: \'slider\' is not defined');
return;
}
if (!this.container)
{
console.warn('BX.UI.SliderPageSwapper.Preview: \'container\' is not defined');
return;
}
this.window = this.slider.getFrameWindow();
this.curHref = this.slider.url;
this.pageId = this.slider.getData().get('pageId');
if (!this.#isAnyPageSet())
{
this.#setNeighboursHref();
}
this.#setPrevButton();
this.#setNextButton();
this.setTitles(this.pageType);
this.getWrapper();
this.#renderWrapper();
}
setPrevPage(prevPageId: number = null, prevPageHref: string = null): void
{
if (prevPageId)
{
this.prevPageId = prevPageId;
}
if (prevPageHref)
{
this.prevPageHref = prevPageHref;
}
this.#setButtonHref(this.getPrevButton(), this.prevPageId, this.prevPageHref);
}
setNextPage(nextPageId: number = null, nextPageHref: string = null): void
{
if (nextPageId)
{
this.nextPageId = nextPageId;
}
if (nextPageHref)
{
this.nextPageHref = nextPageHref;
}
this.#setButtonHref(this.getNextButton(), this.nextPageId, this.nextPageHref);
}
updatePagesHref(pagesHref: Array<PagesHref>): void
{
this.showLoader();
this.#setNeighboursHref(pagesHref);
this.setPrevPage();
this.setNextPage();
this.hideLoader();
}
#setPrevButton(): void
{
const icon = new Icon({
icon: Actions.CHEVRON_LEFT,
size: this.btnSize,
});
this.prevBtn = icon.render();
Dom.addClass(this.getPrevButton(), 'ui-page-swap-left');
this.#setButtonHref(this.getPrevButton(), this.prevPageId, this.prevPageHref);
}
#setNextButton(): void
{
const icon = new Icon({
icon: Actions.CHEVRON_RIGHT,
size: this.btnSize,
});
this.nextBtn = icon.render();
Dom.addClass(this.getNextButton(), 'ui-page-swap-right');
this.#setButtonHref(this.getNextButton(), this.nextPageId, this.nextPageHref);
}
getPrevButton(): Node
{
return this.prevBtn;
}
getNextButton(): Node
{
return this.nextBtn;
}
#setButtonHref(button: node, pageId: number = null, pageHref: string = null): void
{
if (pageId && pageHref)
{
this.#addListenerToButton(button, pageId, pageHref);
this.hideLoader();
}
else
{
Event.unbindAll(button, 'click');
}
this.#toggleButton(button, pageId, pageHref);
}
#toggleButton(button: node, pageId: number, pageHref: string): void
{
if (Dom.hasClass(button, this.#disableClass) && pageId && pageHref)
{
Dom.removeClass(button, this.#disableClass);
Dom.style(button, 'cursor', 'pointer');
}
else if (!Dom.hasClass(button, this.#disableClass) && !(pageId && pageHref))
{
Dom.addClass(button, this.#disableClass);
Dom.style(button, 'cursor', 'not-allowed');
}
}
getWrapper(): Node
{
if (!this.wrapper)
{
this.wrapper = Tag.render`
<div class='ui-page-swapper'>
${this.getPrevButton()}
${this.getNextButton()}
</div>
`;
}
return this.wrapper;
}
#renderWrapper(): void
{
Dom.append(this.getWrapper(), this.container);
this.loader = new Loader({
target: this.getWrapper(),
size: 20,
mode: 'absolute',
});
if (this.useLoader && !this.#isAnyPageSet())
{
this.showLoader();
}
else
{
this.hideLoader();
}
}
#activateOverlay(): void
{
const loader = this.slider.layout.loader;
if (loader)
{
Dom.style(loader, 'opacity', 0.5);
Dom.style(loader, 'display', 'block');
}
}
#setNeighboursHref(pagesHref: Array<PagesHref> = null): void
{
if (pagesHref)
{
this.pagesHref = pagesHref;
}
if (!this.pagesHref)
{
return;
}
if (!this.pageId)
{
this.pagesHref.forEach((page) => {
if (page.HREF.includes(this.curHref))
{
this.pageId = Number(page.ID);
}
});
}
this.prevPageId = null;
this.prevPageHref = null;
this.nextPageId = null;
this.nextPageHref = null;
if (!this.pageId)
{
return;
}
Object.keys(this.pagesHref).forEach((key) => {
if (Number(this.pagesHref[key].ID) === this.pageId)
{
this.prevPageId = Number(this.pagesHref[key - 1]?.ID) || null;
this.prevPageHref = this.pagesHref[key - 1]?.HREF || null;
this.nextPageId = Number(this.pagesHref[Number(key) + 1]?.ID) || null;
this.nextPageHref = this.pagesHref[Number(key) + 1]?.HREF || null;
}
});
}
#addListenerToButton(button: node, pageId: number, pageHref: string): void
{
Event.bind(button, 'click', () => {
this.slider.getData().set('pageId', pageId);
const url = new URL(pageHref, window.location);
url.searchParams.append('IFRAME_TYPE', 'SIDE_SLIDER');
url.searchParams.append('IFRAME', 'Y');
this.#activateOverlay();
this.window.location.href = url;
});
}
hasPagesBeforeEnd(pagesBeforeEnd: number = 0): boolean
{
if (pagesBeforeEnd === 0)
{
return (!Type.isUndefined(this.nextPageHref) && !Type.isNull(this.nextPageHref));
}
if (pagesBeforeEnd > 0 && Type.isNumber(pagesBeforeEnd))
{
let check = null;
Object.keys(this.pagesHref).forEach((key) => {
if (Number(this.pagesHref[key].ID) === this.pageId)
{
check = this.pagesHref[Number(key) + pagesBeforeEnd]?.HREF || null;
}
});
return !Type.isNull(check);
}
return false;
}
#isAnyPageSet(): boolean
{
return (this.prevPageId && this.prevPageHref) || (this.nextPageId && this.nextPageHref);
}
showLoader(): void
{
if (this.loader && !this.loader.isShown())
{
this.loader.show();
Dom.style(this.getPrevButton(), 'visibility', 'hidden');
Dom.style(this.getNextButton(), 'visibility', 'hidden');
}
}
hideLoader(): void
{
if (this.loader && this.loader.isShown())
{
this.loader.hide();
Dom.style(this.getPrevButton(), 'visibility', 'visible');
Dom.style(this.getNextButton(), 'visibility', 'visible');
}
}
setTitles(type: string): void {
if (type === 'mail')
{
this.prevBtn.setAttribute('title', Loc.getMessage('UI_SIDEPANEL_PAGE_SWAPPER_PREVIOUS_MAIL_MESSAGE'));
this.nextBtn.setAttribute('title', Loc.getMessage('UI_SIDEPANEL_PAGE_SWAPPER_NEXT_MAIL_MESSAGE'));
}
}
}