{"version":3,"file":"productHighlight.js","mappings":"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","sources":["webpack://octopus.public.web/webpack/universalModuleDefinition","webpack://octopus.public.web/./Assets/js/productHighlight.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(this, () => {\nreturn ","class ProductHighlight {\n  sections;\n  currentSection = 0;\n  currentSelectionTimeout;\n  disableAutoCycle = false;\n  displayTimeInMs = 10000;\n\n  constructor(productHighlight) {\n    this.productHighlight = productHighlight;\n    this.sections = this.productHighlight.querySelectorAll(\"[highlight-section]\");\n    this.displayTimeInMs =\n      parseInt(this.productHighlight.getAttribute(\"section-display-time-in-seconds\")) * 1000;\n\n    this.sections.forEach((section, index) => {\n      section.addEventListener(\"click\", () => {\n        this.changeSection(index);\n        this.disableAutoCycle = true;\n      });\n    });\n\n    this.handleResize();\n    window.addEventListener(\"resize\", () => this.handleResize());\n\n    let observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) =>\n          this.handleViewportIntersection(entry.isIntersecting)\n        );\n      },\n      { rootMargin: \"0px\", threshold: 0.2 }\n    );\n\n    let target = this.productHighlight.querySelector(\"#product-highlights\");\n    observer.observe(target);\n  }\n\n  cycleSection() {\n    if (\n      this.disableAutoCycle ||\n      this.currentSection >= this.sections.length - 1\n    )\n      return;\n    this.changeSection(this.currentSection + 1);\n    this.currentSelectionTimeout = setTimeout(\n      () => this.cycleSection(),\n      this.displayTimeInMs\n    );\n  }\n\n  changeSection(newSectionIndex) {\n    if (this.currentSection === newSectionIndex) return;\n\n    // Start hiding the current section right away\n    if (this.currentSection !== -1) {\n      this.hideSection(this.currentSection);\n    }\n\n    // Then show the new section\n    this.showSection(newSectionIndex);\n    this.currentSection = newSectionIndex;\n    clearTimeout(this.currentSelectionTimeout);\n  }\n\n  showSection(index) {\n    const desktopImage = this.productHighlight.querySelector(\n      `[highlight-section-image=\"${index}\"]`\n    );\n    desktopImage.classList.remove(\"hide-complete\");\n\n    const section = this.productHighlight.querySelector(`[highlight-section=\"${index}\"]`);\n    section\n      .querySelectorAll(`[highlight-section-content]`)\n      .forEach((content) => {\n        // Ensure the element is visible to measure it\n        content.style.display = \"block\";\n\t\t\t\t// Get the actual height\n        let actualHeight = content.scrollHeight + \"px\";\n\t\t\t\t// Set max-height to actual height for transition\n        content.style.maxHeight = actualHeight;\n        content.style.opacity = \"1\";\n      });\n    section.classList.add(\"selected\");\n  }\n\n  hideSection(index) {\n    const desktopImage = this.productHighlight.querySelector(\n      `[highlight-section-image=\"${index}\"]`\n    );\n    desktopImage.classList.add(\"hide-inprogress\");\n    setTimeout(() => {\n      desktopImage.classList.remove(\"hide-inprogress\");\n      desktopImage.classList.add(\"hide-complete\");\n    }, 900);\n\n    const section = this.productHighlight.querySelector(`[highlight-section=\"${index}\"]`);\n    section\n      .querySelectorAll(`[highlight-section-content]`)\n      .forEach((content) => {\n\t\t\t\t// Collapse to zero height\n        content.style.maxHeight = \"0\";\n        content.style.opacity = \"0\";\n      });\n    section.classList.remove(\"selected\");\n    section.classList.add(\"shown\");\n  }\n\n  handleResize() {\n    const shouldBeMobileMode = this.isMobile(window.innerWidth);\n    if (shouldBeMobileMode === this.mobileMode) return;\n    this.mobileMode = shouldBeMobileMode;\n\n    if (shouldBeMobileMode) {\n      this.initMobileMode();\n    } else {\n      this.initDesktopMode();\n    }\n  }\n\n  handleViewportIntersection(isVisible) {\n    if (this.mobileMode || !isVisible) {\n      clearTimeout(this.currentSelectionTimeout);\n      return;\n    }\n    this.sections.forEach((section) => section.classList.remove(\"selected\"));\n    this.showSection(this.currentSection);\n    this.currentSelectionTimeout = setTimeout(\n      () => this.cycleSection(),\n      this.displayTimeInMs\n    );\n  }\n\n  isMobile(width) {\n    return width < 992;\n  }\n\n  initMobileMode() {\n    this.productHighlight\n      .querySelectorAll(\"[highlight-section-content]\")\n      .forEach((content) => {\n        content.style.maxHeight = \"1000px\";\n        content.style.opacity = \"1\";\n      });\n    clearTimeout(this.currentSelectionTimeout);\n  }\n\n  initDesktopMode() {\n    this.productHighlight\n      .querySelectorAll(\"[highlight-section-content]\")\n      .forEach((content) => {\n        content.style.maxHeight = \"0\";\n        content.style.opacity = \"0\";\n        content.style.transition = \"max-height 0.9s ease-in-out, opacity 0.5s ease-in-out\";\n      });\n\n    if (this.currentSection === -1) {\n      this.changeSection(0);\n    } else {\n      const content = this.productHighlight.querySelector(\n        `[highlight-section-content=\"${this.currentSection}\"]`\n      );\n      content.style.maxHeight = \"1000px\";\n      content.style.opacity = \"1\";\n    }\n  }\n}\n\ndocument.querySelectorAll('[data-product-highlight]').forEach(element => {\n\tnew ProductHighlight(element);\n});\n"],"names":["root","factory","exports","module","define","amd","a","i","this","ProductHighlight","productHighlight","sections","querySelectorAll","displayTimeInMs","parseInt","getAttribute","forEach","section","index","addEventListener","changeSection","disableAutoCycle","handleResize","window","observer","IntersectionObserver","entries","entry","handleViewportIntersection","isIntersecting","rootMargin","threshold","target","querySelector","observe","currentSection","length","currentSelectionTimeout","setTimeout","cycleSection","newSectionIndex","hideSection","showSection","clearTimeout","classList","remove","content","style","display","actualHeight","scrollHeight","maxHeight","opacity","add","desktopImage","shouldBeMobileMode","isMobile","innerWidth","mobileMode","initMobileMode","initDesktopMode","isVisible","width","transition","document","element"],"sourceRoot":""}