@salla.sa/twilight-components
Version:
Salla Web Component
48 lines (47 loc) • 2.81 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { Host, h } from "@stencil/core";
import Cancel from "../../assets/svg/cancel.svg";
export class SallaMaintenanceAlert {
componentWillLoad() {
this.title = salla.config.get('maintenance_details.title');
this.message = salla.config.get('maintenance_details.message');
// Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed)
const isMobile = typeof window !== 'undefined' && !window.matchMedia('(min-width: 768px)').matches;
this.buttonTitle = isMobile ? salla.config.get('maintenance_details.button_title') : salla.config.get('maintenance_details.button_full_title');
}
closeAlert() {
salla.storage.set('hide_salla-maintenance-alert_at', Date.now());
this.host.style.display = 'none';
}
render() {
return (h(Host, { key: 'e1a1d166cb1be3f24820517a902d0a0559634a80', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'c59d166fca18b0da876bd6c8b24af2bd2db18aba', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: '1706aa47265a29485b48ad7be1cebc98b8e735ec', class: "s-maintenance-alert-content" }, h("div", { key: '0ba2feded17c0dfd1a129f11cf7f393a1737055b', class: "s-maintenance-alert-container" }, h("div", { key: '509a81ace0c168f42e5391b5d4b1e04337b2c6fb', class: "s-maintenance-alert-icon" }, h("img", { key: '97598847825b9d4c1c8d06e0001c7d669c0dac4b', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '9bb8eac957668568262b9c59fd20bcff5240566f', class: "s-maintenance-alert-text" }, h("h2", { key: 'ac424443f1c28002a1e00305f240741c7b6bed4f' }, this.title), h("p", { key: '7d0dd3556640386b01877369a840ce1bedf5c647' }, this.message))), h("div", { key: 'fdbc31b011bc8c067046a57721344cd57554f5d8' }, h("a", { key: '6efb57a978e9fe03474451c464e85626974e476a', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
}
componentDidLoad() {
//auto-hide the alert if close button is clicked before one hour
let hidden_at = salla.storage.get('hide_salla-maintenance-alert_at');
if (hidden_at && ((Date.now() - hidden_at) / 1000 / 60) < 60) {
this.closeAlert();
}
}
static get is() { return "salla-maintenance-alert"; }
static get originalStyleUrls() {
return {
"$": ["salla-maintenance-alert.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-maintenance-alert.css"]
};
}
static get states() {
return {
"title": {},
"message": {},
"buttonTitle": {}
};
}
static get elementRef() { return "host"; }
}