@salla.sa/twilight-components/dist/collection/components/salla-cart-summary/salla-cart-summary.js

Salla Web Component

/*!
 * 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';
    this.showCartLabel = undefined;
    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, null, h("a", { class: "s-cart-summary-wrapper", href: salla.url.get('cart') }, h("div", { id: "s-cart-icon" }, h("slot", { name: "icon" }, h("i", { class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { class: "s-cart-summary-content" }, this.showCartLabel && h("span", { class: "s-cart-summary-label" }, this.cartLabel), h("b", { 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",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Show cart label"
        },
        "attribute": "show-cart-label",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "cartSummaryCount": {},
      "cartSummaryTotal": {},
      "cartLabel": {}
    };
  }
  static get methods() {
    return {
      "animateToCart": {
        "complexType": {
          "signature": "(image: any) => Promise<void>",
          "parameters": [{
              "tags": [{
                  "name": "param",
                  "text": "image the image element to animate"
                }],
              "text": "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