{"version":3,"sources":["20231017_3in1MixAndMatch_functions.js"],"names":["window","location","href","indexOf","openJacketConfigurator","addEventListener","$","animate","scrollTop","offset","top","document","querySelectorAll","forEach","el","vid","getElementById","loadVideo","sm","matchMedia","md","lg","xl","changeVideoSize","matches","size","videoSource","attr","autoplay","load","contains","onresize","onloadeddata","classList","add","elements","check","entries","map","entry","isIntersecting","target","observer","unobserve","IntersectionObserver","sliderLayers","elem","observe","Swiper","spaceBetween","effect","fadeEffect","crossFade","speed","loop","noSwipingClass","tl","gsap","registerPlugin","ScrollTrigger","timeline","paused","defaults","ease","Linear","easeNone","scrollTrigger","trigger","scrub","pin","pinSpacing","start","end","innerHeight","invalidateOnRefresh","configBannerTL","to","duration","call","slideTo","sepBannerTL","fromTo","y","once","videos","from","scale","config","rootMargin","threshold","callbackVids","play","console","log","pause","observerVids"],"mappings":"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","file":"20231017_3in1MixAndMatch_functions.min.js","sourcesContent":["// OPEN CONFIGURATOR\r\n// RESPONSIVE VIDEO!\r\n// 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// LAYERS (SWIPER JS + GSAP)\r\n// PAUSE OUT-OF-VIEW VIDEO\r\n// PRODUCT PICKER\r\n// NEWSLETTER PICKER\r\n\r\n\r\n//\r\n// =OPEN CONFIGURATOR\r\n// --------------------------------------------------\r\n\r\nif (window.location.href.indexOf('#openConfigurator') > -1) {\r\n  window.openJacketConfigurator();\r\n}\r\n\r\nwindow.addEventListener('load', () => {\r\n  if (window.location.href.indexOf('#openConfigurator') > -1) {\r\n    $(\"html, body\").animate({scrollTop: $('#openConfigurator').offset().top }, 900);\r\n  }\r\n});\r\n\r\ndocument.querySelectorAll('.msdw-open-configurator-btn').forEach(el => {\r\n  el.addEventListener('click', () => window.openJacketConfigurator())\r\n});\r\n\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) { changeVideoSize('sm') }\r\n  else if (md.matches) { changeVideoSize('md') }\r\n  else if (lg.matches) { changeVideoSize('lg') }\r\n  else if (xl.matches) { changeVideoSize('xl') }\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// window.addEventListener('resize', () => vid.attr('hidden' = true));\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\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//\r\n// =LAYERS (SWIPER JS + GSAP)\r\n// --------------------------------------------------\r\n\r\n// window.addEventListener('DOMContentLoaded', () => {\r\n  const sliderLayers = new Swiper(\"#sliderLayers\", {\r\n    spaceBetween: 0,\r\n    effect: \"fade\",\r\n    fadeEffect: { crossFade: true },\r\n    speed: 50,\r\n    loop: false,\r\n    noSwipingClass: \"no-swipe\",\r\n  });\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  const tl = gsap.timeline({\r\n    paused: true,\r\n    defaults: {\r\n      ease: Linear.easeNone,\r\n    },\r\n    scrollTrigger: {\r\n      trigger: \".msdw-section-layers\",\r\n      scrub: 0.5,\r\n      pin: true,\r\n      pinSpacing: true,\r\n      start: \"top top\",\r\n      // end: \"+=333%\",\r\n      end: window.innerHeight * 3,\r\n      invalidateOnRefresh: true,\r\n    },\r\n  });\r\n\r\n  tl.to({}, {duration: 3});\r\n  tl.call(() => sliderLayers.slideTo(0));\r\n  tl.to({}, {duration: 3});\r\n  tl.call(() => sliderLayers.slideTo(1));\r\n  tl.to({}, {duration: 3});\r\n  tl.call(() => sliderLayers.slideTo(2));\r\n  tl.to({}, {duration: 3});\r\n\r\n  const configBannerTL = gsap.timeline({\r\n    scrollTrigger: {\r\n      trigger: '.msdw-configurator-banner',\r\n      start: 'top bottom',\r\n      end: 'bottom top',\r\n      scrub: 1,\r\n    }\r\n  });\r\n\r\n  configBannerTL.fromTo('.msdw-configurator-banner', { y: \"-10%\" }, { y: \"10%\" });\r\n\r\n  const sepBannerTL = gsap.timeline({\r\n    scrollTrigger: {\r\n      trigger: '.msdw-zoom-in-anim',\r\n      start: 'top 85%',\r\n      once: true,\r\n    }\r\n  });\r\n\r\n  sepBannerTL.from('.msdw-zoom-in-anim', 1, { scale: 1.2 });\r\n// });\r\n\r\n\r\n//\r\n// =PAUSE OUT-OF-VIEW VIDEO\r\n// --------------------------------------------------\r\n\r\nconst videos = document.querySelectorAll(\"video\");\r\n\r\nconst config = {\r\n  rootMargin: '-100px 0px',\r\n  threshold: 0\r\n}\r\n\r\nconst callbackVids = (entries) => {\r\n  entries.forEach((entry) => {\r\n    if (!entry.isIntersecting) {\r\n      entry.target.pause();\r\n      console.log('Exit video');\r\n    } else {\r\n      entry.target.play();\r\n      console.log('Enter video');\r\n    }\r\n  });\r\n}\r\n\r\nconst observerVids = new IntersectionObserver(callbackVids, config);\r\n\r\nvideos.forEach( vid => observerVids.observe(vid) );\r\n\r\n\r\n\r\n//\r\n// =PRODUCT PICKER\r\n// --------------------------------------------------\r\n\r\n// const productPickers = document.querySelectorAll('.msdw-product-detail-picker');\r\n\r\n// productPickers.forEach(productPicker => {\r\n//   const productIdNumber = productPicker.dataset.productId;\r\n//   productPicker.addEventListener('click', (e) => {\r\n//     e.preventDefault();\r\n//     window.jwsdwMediator.publish('openPicker', 'productDetailPicker', {\r\n//       'productId': productIdNumber\r\n//     });\r\n//   });\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"]}