add idm-hotspot-tab

demo-tabs/idm-hotspot-tab/javascript.js

@@ -0,0 +1,61 @@
+class IdmHotspotTab {
+  constructor({ name, productsId }) {
+    this.productsId = productsId;
+    this.name = name;
+    this.html = `
+      <div class="idm-hotspot-tab">
+        <div class="idm-hotspot-tab__content">
+      </div>
+    `;
+  }
+
+  initHotspot() {
+    const classes = Array.from(this.container.classList).join(".");
+    const tabId = this.container.dataset.tabId;
+    const selector = `.${classes}[data-tab-id="${tabId}"] .idm-hotspot-tab__content`;
+    const id = `idm-hotspot-tab__hotspot-${tabId}`;
+    // deprecated. use new version
+    idmInsertHotspotObject({
+      id,
+      classes: "idm-hotspot-tab__hotspot",
+      title: "",
+      placement: {
+        selector,
+        insert: "beforeend",
+      },
+      query: {
+        string: `
+        searchInput: {productsId : [${this.productsId}]}
+        settingsInput: { limit: 100, page: 0 }
+      `,
+        graphFn: IDM_PRODUCTS_GQL,
+      },
+      options: {
+        swiper: false,
+      },
+      onLoad: () => {
+        setTimeout(() => {
+          app_shop.fn.idmSetHeight({
+            selectors: [
+              `#${id} .product__name`,
+              `#${id} .product__price`,
+              `#${id} .btn-idm`,
+              `#${id} .product__price-omnibus`,
+            ],
+            container: `#${id} .products`,
+          });
+        }, 50);
+      },
+    });
+  }
+
+  async onInit(tab, modalInstance) {
+    this.container = tab;
+    if (this.productsId.length === 0) {
+      console.error("IdmHotspotTab: no products");
+      return;
+    }
+
+    await this.initHotspot();
+  }
+}

demo-tabs/idm-hotspot-tab/style.less

@@ -0,0 +1,127 @@
+.idm-hotspot-tab {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  @media @laptop {
+    gap: 3.2rem;
+  }
+
+  & .bmFavourites {
+    display: none;
+  }
+
+  &__search-wrapper {
+    width: 100%;
+    background-color: @idm-tabs__secondary-background-gray;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    padding: 1.6rem 2.4rem;
+  }
+
+  &__search {
+    line-height: @idm-tabs__lineheight-l;
+    font-size: @idm-tabs__mobile-body-medium;
+    border: none;
+    width: 100%;
+    background: transparent;
+    font-weight: @idm-tabs__weight-bold;
+    color: @idm-tabs__primary-black;
+
+    &::placeholder {
+      color: @idm-tabs__primary-black;
+    }
+  }
+
+  &__search-icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  & .products {
+    gap: 4.8rem !important;
+  }
+
+  & .product {
+    &__name {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 150%;
+      max-height: calc(1.5em * 2);
+    }
+
+    &--hidden {
+      display: none !important;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      right: -2.4rem;
+      top: 0;
+      height: 80%;
+      width: 1px; // Wpisane na sztywno (divider-thin)
+      background-color: @idm-tabs__secondary-outline-gray;
+      z-index: 67;
+    }
+
+    &:nth-child(2n)::after {
+      display: none;
+      @media @tablet {
+        display: block;
+      }
+    }
+
+    &:nth-child(4n)::after {
+      @media @tablet {
+        display: none;
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      display: none;
+      bottom: -2.4rem;
+      left: 0;
+      background-color: @idm-tabs__secondary-outline-gray;
+      height: 1px;
+    }
+
+    // mobile
+    &:nth-child(2n + 1)::before {
+      display: block;
+      width: calc(200% + 4.8rem);
+      @media @tablet {
+        display: none;
+      }
+    }
+
+    // desktop
+    &:nth-child(4n - 3):before {
+      @media @tablet {
+        display: block;
+        width: calc(400% + 3 * 4.8rem);
+      }
+    }
+
+    &:nth-last-child(-n + 4)::before {
+      @media @tablet {
+        display: none;
+      }
+    }
+  }
+}