@salla.sa/twilight-components
Version:
Salla Web Component
156 lines (152 loc) • 6.43 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, a as getElement } from './index-BHYtfMwX.js';
import { H as Helper } from './Helper-DFMXF2_h.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) {
let btnText = this.status?.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() {
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" }, this.loadMoreText ?? 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" } })))));
}
/**
* Detect whether the response uses the new API format (v2) by checking for `cursor` key.
*/
isV2Response(resp) {
return !!resp.cursor;
}
/**
* Map a single v2 notification to the legacy Notification interface.
*/
normalizeNotification(item) {
return {
title: item.title,
sub_title: item.body,
date: item.time_ago,
is_new: !item.is_read,
url: item.url,
};
}
/**
* Normalize a v2 cursor pagination to the legacy Pagination format.
*/
normalizePagination(cursor) {
return {
count: cursor.count,
currentPage: cursor.current,
links: {
next: cursor.next != null ? String(cursor.next) : undefined,
},
};
}
/**
* Middleware that normalizes any API response to the legacy shape.
* If the response is already in legacy format, it passes through unchanged.
*/
normalizeResponse(resp) {
if (this.isV2Response(resp)) {
return {
data: (resp.data || []).map((item) => this.normalizeNotification(item)),
pagination: this.normalizePagination(resp.cursor),
};
}
return resp;
}
handleResponse(notificationsList) {
return notificationsList.map(notification => this.getNotificationCard(notification));
}
initiateInfiniteScroll() {
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);
this.infiniteScroll?.on('request', _response => {
this.loading();
});
this.infiniteScroll?.on('load', rawResponse => {
this.loading(false);
const response = this.normalizeResponse(rawResponse);
this.pagination = response.pagination;
this.nextPage = response.pagination.links?.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);
});
this.infiniteScroll?.on('error', (e) => {
salla.logger.error('Error loading more comments:', e);
});
}
async loadInitialData() {
await salla.api.notifications.fetch({ "per_page": this.itemPerPage })
.then(rawResp => {
const resp = this.normalizeResponse(rawResp);
this.pagination = resp.pagination;
this.total = resp.pagination.total;
this.nextPage = resp.pagination.links?.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() {
this.infiniteScroll?.loadNextPage();
}
async componentWillLoad() {
await this.loadInitialData();
}
get host() { return getElement(this); }
};
SallaNotifications.style = sallaNotificationsCss;
export { SallaNotifications as salla_notifications };