/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modal */ \"./src/modal.js\");\n/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! throttle-debounce */ \"../../../../../../node_modules/throttle-debounce/esm/index.js\");\n\n\n\nclass SponsoredPost {\n constructor() {\n if (document.querySelector(\".sponsoredPost\")) {\n this.SponsoredPost()\n }\n }\n\n SponsoredPost() {\n gsap.registerPlugin(ScrollTrigger)\n\n this.animations = new SponsoredPostAnimations()\n this.animations.introBars()\n this.animations.stickyHeader()\n this.animations.title()\n\n this.ytModal = null\n this.ytModalVideo = null\n\n this.zoomGallery = new SponsoredZoomGallery()\n\n this.loadYoutube()\n this.initBlocks()\n this.waitForImages()\n }\n\n loadYoutube() {\n var tag = document.createElement(\"script\")\n tag.src = \"https://www.youtube.com/player_api\"\n\n var firstScriptTag = document.getElementsByTagName(\"script\")[0]\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)\n }\n\n initBlocks() {\n document.querySelectorAll(\".sponsoredContentBlock\").forEach((block) => {\n const type = block.getAttribute(\"data-type\")\n if (typeof this[`init${type}`] === \"function\") {\n this[`init${type}`](block)\n }\n })\n }\n\n waitForImages() {\n imagesLoaded(document.querySelector(\".sponsoredPost\"), () => {\n window.dispatchEvent(new Event(\"resize\"))\n console.log(\"updated 1000\")\n })\n }\n\n initProductSlider(el) {\n const elId = el.getAttribute(\"data-id\")\n const elSwiper = el.querySelector(\".swiper-container\")\n\n const swiper = new Swiper(elSwiper, {\n navigation: {\n nextEl: `.swiper-button-next--${elId}`,\n prevEl: `.swiper-button-prev--${elId}`,\n },\n centeredSlides: true,\n slidesPerView: 1,\n spaceBetween: 0,\n breakpoints: {\n 736: {\n slidesPerView: 2.75,\n spaceBetween: 20,\n },\n },\n })\n\n const fnc = () => {\n const status = `${swiper.activeIndex + 1}/${swiper.slides.length}`\n el.querySelector(\".sponsoredProductSlider__controlsStatus\").innerHTML =\n status\n }\n\n swiper.on(\"slideChange\", fnc)\n fnc()\n }\n\n initYoutubeEmbed(el) {\n el.querySelector(\".sponsoredYoutubeEmbed__content\").addEventListener(\n \"click\",\n () => {\n this.getVideoModal(el.getAttribute(\"data-youtube-id\"))\n }\n )\n }\n\n initEmailSignup(el) {\n const cta = el.querySelector(\".sponsoredEmailSignup__cta\")\n const input = el.querySelector(\".sponsoredEmailSignup__input\")\n\n cta.addEventListener(\"click\", (event) => {\n event.preventDefault()\n\n if (this.checkEmail(input.value)) {\n input.parentNode.classList.remove(\"error\")\n this.submitEmail(el)\n } else {\n input.parentNode.classList.add(\"error\")\n }\n\n el.classList.remove(\"response\")\n })\n }\n\n checkEmail(email) {\n const x = email\n const atpos = x.indexOf(\"@\")\n const dotpos = x.lastIndexOf(\".\")\n if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {\n return false\n }\n\n return true\n }\n\n async submitEmail(el) {\n const input = el.querySelector(\".sponsoredEmailSignup__input\")\n const msgEl = el.querySelector(\".sponsoredEmailSignup__message\")\n\n try {\n const formData = new FormData()\n formData.append(\"action\", \"add_sponsored_signup_func\")\n formData.append(\"email\", input.value)\n formData.append(\n \"sponsor_id\",\n parseInt(el.getAttribute(\"data-sponsor-id\"))\n )\n\n const rData = await fetch(main_wp.ajax_url, {\n method: \"POST\",\n credentials: \"same-origin\",\n body: formData,\n })\n const response = await rData.json()\n\n if (response.success) {\n msgEl.innerHTML = \"Thanks for signing up!\"\n msgEl.classList.remove(\"error\")\n input.value = \"\"\n } else {\n msgEl.innerHTML = response.reason\n msgEl.classList.add(\"error\")\n }\n el.classList.add(\"response\")\n } catch (err) {\n console.log(err)\n el.classList.remove(\"response\")\n }\n }\n\n getVideoModal(id) {\n let markup = `\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t`\n\n this.ytModal = new _modal__WEBPACK_IMPORTED_MODULE_0__.default(markup, \"black\", () => {\n this.initVideoModal(id)\n })\n\n document\n .querySelector(\".sponsoredYoutubeModal__close\")\n .addEventListener(\"click\", () => {\n this.ytModal.closeModal()\n })\n\n this.ytModal.addBgClose()\n }\n\n initVideoModal(id) {\n new YT.Player(\"sponsoredYoutubeModal__yt\", {\n videoId: id,\n width: 800,\n height: 400,\n events: {\n onReady: (event) => {\n this.ytModalVideo = event.target\n event.target.playVideo()\n },\n },\n })\n }\n\n initGallery(el) {\n const elId = el.getAttribute(\"data-id\")\n const elSwiper = el.querySelector(\".swiper-container\")\n\n new Swiper(elSwiper, {\n navigation: {\n nextEl: `.swiper-button-next--${elId}`,\n prevEl: `.swiper-button-prev--${elId}`,\n },\n slidesPerView: 1,\n spaceBetween: 0,\n pagination: {\n el: `.swiper-pagination--${elId}`,\n },\n })\n }\n\n initFullWidthVideo(el) {\n const video = el.querySelector(\".sponsoredFullWidthVideo__video\")\n const source = document.createElement(\"source\")\n\n source.setAttribute(\"src\", video.getAttribute(\"data-src\"))\n source.setAttribute(\"type\", \"video/mp4\")\n\n video.appendChild(source)\n\n var obs = new IntersectionObserver(\n function (entries) {\n const elTarget = entries[0].target\n\n if (entries[0].isIntersecting === true) {\n if (!elTarget.classList.contains(\"playing\")) {\n const v = elTarget.querySelector(\".sponsoredFullWidthVideo__video\")\n v.play()\n elTarget.classList.add(\"playing\")\n }\n } else {\n if (elTarget.classList.contains(\"playing\")) {\n const v = elTarget.querySelector(\".sponsoredFullWidthVideo__video\")\n v.pause()\n elTarget.classList.remove(\"playing\")\n }\n }\n },\n { threshold: [0.2] }\n )\n obs.observe(el)\n }\n\n initRecapGallery(el) {\n el.querySelectorAll(\"a\").forEach((a) => {\n a.addEventListener(\"click\", (event) => {\n event.preventDefault()\n\n this.zoomGallery.init(\n a.getAttribute(\"data-index\"),\n window[`sponsoredRecapGallery_${el.getAttribute(\"data-id\")}`]\n )\n })\n })\n }\n}\n\nclass SponsoredPostAnimations {\n constructor() {\n this.animDuration = 0.8\n this.animEase = \"circ.out\"\n this.isMobile = window.innerWidth <= 736\n this.generalStart = this.isMobile ? \"top 80%\" : \"top 70%;\"\n\n this.initScrolljack()\n }\n\n getNodeindex(el) {\n return [...el.parentNode.children].indexOf(el)\n }\n\n initScrolljack() {\n this.blockScroll = false\n this.scrolljackedEl = null\n this.scrollDir = null\n this.scrollDirPriorToLock = null\n this.scrollBusy = false\n this.pinnedSwipers = []\n this.touchStart = null\n this.waitingForLockedPosition = false\n\n const throttledWheelFunc = (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_1__.throttle)(1250, true, (event) => {\n if (this.blockScroll) {\n this.scrollDir = event.deltaY >= 1 ? 1 : -1\n event.preventDefault()\n this.scrollPinnedPanel()\n return\n } else {\n this.scrollBusy = false\n this.scrollDirPriorToLock = event.deltaY >= 1 ? 1 : -1\n if (this.scrolljackedEl) {\n if (this.scrollDirPriorToLock == -1) {\n console.log(this.scrolljackedEl)\n this.scrolljackedEl\n .querySelector(\".sponsoredPinnedPanels__skipCta .fas\")\n .classList.remove(\"fa-angle-down\")\n this.scrolljackedEl\n .querySelector(\".sponsoredPinnedPanels__skipCta .fas\")\n .classList.add(\"fa-angle-up\")\n } else {\n this.scrolljackedEl\n .querySelector(\".sponsoredPinnedPanels__skipCta .fas\")\n .classList.add(\"fa-angle-down\")\n this.scrolljackedEl\n .querySelector(\".sponsoredPinnedPanels__skipCta .fas\")\n .classList.remove(\"fa-angle-up\")\n }\n }\n }\n })\n\n document.addEventListener(\"wheel\", throttledWheelFunc, { passive: false })\n\n document.addEventListener(\"touchstart\", (event) => {\n this.touchStart = event.changedTouches[0].clientY\n })\n\n document.addEventListener(\"touchend\", (event) => {\n let touchEnd = event.changedTouches[0].clientY\n if (this.touchStart > touchEnd) {\n this.scrollDir = 1\n } else {\n this.scrollDir = -1\n }\n\n if (this.blockScroll) {\n this.scrollPinnedPanel()\n } else {\n this.scrollDirPriorToLock = this.scrollDir\n }\n })\n\n // -- tmp scroll block thingy\n document.ontouchmove = function (e) {\n e.preventDefault()\n }\n setTimeout(() => {\n document.ontouchmove = function (e) {\n e.preventDefault()\n }\n }, 500)\n setTimeout(() => {\n document.ontouchmove = function (e) {\n return true\n }\n }, 550)\n }\n\n introBars() {\n let delay = 0\n document.querySelectorAll(\".sponsoredIntroBars div\").forEach((el) => {\n gsap.to(el, {\n height: \"100%\",\n opacity: 1,\n duration: 0.45,\n delay,\n })\n\n delay += 0.15\n })\n\n setTimeout(() => {\n this.header()\n }, 300)\n\n setTimeout(() => {\n this.blocks()\n }, delay * 1000)\n }\n\n stickyHeader() {\n const el = document.querySelector(\".sponsoredStickyHeader\")\n const h =\n document.querySelector(\".sponsoredTitle\").clientHeight +\n document.querySelector(\".sponsoredHeader\").clientHeight\n\n gsap.fromTo(\n el,\n {\n translateY: \"-100%\",\n },\n {\n translateY: 0,\n ease: this.animEase,\n duration: this.animDuration,\n scrollTrigger: {\n trigger: document.querySelector(\".sponsoredPost\"),\n start: `top ${h * -1}`,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n header() {\n gsap.fromTo(\n \".sponsoredHeader__content\",\n {\n alpha: 0,\n top: 30,\n },\n {\n alpha: 1,\n top: 0,\n duration: 0.45,\n }\n )\n\n ScrollTrigger.create({\n trigger: \".sponsoredPost\",\n start: \"top top\",\n end: \"bottom bottom\",\n pin: \".sponsoredHeader\",\n pinSpacing: false,\n })\n }\n\n title() {\n const h =\n document.querySelector(\".sponsoredTitle\").clientHeight +\n document.querySelector(\".sponsoredHeader\").clientHeight\n\n ScrollTrigger.create({\n trigger: \".sponsoredPost\",\n start: \"top top\",\n end: \"bottom bottom\",\n pin: \".sponsoredTitle\",\n pinSpacing: false,\n })\n\n gsap.to(\".sponsoredTitle\", {\n alpha: 0,\n scrollTrigger: {\n trigger: \".sponsoredPost\",\n start: \"top top\",\n end: `100 ${h * -1}`,\n scrub: true,\n },\n })\n\n gsap.to(\".sponsoredHeader\", {\n alpha: 0,\n scrollTrigger: {\n trigger: \".sponsoredPost\",\n start: \"top top\",\n end: `100 ${h * -1}`,\n scrub: true,\n },\n })\n }\n\n blocks() {\n document.querySelectorAll(\".sponsoredContentBlock\").forEach((block) => {\n const type = block.getAttribute(\"data-type\")\n this[`anim${type}`](\n block,\n block.getAttribute(\"data-animated\") == \"true\" ? true : false\n )\n })\n }\n\n animGeneralText(el, animated) {\n if (!animated) {\n el.querySelectorAll(\"p\").forEach((elP) => {\n elP.style.transition = \"none\"\n\n gsap.to(elP, {\n alpha: 1,\n top: 0,\n perspective: 0,\n rotation: 0,\n duration: 0.05,\n })\n })\n\n el.querySelectorAll(\".wp-caption\").forEach((elP) => {\n elP.style.transition = \"none\"\n\n gsap.to(elP, {\n alpha: 1,\n top: 0,\n duration: 0.05,\n })\n })\n return\n }\n\n el.querySelectorAll(\"p\").forEach((elP) => {\n gsap.fromTo(\n elP,\n {\n alpha: 0,\n top: 30,\n perspective: -100,\n rotation: 3,\n },\n {\n alpha: 1,\n top: 0,\n perspective: 0,\n rotation: 0,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: elP,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n })\n\n el.querySelectorAll(\".wp-caption\").forEach((elP) => {\n gsap.fromTo(\n elP,\n {\n alpha: 0,\n top: 30,\n },\n {\n alpha: 1,\n top: 0,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: elP,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n })\n }\n\n animTwoColImage(el, animated) {\n const imgWrap1 = el.querySelector(\".sponsoredTwoColImage__imgWrap1\")\n const imgWrap2 = el.querySelector(\".sponsoredTwoColImage__imgWrap2\")\n const img1 = el.querySelector(\".sponsoredTwoColImage__imgWrap1 img\")\n const img2 = el.querySelector(\".sponsoredTwoColImage__imgWrap2 img\")\n\n if (!animated) {\n gsap.to(imgWrap1, {\n top: 0,\n alpha: 1,\n duration: 0.05,\n })\n\n gsap.to(imgWrap2, {\n top: 0,\n alpha: 1,\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n imgWrap1,\n { top: -0.1 * imgWrap1.clientHeight },\n {\n top: 0,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n bottom: \"bottom 20%\",\n toggleActions: \"restart pause resume reverse\",\n },\n duration: this.animDuration,\n ease: this.animEase,\n }\n )\n\n gsap.fromTo(\n imgWrap2,\n { top: 0.1 * imgWrap2.clientHeight },\n {\n top: 0,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n bottom: \"bottom 20%\",\n toggleActions: \"restart pause resume reverse\",\n },\n duration: this.animDuration,\n ease: this.animEase,\n delay: 0.2,\n }\n )\n\n const alphaTl1 = gsap.timeline()\n alphaTl1\n .to(imgWrap1, { alpha: 1, duration: 1 })\n .to(imgWrap1, { alpha: 1, duration: 2 })\n .to(imgWrap1, { alpha: 0, duration: 1 })\n ScrollTrigger.create({\n animation: alphaTl1,\n trigger: el,\n start: this.generalStart,\n bottom: \"bottom 20%\",\n scrub: true,\n })\n\n const alphaTl2 = gsap.timeline()\n alphaTl2\n .to(imgWrap2, { alpha: 1, duration: 1 })\n .to(imgWrap2, { alpha: 1, duration: 2 })\n .to(imgWrap2, { alpha: 0, duration: 1 })\n ScrollTrigger.create({\n animation: alphaTl2,\n trigger: el,\n start: this.generalStart,\n bottom: \"bottom 20%\",\n scrub: true,\n })\n\n gsap.fromTo(\n img1,\n {\n translateY: \"-3%\",\n },\n {\n translateY: \"3%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n\n gsap.fromTo(\n img2,\n {\n translateY: \"3%\",\n },\n {\n translateY: \"-3%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n }\n\n animFullWidthWithCaption(el, animated) {\n const elImg = el.querySelector(\".sponsoredFullWidthWithCaption__img\")\n const elBox = el.querySelector(\".sponsoredFullWidthWithCaption__captionBox\")\n const elStripes = el.querySelector(\n \".sponsoredFullWidthWithCaption__captionStripes\"\n )\n const elCaption = el.querySelector(\n \".sponsoredFullWidthWithCaption__caption\"\n )\n\n if (!animated) {\n gsap.to(elImg, {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: 0.05,\n })\n\n gsap.to(elImg, {\n translateY: \"0%\",\n duration: 0.05,\n })\n\n gsap.to(elBox, {\n left: 0,\n alpha: 1,\n duration: 0.05,\n })\n\n gsap.to(elStripes, {\n bottom: -15,\n duration: 0.05,\n })\n\n gsap.to(elCaption, {\n alpha: 1,\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n elImg,\n {\n alpha: 0,\n scaleX: 1.2,\n scaleY: 1.2,\n },\n {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n\n gsap.fromTo(\n elImg,\n {\n translateY: \"5%\",\n },\n {\n translateY: \"-5%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n\n gsap.to(elBox, {\n left: 0,\n alpha: 1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: elBox,\n start: \"center bottom\",\n toggleActions: \"restart pause resume reverse\",\n },\n })\n\n gsap.to(elStripes, {\n bottom: -15,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: elStripes,\n start: \"center bottom\",\n toggleActions: \"restart pause resume reverse\",\n },\n })\n\n gsap.to(elCaption, {\n alpha: 1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: elBox,\n start: \"center bottom\",\n toggleActions: \"restart pause resume reverse\",\n },\n })\n }\n\n animQuote(el, animated) {\n const mark = el.querySelector(\".sponsoredQuote__mark\")\n const body = el.querySelector(\".sponsoredQuote__body\")\n const byline = el.querySelector(\".sponsoredQuote__byline\")\n\n if (!animated) {\n gsap.to(mark, {\n left: 0,\n opacity: 1,\n duration: 0.05,\n })\n\n gsap.to(body, {\n top: 0,\n opacity: 1,\n duration: 0.05,\n })\n\n gsap.to(byline, {\n top: 0,\n opacity: 1,\n duration: 0.05,\n })\n\n return\n }\n\n const tl = gsap.timeline()\n tl.fromTo(\n mark,\n {\n left: 30,\n opacity: 0,\n },\n {\n left: 0,\n opacity: 1,\n duration: this.animDuration,\n ease: this.animEase,\n }\n )\n .fromTo(\n body,\n {\n top: 30,\n opacity: 0,\n },\n {\n delay: -0.8 + 0.15,\n top: 0,\n opacity: 1,\n duration: this.animDuration,\n ease: this.animEase,\n }\n )\n .fromTo(\n byline,\n {\n top: 30,\n opacity: 0,\n },\n {\n delay: -0.8 + 0.3,\n top: 0,\n opacity: 1,\n duration: this.animDuration,\n ease: this.animEase,\n }\n )\n\n ScrollTrigger.create({\n start: \"top 75%\",\n toggleActions: \"restart pause resume reverse\",\n trigger: el,\n animation: tl,\n })\n }\n\n animFullWidth(el, animated) {\n const elImg = el.querySelector(\".sponsoredFullWidth__img\")\n\n if (!animated) {\n elImg.style.transition = \"none\"\n\n gsap.to(elImg, {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n elImg,\n {\n alpha: 0,\n scaleX: 1.2,\n scaleY: 1.2,\n },\n {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n\n gsap.fromTo(\n elImg,\n {\n translateY: \"5%\",\n },\n {\n translateY: \"-5%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n }\n\n animFullWidthVideo(el, animated) {\n const elImg = el.querySelector(\".sponsoredFullWidthVideo__content\")\n\n if (!animated) {\n elImg.style.transition = \"none\"\n\n gsap.to(elImg, {\n alpha: 1,\n\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n elImg,\n {\n alpha: 0,\n },\n {\n alpha: 1,\n\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n\n gsap.fromTo(\n elImg,\n {\n translateY: \"5%\",\n },\n {\n translateY: \"-5%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n }\n\n animPinnedPanels(el, animated) {\n const id = el.getAttribute(\"data-id\")\n\n // -- Load initial text screen\n const dataArr = window[`pinnedPanel_${id}`].filter((item) => item != \"\")\n el.querySelector(\".sponsoredPinnedPanels__body\").innerHTML = dataArr[0]\n\n // -- Progress bars\n const sections = gsap.utils.toArray(`.sponsoredPinnedPanels__panel--${id}`)\n const barPercentAmount = 100 / (sections.length / 2)\n const barIndexes = []\n let onBarIndex = 0\n el.querySelectorAll(\".sponsoredPinnedPanels__progressBar\").forEach(\n (bar) => {\n let attr = \"width\"\n if (window.innerWidth <= 736) {\n attr = \"height\"\n }\n\n bar.style[attr] = `${barPercentAmount}%`\n\n barIndexes.push(onBarIndex)\n barIndexes.push(onBarIndex)\n onBarIndex += 1\n }\n )\n el.querySelectorAll(\".sponsoredPinnedPanels__progressBar\")[0].classList.add(\n \"active\"\n )\n\n // -- Create scrolltrigger\n ScrollTrigger.create({\n trigger: el,\n start: \"top 65%\",\n end: \"bottom 65%\",\n onEnter: () => {\n this.scrolljackedEl = el\n this.toggleBlockScroll(true)\n },\n onEnterBack: () => {\n this.scrolljackedEl = el\n this.toggleBlockScroll(true)\n },\n })\n\n // -- Create swiper\n const swiper = new Swiper(el.querySelector(\".swiper-container\"), {\n slidesPerView: 1,\n spaceBetween: 0,\n pinnedPannelEl: el,\n allowTouchMove: false,\n })\n\n swiper.on(\"slideChangeTransitionEnd\", () => {\n this.scrollBusy = false\n })\n\n swiper.on(\"slideChangeTransitionStart\", () => {\n const val = window[`pinnedPanel_${id}`][swiper.activeIndex]\n if (val !== \"\") {\n el.querySelector(\".sponsoredPinnedPanels__body\").innerHTML = val\n gsap.to(el.querySelector(\".sponsoredPinnedPanels__skip\"), {\n autoAlpha: 1,\n duration: this.animDuration,\n delay: this.animDuration / 2,\n })\n gsap.to(el.querySelector(\".sponsoredPinnedPanels__body\"), {\n autoAlpha: 1,\n duration: this.animDuration,\n delay: this.animDuration / 2,\n })\n } else {\n gsap.to(el.querySelector(\".sponsoredPinnedPanels__skip\"), {\n autoAlpha: 0,\n duration: this.animDuration,\n })\n gsap.to(el.querySelector(\".sponsoredPinnedPanels__body\"), {\n autoAlpha: 0,\n duration: this.animDuration,\n })\n }\n\n const index = barIndexes[swiper.activeIndex]\n el.querySelectorAll(\".sponsoredPinnedPanels__progressBar\").forEach(\n (bar) => {\n bar.classList.remove(\"active\")\n }\n )\n el.querySelectorAll(\".sponsoredPinnedPanels__progressBar\")[\n index\n ].classList.add(\"active\")\n })\n\n el.querySelector(\".sponsoredPinnedPanels__skipCta\").addEventListener(\n \"click\",\n () => {\n this.toggleBlockScroll(false)\n\n let pos =\n document.body.getBoundingClientRect().top * -1 +\n (window.innerHeight -\n document.querySelector(\".sponsoredStickyHeader\").clientHeight)\n\n if (this.scrollDirPriorToLock == -1) {\n pos =\n document.body.getBoundingClientRect().top * -1 - window.innerHeight\n }\n\n gsap.to(window, {\n duration: 1,\n scrollTo: pos,\n })\n }\n )\n\n this.pinnedSwipers.push(swiper)\n }\n\n scrollPinnedPanel() {\n if (this.scrollBusy || this.waitingForLockedPosition) return\n this.scrollBusy = true\n\n let speed = 1800\n if (this.isMobile) {\n speed = 1100\n }\n\n setTimeout(() => {\n this.scrollBusy = false\n }, speed / 2)\n\n const swiper = this.pinnedSwipers.filter(\n (s) => s.params.pinnedPannelEl == this.scrolljackedEl\n )[0]\n\n if (this.scrollDir === 1) {\n if (swiper.activeIndex + 1 < swiper.slides.length) {\n swiper.slideNext(speed)\n } else {\n this.toggleBlockScroll(false)\n }\n } else {\n if (swiper.activeIndex !== 0) {\n swiper.slidePrev(speed)\n } else {\n this.toggleBlockScroll(false)\n }\n }\n }\n\n toggleBlockScroll(val) {\n if (val === true) {\n document.ontouchmove = function (e) {\n e.preventDefault()\n }\n\n this.blockScroll = true\n this.waitingForLockedPosition = true\n gsap.to(window, {\n duration: 1,\n scrollTo: `.sponsoredPinnedPanels--${this.scrolljackedEl.getAttribute(\n \"data-id\"\n )}`,\n onComplete: () => {\n this.waitingForLockedPosition = false\n },\n })\n document.body.classList.add(\"no-scroll\")\n } else {\n this.blockScroll = false\n document.body.classList.remove(\"no-scroll\")\n document.ontouchmove = function (e) {\n return true\n }\n }\n }\n\n animInstagram(el, animated) {\n const elImg = el.querySelector(\".sponsoredInstagram__image\")\n const elBox = el.querySelector(\".sponsoredInstagram__box\")\n const elContent = el.querySelector(\".sponsoredInstagram__boxContent\")\n\n if (!animated) {\n gsap.to(elImg, {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: 0.05,\n translateY: \"0%\",\n })\n\n gsap.to(elBox, {\n alpha: 1,\n left: 0,\n top: 0,\n duration: 0.05,\n })\n\n gsap.to(elContent, { alpha: 1, duration: 0.05 })\n\n return\n }\n\n gsap.fromTo(\n elImg,\n {\n alpha: 0,\n scaleX: 1.2,\n scaleY: 1.2,\n },\n {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n\n gsap.fromTo(\n elImg,\n {\n translateY: \"5%\",\n },\n {\n translateY: \"-5%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n\n const tl = gsap.timeline()\n tl.fromTo(\n elBox,\n {\n alpha: 0,\n left: window.innerWidth <= 736 ? 0 : 30,\n top: window.innerWidth <= 736 ? 30 : 0,\n },\n {\n alpha: 1,\n left: 0,\n top: 0,\n duration: this.animDuration,\n ease: this.animEase,\n }\n ).fromTo(\n elContent,\n { alpha: 0 },\n { alpha: 1, duration: this.animDuration, ease: this.animEase },\n -0.65\n )\n\n ScrollTrigger.create({\n animation: tl,\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n })\n }\n\n animSideCaption(el, animated) {\n const elImg = el.querySelector(\".sponsoredSideCaption__image\")\n const elBox = el.querySelector(\".sponsoredSideCaption__box\")\n const elContent = el.querySelector(\".sponsoredSideCaption__boxContent\")\n\n if (!animated) {\n gsap.to(elImg, {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: 0.05,\n translateY: \"0%\",\n })\n\n gsap.to(elBox, {\n alpha: 1,\n left: 0,\n top: 0,\n duration: 0.05,\n })\n\n gsap.to(elContent, { alpha: 1, duration: 0.05 })\n\n return\n }\n\n gsap.fromTo(\n elImg,\n {\n alpha: 0,\n scaleX: 1.2,\n scaleY: 1.2,\n },\n {\n alpha: 1,\n scaleX: 1.1,\n scaleY: 1.1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n\n gsap.fromTo(\n elImg,\n {\n translateY: \"5%\",\n },\n {\n translateY: \"-5%\",\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n end: \"bottom top\",\n scrub: true,\n },\n }\n )\n\n const tl = gsap.timeline()\n tl.fromTo(\n elBox,\n {\n alpha: 0,\n left: window.innerWidth <= 736 ? 0 : 30,\n top: window.innerWidth <= 736 ? 30 : 0,\n },\n {\n alpha: 1,\n left: 0,\n top: 0,\n duration: this.animDuration,\n ease: this.animEase,\n }\n ).fromTo(\n elContent,\n { alpha: 0 },\n { alpha: 1, duration: this.animDuration, ease: this.animEase },\n -0.65\n )\n\n ScrollTrigger.create({\n animation: tl,\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n })\n }\n\n animEmailSignup(el, animated) {\n if (!animated) {\n gsap.to(el.querySelector(\".sponsoredEmailSignup__content\"), {\n alpha: 1,\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n el.querySelector(\".sponsoredEmailSignup__content\"),\n {\n alpha: 0,\n },\n {\n alpha: 1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n animSponsorInfo(el, animated) {\n if (!animated) {\n gsap.to(el.querySelector(\".sponsoredSponsorInfo__content\"), {\n alpha: 1,\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n el.querySelector(\".sponsoredSponsorInfo__content\"),\n {\n alpha: 0,\n },\n {\n alpha: 1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n animProductSlider(el, animated) {\n if (!animated) {\n gsap.to(el.querySelector(\".swiper-container\"), {\n alpha: 1,\n left: 0,\n duration: 0.05,\n })\n\n return\n }\n\n gsap.fromTo(\n el.querySelector(\".swiper-container\"),\n {\n alpha: 0,\n left: 60,\n },\n {\n alpha: 1,\n left: 0,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n animFooter(el, animated) {\n if (document.querySelector(\".sponsoredRecapGallery\")) {\n gsap.fromTo(\n el.querySelector(\".sponsoredFooter__content\"),\n {\n alpha: 0,\n },\n {\n delay: 0.2,\n alpha: 1,\n duration: this.animDuration,\n ease: this.animEase,\n }\n )\n return\n }\n\n gsap.fromTo(\n el.querySelector(\".sponsoredFooter__content\"),\n {\n alpha: 0,\n },\n {\n delay: 0.2,\n alpha: 1,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: \"top bottom\",\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n animYoutubeEmbed(el, animated) {\n if (!animated) {\n gsap.to(el.querySelector(\".sponsoredYoutubeEmbed__content\"), {\n alpha: 1,\n top: 0,\n duration: 0.05,\n })\n return\n }\n\n gsap.fromTo(\n el.querySelector(\".sponsoredYoutubeEmbed__content\"),\n {\n alpha: 0,\n top: 30,\n },\n {\n alpha: 1,\n top: 0,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n animGallery(el, animated) {\n if (!animated) {\n gsap.to(el, {\n alpha: 1,\n duration: 0.05,\n })\n return\n }\n\n gsap.fromTo(\n el,\n {\n alpha: 0,\n top: 30,\n },\n {\n alpha: 1,\n top: 0,\n duration: this.animDuration,\n ease: this.animEase,\n scrollTrigger: {\n trigger: el,\n start: this.generalStart,\n toggleActions: \"restart pause resume reverse\",\n },\n }\n )\n }\n\n animRecapGallery(el, animated) {\n //\n }\n}\n\nclass SponsoredZoomGallery {\n constructor() {\n document\n .querySelector(\".sponsoredZoomGallery__close\")\n .addEventListener(\"click\", () => {\n this.close()\n })\n }\n\n init(startingIndex, data) {\n this.startingIndex = startingIndex\n this.data = data\n\n if (this.swiper) {\n this.swiper.destroy()\n }\n\n this.loadSlides()\n }\n\n loadSlides() {\n const swiperWrapper = document.querySelector(\n \".sponsoredZoomGallery__swiper .swiper-wrapper\"\n )\n swiperWrapper.innerHTML = \"\"\n\n this.data.forEach((item) => {\n const markup = `
\"${item.alt}\"
`\n swiperWrapper.innerHTML += markup\n })\n\n this.initSwiper()\n }\n\n initSwiper() {\n this.swiper = new Swiper(\".sponsoredZoomGallery__swiper\", {\n slidesPerView: 1,\n spaceBetween: 0,\n navigation: {\n nextEl: \".sponsoredZoomGallery__swiper .swiper-button-next\",\n prevEl: \".sponsoredZoomGallery__swiper .swiper-button-prev\",\n },\n pagination: {\n el: \".sponsoredZoomGallery__swiper .swiper-pagination\",\n type: \"bullets\",\n clickable: true,\n },\n initialSlide: this.startingIndex,\n })\n console.log(this.startingIndex)\n\n this.show()\n }\n\n show() {\n document.body.classList.add(\"no-scroll\")\n\n gsap.to(document.querySelector(\".sponsoredZoomGallery\"), {\n alpha: 1,\n duration: 0.35,\n })\n document.querySelector(\".sponsoredZoomGallery\").classList.remove(\"hidden\")\n }\n\n close() {\n gsap.to(document.querySelector(\".sponsoredZoomGallery\"), {\n alpha: 0,\n duration: 0.35,\n onComplete: () => {\n document.querySelector(\".sponsoredZoomGallery\").classList.add(\"hidden\")\n document.body.classList.remove(\"no-scroll\")\n },\n })\n }\n}\n\nnew SponsoredPost()\n\n\n//# sourceURL=webpack://sponsored-post/./src/index.js?"); /***/ }), /***/ "./src/modal.js": /*!**********************!*\ !*** ./src/modal.js ***! \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nclass Modal {\n constructor(data, bgColor, callback) {\n const markup = `\n\t\t\t
\n\t\t\t
\n\t\t`\n\n const el = document.createElement(\"div\")\n el.classList.add(`tnModalGroup`)\n el.classList.add(`tnModalGroup--${bgColor}`)\n el.innerHTML = markup\n document.body.appendChild(el)\n if (typeof data == \"string\") {\n document.querySelector(\".tnModal\").innerHTML = data\n } else {\n document.querySelector(\".tnModal\").append(data)\n }\n\n document.body.classList.add(\"no-scroll\")\n\n if (callback) callback()\n\n gsap.to(\".tnModalBg\", {\n alpha: 0.85,\n scale: 1,\n duration: 0.5,\n ease: \"circ.out\",\n })\n\n gsap.to(\".tnModal\", {\n alpha: 1,\n duration: 0.5,\n delay: 0.4,\n ease: \"circ.out\",\n })\n }\n\n closeModal(callback) {\n const el = document.querySelector(\".tnModalGroup\")\n\n gsap.to(\".tnModalGroup\", {\n alpha: 0,\n duration: 0.35,\n onComplete: () => {\n if (callback) callback()\n el.parentNode.removeChild(el)\n document.body.classList.remove(\"no-scroll\")\n },\n })\n }\n\n addBgClose(callback) {\n document.querySelector(\".tnModalBg\").addEventListener(\"click\", () => {\n this.closeModal(callback || null)\n })\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Modal);\n\n\n//# sourceURL=webpack://sponsored-post/./src/modal.js?"); /***/ }), /***/ "../../../../../../node_modules/throttle-debounce/esm/index.js": /*!*********************************************************************!*\ !*** ../../../../../../node_modules/throttle-debounce/esm/index.js ***! \*********************************************************************/ /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"debounce\": () => (/* binding */ debounce),\n/* harmony export */ \"throttle\": () => (/* binding */ throttle)\n/* harmony export */ });\n/* eslint-disable no-undefined,no-param-reassign,no-shadow */\n\n/**\n * Throttle execution of a function. Especially useful for rate limiting\n * execution of handlers on events like resize and scroll.\n *\n * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.\n * @param {boolean} [noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds while the\n * throttled-function is being called. If noTrailing is false or unspecified, callback will be executed one final time\n * after the last throttled-function call. (After the throttled-function has not been called for `delay` milliseconds,\n * the internal counter is reset).\n * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,\n * to `callback` when the throttled-function is executed.\n * @param {boolean} [debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is false (at end),\n * schedule `callback` to execute after `delay` ms.\n *\n * @returns {Function} A new, throttled, function.\n */\nfunction throttle (delay, noTrailing, callback, debounceMode) {\n /*\n * After wrapper has stopped being called, this timeout ensures that\n * `callback` is executed at the proper times in `throttle` and `end`\n * debounce modes.\n */\n var timeoutID;\n var cancelled = false; // Keep track of the last time `callback` was executed.\n\n var lastExec = 0; // Function to clear existing timeout\n\n function clearExistingTimeout() {\n if (timeoutID) {\n clearTimeout(timeoutID);\n }\n } // Function to cancel next exec\n\n\n function cancel() {\n clearExistingTimeout();\n cancelled = true;\n } // `noTrailing` defaults to falsy.\n\n\n if (typeof noTrailing !== 'boolean') {\n debounceMode = callback;\n callback = noTrailing;\n noTrailing = undefined;\n }\n /*\n * The `wrapper` function encapsulates all of the throttling / debouncing\n * functionality and when executed will limit the rate at which `callback`\n * is executed.\n */\n\n\n function wrapper() {\n for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {\n arguments_[_key] = arguments[_key];\n }\n\n var self = this;\n var elapsed = Date.now() - lastExec;\n\n if (cancelled) {\n return;\n } // Execute `callback` and update the `lastExec` timestamp.\n\n\n function exec() {\n lastExec = Date.now();\n callback.apply(self, arguments_);\n }\n /*\n * If `debounceMode` is true (at begin) this is used to clear the flag\n * to allow future `callback` executions.\n */\n\n\n function clear() {\n timeoutID = undefined;\n }\n\n if (debounceMode && !timeoutID) {\n /*\n * Since `wrapper` is being called for the first time and\n * `debounceMode` is true (at begin), execute `callback`.\n */\n exec();\n }\n\n clearExistingTimeout();\n\n if (debounceMode === undefined && elapsed > delay) {\n /*\n * In throttle mode, if `delay` time has been exceeded, execute\n * `callback`.\n */\n exec();\n } else if (noTrailing !== true) {\n /*\n * In trailing throttle mode, since `delay` time has not been\n * exceeded, schedule `callback` to execute `delay` ms after most\n * recent execution.\n *\n * If `debounceMode` is true (at begin), schedule `clear` to execute\n * after `delay` ms.\n *\n * If `debounceMode` is false (at end), schedule `callback` to\n * execute after `delay` ms.\n */\n timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);\n }\n }\n\n wrapper.cancel = cancel; // Return the wrapper function.\n\n return wrapper;\n}\n\n/* eslint-disable no-undefined */\n/**\n * Debounce execution of a function. Debouncing, unlike throttling,\n * guarantees that a function is only executed a single time, either at the\n * very beginning of a series of calls, or at the very end.\n *\n * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.\n * @param {boolean} [atBegin] - Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds\n * after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.\n * (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).\n * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,\n * to `callback` when the debounced-function is executed.\n *\n * @returns {Function} A new, debounced function.\n */\n\nfunction debounce (delay, atBegin, callback) {\n return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);\n}\n\n\n//# sourceMappingURL=index.js.map\n\n\n//# sourceURL=webpack://sponsored-post/../../../../../../node_modules/throttle-debounce/esm/index.js?"); /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(__webpack_module_cache__[moduleId]) { /******/ return __webpack_module_cache__[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module can't be inlined because the eval devtool is used. /******/ var __webpack_exports__ = __webpack_require__("./src/index.js"); /******/ /******/ })() ;