@salla.sa/twilight-components/dist/esm/salla-notifications.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, g as getElement } from './index-BrMYHkA5.js';
import { H as Helper } from './Helper-BrCHOtZG.js';
import './anime.es-CgtvEd63.js';

const sallaNotificationsCss = "";

const SallaNotifications = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Number of notifications to load per request.
         */
        this.itemPerPage = 10;
        this.no_notifications_trans = salla.lang.get('blocks.header.no_notifications');
        this.load_more_text_trans = salla.lang.get('common.elements.load_more');
        salla.lang.onLoaded(() => {
            this.no_notifications_trans = salla.lang.get('blocks.header.no_notifications');
            this.load_more_text_trans = salla.lang.get('common.elements.load_more');
        });
    }
    // Show/hide loading
    loading(isLoading = true) {
        var _a;
        let btnText = (_a = this.status) === null || _a === void 0 ? void 0 : _a.querySelector('.s-button-text');
        if (btnText) {
            Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
            this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
        }
    }
    getNotificationCard(notification) {
        const notificationItem = document.createElement('salla-notification-item');
        notificationItem.notification = notification;
        notificationItem.classList.add('s-block');
        return notificationItem;
    }
    render() {
        var _a;
        if (this.showPlaceholder) {
            return h("div", { class: "s-notifications-no-content" }, h("salla-placeholder", { alignment: 'center' }, h("span", { slot: 'title' }, this.no_notifications_trans)));
        }
        return h("div", { class: "s-notifications-wrapper" }, h("div", { class: "s-notifications-container", ref: wrapper => this.wrapper = wrapper }), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => this.status = status }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, (_a = this.loadMoreText) !== null && _a !== void 0 ? _a : this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))));
    }
    handleResponse(notificationsList) {
        return notificationsList.map(notification => this.getNotificationCard(notification));
    }
    initiateInfiniteScroll() {
        var _a, _b, _c;
        if (!this.wrapper) {
            salla.logger.error('Wrapper is undefined. Cannot initiate infinite scroll.');
            return;
        }
        this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {
            path: () => this.nextPage,
            history: true,
            nextPage: this.nextPage,
            scrollThreshold: false,
        }, true);
        (_a = this.infiniteScroll) === null || _a === void 0 ? void 0 : _a.on('request', _response => {
            this.loading();
        });
        (_b = this.infiniteScroll) === null || _b === void 0 ? void 0 : _b.on('load', response => {
            var _a;
            this.loading(false);
            this.pagination = response.pagination;
            this.nextPage = ((_a = response.pagination.links) === null || _a === void 0 ? void 0 : _a.next) || null;
            this.handleResponse(response.data).forEach(data => this.wrapper.append(data));
            let items = this.host.querySelectorAll('salla-notification-item:not(.animated)');
            Helper.animateItems(items);
        });
        (_c = this.infiniteScroll) === null || _c === void 0 ? void 0 : _c.on('error', (e) => {
            salla.logger.error('Error loading more comments:', e);
        });
    }
    async loadInitialData() {
        await salla.api.notifications.fetch({ "per_page": this.itemPerPage })
            .then(resp => {
            var _a;
            this.pagination = resp.pagination;
            this.total = resp.pagination.total;
            this.nextPage = ((_a = resp.pagination.links) === null || _a === void 0 ? void 0 : _a.next) || null;
            // if (!this.notifications.length) {
            //   this.showPlaceholder = true;
            //   return this.loading(false);
            // }
            setTimeout(() => {
                if (!resp.data.length) {
                    return this.showPlaceholder = true;
                }
                this.handleResponse(resp.data).forEach(data => this.wrapper.append(data));
                this.initiateInfiniteScroll();
                let items = this.wrapper.querySelectorAll('salla-notification-item:not(.animated)');
                Helper.animateItems(items);
            }, 100);
        })
            .catch(error => {
            salla.logger.error(error);
            this.showPlaceholder = true;
            this.loading(false);
        });
    }
    // Get next page
    async loadMore() {
        var _a;
        (_a = this.infiniteScroll) === null || _a === void 0 ? void 0 : _a.loadNextPage();
    }
    async componentWillLoad() {
        await this.loadInitialData();
    }
    get host() { return getElement(this); }
};
SallaNotifications.style = sallaNotificationsCss;

export { SallaNotifications as salla_notifications };
//# sourceMappingURL=salla-notifications.entry.js.map

//# sourceMappingURL=salla-notifications.entry.js.map