@salla.sa/twilight-components
Version:
Salla Web Component
159 lines (154 loc) • 6.9 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { a as anime } from './anime.es.js';
const sallaAdvertisementCss = ":host{display:block}";
const SallaAdvertisement$1 = /*@__PURE__*/ proxyCustomElement(class SallaAdvertisement extends HTMLElement {
/**
* Constructor for initializing the component.
*/
constructor() {
super();
this.__registerHost();
this.currentSlug = salla.config.get("page.slug");
salla.onReady(() => {
this.currentSlug = salla.config.get("page.slug");
});
this.advSlot = this.host.querySelector('[slot="adv"]')?.innerHTML || `<div class="s-advertisement-content"><span class="s-advertisement-content-main">{iconElem}{urlElem}</span>{closeElem}</div>
`;
}
/**
* Checks whether an advertisement is marked as not visible/dismissed.
* @param advert - The advertisement to check.
* @returns True if the advertisement is not visible, false otherwise.
*/
isNotVisible(advert) {
const isPreview = salla.config.isDebug() || salla.helpers.isPreview();
// ? Show advertisement in preview mode
if (isPreview)
return false;
return !!salla.storage.get(`statusAd-${advert.id}`);
}
/**
* Sets a flag to control the visibility of an advertisement and triggers an animation when hiding it.
* @param advert - The advertisement to update.
* @param flag - The flag indicating whether to display or hide the advertisement.
*/
setCanDisplayFlag(advert, flag) {
if (!flag) {
// Set the statusAd flag to 'dismissed'
salla.storage.set(`statusAd-${advert.id}`, 'dismissed');
// Trigger an animation to hide the advertisement
anime({
targets: this.host,
opacity: [1, 0],
duration: 300,
height: [this.host.clientHeight, 0],
easing: 'easeInOutQuad',
});
}
}
/**
* Renders the advertisements based on the fetched data and visibility status.
* @returns JSX for rendering advertisements.
*/
render() {
if ((Array.isArray(this.advertisements) && !this.advertisements.length) || !this.advertisements) {
return;
}
return this.advertisements.map((advertisement) => {
return h("div", { class: { "s-hidden": this.isNotVisible(advertisement), 's-advertisement': true }, "data-id": advertisement.id, style: { "background-color": advertisement.colors.bg, "color": advertisement.colors.text } }, h("div", { id: "adv-slot", innerHTML: this.advSlot
// Replace the props with the advertisement data
// !Note: The props with the 'Elem' suffix are for internal use only.
.replace("{iconElem}", `<i class="s-advertisement-content-icon ${advertisement.icon}"></i>`)
.replace("{urlElem}", advertisement.url ? `<a href="${advertisement.url}" target="${advertisement.target}">${advertisement.description}</a>` : advertisement.description)
.replace("{closeElem}", `<button class="s-advertisement-action" aria-label="close-alert"><i class="sicon-cancel"></i></button>`)
.replace('{icon}', advertisement.icon)
.replace('{url}', advertisement.url)
.replace('{target}', advertisement.target)
.replace('{description}', advertisement.description)
.replace('{bg_color}', advertisement.colors.bg)
.replace('{text_color}', advertisement.colors.text) }));
});
}
/**
* Lifecycle method that fetches advertisements before the component is loaded.
*/
componentWillLoad() {
const getData = async () => {
// * Note: Do not show advertisements or load data in mobile app
const isMobileApp = salla.config.isMobileApp();
if (isMobileApp)
return [];
const isPreview = salla.config.isDebug() || salla.helpers.isPreview();
// Wait for salla to be ready
await new Promise(resolve => salla.onReady(resolve));
// Fetch advertisements based on the current page
const pageSlug = !isPreview ? this.currentSlug : null;
const response = await salla.api.advertisement.fetch(pageSlug);
if (Array.isArray(response.data)) {
const advertisements = response.data;
// Show all active advertisements in preview mode
if (isPreview) {
this.advertisements = advertisements;
}
else {
this.advertisements = advertisements.filter(ad => !salla.storage.get(`statusAd-${ad.id}`));
}
}
else {
this.advertisements = [];
}
return this.advertisements;
};
return getData();
}
componentDidRender() {
if ((Array.isArray(this.advertisements) && !this.advertisements.length) || !this.advertisements) {
return;
}
// Add event listener for the close button
setTimeout(() => {
let closeBtn = this.host.querySelector('.s-advertisement-action');
if (closeBtn) {
closeBtn.addEventListener('click', () => this.setCanDisplayFlag(this.advertisements[0], false));
}
});
// Reduce Dom size by removing the slot element
this.host.querySelectorAll('#adv-slot').forEach(el => el?.replaceWith(el?.firstChild));
this.host.querySelector('[slot="adv"]')?.remove();
// Trigger an animation to show the advertisement
anime({
targets: this.host,
opacity: [0, 1],
duration: 300,
height: [0, this.host.clientHeight],
easing: 'easeInOutQuad',
});
}
get host() { return this; }
static get style() { return sallaAdvertisementCss; }
}, [0, "salla-advertisement", {
"position": [32],
"advertisements": [32],
"advertIcon": [32],
"currentSlug": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-advertisement"];
components.forEach(tagName => { switch (tagName) {
case "salla-advertisement":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaAdvertisement$1);
}
break;
} });
}
defineCustomElement$1();
const SallaAdvertisement = SallaAdvertisement$1;
const defineCustomElement = defineCustomElement$1;
export { SallaAdvertisement, defineCustomElement };