@salla.sa/twilight-components
Version:
Salla Web Component
136 lines (131 loc) • 6.15 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();
var _a;
this.currentSlug = salla.config.get("page.slug");
salla.onReady(() => {
this.currentSlug = salla.config.get("page.slug");
});
this.advSlot = ((_a = this.host.querySelector('[slot="adv"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<div class="s-advertisement-content"><h2 class="s-advertisement-content-main">{iconElem}{urlElem}</h2>{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) {
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() {
// Fetch advertisements based on the current page
return (new Promise(resolve => salla.onReady(resolve)))
.then(() => salla.api.advertisement.fetch(this.currentSlug))
.then(resp => Array.isArray(resp.data) ? resp.data.find(ad => !salla.storage.get(`statusAd-${ad.id}`)) : null)
.then(ad => this.advertisements = ad ? [ad] : []);
}
componentDidRender() {
var _a;
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 === null || el === void 0 ? void 0 : el.replaceWith(el === null || el === void 0 ? void 0 : el.firstChild));
(_a = this.host.querySelector('[slot="adv"]')) === null || _a === void 0 ? void 0 : _a.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;
} });
}
const SallaAdvertisement = SallaAdvertisement$1;
const defineCustomElement = defineCustomElement$1;
export { SallaAdvertisement, defineCustomElement };
//# sourceMappingURL=salla-advertisement.js.map
//# sourceMappingURL=salla-advertisement.js.map