diff --git a/demo-tabs/idm-search-hotspot-tab/image.png b/demo-tabs/idm-search-hotspot-tab/image.png new file mode 100644 index 0000000..6d1f0c8 Binary files /dev/null and b/demo-tabs/idm-search-hotspot-tab/image.png differ diff --git a/demo-tabs/idm-search-hotspot-tab/javascript.js b/demo-tabs/idm-search-hotspot-tab/javascript.js new file mode 100644 index 0000000..2d6e35b --- /dev/null +++ b/demo-tabs/idm-search-hotspot-tab/javascript.js @@ -0,0 +1,130 @@ +class IdmSearchHotspotTab { + constructor({ name, productsId }) { + console.log(`IDMSEARCH HOTSPOT1 ${productsId}`); + this.productsId = productsId; + this.name = name; + this.html = ` +
+ + + +
+
+ `; + } + + // async initProducts(){ + // const data = await idmGetClientStats(); + // console.log(data); + // const allProductIds = data.lastOrders.flatMap(order => order.orderProducts.map(product => product.productId)); + // const uniqueProductIds = [...new Set(allProductIds)]; + + // const testProductIds = [200665, 200664, 200686, 200684, 200669, 200596]; + // this.productsId = testProductIds; + + // } + + // zapytrac Pawla o to zebvy uruchomic to asynmcrhonicznie + initHotspot() { + const classes = Array.from(this.container.classList).join("."); + const tabId = this.container.dataset.tabId; + const selector = `.${classes}[data-tab-id="${tabId}"] .idm-search-hotspot-tab__content`; + const id = `idm-search-hotspot-tab__hotspot-${tabId}`; + idmInsertHotspotObject({ + id, + classes: "idm-search-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); + }, + }); + // new IdmHotspot({ + // id: `idm-search-hotspot-tab__hotspot-${tabId}`, + // classes: "idm-search-hotspot-tab__hotspot", + // title: "", + // placement: { + // selector, + // insert: "beforeend", + // }, + // source: { + // productsId: this.productsId, + // }, + // options: { + // swiper: false, + // showOpinions: true + // } + // }); + } + + initSearchInputEvents() { + const input = this.container.querySelector( + ".idm-search-hotspot-tab__search", + ); + + const filterProducts = () => { + const products = this.container.querySelectorAll(".product"); + const value = input.value.toLowerCase().trim(); + + products.forEach((product) => { + const nameEl = product.querySelector(".product__name"); + if (!nameEl) return; + + const name = nameEl.textContent.toLowerCase(); + product.classList.toggle("product--hidden", !name.includes(value)); + }); + }; + + const DEBOUCE_DELAY = 200; + input.addEventListener( + "input", + app_shop.fn.idmDebounce(filterProducts, DEBOUCE_DELAY), + ); + } + + initEvents() { + this.initSearchInputEvents(); + } + + async onInit(tab, modalInstance) { + this.container = tab; + if (this.productsId.length === 0) { + console.error("IdmSearchHotspotTab: no products"); + return; + } + + await this.initHotspot(); + this.initEvents(); + } +} diff --git a/demo-tabs/idm-search-hotspot-tab/style.less b/demo-tabs/idm-search-hotspot-tab/style.less new file mode 100644 index 0000000..497fd8b --- /dev/null +++ b/demo-tabs/idm-search-hotspot-tab/style.less @@ -0,0 +1,127 @@ +.idm-search-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; + } + } + } +}