@ppg_pl/pallete 0.0.1

package/dist/collection/components/my-modal/my-modal.js

@@ -0,0 +1,430 @@
+import { Component, Method, Element, Prop, Event, h, State, getAssetPath, Listen, Watch } from '@stencil/core';
+import { ApiService } from '../api';
+import { setDataLayer } from '../../gtmUtils';
+import { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery } from '../api/services';
+export class MyModal {
+  constructor() {
+    this.boxDesktopWidth = 130;
+    this.boxMobileWidth = 85;
+    this.desktopPadding = 75;
+    this.mobilePadding = 35;
+    this.mediumBreakpoint = 1024;
+    this.closeImage = 'close.png';
+    this.arrowDown = 'arrow_down.png';
+    this.chunksNum = 12;
+    this.data = null;
+    this.preloader = false;
+    this.loading = false;
+    this.colors = null;
+    this.currentColor = null;
+    this.currentIndex = null;
+    this.infoBoxWidth = null;
+    this.boxWidth = this.boxDesktopWidth; // box width with gap
+    this.padding = this.desktopPadding;
+    this.isMobile = false;
+    this.showRange = false;
+    this.colorCategories = null;
+    this.selectedCategory = null;
+    this.page = 1;
+    this.clearInterval = () => {
+      this.colorTimerInterval && clearInterval(this.colorTimerInterval);
+      this.colorTimerInterval = undefined;
+    };
+    this.colorTimer = () => {
+      if (this.currentColor && this.currentColor.id) {
+        this.colorTimerInterval = setInterval(() => {
+          var _a, _b;
+          ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.name) &&
+            setDataLayer({
+              event: 'ColorTimer',
+              shop: this.shop,
+              product: this.product,
+              color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.name,
+              timer: '10',
+            });
+        }, 10000);
+      }
+      else {
+        this.clearInterval();
+      }
+    };
+    this.chunks = (xs, y = []) => {
+      return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));
+    };
+    this.calculateBoxCount = () => {
+      var _a;
+      const modalWidth = this.modalEl.children && this.modalEl.children[0] && ((_a = this.modalEl.children[0]) === null || _a === void 0 ? void 0 : _a.clientWidth) - this.padding;
+      const boxWidth = this.boxWidth;
+      const calc = Math.floor(modalWidth / boxWidth);
+      const boxesCount = calc;
+      if (!this.preloader)
+        this.chunksNum = boxesCount;
+    };
+    this.displayForMobile = () => {
+      if (window.innerWidth < this.mediumBreakpoint) {
+        this.boxWidth = this.boxMobileWidth;
+        this.padding = this.mobilePadding;
+        this.isMobile = true;
+      }
+      else {
+        this.isMobile = false;
+        this.boxWidth = this.boxDesktopWidth;
+        this.padding = this.desktopPadding;
+      }
+    };
+    this.fetchProductData = async () => {
+      try {
+        const response = await ApiService.getData(`products?populate[0]=modalLogo&populate[1]=images&populate[2]=shops&populate[3]=categories&filters[name][$contains]=${this.product}`);
+        if (response) {
+          if (response.data[0].attributes.shops.data.find((shop) => shop.attributes.name === this.shop).id) {
+            this.data = Object.assign(Object.assign({}, response.data[0].attributes), { id: response.data[0].id });
+          }
+        }
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        this.preloader = false;
+      }
+    };
+    // TODO:
+    this.fetchProductColors = async (id, page) => {
+      this.loading = true;
+      try {
+        const response = await ApiService.getData(`colors?${fetchProductColorsQuery(id, page)}`);
+        if (response) {
+          this.colors = {
+            list: response &&
+              response.data &&
+              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
+            pagination: response.meta.pagination,
+          };
+        }
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        this.loading = false;
+      }
+    };
+    this.fetchCategoryColors = async (color) => {
+      this.loading = true;
+      try {
+        const response = await ApiService.getData(`colors?${fetchCategoryColorsQuery(color)}`);
+        if (response) {
+          this.colors = {
+            list: response &&
+              response.data &&
+              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
+            pagination: response.meta.pagination,
+          };
+        }
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        this.loading = false;
+      }
+    };
+    // private onIntersection = async (entries: any) => {
+    //   console.log(entries[0]);
+    //   if (entries[0].intersectionRatio === 0) {
+    //     console.log('d');
+    //   }
+    // };
+    // private handleObserve = () => {
+    //   console.log(this.modalEl.shadowRoot);
+    //   const boxesList: any = (this.modalEl as any).querySelector('.my-modal__wrapper');
+    //   console.log(boxesList);
+    //   if (boxesList) {
+    //     this.observer = new IntersectionObserver(this.onIntersection);
+    //     this.observer.observe(boxesList);
+    //   }
+    // };
+    this.onPage = (page) => {
+      this.data && this.fetchProductColors(String(this.data.id), page);
+      this.page = page;
+      this.currentColor = null;
+      this.currentIndex = null;
+    };
+    this.handleCategoryClick = (color) => {
+      if (this.selectedCategory && color && this.selectedCategory.id === color.id && !this.showRange) {
+        this.data && this.fetchProductColors(String(this.data.id));
+        this.selectedCategory = null;
+      }
+      else {
+        color && this.fetchCategoryColors(color);
+        this.selectedCategory = color;
+      }
+      this.currentColor = null;
+    };
+  }
+  setInfoBoxWidth(newValue) {
+    this.infoBoxWidth = newValue * this.boxWidth;
+  }
+  watchPropHandler(newValue) {
+    if (newValue.categories.data.length > 0) {
+      this.showRange = true;
+      this.handleCategoryClick(newValue.categories.data[0]);
+    }
+    else {
+      this.fetchProductColors(String(newValue.id));
+    }
+  }
+  async open() {
+    this.modalEl.style.display = 'block';
+  }
+  closeModalHandler() {
+    this.close.emit();
+  }
+  closeInfoBoxHandler() {
+    this.currentColor = null;
+    this.currentIndex = null;
+  }
+  handleResize() {
+    this.calculateBoxCount();
+    this.displayForMobile();
+  }
+  async searchColorsHandler(event) {
+    var _a;
+    // if search is empty set to first category to not showing whole product colors
+    if (event.detail === '') {
+      this.handleCategoryClick((_a = this.data) === null || _a === void 0 ? void 0 : _a.categories.data[0]);
+    }
+    try {
+      if (this.data && this.data.id && event.detail !== '') {
+        this.selectedCategory = null;
+        const response = await ApiService.getData(`colors?${fetchColorByNumber(Number(this.data.id), event.detail)}`);
+        if (response) {
+          this.colors = {
+            list: response &&
+              response.data &&
+              response.data.map((item) => (Object.assign({ id: item.id }, item.attributes))),
+            pagination: response.meta.pagination,
+          };
+        }
+      }
+    }
+    catch (error) {
+      console.error(error);
+    }
+  }
+  componentWillLoad() {
+    this.preloader = true;
+    this.fetchProductData();
+  }
+  componentWillRender() {
+    this.displayForMobile();
+    this.calculateBoxCount();
+    this.colorTimer();
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (h("div", { class: `my-modal` },
+      this.preloader && (h("div", { class: 'loader' },
+        h("my-loader", null))),
+      !this.preloader && (h("button", { class: "my-modal__close", onClick: () => this.closeModalHandler() },
+        h("img", { src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }))),
+      !this.preloader && this.data && this.data.modalLogo && h("img", { src: `${(_d = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.modalLogo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.url}`, alt: "modal-logo" }),
+      !this.preloader && (h("p", { class: "my-modal__see-more" }, (_e = this.data) === null || _e === void 0 ? void 0 : _e.modalDescription)),
+      this.showRange && (h("div", { class: 'categories' },
+        this.data && h("my-search", { productId: Number((_f = this.data) === null || _f === void 0 ? void 0 : _f.id), isMobile: this.isMobile }),
+        h("div", { class: 'categories__container', style: { maxWidth: `${this.infoBoxWidth}px` } }, (_g = this.data) === null || _g === void 0 ? void 0 : _g.categories.data.map((c) => {
+          var _a;
+          return (h("my-colorbox", { key: c.id, onClick: () => this.handleCategoryClick(c), color: c.attributes.hex, name: c.attributes.name, shop: this.shop, product: this.product, isCategoryActive: ((_a = this.selectedCategory) === null || _a === void 0 ? void 0 : _a.id) === c.id }));
+        })),
+        this.isMobile && (h("div", { class: 'categories__slide-information', style: { width: `${this.infoBoxWidth}px` } },
+          h("span", null, "Przewi\u0144 w lewo"),
+          h("span", null, "Przewi\u0144 w prawo"))))),
+      h("div", { class: 'my-modal__wrapper' },
+        this.loading && h("my-loader", null),
+        !this.loading && this.colors && (h("div", { class: 'container_boxes' },
+          this.colors.list.length > 0 ? (this.chunks(this.colors.list).map((color, index) => {
+            var _a;
+            return (h("div", { key: index, class: "boxes" },
+              h("div", { class: "boxes__list" }, color.map((c) => {
+                var _a;
+                return (h("my-colorbox", { key: c.id, onClick: () => {
+                    var _a, _b, _c;
+                    return [
+                      ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) ? (((_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.id) === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),
+                      (this.currentIndex = index),
+                      setDataLayer({
+                        event: 'ColorClick',
+                        shop: this.shop,
+                        product: this.product,
+                        color: c.name,
+                      }),
+                      ((_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.id) && this.clearInterval(),
+                    ];
+                  }, color: c.hex, name: c.name, isActive: ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) === c.id, shop: this.shop, product: this.product }));
+              })),
+              ((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) && index === this.currentIndex && (h("my-colorinfo", { currentColor: this.currentColor, shop: this.shop, product: this.product, data: this.data, isMobile: this.isMobile, infoBoxWidth: this.infoBoxWidth }))));
+          })) : (h("p", null, "Brak wynik\u00F3w")),
+          this.colors.pagination.pageCount > 1 && (h("div", { class: 'pagination' }, Array.from({ length: this.colors.pagination.pageCount }).map((page, i) => (h("span", { class: i + 1 === this.page ? 'current' : '', onClick: e => {
+              e.preventDefault();
+              this.onPage(i + 1);
+            }, key: `#${i + 1 + page}` }, i + 1))))))))));
+  }
+  static get is() { return "my-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["my-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["my-modal.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "shop": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "shop",
+      "reflect": false
+    },
+    "product": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product",
+      "reflect": false
+    },
+    "closeImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "close-image",
+      "reflect": false,
+      "defaultValue": "'close.png'"
+    },
+    "arrowDown": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "arrow-down",
+      "reflect": false,
+      "defaultValue": "'arrow_down.png'"
+    }
+  }; }
+  static get states() { return {
+    "chunksNum": {},
+    "data": {},
+    "preloader": {},
+    "loading": {},
+    "colors": {},
+    "currentColor": {},
+    "currentIndex": {},
+    "infoBoxWidth": {},
+    "boxWidth": {},
+    "padding": {},
+    "isMobile": {},
+    "showRange": {},
+    "colorCategories": {},
+    "selectedCategory": {},
+    "page": {}
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "modalEl"; }
+  static get watchers() { return [{
+      "propName": "chunksNum",
+      "methodName": "setInfoBoxWidth"
+    }, {
+      "propName": "data",
+      "methodName": "watchPropHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "closeInfoBox",
+      "method": "closeInfoBoxHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "searchColors",
+      "method": "searchColorsHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/my-search/assets/search.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>search (1)</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="E_TT-Copy" transform="translate(-670.000000, -275.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="Group-11" transform="translate(240.477268, 115.000000)">
+                <g id="Group-18" transform="translate(38.010142, 143.000000)">
+                    <g id="search-(1)" transform="translate(392.266523, 17.349138)">
+                        <path d="M8.04938507,16.0918365 C9.8370154,16.0918798 11.5735099,15.4954541 12.9838185,14.3969873 L18.3044575,19.7176263 C18.7019302,20.1014916 19.3352777,20.0904844 19.719143,19.6930117 C20.0936046,19.3052895 20.0936046,18.6906196 19.719143,18.3029407 L14.3985041,12.9823018 C17.12426,9.47351771 16.4895258,4.41943508 12.9807417,1.69367909 C9.47195764,-1.03207689 4.41791834,-0.397342671 1.69216235,3.11144142 C-1.03359363,6.62022552 -0.398859411,11.6743081 3.10992468,14.4000641 C4.5225301,15.4974475 6.26058468,16.0927465 8.04938507,16.0918365 Z M3.77430035,3.77274027 C6.13538859,1.4116087 9.96346822,1.41156536 12.3245998,3.7726536 C14.6857314,6.13374184 14.6857747,9.96182148 12.3246865,12.3229531 C9.96359823,14.6840846 6.1355186,14.684128 3.77438702,12.3230397 C3.77434368,12.3229964 3.77434368,12.3229964 3.77430035,12.3229531 C1.41321211,9.97906898 1.39930143,6.16494336 3.7431855,3.80385512 C3.75354267,3.79345461 3.76389984,3.78309744 3.77430035,3.77274027 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/collection/components/my-search/my-search.css

@@ -0,0 +1,43 @@
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.5rem;
+}
+
+* {
+  font-family: "Galatea", sans-serif;
+}
+
+.search {
+  position: relative;
+  width: 400px;
+}
+@media (max-width: 768px) {
+  .search {
+    width: 100%;
+  }
+}
+.search input {
+  margin-bottom: 12px;
+  font-size: 1.6rem;
+  padding: 19px;
+  border-radius: 27.35px;
+  border: 1px solid #dfdfdf;
+  width: 100%;
+}
+.search button {
+  position: absolute;
+  border: none;
+  background-color: transparent;
+  right: -20px;
+  top: 0;
+  width: 50px;
+  height: calc(100% - 12px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}

package/dist/collection/components/my-search/my-search.js

@@ -0,0 +1,112 @@
+import { Component, Prop, h, State, getAssetPath, Event, Watch } from '@stencil/core';
+export class MySearch {
+  constructor() {
+    this.searchIcon = 'search.svg';
+    this.searchText = null;
+    this.fetchColorsByName = (text) => {
+      this.searchColors.emit(text);
+    };
+  }
+  onInputChangeValue(event) {
+    const value = event.target.value;
+    this.searchColors.emit(value);
+    this.searchText = value;
+  }
+  fetchColorsByNameHandle(newValue) {
+    this.fetchColorsByName(newValue);
+  }
+  render() {
+    return (h("div", { class: 'search' },
+      h("input", { placeholder: this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze', value: this.searchText || '', type: "text", onInput: this.onInputChangeValue.bind(this) }),
+      h("button", { onClick: () => {
+          this.searchText && this.fetchColorsByName(this.searchText);
+          this.searchText = '';
+        } },
+        h("img", { src: getAssetPath(`./assets/${this.searchIcon}`), alt: "arrow_down" }))));
+  }
+  static get is() { return "my-search"; }
+  static get originalStyleUrls() { return {
+    "$": ["my-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["my-search.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "productId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false
+    },
+    "isMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-mobile",
+      "reflect": false
+    },
+    "searchIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-icon",
+      "reflect": false,
+      "defaultValue": "'search.svg'"
+    }
+  }; }
+  static get states() { return {
+    "searchText": {}
+  }; }
+  static get events() { return [{
+      "method": "searchColors",
+      "name": "searchColors",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "searchText",
+      "methodName": "fetchColorsByNameHandle"
+    }]; }
+}