@exadel/esl/modules/esl-share/core/esl-share-popup.js

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var ESLSharePopup_1;
import { ExportNs } from '../../esl-utils/environment/export-ns';
import { ESLPopup } from '../../esl-popup/core';
import { bind, listen, memoize } from '../../esl-utils/decorators';
import { ESLShareButton } from './esl-share-button';
import { ESLShareConfig } from './esl-share-config';
function stringifyButtonsList(btns) {
    return btns.map((btn) => btn.name).join(',');
}
/** List of ESLSharePopup config keys */
export const ESL_SHARE_POPUP_CONFIG_KEYS = [
    ...ESLPopup.CONFIG_KEYS,
    'list',
    'dir',
    'lang',
    'disableArrow'
];
/**
 * ESLSharePopup component
 * @author Dmytro Shovchko
 *
 * ESLSharePopup is an extension of {@link ESLPopup} that:
 * - exists as a singleton
 * - renders a list of {@link ESLShareButton}s based on the {@link ESLShareConfig} config from host {@link ESLShare} component
 * - forwards the sharing attributes from the host share {@link ESLShare} component
 */
let ESLSharePopup = ESLSharePopup_1 = class ESLSharePopup extends ESLPopup {
    constructor() {
        super(...arguments);
        /** Hashstring with a list of buttons already rendered in the popup */
        this._list = '';
    }
    /** Register {@link ESLSharePopup} component and dependent {@link ESLShareButton} */
    static register() {
        ESLShareButton.register();
        super.register();
    }
    /** Shared instance of ESLSharePopup */
    static get sharedInstance() {
        return ESLSharePopup_1.create();
    }
    connectedCallback() {
        super.connectedCallback();
        this.classList.add(ESLPopup.is);
        this.tabIndex = 0;
    }
    /** Sets initial state of the popup */
    setInitialState() { }
    onShow(params) {
        if (params.list) {
            const buttonsList = ESLShareConfig.instance.get(params.list);
            this.appendButtonsFromList(buttonsList);
        }
        this.forwardAttributes();
        this.dir = params.dir || '';
        this.lang = params.lang || '';
        this.parentNode !== document.body && document.body.appendChild(this);
        this.$$cls('disable-arrow', !!params.disableArrow);
        super.onShow(params);
    }
    /** Actions to execute on popup hiding. */
    onHide(params) {
        super.onHide(params);
        this.parentNode === document.body && document.body.removeChild(this);
    }
    /** Checks that the button list from the config was already rendered in the popup. */
    isEqual(config) {
        return stringifyButtonsList(config) === this._list;
    }
    /** Appends a button to the popup. */
    appendButton(btnCfg) {
        const btn = ESLShareButton.create(btnCfg.name);
        btn && this.appendChild(btn);
    }
    /** Appends buttons from the list to the popup. */
    appendButtonsFromList(config) {
        if (this.isEqual(config))
            return;
        this.innerHTML = '';
        config.forEach(this.appendButton);
        memoize.clear(this, '$arrow');
        this._list = stringifyButtonsList(config);
    }
    /**
     * Forwards share attributes from the activator (or its parents) to the {@link ESLSharePopup} instance.
     * Skips empty attributes
     */
    forwardAttributes() {
        const { activator } = this;
        if (!activator)
            return;
        ESLSharePopup_1.forwardedAttrs.forEach((name) => {
            const el = activator.closest(`[${name}]`);
            const value = el && el.getAttribute(name);
            this.$$attr(name, value);
        });
    }
    _onConfigChange() {
        this.hide();
    }
};
ESLSharePopup.is = 'esl-share-popup';
/** Default params to pass into the share popup */
ESLSharePopup.DEFAULT_PARAMS = Object.assign(Object.assign({}, ESLPopup.DEFAULT_PARAMS), { position: 'top', hideDelay: 300 });
/** List of config keys */
ESLSharePopup.CONFIG_KEYS = ESL_SHARE_POPUP_CONFIG_KEYS;
/** List of attributes to forward from the activator to the {@link ESLSharePopup} */
ESLSharePopup.forwardedAttrs = ['share-title', 'share-url'];
__decorate([
    bind
], ESLSharePopup.prototype, "appendButton", null);
__decorate([
    listen({ event: 'change', target: ESLShareConfig.instance })
], ESLSharePopup.prototype, "_onConfigChange", null);
__decorate([
    memoize()
], ESLSharePopup, "sharedInstance", null);
ESLSharePopup = ESLSharePopup_1 = __decorate([
    ExportNs('SharePopup')
], ESLSharePopup);
export { ESLSharePopup };