{"version":3,"file":"shoppableImages-DzdHgxJK.js","sources":["../../../app/javascript/modules/shoppableImages.js"],"sourcesContent":["import Flickity from \"flickity-fade\";\nimport \"flickity-imagesloaded\";\nimport tippy from \"tippy.js\";\nimport { on } from \"../utils/listeners\";\nimport listingTemplateForTooltip from \"../utils/listingTemplateForTooltip\";\n\nconst setupDesktopBeacons = () => {\n  window.initializeShoppableImages = () => {\n    // Loop through and set up any product carousels\n    // (product page, landing page, the fold)\n    const carousels = document.querySelectorAll(\".shoppable-image-products\");\n\n    const flktys = [];\n\n    carousels.forEach(carousel => {\n      const options = {\n        prevNextButtons: false,\n        pageDots: false,\n        draggable: false,\n        fade: true,\n        imagesLoaded: true,\n        cellSelector: \".shoppableImageProduct\"\n      };\n\n      const newFlkty = new Flickity(carousel, options);\n      flktys.push(newFlkty);\n\n      flktys.forEach(flkty => {\n        flkty.resize();\n      });\n\n      on(\"click\", \".beacon\", (el, e) => {\n        e.preventDefault();\n        if (el.classList.contains(\"selected\")) return;\n\n        const beacons = el.parentElement.querySelectorAll(\".beacon\");\n\n        beacons.forEach(beacon => {\n          beacon.classList.remove(\"selected\");\n        });\n\n        el.classList.add(\"selected\");\n\n        const { beaconIndex } = el.dataset;\n        flktys.forEach(flkty => {\n          flkty.select(beaconIndex);\n        });\n      });\n    });\n  };\n\n  const beacons = document.querySelectorAll(\".tooltip-beacon\");\n\n  beacons.forEach(beacon => {\n    const beaconData = JSON.parse(beacon.dataset.beacon);\n    const listingData = JSON.parse(beacon.dataset.listing);\n    tippy(beacon, {\n      content: listingTemplateForTooltip(listingData),\n      interactive: true,\n      theme: \"light\",\n      arrow: false,\n      hideOnClick: false,\n      placement: beaconData.placement,\n      allowHTML: true\n    });\n\n    beacon.addEventListener(\"click\", e => {\n      analytics.track(\"Clicked Shoppable Beacon\");\n\n      if (e.metaKey) {\n        e.preventDefault();\n        window.open(e.target.href, \"_blank\");\n      } else {\n        const linkToFollow = e.target.href;\n        window.location = linkToFollow;\n      }\n    });\n  });\n\n  window.initializeShoppableImages();\n};\n\nexport default setupDesktopBeacons;\n"],"names":["setupDesktopBeacons","carousels","flktys","carousel","options","newFlkty","Flickity","flkty","on","el","e","beacon","beaconIndex","beaconData","listingData","tippy","listingTemplateForTooltip","linkToFollow"],"mappings":"0QAMK,MAACA,EAAsB,IAAM,CAChC,OAAO,0BAA4B,IAAM,CAGvC,MAAMC,EAAY,SAAS,iBAAiB,2BAA2B,EAEjEC,EAAS,CAAE,EAEjBD,EAAU,QAAQE,GAAY,CAC5B,MAAMC,EAAU,CACd,gBAAiB,GACjB,SAAU,GACV,UAAW,GACX,KAAM,GACN,aAAc,GACd,aAAc,wBACf,EAEKC,EAAW,IAAIC,EAASH,EAAUC,CAAO,EAC/CF,EAAO,KAAKG,CAAQ,EAEpBH,EAAO,QAAQK,GAAS,CACtBA,EAAM,OAAQ,CACtB,CAAO,EAEDC,EAAG,QAAS,UAAW,CAACC,EAAIC,IAAM,CAEhC,GADAA,EAAE,eAAgB,EACdD,EAAG,UAAU,SAAS,UAAU,EAAG,OAEvBA,EAAG,cAAc,iBAAiB,SAAS,EAEnD,QAAQE,GAAU,CACxBA,EAAO,UAAU,OAAO,UAAU,CAC5C,CAAS,EAEDF,EAAG,UAAU,IAAI,UAAU,EAE3B,KAAM,CAAE,YAAAG,GAAgBH,EAAG,QAC3BP,EAAO,QAAQK,GAAS,CACtBA,EAAM,OAAOK,CAAW,CAClC,CAAS,CACT,CAAO,CACP,CAAK,CACF,EAEe,SAAS,iBAAiB,iBAAiB,EAEnD,QAAQD,GAAU,CACxB,MAAME,EAAa,KAAK,MAAMF,EAAO,QAAQ,MAAM,EAC7CG,EAAc,KAAK,MAAMH,EAAO,QAAQ,OAAO,EACrDI,EAAMJ,EAAQ,CACZ,QAASK,EAA0BF,CAAW,EAC9C,YAAa,GACb,MAAO,QACP,MAAO,GACP,YAAa,GACb,UAAWD,EAAW,UACtB,UAAW,EACjB,CAAK,EAEDF,EAAO,iBAAiB,QAASD,GAAK,CAGpC,GAFA,UAAU,MAAM,0BAA0B,EAEtCA,EAAE,QACJA,EAAE,eAAgB,EAClB,OAAO,KAAKA,EAAE,OAAO,KAAM,QAAQ,MAC9B,CACL,MAAMO,EAAeP,EAAE,OAAO,KAC9B,OAAO,SAAWO,CAC1B,CACA,CAAK,CACL,CAAG,EAED,OAAO,0BAA2B,CACpC"}