@salla.sa/twilight-components
Version:
Salla Web Component
80 lines (75 loc) • 3.65 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-B99uI20k.js');
const sallaCookiesBarCss = ":host{display:block;overflow:visible}.s-cookies-bar{box-shadow:0 0 20px 4px rgba(0, 0, 0, 0.15)}";
const SallaCookiesBar = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* Whether the cookies bar is visible.
*/
this.isVisible = true;
/**
* Whether the viewport is mobile width (updates on resize).
*/
this.isMobile = false;
this.mobileBreakpoint = 768;
this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
}
async componentWillLoad() {
await Salla.onReady();
await Salla.lang.onLoaded();
this.loadTranslations();
if (Salla.storage.get('cookies-consent')) {
this.isVisible = false;
}
}
loadTranslations() {
this.messageLabel = Salla.lang.get('common.cookies.message');
this.linkLabel = Salla.lang.get('common.cookies.link');
this.acceptLabel = Salla.lang.get('common.cookies.accept');
this.rejectLabel = Salla.lang.get('common.cookies.reject');
}
componentDidLoad() {
this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
this.isMobile = this.mobileQuery.matches;
this.mobileQuery.addEventListener('change', this.mobileQueryHandler);
}
disconnectedCallback() {
this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
}
/**
* Accept cookies consent.
*/
async accept() {
this.isVisible = false;
//We will call event first because we need to compare between old and new data inside session
Salla.event.emit('salla-cookies-bar::accepted');
Salla.storage.set('cookies-consent', 'accepted');
return this.host;
}
/**
* Reject cookies consent.
*/
async reject() {
this.isVisible = false;
//We will call event first because we need to compare between old and new data inside session
Salla.event.emit('salla-cookies-bar::rejected');
Salla.storage.set('cookies-consent', 'rejected');
return this.host;
}
isRtl() {
return Salla.config.get('theme.is_rtl', true);
}
render() {
if (!this.isVisible) {
return index.h(index.Host, null);
}
return (index.h(index.Host, null, index.h("div", { dir: this.isRtl() ? 'rtl' : 'ltr', class: "s-cookies-bar fixed bottom-0 inset-x-0 z-50 bg-white p-4" }, index.h("div", { class: "s-cookies-bar-content flex flex-col justify-center gap-6 max-w-screen-xl mx-auto px-4" }, index.h("p", { class: "s-cookies-bar-message text-sm font-medium leading-relaxed text-gray-500 m-0" }, this.messageLabel, Salla.config.get('policy_url') && (index.h("a", { href: Salla.config.get('policy_url'), target: "_blank", class: "s-cookies-bar-link text-primary ms-1" }, this.linkLabel))), index.h("div", { class: "s-cookies-bar-actions flex flex-row gap-2 shrink-0" }, index.h("salla-button", { class: "s-cookies-bar-btn--accept", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptLabel), index.h("salla-button", { class: "s-cookies-bar-btn--reject", fill: "outline", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.reject() }, this.rejectLabel))))));
}
get host() { return index.getElement(this); }
};
SallaCookiesBar.style = sallaCookiesBarCss;
exports.salla_cookies_bar = SallaCookiesBar;