{"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"]}