{"version":3,"sources":["20231124JackWolfskinFamilyPage_functions.js"],"names":["vid","document","getElementById","loadVideo","sm","window","matchMedia","md","lg","xl","addEventListener","changeVideoSize","matches","size","videoSource","$","attr","autoplay","load","console","log","contains","onresize","onloadeddata","classList","add","elements","querySelectorAll","check","entries","map","entry","isIntersecting","target","observer","unobserve","IntersectionObserver","forEach","elem","observe","playVideoBtns","msdwPopupVideoWrapper","querySelector","msdwPopupVideoBackDrop","msdwPopupVideo","playVideoBtn","e","preventDefault","videoUrl","getAttribute","setAttribute","body","muted","play","closePopUpVideo","remove","pause","currentTime","onkeydown","keyCode","scaleAmount","scrollZoom","images","observerConfig","rootMargin","threshold","percentageSeen","element","parent","parentNode","viewportHeight","innerHeight","scrollY","elPosY","getBoundingClientRect","top","borderHeight","parseFloat","getComputedStyle","getPropertyValue","elHeight","offsetHeight","percentage","Math","round","image","isVisible","self","style","transform","pageYOffset","subVideo"],"mappings":"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","file":"20231124JackWolfskinFamilyPage_functions.min.js","sourcesContent":["// TOUCH OR NO-TOUCH, THAT IS THE QUESTION!\r\n// SCROLL-TO ANIMATION FOR ANCHOR LINKS\r\n// FADE-IN-UP ELEMENTS ON SCROLL\r\n// SLIDER (SWIPER JS)\r\n// SLIDER (SLICK JS)\r\n// PRODUCT PICKER\r\n// NEWSLETTER PICKER\r\n\r\n\r\n\r\n//\r\n// =TOUCH OR NO-TOUCH, THAT IS THE QUESTION!\r\n// --------------------------------------------------\r\n\r\n// function isTouchDevice() {\r\n//   return true == (\"ontouchstart\" in window || window.DocumentTouch && document instanceof DocumentTouch);\r\n// }\r\n// if (isTouchDevice() === true) {\r\n//   $(\"body\").toggleClass(\"touch\");\r\n// } else {\r\n//   $(\"body\").toggleClass(\"no-touch\");\r\n// }\r\n\r\n\r\n//\r\n// =SCROLL-TO ANIMATION FOR ANCHOR LINKS\r\n// --------------------------------------------------\r\n\r\n// $('.msdw-page-scroll').click(function() {\r\n//   if (location.pathname.replace(/^\\//,'') == this.pathname.replace(/^\\//,'') && location.hostname == this.hostname) {\r\n//     var target = $(this.hash);\r\n//     target = target.length ? target : $('[name=' + this.hash.slice(1) +']');\r\n//     if (target.length) {\r\n//       var offsetValue = 0;\r\n//       if ( window.innerWidth <= 767 ) {\r\n//         offsetValue;\r\n//         // console.log(offsetValue);\r\n//       } else {\r\n//         offsetValue = 59;\r\n//         // console.log(offsetValue);\r\n//       }\r\n\r\n//       $('html,body').animate({\r\n//         scrollTop: target.offset().top - offsetValue\r\n//       }, 900);\r\n//       return false;\r\n//     }\r\n//   }\r\n// });\r\n\r\n\r\n//\r\n// =FADE-IN-UP ELEMENTS ON SCROLL\r\n// --------------------------------------------------\r\n\r\n// function showOnScroll() {\r\n//   const elAnim = document.querySelectorAll('.msdw-animate');\r\n\r\n//   for (let i = 0; i < elAnim.length; i++) {\r\n//     const elAnims = elAnim[i]\r\n\r\n//     const elPosition = elAnims.getBoundingClientRect().top\r\n//     const elScreen = window.innerHeight / 1.1\r\n\r\n//     if (elPosition < elScreen){\r\n//       elAnims.classList.add('msdw-animated')\r\n//     }\r\n//   }\r\n// }\r\n\r\n// window.addEventListener('load', showOnScroll)\r\n// window.addEventListener('scroll', showOnScroll)\r\n\r\n\r\n//\r\n// =SLIDER (SWIPER JS)\r\n// --------------------------------------------------\r\n\r\n// var swiper = new Swiper('.swiper-container', {\r\n//   slidesPerView: 1,\r\n//   loop: true,\r\n//   navigation: {\r\n//     nextEl: '.swiper-button-next',\r\n//     prevEl: '.swiper-button-prev',\r\n//   },\r\n// });\r\n\r\n\r\n//\r\n// =SLIDER (SLICK JS)\r\n// --------------------------------------------------\r\n\r\n// $('.msdw-slider-jacket').slick({\r\n//   slidesToShow: 1,\r\n//   slidesToScroll: 1,\r\n//   swipe: false,\r\n//   arrows: false,\r\n//   swipeToSlide: true,   // in case, 2 or more slides at a time\r\n//   autoplay: true,       // if autoplay...\r\n//   accessibility: false  // use this to avoid page jumping bug\r\n// });\r\n\r\n// $('.slick-prev').click(function() {\r\n//   $('.msdw-slider-jacket').slick('slickPrev');\r\n// });\r\n//\r\n// $('.slick-next').click(function() {\r\n//   $('.msdw-slider-jacket').slick('slickNext');\r\n// });\r\n\r\n// UNSLICK\r\n// If needed, here's a fix for window resizing\r\n// $(window).on('orientationchange resize', function() {\r\n//   $('.msdw-slider-jacket').slick('resize');\r\n// });\r\n\r\n\r\n//\r\n// =PRODUCT PICKER\r\n// --------------------------------------------------\r\n\r\n// $(\".product-detail-picker\").click(function(e){\r\n//   e.preventDefault();\r\n//   var productIdNumber = $(this).attr('data-product-id');\r\n//   window.jwsdwMediator.publish('openPicker', 'productDetailPicker', {'productId': productIdNumber});\r\n// });\r\n\r\n\r\n//\r\n// =NEWSLETTER PICKER\r\n// --------------------------------------------------\r\n\r\n// var campaignId = 'familyAndFriends',\r\n//     pickerTag = document.getElementById(\"openPicker\"),\r\n//     newsletterConfig = {},\r\n//     baseUrl = jwsdwSettings.baseUrl;\r\n\r\n// $.ajax({\r\n//   type: 'GET',\r\n//   url: baseUrl + '/Newsletter-getNewsletterConfig',\r\n//   data: {\r\n//     campaignId: campaignId\r\n//   },\r\n//   success: function(response) {\r\n//     newsletterConfig = response\r\n//   },\r\n//   error: function(response) {\r\n//     jwsdwApi.popup.showHttpError(response.status)\r\n//   }\r\n// });\r\n\r\n// pickerTag.addEventListener(\"click\", function(){\r\n//   window.jwsdwMediator.publish('openPicker', 'newsletterSignupPicker', {\r\n//     \"campaign\": newsletterConfig.id,\r\n//     \"introduction\": newsletterConfig.introduction,\r\n//     \"disclaimerOne\": newsletterConfig.disclaimerOne,\r\n//     \"disclaimerTwo\": newsletterConfig.disclaimerTwo\r\n//   });\r\n// });\r\n\r\n\r\n// if ( window.jwsdwSettings.countryCode === \"INT\" ) {\r\n//     window.location.replace( '/contentnotfound' );\r\n// }\r\n\r\n\r\n// FADE-IN-UP ELEMENTS ON SCROLL\r\n// VIDEO POP-UP\r\n\r\n//\r\n// =RESPONSIVE VIDEO!\r\n// --------------------------------------------------\r\n\r\nconst vid = document.getElementById(\"msdw-video-responsive\");\r\n\r\nfunction loadVideo() {\r\n  var sm = window.matchMedia(\"(min-width: 0px) and (max-width: 599px)\"), // Standard def (mp4, 640x360)\r\n    md = window.matchMedia(\"(min-width: 600px) and (max-width: 899px)\"), // Standard def (mp4, 960x540)\r\n    lg = window.matchMedia(\"(min-width: 900px) and (max-width: 1199px)\"), // High def (mp4, 1280x720)\r\n    xl = window.matchMedia(\"(min-width: 1200px) and (max-width: 99999px)\"); // High def 1080 (mp4, 1920x1080)\r\n\r\n  sm.addEventListener(\"change\", changeVideoSize);\r\n  md.addEventListener(\"change\", changeVideoSize);\r\n  lg.addEventListener(\"change\", changeVideoSize);\r\n  xl.addEventListener(\"change\", changeVideoSize);\r\n\r\n  if (sm.matches) {\r\n    changeVideoSize(\"sm\");\r\n  } else if (md.matches) {\r\n    changeVideoSize(\"md\");\r\n  } else if (lg.matches) {\r\n    changeVideoSize(\"lg\");\r\n  } else if (xl.matches) {\r\n    changeVideoSize(\"xl\");\r\n  }\r\n}\r\n\r\nfunction changeVideoSize(size) {\r\n  const videoSource = $(\"#msdw-video-responsive source\");\r\n  videoSource.attr(\"src\", videoSource.attr(\"data-video-\" + size));\r\n  vid.autoplay = true;\r\n  vid.load();\r\n  console.log(videoSource.attr(\"src\"));\r\n}\r\n\r\nif (document.contains(vid)) {\r\n  document.addEventListener(\"DOMContentLoaded\", loadVideo);\r\n  window.onresize = loadVideo;\r\n  vid.onloadeddata = () => vid.classList.add(\"msdw-video-loaded\");\r\n}\r\n\r\n\r\n//\r\n// =FADE-IN-UP ELEMENTS ON SCROLL\r\n// --------------------------------------------------\r\n\r\nconst elements = document.querySelectorAll(\".msdw-animate\");\r\n\r\nfunction check(entries) {\r\n  entries.map((entry) => {\r\n    if (entry.isIntersecting) {\r\n      entry.target.classList.add(\"msdw-animated\");\r\n      observer.unobserve(entry.target);\r\n    }\r\n  });\r\n}\r\n\r\nconst observer = new IntersectionObserver(check);\r\n\r\nelements.forEach((elem) => observer.observe(elem));\r\n\r\n//\r\n// =VIDEO POP-UP\r\n// --------------------------------------------------\r\n\r\nconst playVideoBtns = document.querySelectorAll(\".msdw-play-video\");\r\nconst msdwPopupVideoWrapper = document.querySelector(\r\n  \".msdw-popup-video-wrapper\"\r\n);\r\nconst msdwPopupVideoBackDrop = document.querySelector(\r\n  \".msdw-popup-video-backdrop\"\r\n);\r\nconst msdwPopupVideo = document.getElementById(\"msdwPopupVideo\");\r\n\r\nif (document.contains(msdwPopupVideoWrapper)) {\r\n  // OPEN\r\n  playVideoBtns.forEach((playVideoBtn) => {\r\n    playVideoBtn.addEventListener(\"click\", (e) => {\r\n      e.preventDefault();\r\n      const videoUrl = playVideoBtn.getAttribute(\"data-modal-video\");\r\n      msdwPopupVideo.setAttribute(\"src\", videoUrl);\r\n      msdwPopupVideoWrapper.classList.add(\"msdw-active\");\r\n      document.body.classList.add(\"jws-overflowHidden\");\r\n      msdwPopupVideo.muted = false;\r\n      msdwPopupVideo.play();\r\n    });\r\n  });\r\n\r\n  // CLOSE\r\n  const closePopUpVideo = () => {\r\n    document.body.classList.remove(\"jws-overflowHidden\");\r\n    msdwPopupVideo.muted = true;\r\n    msdwPopupVideo.pause();\r\n    msdwPopupVideo.currentTime = 0;\r\n\r\n    msdwPopupVideoWrapper.classList.remove(\"msdw-active\");\r\n  };\r\n\r\n  msdwPopupVideoBackDrop.addEventListener(\"click\", () => {\r\n    closePopUpVideo();\r\n  });\r\n\r\n  window.onkeydown = (e) => {\r\n    if (e.keyCode == 27) closePopUpVideo();\r\n  };\r\n}\r\n\r\n//\r\n// =SUB PAGE: ZOOM IN HEADER\r\n// --------------------------------------------------\r\n\r\n// Higher number = more zoom\r\nlet scaleAmount = 0.5;\r\n\r\nfunction scrollZoom() {\r\n  const images = document.querySelectorAll(\"[data-scroll-zoom]\");\r\n  let scrollPosY = 0;\r\n  scaleAmount = scaleAmount / 100;\r\n  const observerConfig = {\r\n    rootMargin: \"0% 0% 0% 0%\",\r\n    threshold: 0,\r\n  };\r\n  // Create separate IntersectionObservers and scroll event listeners for each image so that we can individually apply the scale only if the image is visible\r\n  if (images) {\r\n    images.forEach((image) => {\r\n      let isVisible = false;\r\n      const observer = new IntersectionObserver((elements, self) => {\r\n        elements.forEach((element) => {\r\n          isVisible = element.isIntersecting;\r\n        });\r\n      }, observerConfig);\r\n\r\n      observer.observe(image);\r\n\r\n      // Set initial image scale on page load\r\n      image.style.transform = `scale(${\r\n        1 + scaleAmount * percentageSeen(image)\r\n      })`;\r\n\r\n      // Only fires if IntersectionObserver is intersecting\r\n      window.addEventListener(\"scroll\", () => {\r\n        if (isVisible) {\r\n          scrollPosY = window.pageYOffset;\r\n          image.style.transform = `scale(${\r\n            1 + scaleAmount * percentageSeen(image)\r\n          })`;\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  // Calculates the \"percentage seen\" based on when the image first enters the screen until the moment it leaves\r\n  // Here, we get the parent node position/height instead of the image since it's in a container that has a border, but\r\n  // if your container has no extra height, you can simply get the image position/height\r\n  function percentageSeen(element) {\r\n    const parent = element.parentNode;\r\n    const viewportHeight = window.innerHeight;\r\n    const scrollY = window.scrollY;\r\n    const elPosY = parent.getBoundingClientRect().top + scrollY;\r\n    const borderHeight =\r\n      parseFloat(\r\n        getComputedStyle(parent).getPropertyValue(\"border-bottom-width\")\r\n      ) +\r\n      parseFloat(\r\n        getComputedStyle(element).getPropertyValue(\"border-top-width\")\r\n      );\r\n    const elHeight = parent.offsetHeight + borderHeight;\r\n\r\n    if (elPosY > scrollY + viewportHeight) {\r\n      // If we haven't reached the image yet\r\n      return 0;\r\n    } else if (elPosY + elHeight < scrollY) {\r\n      // If we've completely scrolled past the image\r\n      return 100;\r\n    } else {\r\n      // When the image is in the viewport\r\n      const distance = scrollY + viewportHeight - elPosY;\r\n      let percentage = distance / ((viewportHeight + elHeight) / 100);\r\n      percentage = Math.round(percentage);\r\n\r\n      return percentage;\r\n    }\r\n  }\r\n}\r\n\r\nscrollZoom();\r\n\r\n//\r\n// =SUB PAGE: NO VIDEO AUTOPLAY\r\n// --------------------------------------------------\r\n\r\nconst subVideo = document.querySelector(\r\n  \".msdw-sub-page #msdw-video-responsive\"\r\n);\r\n\r\nwindow.addEventListener(\"DOMContentLoaded\", () => {\r\n  if (subVideo) {\r\n    subVideo.autoplay = false;\r\n  }\r\n});\r\n"]}