@salla.sa/twilight-components
Version:
Salla Web Component
41 lines (36 loc) • 4.89 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-uoA36zqH.js');
var cancel = require('./cancel-B5SbMYEk.js');
const sallaMaintenanceAlertCss = ".s-maintenance-alert-wrapper{display:flex;min-height:40px;width:100%;flex-direction:row;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(26, 38, 61, var(--tw-bg-opacity));padding:0.25rem 0.5rem;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.s-maintenance-alert-wrapper a{transition:0.35s cubic-bezier(0.2, 1, 0.3, 1)}.s-maintenance-alert-wrapper *{color:inherit}@media (min-width: 640px){.s-maintenance-alert-wrapper{padding-left:2rem;padding-right:2rem}}.s-maintenance-alert-content{margin-top:1rem;margin-bottom:1rem;display:flex;width:100%;align-items:center;justify-content:space-between}@media (min-width: 640px){.s-maintenance-alert-content{padding-left:2rem;padding-right:2rem}}.s-maintenance-alert-container{display:flex;align-items:center}.s-maintenance-alert-icon{margin-right:1.25rem;display:none}@media (min-width: 640px){.s-maintenance-alert-icon{display:block}}.s-maintenance-alert-text h2{margin-bottom:0.5rem;font-size:0.875rem;font-weight:700;line-height:1.4}@media (min-width: 640px){.s-maintenance-alert-text h2{font-size:1.5rem;line-height:2rem}}.s-maintenance-alert-text p{margin:0px;text-align:right;font-size:10px;line-height:1.2}@media (min-width: 640px){.s-maintenance-alert-text p{text-align:center;font-size:0.75rem;line-height:1}}.s-maintenance-alert-btn{position:relative;margin-left:4px;margin-right:4px;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;border-radius:0.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgba(93, 213, 196, var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(93, 213, 196, var(--tw-bg-opacity));padding:0.5rem;text-align:center;vertical-align:middle;font-size:0.875rem;font-weight:400;line-height:1.4;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.s-maintenance-alert-btn:hover{--tw-bg-opacity:1;background-color:rgba(53, 203, 181, var(--tw-bg-opacity))}.s-maintenance-alert-btn *{pointer-events:none}[dir=rtl] .s-maintenance-alert-btn{margin-left:1.25rem;margin-right:0}@media (min-width: 640px){.s-maintenance-alert-btn{padding:0.5rem 1rem}}";
const SallaMaintenanceAlert = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
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 (index.h(index.Host, { key: 'e1a1d166cb1be3f24820517a902d0a0559634a80', class: "s-maintenance-alert-wrapper" }, index.h("button", { key: 'c59d166fca18b0da876bd6c8b24af2bd2db18aba', class: "s-maintenance-alert-close", innerHTML: cancel.SICancel, onClick: () => this.closeAlert() }), index.h("div", { key: '1706aa47265a29485b48ad7be1cebc98b8e735ec', class: "s-maintenance-alert-content" }, index.h("div", { key: '0ba2feded17c0dfd1a129f11cf7f393a1737055b', class: "s-maintenance-alert-container" }, index.h("div", { key: '509a81ace0c168f42e5391b5d4b1e04337b2c6fb', class: "s-maintenance-alert-icon" }, index.h("img", { key: '97598847825b9d4c1c8d06e0001c7d669c0dac4b', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), index.h("div", { key: '9bb8eac957668568262b9c59fd20bcff5240566f', class: "s-maintenance-alert-text" }, index.h("h2", { key: 'ac424443f1c28002a1e00305f240741c7b6bed4f' }, this.title), index.h("p", { key: '7d0dd3556640386b01877369a840ce1bedf5c647' }, this.message))), index.h("div", { key: 'fdbc31b011bc8c067046a57721344cd57554f5d8' }, index.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();
}
}
get host() { return index.getElement(this); }
};
SallaMaintenanceAlert.style = sallaMaintenanceAlertCss;
exports.salla_maintenance_alert = SallaMaintenanceAlert;