@salla.sa/twilight-components
Version:
Salla Web Component
95 lines (90 loc) • 4.31 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sallaAppInstallAlertCss = ":host{display:block}";
const SallaAppInstallAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppInstallAlert extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.alertDelay = null;
this.data = salla.config.get('store.app_install_prompt');
this.open = false;
this.closing = false;
}
connectedCallback() {
salla.onReady(() => {
this.data = salla.config.get('store.app_install_prompt');
if (!this.isMobileOrTabletDevice())
return;
if (!this.data)
return salla.logger.error('Failed to retrieve salla-app-install-alert config');
this.ctaLink = salla.url.get('app');
this.alertDelay = setTimeout(() => (this.open = true), 3000);
});
}
disconnectedCallback() {
clearTimeout(this.alertDelay);
}
/**
* Check if the website opens from mobile or tablet devices only (android/ios).
* Uses matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed).
* Guards against SSR/non-browser contexts (window, navigator, document).
*
* @param {number} screen the width of the biggest screen to be checked (default 1024)
* @returns {boolean} true if it is mobile or tablet else false
*/
isMobileOrTabletDevice(screen = 1024) {
if (typeof window === 'undefined' || typeof navigator === 'undefined' || typeof document === 'undefined') {
return false;
}
const screenWidth = window.matchMedia(`(max-width: ${screen}px)`).matches;
const userAgentCheck = /Macintosh|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
const hasTouch = 'ontouchstart' in window ||
'ontouchend' in document ||
navigator.maxTouchPoints > 0;
return userAgentCheck && screenWidth && hasTouch;
}
closeAlert() {
salla.storage.set('app_install_prompt_disabled', true);
// handle closing animation first, then close the banner
this.closing = true;
this.host.addEventListener('animationend', () => {
this.closing = false;
this.open = false;
}, { once: true });
}
shouldShowAlert() {
const isMobileApp = salla.config.isMobileApp();
if (isMobileApp)
return false;
return true;
}
render() {
return this.data && this.shouldShowAlert() ? (h(Host, { class: `s-app-install-alert-wrapper ${this.open ? 'open' : ''} ${this.closing ? 'closing' : ''}`, position: this.data.position }, h("div", null, h("img", { src: this.data.icon, width: "58", height: "58", alt: `${salla.config.get('store.name')}` })), h("div", { class: "s-app-install-alert-content" }, h("h2", { class: "s-app-install-alert-title" }, this.data.title), h("p", { class: "s-app-install-alert-sub-title" }, this.data.sub_title, " ", " ", h("a", { href: this.ctaLink, target: "_blank", "aria-label": "download app", class: "s-app-install-alert-cta" }, salla.lang.getWithDefault('blocks.footer.download_app_now', 'حمله الآن')))), h("button", { class: "s-app-install-alert-cancel-button", "aria-label": "close alert", onClick: () => this.closeAlert() }, h("i", { class: "sicon-cancel" })))) : null;
}
get host() { return this; }
static get style() { return sallaAppInstallAlertCss; }
}, [0, "salla-app-install-alert", {
"data": [32],
"ctaLink": [32],
"open": [32],
"closing": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-app-install-alert"];
components.forEach(tagName => { switch (tagName) {
case "salla-app-install-alert":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaAppInstallAlert$1);
}
break;
} });
}
defineCustomElement$1();
const SallaAppInstallAlert = SallaAppInstallAlert$1;
const defineCustomElement = defineCustomElement$1;
export { SallaAppInstallAlert, defineCustomElement };