@salla.sa/twilight-components
Version:
Salla Web Component
74 lines (69 loc) • 3.6 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-uoA36zqH.js');
const sallaAppInstallAlertCss = ":host{display:block}";
const SallaAppInstallAlert = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
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() ? (index.h(index.Host, { class: `s-app-install-alert-wrapper ${this.open ? 'open' : ''} ${this.closing ? 'closing' : ''}`, position: this.data.position }, index.h("div", null, index.h("img", { src: this.data.icon, width: "58", height: "58", alt: `${salla.config.get('store.name')}` })), index.h("div", { class: "s-app-install-alert-content" }, index.h("h2", { class: "s-app-install-alert-title" }, this.data.title), index.h("p", { class: "s-app-install-alert-sub-title" }, this.data.sub_title, " ", " ", index.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', 'حمله الآن')))), index.h("button", { class: "s-app-install-alert-cancel-button", "aria-label": "close alert", onClick: () => this.closeAlert() }, index.h("i", { class: "sicon-cancel" })))) : null;
}
get host() { return index.getElement(this); }
};
SallaAppInstallAlert.style = sallaAppInstallAlertCss;
exports.salla_app_install_alert = SallaAppInstallAlert;