{"version":3,"file":"colour_swatch_controller-Bnl8bCP2.js","sources":["../../../app/javascript/controllers/dynamic_bundles/colour_swatch_controller.js"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\nimport { dynamicBundleReplaceListingsPath } from \"../../routes\";\nimport {\n  dynamicBundlesClearBorder,\n  dynamicBundlesUpdateMainImage\n} from \"../../utils/dynamicBundles\";\n\nexport default class extends Controller {\n  static values = {\n    swatchImage: String,\n    active: Boolean,\n    swatchIndex: Number,\n    index: Number,\n    listingIndex: Number,\n    partIds: Array,\n    listingId: Number,\n    initialLoad: Boolean,\n    dynamicBundleSlug: String,\n    storeCode: String\n  };\n\n  connect() {\n    if (!this.initialLoadValue && this.activeValue) {\n      this.handleSwatchChange();\n    }\n  }\n\n  handleSwatchChange() {\n    dynamicBundlesClearBorder();\n    this.updateMainFormAction();\n    this.addBorderToCurrentIndex();\n    this.swapMainImage();\n  }\n\n  addBorderToCurrentIndex() {\n    const listingElement = document.getElementById(\n      `related-listings-listing-${this.listingIndexValue}`\n    );\n\n    const labelElement = listingElement.querySelector(\".product-image\");\n\n    labelElement.classList.add(\"border-ink\");\n    labelElement.classList.remove(\"border-transparent\");\n  }\n\n  swapMainImage() {\n    const mainImageContainer = document.getElementById(\n      \"dynamic-bundle-main-image-container\"\n    );\n\n    dynamicBundlesUpdateMainImage(\n      mainImageContainer,\n      this.listingIndexValue,\n      this.swatchImageValue\n    );\n  }\n\n  updateMainFormAction() {\n    const newPartIds = [...this.partIdsValue];\n    newPartIds[this.indexValue] = this.listingIdValue;\n\n    const form = document.getElementById(\"related-listings-form\");\n\n    form.action = dynamicBundleReplaceListingsPath({\n      dynamic_bundle_slug: this.dynamicBundleSlugValue,\n      bundleable_ids: newPartIds.join(\"/\"),\n      store: this.storeCodeValue\n    });\n  }\n\n  mouseOver(event) {\n    if (this.activeValue) return;\n\n    const imageContainer = event.target\n      .closest(\".product-listing\")\n      .querySelector(\".product-image\");\n\n    const imageElement = new Image();\n    imageElement.src = this.swatchImageValue;\n    imageElement.dataset.index = this.swatchIndexValue;\n    imageElement.setAttribute(\n      \"class\",\n      \"img-responsive w-full cursor-pointer aspect-ratio-1x1 absolute opacity-0 dynamic-bundle-image\"\n    );\n    imageElement.setAttribute(\n      \"data-action\",\n      \"click->dynamic-bundle#handleOptionChange\"\n    );\n\n    imageContainer.appendChild(imageElement);\n    imageElement.onload = () => {\n      imageElement.classList.remove(\"opacity-0\");\n    };\n  }\n\n  mouseOut(event) {\n    if (this.activeValue) return;\n\n    const indexToRemove = this.swatchIndexValue;\n    const productImageContainer = event.target\n      .closest(\".product-listing\")\n      .querySelector(\".product-image\");\n    const imageToRemove = productImageContainer.querySelector(\n      `[data-index=\"${indexToRemove}\"]`\n    );\n\n    if (imageToRemove) {\n      imageToRemove.classList.add(\"opacity-0\", \"pointer-events-none\");\n    }\n\n    setTimeout(() => {\n      const allImagesMatchingIndex = productImageContainer.querySelectorAll(\n        `[data-index=\"${indexToRemove}\"]`\n      );\n      allImagesMatchingIndex.forEach(image => {\n        image.remove();\n      });\n    }, 100);\n  }\n}\n"],"names":["colour_swatch_controller","Controller","dynamicBundlesClearBorder","labelElement","mainImageContainer","dynamicBundlesUpdateMainImage","newPartIds","form","dynamicBundleReplaceListingsPath","event","imageContainer","imageElement","indexToRemove","productImageContainer","imageToRemove","image","__publicField"],"mappings":"sZAOe,MAAKA,UAASC,CAAW,CActC,SAAU,CACJ,CAAC,KAAK,kBAAoB,KAAK,aACjC,KAAK,mBAAoB,CAE/B,CAEE,oBAAqB,CACnBC,EAA2B,EAC3B,KAAK,qBAAsB,EAC3B,KAAK,wBAAyB,EAC9B,KAAK,cAAe,CACxB,CAEE,yBAA0B,CAKxB,MAAMC,EAJiB,SAAS,eAC9B,4BAA4B,KAAK,iBAAiB,EACnD,EAEmC,cAAc,gBAAgB,EAElEA,EAAa,UAAU,IAAI,YAAY,EACvCA,EAAa,UAAU,OAAO,oBAAoB,CACtD,CAEE,eAAgB,CACd,MAAMC,EAAqB,SAAS,eAClC,qCACD,EAEDC,EACED,EACA,KAAK,kBACL,KAAK,gBACN,CACL,CAEE,sBAAuB,CACrB,MAAME,EAAa,CAAC,GAAG,KAAK,YAAY,EACxCA,EAAW,KAAK,UAAU,EAAI,KAAK,eAEnC,MAAMC,EAAO,SAAS,eAAe,uBAAuB,EAE5DA,EAAK,OAASC,EAAiC,CAC7C,oBAAqB,KAAK,uBAC1B,eAAgBF,EAAW,KAAK,GAAG,EACnC,MAAO,KAAK,cAClB,CAAK,CACL,CAEE,UAAUG,EAAO,CACf,GAAI,KAAK,YAAa,OAEtB,MAAMC,EAAiBD,EAAM,OAC1B,QAAQ,kBAAkB,EAC1B,cAAc,gBAAgB,EAE3BE,EAAe,IAAI,MACzBA,EAAa,IAAM,KAAK,iBACxBA,EAAa,QAAQ,MAAQ,KAAK,iBAClCA,EAAa,aACX,QACA,+FACD,EACDA,EAAa,aACX,cACA,0CACD,EAEDD,EAAe,YAAYC,CAAY,EACvCA,EAAa,OAAS,IAAM,CAC1BA,EAAa,UAAU,OAAO,WAAW,CAC1C,CACL,CAEE,SAASF,EAAO,CACd,GAAI,KAAK,YAAa,OAEtB,MAAMG,EAAgB,KAAK,iBACrBC,EAAwBJ,EAAM,OACjC,QAAQ,kBAAkB,EAC1B,cAAc,gBAAgB,EAC3BK,EAAgBD,EAAsB,cAC1C,gBAAgBD,CAAa,IAC9B,EAEGE,GACFA,EAAc,UAAU,IAAI,YAAa,qBAAqB,EAGhE,WAAW,IAAM,CACgBD,EAAsB,iBACnD,gBAAgBD,CAAa,IAC9B,EACsB,QAAQG,GAAS,CACtCA,EAAM,OAAQ,CACtB,CAAO,CACF,EAAE,GAAG,CACV,CACA,CA/GEC,EADkBhB,EACX,SAAS,CACd,YAAa,OACb,OAAQ,QACR,YAAa,OACb,MAAO,OACP,aAAc,OACd,QAAS,MACT,UAAW,OACX,YAAa,QACb,kBAAmB,OACnB,UAAW,MACZ"}