@salla.sa/twilight-components
Version:
Salla Web Component
215 lines (211 loc) • 9.73 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './salla-button2.js';
const sallaCountDownCss = "";
const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* The size of the count down
* */
this.size = 'md';
/**
* The color of the count down
* */
this.color = 'dark';
/**
* The digits lang to show in the count down
* */
this.digits = 'auto';
this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
this.offerEnded = false;
this.days = this.number(0);
this.hours = this.number(0);
this.minutes = this.number(0);
this.seconds = this.number(0);
salla.lang.onLoaded(() => {
this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
});
if (this.date && this.isValidDate(this.date)) {
this.startCountDown();
}
}
/**
* End the count down
* */
async endCountDown() {
clearInterval(this.countInterval);
this.offerEnded = true;
this.days = this.number(0);
this.hours = this.number(0);
this.minutes = this.number(0);
this.seconds = this.number(0);
}
componentWillLoad() {
if (typeof this.preOrder === 'string') {
try {
this.normalizedPreOrder = JSON.parse(this.preOrder);
}
catch {
this.normalizedPreOrder = undefined;
}
}
else {
this.normalizedPreOrder = this.preOrder;
}
if (this.normalizedPreOrder?.end_date) {
this.date = this.normalizedPreOrder.end_date;
if (this.date && this.isValidDate(this.date)) {
this.startCountDown();
}
}
}
isValidDate(date) {
let dateHasDashes = date.includes('-'), dateParts = date.split(' '), testedDate;
if (dateHasDashes) {
testedDate = dateParts[0].replace(/-/g, '/');
}
else {
testedDate = dateParts[0];
}
return !isNaN(Date.parse(testedDate));
}
number(digit) {
return salla.helpers.number(digit, this.digits === 'en');
}
startCountDown() {
let countDownDate = new Date(this.date.replace(/-/g, '/'));
if (this.endOfDay || this.date.split(' ').length === 1) {
countDownDate.setHours(23, 59, 59, 999);
}
let countDownTime = countDownDate.getTime();
this.countInterval = setInterval(() => {
let now = new Date().getTime();
let distance = countDownTime - now;
this.days = this.number(Math.floor(distance / (1000 * 60 * 60 * 24)));
this.hours = this.number(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
this.minutes = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
this.seconds = this.number(Math.floor((distance % (1000 * 60)) / 1000));
if (distance < 0) {
this.endCountDown();
}
}, 1000);
}
renderCountDown() {
return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}` }, h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel))));
}
renderInvalidDate() {
return h("div", { class: "s-count-down-text-center" }, this.invalidDate);
}
renderOfferEnded() {
return h("div", { class: "s-count-down-end-text" }, !!this.endText ? this.endText : this.endLabel);
}
renderPreOrderToBeAvailableOn() {
if (!this.normalizedPreOrder?.availability_date ||
!this.isValidDate(this.normalizedPreOrder?.availability_date))
return null;
return (h("div", { class: "s-count-down-info-message" }, h("i", { class: "sicon-info" }), h("span", null, salla.lang.getWithDefault('pages.products.expected_to_be', 'متوقَّع توفُّره بتاريخ:')), h("span", null, new Date(this.normalizedPreOrder?.availability_date).toLocaleDateString(salla.lang.locale, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
}))));
}
renderPreOrderCountDown() {
if (!this.normalizedPreOrder?.activate_countdown)
return null;
return (h("div", { class: "s-count-down-pre-order-container" }, h("p", { class: "text-sm " }, salla.lang.getWithDefault('pages.products.pre_order_ends_in', 'ينتهي الطلب المسبق خلال:')), this.renderCountDown()));
}
renderPreOrder() {
return (h("div", null, typeof this.normalizedPreOrder === 'object' &&
this.normalizedPreOrder?.availability_date &&
this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
}
renderPrefixText() {
if (!this.prefixText)
return null;
return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
}
renderButton() {
if (!this.withButton || !this.buttonText)
return null;
return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
}
renderContent() {
if (!this.date)
return null;
if (!this.isValidDate(this.date)) {
return this.renderInvalidDate();
}
if (this.preOrder) {
return this.renderPreOrder();
}
return this.renderCountDown();
}
render() {
return (h(Host, { key: 'de0e93d1c6bcf24dc3b07705786fb9c204bfa625', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
}
static get style() { return sallaCountDownCss; }
}, [0, "salla-count-down", {
"date": [1],
"preOrder": [1, "pre-order"],
"horizontal": [4],
"withButton": [4, "with-button"],
"prefixText": [1, "prefix-text"],
"buttonHref": [1, "button-href"],
"buttonText": [1, "button-text"],
"buttonIcon": [1, "button-icon"],
"boxed": [4],
"size": [1],
"color": [1],
"labeled": [4],
"endText": [1, "end-text"],
"digits": [1],
"endOfDay": [4, "end-of-day"],
"daysLabel": [32],
"hoursLabel": [32],
"minutesLabel": [32],
"secondsLabel": [32],
"endLabel": [32],
"invalidDate": [32],
"offerEnded": [32],
"countInterval": [32],
"days": [32],
"hours": [32],
"minutes": [32],
"seconds": [32],
"endCountDown": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-count-down", "salla-button"];
components.forEach(tagName => { switch (tagName) {
case "salla-count-down":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaCountDown);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { SallaCountDown as S, defineCustomElement as d };