@salla.sa/twilight-components
Version:
Salla Web Component
85 lines (80 loc) • 3.8 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).
*
* @param {number} screen the width of the biggest screen to be checked
* @returns {boolean} true if it is mobile or tablet else false
*/
isMobileOrTabletDevice(screen = 1024) {
const screenWidth = window.innerWidth <= screen;
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 });
}
render() {
return this.data ? (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", 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;
} });
}
const SallaAppInstallAlert = SallaAppInstallAlert$1;
const defineCustomElement = defineCustomElement$1;
export { SallaAppInstallAlert, defineCustomElement };
//# sourceMappingURL=salla-app-install-alert.js.map
//# sourceMappingURL=salla-app-install-alert.js.map