@salla.sa/twilight-components
Version:
Salla Web Component
47 lines (46 loc) • 2.67 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');
this.buttonTitle = window.innerWidth <= 768 ? 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: 'b41ad8b612a5952981f8d5f6ddd8f94697e678ed', class: "s-maintenance-alert-wrapper" }, h("button", { key: '7890155e0352d47c577ef9bd0dd709bfcf6f0100', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: '6aa8179d4296becd163e476132ccffbc713a9a63', class: "s-maintenance-alert-content" }, h("div", { key: 'a2deaab6f3550dfec30c4da595526205a3776f2b', class: "s-maintenance-alert-container" }, h("div", { key: '3a8f8532497a15981775d1106adfbf75aabb8424', class: "s-maintenance-alert-icon" }, h("img", { key: 'a272a87f79630263ba69d9876d6ecca929ff1b31', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '9a0e9e3e457c2f69c9c27c61a6d4b8f11007380e', class: "s-maintenance-alert-text" }, h("h2", { key: '9f4664899615f3b98042bb3884c3fe28b30adf2c' }, this.title), h("p", { key: '0d76a9308e9b7ff366572eb302229cce09a85554' }, this.message))), h("div", { key: 'fba917446768fca9403e1137e79ea65f7f86df27' }, h("a", { key: 'fef16397d88e1f791620d5e0ace94af6eef0debd', 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"; }
}
//# sourceMappingURL=salla-maintenance-alert.js.map