{
  "version": 3,
  "sources": ["../../javascript/entrypoints/product-carousel.js"],
  "sourcesContent": ["import { tns } from \"tiny-slider/src/tiny-slider\"\n\n// This value is set when productCarousel() is initialized at the\n// bottom of this file. We want to call updateSelectedVariantImage\n// from a separate context, without having to access the bigSlider,\n// smallSlider, and mobileSlider objects in the other file.\n//\n// In order to invoke this update functionality, the function has to\n// access the bigSlider, smallSlider, and mobileSlider objects.\nexport let updateSelectedVariantImage\n\nfunction productCarousel() {\n  const bigSlider = tns({\n    loop: true,\n    axis: \"horizontal\",\n    container: \".product-page__big-slider\",\n    navContainer: \".product-page__small-slider\",\n    items: 1,\n    navAsThumbnails: true,\n    controls: false,\n    preventScrollOnTouch: \"auto\"\n  })\n\n  const smallSlider = tns({\n    container: \".product-page__small-slider\",\n    loop: true,\n    items: 5,\n    mouseDrag: true,\n    nav: false,\n    controls: true,\n    axis: \"vertical\",\n    center: false,\n    prevButton: \".product-page__prev\",\n    nextButton: \".product-page__next\",\n    arrowKeys: true\n  })\n\n  const mobileSlider = tns({\n    loop: false,\n    container: \".product-page__mobile-slider\",\n    items: 1,\n    axis: \"horizontal\",\n    controls: false,\n    nav: !!document.querySelector(\".product-page__mobile-slider__dot\"),\n    navPosition: \"bottom\",\n    navContainer: \".product-page__mobile-slider__dots\"\n  })\n\n  document.querySelector(\".product-page__next\").onclick = function () {\n    bigSlider.goTo(\"next\")\n  }\n\n  smallSlider.events.on(\"indexChanged\", () => {\n    Array.from(document.querySelectorAll(\".tns-nav-active\")).forEach((el) =>\n      el.classList.remove(\"tns-nav-active\")\n    )\n    const info = smallSlider.getInfo()\n    info.slideItems[info.index].classList.add(\"tns-nav-active\")\n  })\n\n  Array.from(\n    document.querySelectorAll(\".product-page__small-slider .tns-item\")\n  ).forEach((slide) =>\n    slide.addEventListener(\"click\", (e) =>\n      smallSlider.goTo(e.currentTarget.dataset.nav)\n    )\n  )\n\n  updateSelectedVariantImage = (selectedVariant) => {\n    if (selectedVariant !== null) {\n      goToSelectedVariantImage(\n        selectedVariant.id,\n        bigSlider,\n        smallSlider,\n        mobileSlider\n      )\n    }\n  }\n}\n\nfunction goToSelectedVariantImage(\n  selectedVariantId,\n  bigSlider,\n  smallSlider,\n  mobileSlider\n) {\n  let index = Array.from(smallSlider.getInfo().slideItems).find((slide) => {\n    return (\n      slide.getAttribute(\"data-variant-id\") === selectedVariantId.toString()\n    )\n  })\n\n  if (index) {\n    index = index.dataset.nav\n    mobileSlider.goTo(index)\n    bigSlider.goTo(index)\n    smallSlider.goTo(index)\n  }\n}\n\nproductCarousel()\n"],
  "mappings": "oDASO,IAAIA,EAEX,SAASC,GAAkB,CACzB,IAAMC,EAAYC,EAAI,CACpB,KAAM,GACN,KAAM,aACN,UAAW,4BACX,aAAc,8BACd,MAAO,EACP,gBAAiB,GACjB,SAAU,GACV,qBAAsB,MACxB,CAAC,EAEKC,EAAcD,EAAI,CACtB,UAAW,8BACX,KAAM,GACN,MAAO,EACP,UAAW,GACX,IAAK,GACL,SAAU,GACV,KAAM,WACN,OAAQ,GACR,WAAY,sBACZ,WAAY,sBACZ,UAAW,EACb,CAAC,EAEKE,EAAeF,EAAI,CACvB,KAAM,GACN,UAAW,+BACX,MAAO,EACP,KAAM,aACN,SAAU,GACV,IAAK,CAAC,CAAC,SAAS,cAAc,mCAAmC,EACjE,YAAa,SACb,aAAc,oCAChB,CAAC,EAED,SAAS,cAAc,qBAAqB,EAAE,QAAU,UAAY,CAClED,EAAU,KAAK,MAAM,CACvB,EAEAE,EAAY,OAAO,GAAG,eAAgB,IAAM,CAC1C,MAAM,KAAK,SAAS,iBAAiB,iBAAiB,CAAC,EAAE,QAASE,GAChEA,EAAG,UAAU,OAAO,gBAAgB,CACtC,EACA,IAAMC,EAAOH,EAAY,QAAQ,EACjCG,EAAK,WAAWA,EAAK,OAAO,UAAU,IAAI,gBAAgB,CAC5D,CAAC,EAED,MAAM,KACJ,SAAS,iBAAiB,uCAAuC,CACnE,EAAE,QAASC,GACTA,EAAM,iBAAiB,QAAU,GAC/BJ,EAAY,KAAK,EAAE,cAAc,QAAQ,GAAG,CAC9C,CACF,EAEAJ,EAA8BS,GAAoB,CAC5CA,IAAoB,MACtBC,EACED,EAAgB,GAChBP,EACAE,EACAC,CACF,CAEJ,CACF,CAEA,SAASK,EACPC,EACAT,EACAE,EACAC,EACA,CACA,IAAIO,EAAQ,MAAM,KAAKR,EAAY,QAAQ,EAAE,UAAU,EAAE,KAAMI,GAE3DA,EAAM,aAAa,iBAAiB,IAAMG,EAAkB,SAAS,CAExE,EAEGC,IACFA,EAAQA,EAAM,QAAQ,IACtBP,EAAa,KAAKO,CAAK,EACvBV,EAAU,KAAKU,CAAK,EACpBR,EAAY,KAAKQ,CAAK,EAE1B,CAEAX,EAAgB",
  "names": ["updateSelectedVariantImage", "productCarousel", "bigSlider", "tns", "smallSlider", "mobileSlider", "el", "info", "slide", "selectedVariant", "goToSelectedVariantImage", "selectedVariantId", "index"]
}