Server IP : 80.87.202.40 / Your IP : 216.73.216.169 Web Server : Apache System : Linux rospirotorg.ru 5.14.0-539.el9.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Dec 5 22:26:13 UTC 2024 x86_64 User : bitrix ( 600) PHP Version : 8.2.27 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/bitrix/ext_www/rospirotorg.ru/bitrix/js/landing/features-popup/src/ |
Upload File : |
import { EventEmitter, BaseEvent } from 'main.core.events'; import { Cache, Dom, Event, Tag, Text, Type } from 'main.core'; import { Popup } from 'main.popup'; import { PageObject } from 'landing.pageobject'; import 'ui.fonts.opensans'; import './css/style.css'; type FeaturesPopupItemOptions = { id: string, title?: string, theme?: string, icon?: { className: string, onClick: (event: BaseEvent) => void, }, link?: { label: string, onClick: (event: BaseEvent) => void, }, actionButton?: { label: string, onClick: (event: BaseEvent) => void, }, onClick?: (event: BaseEvent) => void, }; type FeaturesPopupOptions = { bindElement: HTMLElement, items: Array<FeaturesPopupItemOptions>, events: { onShow: (event: BaseEvent) => void, onClose: (event: BaseEvent) => void, }, }; export class FeaturesPopup extends EventEmitter { #cache = new Cache.MemoryCache(); static Themes = { Highlight: 'highlight', }; constructor(options: FeaturesPopupOptions) { super(); this.setEventNamespace('BX.Landing.FeaturesPopup'); this.subscribeFromOptions(options.events); this.setOptions(options); Event.bind(PageObject.getEditorWindow().document, 'click', () => { this.hide(); }); } setOptions(options: FeaturesPopupOptions) { this.#cache.set('options', { ...options }); } getOptions(): FeaturesPopupOptions { return this.#cache.get('options', {}); } #getPopup(): Popup { return this.#cache.remember('popup', () => { return new Popup({ id: `landing-features-popup-${Text.getRandom()}`, bindElement: this.getOptions().bindElement, content: this.#getContent(), className: 'landing-features-popup', width: 410, autoHide: true, closeByEsc: true, noAllPaddings: true, angle: { position: 'top', offset: 115, }, minWidth: 410, contentBackground: 'transparent', background: '#E9EAED', }); }); } show(): void { this.#getPopup().show(); this.emit('onShow'); } hide(): void { this.#getPopup().close(); this.emit('onClose'); } isShown(): boolean { return this.#getPopup().isShown(); } #getContent(): HTMLDivElement { return this.#cache.remember('content', () => { return Tag.render` <div class="landing-features-popup-content"> ${this.getOptions().items.map((options) => { return FeaturesPopup.createRow(options); })} </div> `; }); } static createContentBlock(options: FeaturesPopupItemOptions | Array<FeaturesPopupItemOptions>): HTMLDivElement | Array<HTMLDivElement> { if (Type.isArray(options)) { return options.map((optionsItem) => { return FeaturesPopup.createContentBlock(optionsItem); }); } const getTitle = () => { if (Type.isStringFilled(options.title)) { return Tag.render` <div class="landing-features-popup-content-block-text-title"> ${Text.encode(options.title)} </div> `; } return ''; }; const getLink = () => { if ( Type.isPlainObject(options.link) && Type.isStringFilled(options.link.label) && Type.isFunction(options.link.onClick) ) { return Tag.render` <div class="landing-features-popup-content-block-text-link" onclick="${options.link.onClick}" > ${Text.encode(options.link.label)} </div> `; } return ''; }; const getActionButton = () => { if ( Type.isPlainObject(options.actionButton) && Type.isStringFilled(options.actionButton.label) && Type.isFunction(options.actionButton.onClick) ) { return Tag.render` <div class="landing-features-popup-content-block-action"> <span class="ui-btn ui-btn-xs ui-btn-round ui-btn-no-caps ui-btn-light-border" onclick="${options.actionButton.onClick}" >${Text.encode(options.actionButton.label)}</span> </div> `; } return ''; }; const getTextBlock = () => { const title = getTitle(); const link = getLink(); if (title || link) { return Tag.render` <div class="landing-features-popup-content-block-text"> ${getTitle()} ${getLink()} </div> `; } return ''; }; const getIcon = () => { if (Type.isPlainObject(options.icon)) { return Tag.render` <div class="landing-features-popup-content-block-icon"> <div class="ui-icon ui-icon-md ${options.icon.className}"> <i></i> </div> </div> `; } return ''; }; const blockClass = (() => { let result = ''; if (Type.isFunction(options.onClick)) { result += ' landing-features-popup-content-block-clickable'; } if (Type.isStringFilled(options.theme)) { result += ` landing-features-popup-content-block-theme-${options.theme}`; } return result; })(); const block = Tag.render` <div class="landing-features-popup-content-block${blockClass}" data-id="${Text.encode(options.id || Text.getRandom())}" > ${getIcon()} ${getTextBlock()} ${getActionButton()} </div> `; if (Type.isFunction(options.onClick)) { Event.bind(block, 'click', options.onClick); } if (Type.isStringFilled(options.backgroundColor)) { Dom.style(block, 'background-color', options.backgroundColor); } return block; } static createRow(options: FeaturesPopupItemOptions): HTMLDivElement { return Tag.render` <div class="landing-features-popup-content-row"> ${FeaturesPopup.createContentBlock(options)} </div> `; } }