@salla.sa/twilight-components
Version:
Salla Web Component
152 lines (151 loc) • 6.66 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { Host, h } from "@stencil/core";
import CartIcon from "../../assets/svg/cart.svg";
import anime from "animejs";
export class SallaCartSummary {
constructor() {
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 === null || image === void 0 ? void 0 : 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));
}
render() {
return (h(Host, { key: 'f536afae4840b08133a82698fab4b4df6d479e14' }, h("a", { key: '26185bdeec4028f6fe936e5a0970fec799761bdd', class: "s-cart-summary-wrapper", href: salla.url.get('cart') }, h("div", { key: '817fb77ac1feedd59d23b35a53648382aa3e300c', id: "s-cart-icon" }, h("slot", { key: '3d0601960d662d63988b44f1745d222c43f8ecd7', name: "icon" }, h("i", { key: '27da6c6fe8da8bd634fad5e39b9b62ec061694b1', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: 'e1a63ea518c783207d85a657778fb739bc1f386f', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '4133fd68ef50ff54609718274f3daa2f87511a3b', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: 'ec133e448903ec65c42cc7ec35984ca90bbb9a1c', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'c0e06bab8d8032e37e4059dfce54135f89a6a8d3', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
}
static get is() { return "salla-cart-summary"; }
static get originalStyleUrls() {
return {
"$": ["salla-cart-summary.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-cart-summary.css"]
};
}
static get properties() {
return {
"showCartLabel": {
"type": "boolean",
"attribute": "show-cart-label",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show cart label"
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"cartSummaryCount": {},
"cartSummaryTotal": {},
"cartLabel": {}
};
}
static get methods() {
return {
"animateToCart": {
"complexType": {
"signature": "(image: any) => Promise<void>",
"parameters": [{
"name": "image",
"type": "any",
"docs": "the image element to animate"
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLImageElement": {
"location": "global",
"id": "global::HTMLImageElement"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Animate product Image to cart summary",
"tags": [{
"name": "param",
"text": "image the image element to animate"
}]
}
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=salla-cart-summary.js.map