@salla.sa/twilight-components
Version:
Salla Web Component
140 lines (135 loc) • 6.75 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { P as PendingOrdersIcon } from './cart.js';
import { a as anime } from './anime.es.js';
const sallaCartSummaryCss = "";
const SallaCartSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartSummary extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.cartSummaryCount = salla.storage.get('cart.summary.count') || 0;
this.cartSummaryTotal = salla.storage.get('cart.summary.total') || 0;
this.cartLabel = salla.config.get('user.language_code') === 'ar' ? 'السلة' : 'Cart';
salla.cart.event.onUpdated((response) => {
this.cartSummaryCount = response.count || 0;
this.cartSummaryTotal = response.total || 0;
});
}
/**
* Animate product Image to cart summary
* @param image the image element to animate
*/
async animateToCart(image) {
document.querySelectorAll('.s-cart-thumb').forEach(el => el.remove());
if (!image?.src) {
salla.log('Failed to get the img element');
return;
}
let cartBtn = this.host.querySelector('#s-cart-icon'), btnOffset = cartBtn.getBoundingClientRect(), btnTop = btnOffset.top + window.scrollY, btnLeft = btnOffset.left + window.scrollX;
// get thumb position ---
let position = image.getBoundingClientRect(), width = image.offsetWidth + 'px', height = image.offsetHeight + 'px', top = position.top, left = position.left;
// create thumb img element ---
let img = document.createElement("img");
img.src = image.getAttribute('src');
img.className = "s-cart-thumb";
img.setAttribute("style", "object-fit:cover; width:" + width + '; height:' + height + '; top:' + top + 'px; left:' + left + 'px;z-index:99999999; ');
document.body.append(img);
let cartThumb = document.querySelector('.s-cart-thumb');
cartBtn.classList.remove('animated', 'rubberBand');
// start timeline ---
let cartThumbAnime = new anime.timeline();
cartThumbAnime.add({
targets: cartThumb,
width: [150, 30],
height: [150, 30],
top: [top, window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40],
left: [left, btnLeft],
borderRadius: ['20%', '50%'],
easing: 'easeOutExpo',
duration: 1200,
}, '+=200')
.add({
targets: cartThumb,
width: [30, 0],
height: [30, 0],
opacity: [1, 0],
easing: 'easeOutExpo',
top: [window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40, window.scrollY > 0 ? btnTop - window.scrollY + 10 : btnTop + 10],
left: [btnLeft, btnLeft + 10],
}, '-=500')
.add({
complete: function () {
cartBtn.classList.add('animated', 'rubberBand');
cartThumb.remove();
},
}, '-=1700');
}
/**
* Some times it renderes with main domain, something like `https://salla.sa/cart`, because salla is not loaded,
* here, we are sure it will not be rendred unless salla is ready
*/
componentWillLoad() {
return new Promise(resolve => salla.onReady(resolve));
}
/**
* Compute cart href with scope + allocation parameters.
* Uses storage (not config) so allocation_type/allocation_id set by bullet-delivery are included.
*/
getCartLink() {
let cartUrl = salla.url.get('cart');
// Prefer storage over config: storage holds allocation_type/allocation_id, config only has type+id
const scope = salla.storage.get('scope') || salla.config.get('store.scope');
if (scope && scope.id) {
try {
const url = new URL(cartUrl);
url.searchParams.set('scope', scope.id);
if (scope.allocation_type)
url.searchParams.set('allocation_type', scope.allocation_type);
if (scope.allocation_id)
url.searchParams.set('allocation_id', scope.allocation_id);
return url.toString();
}
catch (e) {
const delimiter = cartUrl.includes('?') ? '&' : '?';
const params = new URLSearchParams();
params.set('scope', String(scope.id));
if (scope.allocation_type)
params.set('allocation_type', scope.allocation_type);
if (scope.allocation_id)
params.set('allocation_id', scope.allocation_id);
return `${cartUrl}${delimiter}${params.toString()}`;
}
}
return cartUrl;
}
render() {
return (h(Host, { key: '4ceefb3809e2e7c1d00bb47b3d9ed58fa0e48c7b' }, h("a", { key: '3e4f3ab42958fb12647e53cf0a7a95e780d5727f', class: "s-cart-summary-wrapper", href: this.getCartLink() }, h("div", { key: '496573ce91987c25b0cd5e16d5bb95be610f5db6', id: "s-cart-icon" }, h("slot", { key: '53c290cc7e7e5b9d911e1ba430038e0b7ef21dc5', name: "icon" }, h("i", { key: 'b9281b127f798e1738e9c59f4e0413e2852271a8', class: "s-cart-summary-icon", innerHTML: PendingOrdersIcon }))), h("span", { key: 'aa7b03b0f1ca2155034b15420e8c5fac7e440ae1', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '4e8111bba613de3aaefc9a22fbbd6a57e5b9ca6f', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '86a8b09624647bcd715aefaf0afae43b0b8f991e', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: '426d8bf03af7a8f96793bda0ebe593b1b1eebf63', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
}
get host() { return this; }
static get style() { return sallaCartSummaryCss; }
}, [4, "salla-cart-summary", {
"showCartLabel": [4, "show-cart-label"],
"cartSummaryCount": [32],
"cartSummaryTotal": [32],
"cartLabel": [32],
"animateToCart": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-cart-summary"];
components.forEach(tagName => { switch (tagName) {
case "salla-cart-summary":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaCartSummary$1);
}
break;
} });
}
defineCustomElement$1();
const SallaCartSummary = SallaCartSummary$1;
const defineCustomElement = defineCustomElement$1;
export { SallaCartSummary, defineCustomElement };