@ppg_pl/tinting 0.0.0

package/dist/collection/components/modal/index.js

@@ -0,0 +1,646 @@
+import { h } from '@stencil/core';
+import { APIURL, accessToken } from '../api';
+import { setDataLayer } from '../../gtmUtils';
+import { fetchColors, fetchProductData, limit, updateFilters } from '../api/services';
+import { debounce } from '../../utils';
+import chroma from 'chroma-js';
+export class Modal {
+  constructor() {
+    this.boxDesktopWidth = 130;
+    this.boxMobileWidth = 70;
+    this.desktopPadding = 75;
+    this.mobilePadding = 35;
+    this.mediumBreakpoint = 1024;
+    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.handleSampleSelect = (selectedSample) => {
+      this.currentColor = null;
+      this.selectedCategory = selectedSample.value;
+      this.updateFilterAndFetch({ sampleId: selectedSample.value, colorFamily: '' });
+    };
+    this.shop = undefined;
+    this.product = undefined;
+    this.baselink = undefined;
+    this.selectedcolor = undefined;
+    this.arrowDown = 'arrow_down.png';
+    this.chunksNum = 12;
+    this.data = null;
+    this.preloader = false;
+    this.loading = false;
+    this.currentColor = null;
+    this.currentIndex = null;
+    this.infoBoxWidth = null;
+    this.boxWidth = this.boxDesktopWidth;
+    this.padding = this.desktopPadding;
+    this.isMobile = false;
+    this.showRange = false;
+    this.colorCategories = null;
+    this.selectedCategory = null;
+    this.page = 1;
+    this.colorIsSelected = false;
+    this.colorsList = [];
+    this.hasMore = true;
+    this.filters = {
+      type: 'product',
+      id: '',
+      productId: '',
+      page: 1,
+      colorNumber: '',
+      colorName: '',
+    };
+    this.debouncedSearchColorsHandler = debounce(this.searchColor.bind(this), 300);
+  }
+  setInfoBoxWidth(newValue) {
+    this.infoBoxWidth = newValue * this.boxWidth;
+  }
+  watchPropHandler(newValue) {
+    if (newValue) {
+      this.filters = updateFilters(this.filters, { id: newValue.id, type: 'product' });
+      this.fetchColorsData();
+    }
+  }
+  async open() {
+    this.modalEl.style.display = 'block';
+  }
+  closeModalHandler() {
+    this.close.emit();
+  }
+  handleReadyToClose(value) {
+    this.readyToCLose.emit({ observable: value });
+  }
+  closeInfoBoxHandler() {
+    this.currentColor = null;
+    this.currentIndex = null;
+  }
+  handleEmitColor(event) {
+    this.onSelectedColorEmit.emit(event.detail);
+  }
+  handleResize() {
+    this.calculateBoxCount();
+    this.displayForMobile();
+  }
+  sortColorsBySimilarity(colors) {
+    if (colors.length <= 1)
+      return colors;
+    const sortedColors = [];
+    const remainingColors = [...colors];
+    // Start with the first color
+    sortedColors.push(remainingColors.shift());
+    while (remainingColors.length > 0) {
+      // Find the most similar color to the last color in sortedColors
+      const lastColor = sortedColors[sortedColors.length - 1];
+      let mostSimilarIndex = 0;
+      let minDistance = Infinity;
+      remainingColors.forEach((color, index) => {
+        const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
+        if (distance < minDistance) {
+          minDistance = distance;
+          mostSimilarIndex = index;
+        }
+      });
+      // Move the most similar color to sortedColors
+      sortedColors.push(remainingColors.splice(mostSimilarIndex, 1)[0]);
+    }
+    return sortedColors;
+  }
+  getColorHueGroup(hex) {
+    const color = chroma(hex);
+    const hue = color.get('hsl.h');
+    const saturation = color.get('hsl.s');
+    const lightness = color.get('hsl.l');
+    // Handle grayscale colors
+    if (saturation < 0.1) {
+      if (lightness < 0.2)
+        return 'black';
+      if (lightness > 0.8)
+        return 'white';
+      return 'gray';
+    }
+    // Group colors by hue ranges
+    if (hue >= 330 || hue < 30)
+      return 'red';
+    if (hue >= 30 && hue < 90)
+      return 'yellow';
+    if (hue >= 90 && hue < 150)
+      return 'green';
+    if (hue >= 150 && hue < 210)
+      return 'cyan';
+    if (hue >= 210 && hue < 270)
+      return 'blue';
+    if (hue >= 270 && hue < 330)
+      return 'magenta';
+    return 'other';
+  }
+  sortColorsByHueAndSimilarity(colors) {
+    if (colors.length <= 1)
+      return colors;
+    // Group colors by their hue family
+    const colorGroups = {
+      red: [],
+      yellow: [],
+      green: [],
+      cyan: [],
+      blue: [],
+      magenta: [],
+      gray: [],
+      black: [],
+      white: [],
+      other: [],
+    };
+    // Sort colors into groups
+    colors.forEach(color => {
+      const group = this.getColorHueGroup(color.hex);
+      colorGroups[group].push(color);
+    });
+    // Sort each group by similarity
+    const sortedGroups = [];
+    const groupOrder = ['red', 'magenta', 'blue', 'cyan', 'green', 'yellow', 'gray', 'black', 'white', 'other'];
+    groupOrder.forEach(groupName => {
+      if (colorGroups[groupName].length > 0) {
+        sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
+      }
+    });
+    // Combine all sorted groups
+    return sortedGroups.flat();
+  }
+  async fetchColorsData({ reset = false } = {}) {
+    if (this.loading && !reset)
+      return;
+    this.loading = true;
+    try {
+      const colors = await fetchColors(this.filters);
+      if (reset) {
+        // For new searches, sort all colors by hue and similarity
+        this.colorsList = this.sortColorsByHueAndSimilarity(colors);
+      }
+      else {
+        // For pagination, combine and sort all colors
+        this.colorsList = this.sortColorsByHueAndSimilarity([...this.colorsList, ...colors]);
+      }
+      this.hasMore = colors.length >= limit;
+    }
+    catch (error) {
+      console.error('Error fetching colors:', error);
+    }
+    finally {
+      this.loading = false;
+    }
+  }
+  async loadProductData() {
+    this.preloader = true;
+    const product = await fetchProductData({ shopName: this.shop, productName: this.product });
+    if (product) {
+      this.data = product;
+      this.filters = updateFilters(this.filters, { type: 'product', id: product.id });
+      // Fetch initial colors
+      await this.fetchColorsData();
+    }
+    this.preloader = false;
+  }
+  async loadMoreColors() {
+    if (this.loading || !this.hasMore)
+      return; // Prevent spam loading
+    this.filters = Object.assign(Object.assign({}, this.filters), { page: this.filters.page + 1 }); // Increase page for lazy loading
+    await this.fetchColorsData({ reset: false }); // Append results
+  }
+  updateFilterAndFetch(newFilters) {
+    var _a;
+    if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.id))
+      return;
+    this.loading = true;
+    this.filters = updateFilters(this.filters, Object.assign(Object.assign({ id: this.data.id, sampleId: this.filters.sampleId, colorName: this.filters.colorName }, newFilters), { page: 1 }));
+    this.fetchColorsData({ reset: true }).finally(() => {
+      this.loading = false;
+    });
+  }
+  async searchColor(event) {
+    var _a;
+    const query = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.trim();
+    this.updateFilterAndFetch({ colorName: query });
+  }
+  handleColorFamilySelected(event) {
+    this.currentColor = null;
+    if (event.detail === this.filters.colorFamily) {
+      this.filters = updateFilters(this.filters, { colorFamily: '' });
+      this.updateFilterAndFetch({ colorFamily: '' });
+    }
+    else {
+      this.filters = updateFilters(this.filters, { colorFamily: event.detail });
+      this.updateFilterAndFetch({ colorFamily: event.detail });
+    }
+  }
+  searchColorsHandler(event) {
+    this.loading = true;
+    this.currentColor = null;
+    this.debouncedSearchColorsHandler(event);
+  }
+  handleScroll(_event, modalContent) {
+    if (this.loading || !this.hasMore)
+      return;
+    const scrollTop = modalContent.scrollTop;
+    const scrollHeight = modalContent.scrollHeight;
+    const clientHeight = modalContent.clientHeight;
+    // Check if user scrolled to the bottom of the modal
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+      this.loadMoreColors();
+    }
+  }
+  openSeletedColor() {
+    var _a, _b;
+    if (!this.colorsList || !this.selectedcolor)
+      return;
+    if (!this.colorIsSelected) {
+      const result = this.chunks(this.colorsList)
+        .map((innerArray, arrayIndex) => {
+        const foundColor = innerArray.find(color => { var _a, _b, _c; return ((_a = color.name.trim()) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === ((_c = (_b = this.selectedcolor) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.toUpperCase()); });
+        return foundColor ? { color: foundColor, index: arrayIndex } : null;
+      })
+        .filter(item => item !== null);
+      this.currentColor = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.color;
+      this.currentIndex = (_b = result[0]) === null || _b === void 0 ? void 0 : _b.index;
+      this.colorIsSelected = true;
+    }
+  }
+  componentWillLoad() {
+    this.preloader = true;
+    setDataLayer({
+      shop: this.shop,
+      product: this.product,
+    });
+    this.loadProductData();
+  }
+  componentWillRender() {
+    this.displayForMobile();
+    this.calculateBoxCount();
+    this.colorTimer();
+    this.openSeletedColor();
+    const modalContent = this.modalEl.querySelector('.my-modal');
+    if (modalContent) {
+      modalContent.addEventListener('scroll', event => this.handleScroll(event, modalContent));
+    }
+  }
+  resetColors() {
+    this.currentColor = null;
+    this.currentIndex = null;
+    this.colorIsSelected = false;
+  }
+  resetAllFilters() {
+    var _a;
+    // Reset current color selection
+    this.resetColors();
+    // Reset filters to initial state
+    this.filters = {
+      type: 'product',
+      id: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.id) || '',
+      productId: '',
+      page: 1,
+      colorNumber: '',
+      colorName: '',
+      colorFamily: '',
+      sampleId: '',
+    };
+    // Reset selected category
+    this.selectedCategory = null;
+    // Clear search text
+    this.clearSearchText.emit();
+    // Fetch colors with reset filters
+    this.fetchColorsData({ reset: true });
+  }
+  resetSelectedCategory() {
+    this.resetColors();
+    this.colorIsSelected = false;
+    this.selectedCategory = null;
+    this.filters = updateFilters(this.filters, { sampleId: '' });
+    this.fetchColorsData({ reset: true });
+  }
+  render() {
+    var _a;
+    return (h("div", { class: `my-modal`, onMouseEnter: () => this.handleReadyToClose(false), onMouseLeave: () => this.handleReadyToClose(true) }, this.preloader && (h("div", { class: 'loader' }, h("my-loader", null))), !this.preloader && this.data && (h("modal-header", { modalName: this.data.modalName, modalLogo: this.data.modalLogo ? `${APIURL}/assets/${this.data.modalLogo}?access_token=${accessToken}` : null, modalDescription: this.data.modalDescription, shop: this.shop, productName: this.data.name, productSamples: this.data.productSamples, selectedColorFamily: this.filters.colorFamily, isMobile: this.isMobile, onCloseModal: () => this.closeModalHandler(), onSampleSelected: event => this.handleSampleSelect(event.detail), onOnLogoClick: () => this.resetAllFilters(), onOnResetCategory: () => this.resetSelectedCategory() })), h("div", { class: 'my-modal__wrapper' }, !this.preloader && (h("div", { class: 'container_boxes' }, !this.loading && this.colorsList.length === 0 && (h("div", { class: "not-found" }, h("p", null, "Nie zaleziono wynik\u00F3w wyszukiwania pod danym has\u0142em."), h("p", null, " Wpisz inn\u0105 nazw\u0119 b\u0105d\u017A numer koloru lub skorzystaj z kolekcji kolorystycznych."))), ((_a = this.colorsList) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+      this.chunks(this.colorsList).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;
+              if (((_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.id) === c.id) {
+                this.currentColor = null;
+              }
+              else {
+                this.currentColor = c;
+              }
+              this.currentIndex = index;
+              setDataLayer({
+                event: 'ColorClick',
+                shop: this.shop,
+                product: this.product,
+                color: c.name,
+              });
+              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, isImageInsteadHex: {
+              isImageInsteadHex: c.imageInsteadHex,
+              bigImage: c.bigImage,
+            } }));
+        })), ((_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, baselink: this.baselink }))));
+      }))), this.loading && h("my-loader", null)), !this.preloader && this.isMobile && (h("button", { class: "button", onClick: () => this.closeModalHandler() }, "Zamknij"))));
+  }
+  static get is() { return "my-modal"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.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
+      },
+      "baselink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "baselink",
+        "reflect": false
+      },
+      "selectedcolor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selectedcolor",
+        "reflect": false
+      },
+      "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": {},
+      "currentColor": {},
+      "currentIndex": {},
+      "infoBoxWidth": {},
+      "boxWidth": {},
+      "padding": {},
+      "isMobile": {},
+      "showRange": {},
+      "colorCategories": {},
+      "selectedCategory": {},
+      "page": {},
+      "colorIsSelected": {},
+      "colorsList": {},
+      "hasMore": {},
+      "filters": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onSelectedColorEmit",
+        "name": "onSelectedColorEmit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Color",
+          "resolved": "{ hex: string; image: Record<string, Image>; links: Link[]; name: string; position: number; buttonInverse: boolean; textWhite: boolean; id?: number | undefined; category?: Partial<Color> | undefined; number?: string | undefined; Category_id: Color; imageInsteadHex: boolean; bigImage: string; }",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        }
+      }, {
+        "method": "clearSearchText",
+        "name": "clearSearchText",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "readyToCLose",
+        "name": "readyToCLose",
+        "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": "onCurrentColor",
+        "method": "handleEmitColor",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "colorFamilySelected",
+        "method": "handleColorFamilySelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "searchColors",
+        "method": "searchColorsHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map