{"version":3,"sources":["script.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"script.js","sourcesContent":["// header\r\n(() => {\r\n  // 電腦\r\n  const header = document.querySelector('.header');\r\n  if (!header) return;\r\n\r\n  const dropdownOpenCloseBtn = document.querySelector('.dropdown-open-btn');\r\n  const dropdownMenuInner = document.querySelector('.dropdown-menu-inner');\r\n\r\n  dropdownOpenCloseBtn.addEventListener('mouseenter', () => {\r\n    header.classList.add('mode-hover');\r\n    dropdownMenuInner.classList.add('show');\r\n  });\r\n\r\n  dropdownOpenCloseBtn.addEventListener('mouseleave', () => {\r\n    header.classList.remove('mode-hover');\r\n    dropdownMenuInner.classList.remove('show');\r\n  });\r\n\r\n  // 捲動隱藏顯示 header\r\n  document.addEventListener('scroll', () => {\r\n    const scrollY = window.scrollY;\r\n    if (scrollY > 110) {\r\n      header.classList.add('mode-2');\r\n    }\r\n    if (scrollY > 300) {\r\n      header.classList.add('mode-3');\r\n    }\r\n    if (scrollY > 500) {\r\n      header.classList.add('mode-4');\r\n    }\r\n    if (scrollY <= 500) {\r\n      header.classList.remove('mode-4');\r\n    }\r\n    if (scrollY <= 300) {\r\n      header.classList.remove('mode-3');\r\n    }\r\n    if (scrollY <= 110) {\r\n      header.classList.remove('mode-2');\r\n    }\r\n  });\r\n\r\n  // 手機\r\n\r\n  // 漢堡開關\r\n  const hamburgerIcon = document.querySelector('.hamburger-icon');\r\n  const navBoxMobile = document.querySelector('.nav-box-m');\r\n  const navBoxCloseBtnMobile = document.querySelectorAll(\r\n    '.nav-box-close-btn-mobile'\r\n  );\r\n\r\n  // 二階段開關\r\n  const dropdownOpenBtnMobile = document.querySelector('.dropdown-btn-mobile');\r\n  const dropdownInnerMobile = document.querySelector(\r\n    '.dropdown-menu-inner-mobile'\r\n  );\r\n  const dropdownBackBtnMobile = document.querySelector('.back-dropdown-m-btn');\r\n\r\n  hamburgerIcon.addEventListener('click', (e) => {\r\n    e.stopPropagation();\r\n    navBoxMobile.classList.add('show');\r\n  });\r\n\r\n  const { clickOutside } = window.$outsideClick;\r\n  const navBoxInner = document.querySelector('.nav-box-inner');\r\n  clickOutside({\r\n    el: navBoxInner,\r\n    handler: () => {\r\n      navBoxMobile.classList.remove('show');\r\n      dropdownInnerMobile.classList.remove('show');\r\n    },\r\n  });\r\n\r\n  navBoxCloseBtnMobile.forEach((item) => {\r\n    item.addEventListener('click', () => {\r\n      navBoxMobile.classList.remove('show');\r\n      dropdownInnerMobile.classList.remove('show');\r\n    });\r\n  });\r\n\r\n  // 二階段開關\r\n  dropdownOpenBtnMobile.addEventListener('click', () => {\r\n    dropdownInnerMobile.classList.add('show');\r\n  });\r\n\r\n  dropdownBackBtnMobile.addEventListener('click', () => {\r\n    dropdownInnerMobile.classList.remove('show');\r\n  });\r\n})();\r\n\r\n// index kv切換\r\n(() => {\r\n  const pageIndex = document.querySelector('.page-index');\r\n  if (!pageIndex) return;\r\n\r\n  const kvImage = document.querySelectorAll('.kv-img');\r\n  const circleLoad = document.querySelectorAll('.circle-load');\r\n  const imgBox = document.querySelector('.img-box');\r\n  let circleLoadIndex = 0;\r\n  let currentIndex = 0;\r\n\r\n  if (!imgBox || !kvImage || !circleLoad) {\r\n    return;\r\n  }\r\n\r\n  function toggleShowClass() {\r\n    currentIndex = (currentIndex + 1) % kvImage.length;\r\n    kvImage.forEach((item, idx) => {\r\n      if (idx === currentIndex) {\r\n        item.classList.add('show');\r\n      } else {\r\n        item.classList.remove('show');\r\n      }\r\n    });\r\n  }\r\n  setInterval(toggleShowClass, 5000);\r\n\r\n  function circleShowClass() {\r\n    circleLoadIndex = (circleLoadIndex + 1) % circleLoad.length;\r\n    circleLoad.forEach((item, idx) => {\r\n      if (idx === circleLoadIndex) {\r\n        item.classList.add('active');\r\n      } else {\r\n        item.classList.remove('active');\r\n      }\r\n    });\r\n  }\r\n  setInterval(circleShowClass, 5000);\r\n\r\n  imgBox.addEventListener('click', () => {\r\n    toggleShowClass();\r\n    circleShowClass();\r\n  });\r\n})();\r\n\r\n// index 經銷商開關\r\n(() => {\r\n  const pageIndex = document.querySelector('.page-index');\r\n  if (!pageIndex) return;\r\n\r\n  const distributorsOpenBtn = document.querySelectorAll(\r\n    '.circle-animation-btn'\r\n  );\r\n\r\n  const distributorsMobile = document.querySelectorAll('.circle');\r\n\r\n  const { clickOutside } = window.$outsideClick;\r\n\r\n  distributorsOpenBtn.forEach((item) => {\r\n    clickOutside({\r\n      el: item,\r\n      handler: (e, el) => {\r\n        const circleNode = el.parentNode;\r\n        const distributorsBox = circleNode.querySelector('.distributors-box');\r\n        distributorsBox.classList.remove('show');\r\n        distributorsMobile.forEach(() => {\r\n          circleNode.classList.remove('show');\r\n        });\r\n      },\r\n    });\r\n\r\n    item.addEventListener('click', () => {\r\n      const circleNode = item.parentNode;\r\n      const distributorsBox = circleNode.querySelector('.distributors-box');\r\n      if (window.screen.width <= 1000) {\r\n        distributorsMobile.forEach(() => {\r\n          circleNode.classList.add('show');\r\n        });\r\n      }\r\n      distributorsBox.classList.add('show');\r\n    });\r\n  });\r\n})();\r\n\r\n// 共用 左側share\r\n/*\r\n(() => {\r\n  const pageShareBox = document.querySelector('.page-share-box');\r\n  if (!pageShareBox) return;\r\n\r\n  const iconShare = document.querySelector('.icon-share');\r\n  const iconCross = document.querySelector('.icon-cross');\r\n  const shareBox = document.querySelector('.share-box');\r\n  const fbTwitterWhatsapp = document.querySelector('.fb-twitter-whatsapp-box');\r\n\r\n  if (!iconShare || !shareBox) {\r\n    return;\r\n  }\r\n\r\n  shareBox.addEventListener('mouseenter', () => {\r\n    iconShare.classList.remove('active');\r\n    iconCross.classList.add('active');\r\n    fbTwitterWhatsapp.classList.add('active');\r\n  });\r\n\r\n  shareBox.addEventListener('mouseleave', () => {\r\n    iconCross.classList.remove('active');\r\n    iconShare.classList.add('active');\r\n    fbTwitterWhatsapp.classList.remove('active');\r\n  });\r\n})();\r\n*/\r\n\r\n// immersion-cooling-kit-c1 swiper\r\n(() => {\r\n  const page = document.querySelector('.page-cooling-kit-c1');\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector('.page-cooling-kit-c1 .mySwiper-01');\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// immersion-cooling-kit-c2 swiper\r\n(() => {\r\n  const page = document.querySelector('.page-cooling-kit-c2');\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector('.page-cooling-kit-c2 .mySwiper-01');\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// immersion-cooling-kit-b24 swiper\r\n(() => {\r\n  const page = document.querySelector('.page-immersion-cooling-kit-b24');\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector(\r\n    '.page-immersion-cooling-kit-b24 .mySwiper-01'\r\n  );\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// immersion-cooling-kit-c6 swiper\r\n(() => {\r\n  const page = document.querySelector('.page-cooling-kit-c6');\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector('.page-cooling-kit-c6 .mySwiper-01');\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// page-immersion-cooling-kit-m1designed-for-whatsminer-m56 swiper\r\n(() => {\r\n  const page = document.querySelector(\r\n    '.page-immersion-cooling-kit-m1designed-for-whatsminer-m56'\r\n  );\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector(\r\n    '.page-immersion-cooling-kit-m1designed-for-whatsminer-m56 .mySwiper-01'\r\n  );\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// page-fhc01-coolant swiper\r\n(() => {\r\n  const page = document.querySelector('.page-fhc01-coolant');\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector('.page-fhc01-coolant .mySwiper-01');\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// page-immersion-cooling-kit-m6-designed-for-whatsminer-m66-series swiper\r\n(() => {\r\n  const page = document.querySelector(\r\n    '.page-immersion-cooling-kit-m6-designed-for-whatsminer-m66-series'\r\n  );\r\n  if (!page) return;\r\n\r\n  const ele = document.querySelector(\r\n    '.page-immersion-cooling-kit-m6-designed-for-whatsminer-m66-series .mySwiper-01'\r\n  );\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    spaceBetween: 0,\r\n    pagination: {\r\n      el: '.swiper-pagination',\r\n    },\r\n  });\r\n})();\r\n\r\n// b-series-warehouse-based-solution swiper\r\n(() => {\r\n  const page = document.querySelector(\r\n    '.page-b-series-warehouse-based-solution'\r\n  );\r\n  if (!page) {\r\n    return;\r\n  }\r\n\r\n  const ele = document.querySelector(\r\n    '.page-b-series-warehouse-based-solution .mySwiper-01'\r\n  );\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    a11y: {\r\n      prevSlideMessage: 'An arrow to switch previous icon of the left side',\r\n      nextSlideMessage: 'An arrow to switch next icon of the right side',\r\n    },\r\n    pagination: {\r\n      el: '.service-process .swiper-box-01 .swiper-pagination',\r\n      clickable: true,\r\n    },\r\n    navigation: {\r\n      nextEl: '.service-process .swiper-box-01 .swiper-button-next',\r\n      prevEl: '.service-process .swiper-box-01 .swiper-button-prev',\r\n    },\r\n    breakpoints: {\r\n      1001: {\r\n        slidesPerView: 3,\r\n        spaceBetween: 0,\r\n      },\r\n    },\r\n  });\r\n})();\r\n\r\n// b-series-warehouse-based-solution swiper\r\n(() => {\r\n  const page = document.querySelector(\r\n    '.page-b-series-warehouse-based-solution'\r\n  );\r\n  if (!page) {\r\n    return;\r\n  }\r\n\r\n  const ele = document.querySelector(\r\n    '.page-b-series-warehouse-based-solution .mySwiper-02'\r\n  );\r\n\r\n  const swiper = new Swiper(ele, {\r\n    slidesPerView: 1,\r\n    a11y: {\r\n      prevSlideMessage: 'An arrow to switch previous icon of the left side',\r\n      nextSlideMessage: 'An arrow to switch next icon of the right side',\r\n    },\r\n    pagination: {\r\n      el: '.service-process .swiper-box-02 .swiper-pagination',\r\n      clickable: true,\r\n    },\r\n    navigation: {\r\n      nextEl: '.service-process .swiper-box-02 .swiper-button-next',\r\n      prevEl: '.service-process .swiper-box-02 .swiper-button-prev',\r\n    },\r\n    breakpoints: {\r\n      1001: {\r\n        slidesPerView: 2,\r\n        spaceBetween: 0,\r\n      },\r\n    },\r\n  });\r\n})();\r\n\r\n// product-sell-box button變數\r\n(() => {\r\n  const productSellBox = document.querySelector('.product-sell-box');\r\n  if (!productSellBox) return;\r\n\r\n  const btnProduct = document.querySelectorAll(\r\n    '.product-sell-box .btn-product'\r\n  );\r\n  const normalEle = document.querySelector('.product-sell-box .normal');\r\n  const originalEle = document.querySelector('.product-sell-box .original');\r\n  const priceDifferenceEle = document.querySelector(\r\n    '.product-sell-box .price-difference'\r\n  );\r\n  const optionEle = document.querySelector('.product-sell-box .options-inner');\r\n  const coinBox = document.querySelector('.product-sell-box .coin');\r\n\r\n  const btnBuyCart = document.querySelector('.product-sell-box .btn-buy-cart');\r\n  const btnBuyGoogle = document.querySelector(\r\n    '.product-sell-box .btn-buy-google-box'\r\n  );\r\n  const btnSoldOut = document.querySelector('.product-sell-box .btn-sold-out');\r\n\r\n  let soldOutEle = null;\r\n  let currentBtnIndex = 0;\r\n\r\n  const createSoldOutElement = () => {\r\n    if (soldOutEle) {\r\n      return;\r\n    }\r\n\r\n    soldOutEle = document.createElement('div');\r\n    soldOutEle.classList.add('sold-out', 'active');\r\n    soldOutEle.innerText = 'Sold out';\r\n    coinBox.appendChild(soldOutEle);\r\n\r\n    btnBuyCart.classList.remove('show');\r\n    btnBuyGoogle.classList.remove('show');\r\n    btnSoldOut.classList.add('show');\r\n  };\r\n\r\n  btnProduct.forEach((item, index) => {\r\n    const originalCoin = item.getAttribute('data-original-coin') || '';\r\n    const priceDifference = item.getAttribute('data-price-difference');\r\n    const normal = item.getAttribute('data-normal');\r\n    const option = item.getAttribute('data-option');\r\n    const soldOut = item.getAttribute('data-soldOut');\r\n\r\n    if (currentBtnIndex === index) {\r\n      item.classList.add('active');\r\n      normalEle.innerText = `$ ${normal}`;\r\n      optionEle.innerText = option;\r\n\r\n      if (originalCoin) {\r\n        normalEle.classList.add('red');\r\n        originalEle.innerText = originalCoin;\r\n        priceDifferenceEle.classList.remove('active');\r\n        priceDifferenceEle.innerText = `Save $ ${priceDifference}`;\r\n      } else {\r\n        normalEle.classList.remove('red');\r\n        originalEle.innerText = '';\r\n      }\r\n\r\n      if (soldOut === '1') {\r\n        createSoldOutElement();\r\n      }\r\n    }\r\n\r\n    item.addEventListener('click', () => {\r\n      btnProduct.forEach((btn) => btn.classList.remove('active'));\r\n      normalEle.innerText = `$ ${normal}`;\r\n      optionEle.innerText = option;\r\n      item.classList.add('active');\r\n\r\n      if (originalCoin) {\r\n        normalEle.classList.add('red');\r\n        originalEle.innerText = originalCoin;\r\n        priceDifferenceEle.classList.remove('active');\r\n        priceDifferenceEle.innerText = `Save $${priceDifference}`;\r\n      } else {\r\n        normalEle.classList.remove('red');\r\n        originalEle.innerText = '';\r\n        priceDifferenceEle.classList.add('active');\r\n      }\r\n\r\n      if (soldOut === '1') {\r\n        createSoldOutElement();\r\n      } else {\r\n        if (soldOutEle) {\r\n          coinBox.removeChild(soldOutEle);\r\n          soldOutEle = null;\r\n\r\n          btnBuyCart.classList.add('show');\r\n          btnBuyGoogle.classList.add('show');\r\n          btnSoldOut.classList.remove('show');\r\n        }\r\n      }\r\n    });\r\n  });\r\n\r\n  btnProduct.forEach((btn) => {\r\n    if (btn.getAttribute('data-soldOut') === '1') {\r\n      btn.classList.add('active-2');\r\n    }\r\n  });\r\n})();\r\n\r\n// product-sell-box 數量\r\n(() => {\r\n  const productSellBox = document.querySelector('.product-sell-box');\r\n  if (!productSellBox) return;\r\n\r\n  const minusEle = document.querySelector('.btn-minus');\r\n  const plusEle = document.querySelector('.btn-plus');\r\n  const counterEle = document.querySelector('.group-bottom .num');\r\n\r\n  let counterValue = 0;\r\n\r\n  const updateCounter = () => {\r\n    counterEle.innerText = counterValue;\r\n  };\r\n\r\n  minusEle.addEventListener('click', () => {\r\n    if (counterValue > 0) {\r\n      counterValue -= 1;\r\n      updateCounter();\r\n    }\r\n  });\r\n\r\n  plusEle.addEventListener('click', () => {\r\n    counterValue += 1;\r\n    updateCounter();\r\n  });\r\n\r\n  updateCounter();\r\n})();\r\n\r\n// 規格表單 展開 收回\r\n(() => {\r\n  const productSpecification = document.querySelector('.product-specification');\r\n  if (!productSpecification) return;\r\n\r\n  const btnOpen = document.querySelectorAll('.product-specification .btn-open');\r\n  const btnClose = document.querySelectorAll(\r\n    '.product-specification .btn-close'\r\n  );\r\n\r\n  btnOpen.forEach((item) => {\r\n    item.addEventListener('click', (e) => {\r\n      const clickedElement = e.currentTarget;\r\n      const btnBox = clickedElement.parentNode;\r\n      const rightSpecificationBox = clickedElement.parentNode.parentNode;\r\n\r\n      rightSpecificationBox\r\n        .querySelector('.specification-wrapper')\r\n        .classList.add('active');\r\n\r\n      btnBox.querySelector('.btn-open').classList.remove('active');\r\n      btnBox.querySelector('.btn-close').classList.add('active');\r\n    });\r\n  });\r\n\r\n  btnClose.forEach((item) => {\r\n    item.addEventListener('click', (e) => {\r\n      const clickedElement = e.currentTarget;\r\n      const btnBox = clickedElement.parentNode;\r\n      const rightSpecificationBox = clickedElement.parentNode.parentNode;\r\n\r\n      console.log(\r\n        rightSpecificationBox.querySelector('.specification-wrapper')\r\n      );\r\n      rightSpecificationBox\r\n        .querySelector('.specification-wrapper')\r\n        .classList.remove('active');\r\n      btnBox.querySelector('.btn-open').classList.add('active');\r\n      btnBox.querySelector('.btn-close').classList.remove('active');\r\n    });\r\n  });\r\n})();\r\n\r\n// faq 展開 收回\r\n(() => {\r\n  const productSpecification = document.querySelector('.product-specification');\r\n  if (!productSpecification) return;\r\n\r\n  const btnOpen = document.querySelectorAll('.specification-info .btn-open');\r\n  const btnClose = document.querySelectorAll('.specification-info .btn-close');\r\n\r\n  btnOpen.forEach((item) => {\r\n    item.addEventListener('click', (e) => {\r\n      const clickedElement = e.currentTarget;\r\n      const btnBox = clickedElement.parentNode;\r\n      const wrapperEle =\r\n        clickedElement.parentNode.parentNode.parentNode.parentNode.parentNode;\r\n\r\n      wrapperEle.classList.add('active');\r\n\r\n      btnBox.querySelector('.btn-open').classList.remove('active');\r\n      btnBox.querySelector('.btn-close').classList.add('active');\r\n    });\r\n  });\r\n\r\n  btnClose.forEach((item) => {\r\n    item.addEventListener('click', (e) => {\r\n      const clickedElement = e.currentTarget;\r\n      const btnBox = clickedElement.parentNode;\r\n      const wrapperEle =\r\n        clickedElement.parentNode.parentNode.parentNode.parentNode.parentNode;\r\n\r\n      wrapperEle.classList.remove('active');\r\n      btnBox.querySelector('.btn-open').classList.add('active');\r\n      btnBox.querySelector('.btn-close').classList.remove('active');\r\n    });\r\n  });\r\n})();\r\n\r\n// you also like 燈箱\r\n(() => {\r\n  const alsoLike = document.querySelector('.also-like');\r\n  if (!alsoLike) return;\r\n\r\n  // 產品卡\r\n  const productLightBox = document.querySelector('.product-light-box');\r\n  const btnCartOpenLightBox = document.querySelectorAll('.icon-cart-box');\r\n  const btnQuickAddOpenLightBox = document.querySelectorAll('.quick-add-box');\r\n\r\n  // 開啟\r\n  btnQuickAddOpenLightBox.forEach((item) => {\r\n    item.addEventListener('click', () => {\r\n      const dataProductItem = item.getAttribute('data-productItem');\r\n\r\n      if (dataProductItem) {\r\n        productLightBox.classList.add('active');\r\n        document.querySelector(`.${dataProductItem}`)?.classList.add('active');\r\n        document\r\n          .querySelector(`.${dataProductItem}`)\r\n          ?.querySelector('.btn-product')\r\n          .click();\r\n      }\r\n    });\r\n  });\r\n\r\n  btnCartOpenLightBox.forEach((item) => {\r\n    item.addEventListener('click', () => {\r\n      const dataProductItem = item.getAttribute('data-productItem');\r\n\r\n      if (dataProductItem) {\r\n        productLightBox.classList.add('active');\r\n        document.querySelector(`.${dataProductItem}`)?.classList.add('active');\r\n        document\r\n          .querySelector(`.${dataProductItem}`)\r\n          ?.querySelector('.btn-product')\r\n          .click();\r\n      }\r\n    });\r\n  });\r\n\r\n  // 關閉\r\n  const btnCloseLightBox = document.querySelectorAll('.btn-close-light-box');\r\n  const productLightBoxItem = document.querySelectorAll(\r\n    '.product-light-box-item'\r\n  );\r\n\r\n  btnCloseLightBox.forEach((item) => {\r\n    item.addEventListener('click', () => {\r\n      productLightBox.classList.remove('active');\r\n      productLightBoxItem.forEach((item) => {\r\n        item.classList.remove('active');\r\n      });\r\n    });\r\n  });\r\n\r\n  // 自行添加特價標籤\r\n  const onSaleBoxEle = document.querySelectorAll('.on-sale-box');\r\n  const originalEleList = document.querySelectorAll('.model-box .original');\r\n\r\n  originalEleList.forEach((originalEle, index) => {\r\n    const item = onSaleBoxEle[index];\r\n    if (originalEle.textContent.trim().length > 0) {\r\n      item.classList.add('active');\r\n      const saleText = document.createElement('div');\r\n      saleText.classList.add('text');\r\n      saleText.innerText = 'On Sale';\r\n      item.appendChild(saleText);\r\n    }\r\n  });\r\n\r\n  // 燈箱\r\n  const btnOption = document.querySelectorAll(\r\n    '.product-light-box .btn-product'\r\n  );\r\n\r\n  btnOption.forEach((item) => {\r\n    item.addEventListener('click', (e) => {\r\n      const currentEle = e.currentTarget;\r\n      btnOption.forEach((item) => {\r\n        item.classList.remove('active');\r\n      });\r\n\r\n      currentEle.classList.add('active');\r\n\r\n      const dataNormal = currentEle.getAttribute('data-normal');\r\n      const dataOption = currentEle.getAttribute('data-option');\r\n      const dataOriginalCoin =\r\n        currentEle.getAttribute('data-original-coin') || '';\r\n      const dataPriceDifference = currentEle.getAttribute(\r\n        'data-price-difference'\r\n      );\r\n\r\n      const currentParentNode = currentEle.parentNode.parentNode;\r\n      const optionInnerText = currentParentNode.querySelector('.options-inner');\r\n      const originalInnerText = currentParentNode.querySelector('.original');\r\n      const normalCoinInnerText = currentParentNode.querySelector('.normal');\r\n      const priceDifferenceInnerText =\r\n        currentParentNode.querySelector('.price-difference');\r\n\r\n      optionInnerText.innerText = dataOption;\r\n      normalCoinInnerText.innerText = `$ ${dataNormal}`;\r\n\r\n      if (dataOriginalCoin) {\r\n        normalCoinInnerText.classList.add('red');\r\n        originalInnerText.innerText = `$ ${dataOriginalCoin}`;\r\n        priceDifferenceInnerText.classList.remove('active');\r\n        priceDifferenceInnerText.innerText = `Save $ ${dataPriceDifference}`;\r\n      } else {\r\n        normalCoinInnerText.classList.remove('red');\r\n        originalInnerText.innerText = '';\r\n        priceDifferenceInnerText.classList.add('active');\r\n      }\r\n    });\r\n  });\r\n})();\r\n\r\n// YT影片自製撥放鍵\r\n(() => {\r\n  let isPlay = false;\r\n  let myPlayer;\r\n  // import winnerList from \"./list.json\"\r\n\r\n  function YTload() {\r\n    var tag = document.createElement('script');\r\n    tag.src = 'https://www.youtube.com/iframe_api';\r\n    var firstScriptTag = document.getElementsByTagName('script')[0];\r\n    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n  }\r\n\r\n  window.onYouTubeIframeAPIReady = function () {\r\n    const ytPlayer = document.querySelector('#yt-player');\r\n    if (!ytPlayer) {\r\n      return;\r\n    }\r\n\r\n    const YTcode = ytPlayer.getAttribute('data-YTcode');\r\n\r\n    myPlayer = new YT.Player(ytPlayer, {\r\n      height: '100%',\r\n      width: '100%',\r\n      videoId: YTcode,\r\n      playerVars: {\r\n        rel: 0,\r\n        loop: 1,\r\n        playsinline: 1,\r\n        modestbranding: 1,\r\n        iv_load_policy: 3,\r\n      },\r\n      events: {\r\n        onReady: onPlayerReady,\r\n        onStateChange: onPlayerStateChange,\r\n      },\r\n    });\r\n  };\r\n\r\n  function onPlayerReady(event) {\r\n    // event.target.mute()\r\n    // event.target.playVideo()\r\n  }\r\n\r\n  function onPlayerStateChange(event) {\r\n    if (event.data == YT.PlayerState.PLAYING) {\r\n      isPlay = true;\r\n    } else {\r\n      isPlay = false;\r\n    }\r\n  }\r\n\r\n  YTload();\r\n\r\n  const btnYtPlayer = document.querySelector('.btn-yt-player');\r\n  const textBox = document.querySelector('.yt-video-inner-box');\r\n\r\n  if (!btnYtPlayer) {\r\n    return;\r\n  }\r\n\r\n  btnYtPlayer.addEventListener('click', () => {\r\n    textBox.classList.remove('active');\r\n    myPlayer.playVideo();\r\n  });\r\n})();\r\n\r\n// // immersion-cooling-kit-c6 圖片捲動\r\n(() => {\r\n  const section = document.querySelector('.images-with-text-scrolling');\r\n  if (!section) return;\r\n\r\n  const imageBox = section.querySelector('.image-box');\r\n\r\n  imageBox.innerHTML = '';\r\n  section.querySelectorAll('.card .image img').forEach((img) => {\r\n    imageBox.appendChild(img.cloneNode(true));\r\n  });\r\n\r\n  window.addEventListener('scroll', onScroll);\r\n  onScroll();\r\n\r\n  function onScroll() {\r\n    const imgHeight = imageBox.clientHeight;\r\n    const cards = section.querySelectorAll('.card');\r\n\r\n    for (let i = 1; i <= cards.length; i++) {\r\n      if (cards[i - 1].getBoundingClientRect().top < 120 + imgHeight) {\r\n        imageBox.classList.add(`mode-${i}`);\r\n      } else {\r\n        imageBox.classList.remove(`mode-${i}`);\r\n      }\r\n    }\r\n  }\r\n})();\r\n\r\n// slide-image-box\r\n(() => {\r\n  const slideImageBox = document.querySelectorAll('.slide-image-box');\r\n  if (!slideImageBox) {\r\n    return;\r\n  }\r\n\r\n  slideImageBox.forEach((elBox) => {\r\n    const elBar = elBox.querySelector('.slide-image-box__bar');\r\n    const elTop = elBox.querySelector('.slide-image-box__top');\r\n    let isDown = false;\r\n\r\n    elBar.addEventListener('mousedown', (e) => {\r\n      isDown = true;\r\n      elBar.classList.add('active');\r\n    });\r\n\r\n    document.addEventListener('mouseup', (e) => {\r\n      isDown = false;\r\n      elBar.classList.remove('active');\r\n    });\r\n\r\n    document.addEventListener('mousemove', (e) => {\r\n      if (!isDown) {\r\n        return;\r\n      }\r\n\r\n      const boxWidth = elBox.offsetWidth;\r\n      const mouseX = e.pageX - elBox.offsetLeft;\r\n      const percent = mouseX / boxWidth;\r\n      const limitPercent = Math.min(Math.max(percent, 0), 1);\r\n\r\n      elBar.style.left = limitPercent * 100 + '%';\r\n      elTop.style.width = limitPercent * 100 + '%';\r\n    });\r\n  });\r\n})();\r\n\r\n// num-ani\r\n(() => {\r\n  const numAni = document.querySelectorAll('.num-ani');\r\n\r\n  numAni.forEach((item) => {\r\n    const startNum = Number(item.getAttribute('data-start')) || 0;\r\n    const endNum = Number(item.getAttribute('data-end')) || 0;\r\n    const times = Number(item.getAttribute('data-times')) || 80;\r\n    const fraction = Number(item.getAttribute('data-fraction')) || 0;\r\n\r\n    item.textContent = startNum;\r\n    const step = (endNum - startNum) / times;\r\n\r\n    let num = startNum;\r\n    window.addEventListener('scroll', scrollFn);\r\n    function scrollFn() {\r\n      const scrollY = window.scrollY;\r\n      const windowHeight = window.innerHeight;\r\n      const itemTop = item.offsetTop;\r\n      const itemHeight = item.offsetHeight;\r\n      const itemBottom = itemTop + itemHeight;\r\n      if (scrollY + windowHeight >= itemTop && scrollY <= itemBottom) {\r\n        requestAnimationFrame(stepFn);\r\n        window.removeEventListener('scroll', scrollFn);\r\n      }\r\n    }\r\n\r\n    function stepFn() {\r\n      num += step;\r\n      item.textContent = num.toFixed(fraction);\r\n      if (num < endNum) {\r\n        requestAnimationFrame(stepFn);\r\n      } else {\r\n        item.textContent = endNum.toFixed(fraction);\r\n      }\r\n    }\r\n  });\r\n})();\r\n"]}