{"version":3,"file":"listings-DzVnbRCp.js","sources":["../../../app/javascript/modules/listings.js"],"sourcesContent":["import { on } from \"../utils/listeners\";\nimport api from \"../api/index\";\n\nconst listings = () => {\n  on(\"mouseover\", \".product .swatch\", el => {\n    if (el.classList.contains(\"active\")) return;\n\n    const productImageContainer = el\n      .closest(\".product\")\n      .querySelector(\".product-image\");\n    const image = {\n      url: el.dataset.imageUrl\n    };\n    const imageElement = new Image();\n    imageElement.src = image.url;\n    imageElement.dataset.index = el.dataset.index;\n    imageElement.setAttribute(\n      \"class\",\n      \"absolute pin img-responsive bg-paper hover-img opacity-0\"\n    );\n    productImageContainer.appendChild(imageElement);\n    imageElement.onload = () => {\n      imageElement.classList.remove(\"opacity-0\");\n    };\n  });\n\n  on(\"mouseout\", \".product .swatch\", (el, e) => {\n    if (el.classList.contains(\"active\")) return;\n\n    const indexToRemove = el.dataset.index;\n    const productImageContainer = el\n      .closest(\".product\")\n      .querySelector(\".product-image\");\n    const imageToRemove = productImageContainer.querySelector(\n      `[data-index=\"${indexToRemove}\"]`\n    );\n    if (!e.relatedTarget?.classList.contains(\"swatch\")) {\n      imageToRemove.classList.add(\"opacity-0\");\n    }\n    setTimeout(() => {\n      const allImagesMatchingIndex = productImageContainer.querySelectorAll(\n        `[data-index=\"${indexToRemove}\"]`\n      );\n      allImagesMatchingIndex.forEach(image => {\n        image.remove();\n      });\n    }, 400);\n  });\n\n  on(\"click\", \".product .swatch\", async (el, e) => {\n    // We replace the entire listing element on change\n\n    const listing = e.target.closest(\"div\").parentNode;\n    const parent = listing.parentNode;\n    const { slug } = el.dataset;\n    const result = await api.get(`/${slug}/listing_variant`);\n    const divWrapper = document.createElement(\"div\");\n\n    divWrapper.innerHTML = result.data;\n\n    const replacementListing = divWrapper.firstElementChild;\n    const listingImage = replacementListing.querySelector(\"img\");\n\n    listingImage.classList.add(\"opacity-0\");\n\n    listingImage.addEventListener(\"load\", () => {\n      listingImage.classList.remove(\"opacity-0\");\n    });\n\n    parent.replaceChild(replacementListing, listing);\n\n    window.resetFavourites();\n  });\n};\n\nexport default listings;\n"],"names":["listings","on","el","productImageContainer","image","imageElement","e","indexToRemove","imageToRemove","_a","listing","parent","slug","result","api","divWrapper","replacementListing","listingImage"],"mappings":"2HAGK,MAACA,EAAW,IAAM,CACrBC,EAAG,YAAa,mBAAoBC,GAAM,CACxC,GAAIA,EAAG,UAAU,SAAS,QAAQ,EAAG,OAErC,MAAMC,EAAwBD,EAC3B,QAAQ,UAAU,EAClB,cAAc,gBAAgB,EAC3BE,EAAQ,CACZ,IAAKF,EAAG,QAAQ,QACjB,EACKG,EAAe,IAAI,MACzBA,EAAa,IAAMD,EAAM,IACzBC,EAAa,QAAQ,MAAQH,EAAG,QAAQ,MACxCG,EAAa,aACX,QACA,0DACD,EACDF,EAAsB,YAAYE,CAAY,EAC9CA,EAAa,OAAS,IAAM,CAC1BA,EAAa,UAAU,OAAO,WAAW,CAC1C,CACL,CAAG,EAEDJ,EAAG,WAAY,mBAAoB,CAACC,EAAII,IAAM,OAC5C,GAAIJ,EAAG,UAAU,SAAS,QAAQ,EAAG,OAErC,MAAMK,EAAgBL,EAAG,QAAQ,MAC3BC,EAAwBD,EAC3B,QAAQ,UAAU,EAClB,cAAc,gBAAgB,EAC3BM,EAAgBL,EAAsB,cAC1C,gBAAgBI,CAAa,IAC9B,GACIE,EAAAH,EAAE,gBAAF,MAAAG,EAAiB,UAAU,SAAS,WACvCD,EAAc,UAAU,IAAI,WAAW,EAEzC,WAAW,IAAM,CACgBL,EAAsB,iBACnD,gBAAgBI,CAAa,IAC9B,EACsB,QAAQH,GAAS,CACtCA,EAAM,OAAQ,CACtB,CAAO,CACF,EAAE,GAAG,CACV,CAAG,EAEDH,EAAG,QAAS,mBAAoB,MAAOC,EAAII,IAAM,CAG/C,MAAMI,EAAUJ,EAAE,OAAO,QAAQ,KAAK,EAAE,WAClCK,EAASD,EAAQ,WACjB,CAAE,KAAAE,GAASV,EAAG,QACdW,EAAS,MAAMC,EAAI,IAAI,IAAIF,CAAI,kBAAkB,EACjDG,EAAa,SAAS,cAAc,KAAK,EAE/CA,EAAW,UAAYF,EAAO,KAE9B,MAAMG,EAAqBD,EAAW,kBAChCE,EAAeD,EAAmB,cAAc,KAAK,EAE3DC,EAAa,UAAU,IAAI,WAAW,EAEtCA,EAAa,iBAAiB,OAAQ,IAAM,CAC1CA,EAAa,UAAU,OAAO,WAAW,CAC/C,CAAK,EAEDN,EAAO,aAAaK,EAAoBN,CAAO,EAE/C,OAAO,gBAAiB,CAC5B,CAAG,CACH"}