{"version":3,"sources":["webpack:///./app/javascript/scripts/components/ComicNew.js"],"names":["ComicNew","data","comicSelector","swiperNoSwipingSelector","swiperSelectorMain","swiperSelectorExtras","swiperHiddenClass","swiperNextElSelector","swiperPrevElSelector","paginationSelector","paginationBulletClass","paginationBulletActiveClass","gtmViewEvent","gtmViewAction","gtmSwipeEvent","gtmSwipeAction","gtmCarouselEventSelector","gtmCarouselActionSelector","init","store","slides","document","querySelectorAll","sizeItems","requestAnimationFrame","watchForResize","observeComics","swiperContainer","querySelector","this","runSwiper","dataset","selectedIndex","trackClicks","swiper","Swiper","initialSlide","noSwipingSelector","breakpoints","autoHeight","observer","observeParents","observeSlideChildren","a11y","prevSlideMessage","nextSlideMessage","pagination","el","type","clickable","bulletClass","bulletActiveClass","navigation","hideOnClick","hiddenClass","nextEl","prevEl","disabledClass","swiperExtras","on","disableSwipe","path","activeIndex","currentState","window","history","state","handleSlideChange","sendGTMEvent","location","href","addEventListener","event","slideTo","index","pushState","dispatch","collapseComments","length","allowTouchMove","carouselClickers","forEach","element","onclick","getAttribute","action","comics","LoadIntersectionObserver","then","createObserver","RequestThrottledFrame","Array","prototype","call","slide","slideElement","style","opacity","image","parentElement","height","parentWidth","clientWidth","parentHeight","clientHeight","imageWidth","width","ratio","newWidth","newHeight","Math","min","ceil","floor","caption","offsetWidth","targets","IntersectionObserver","entries","self","entry","isIntersecting","unobserve","target","threshold","observe","label","Analytics","track"],"mappings":"0FAAA,4CAKMA,EAAW,CACfC,KAAM,CACJC,cAAe,gBACfC,wBAAyB,eACzBC,mBAAoB,kCACpBC,qBAAsB,oCACtBC,kBAAmB,wBACnBC,qBAAsB,WACtBC,qBAAsB,WACtBC,mBAAoB,iBACpBC,sBAAuB,wBACvBC,4BAA6B,gCAC7BC,aAAc,aACdC,cAAe,aACfC,cAAe,QACfC,eAAgB,iBAChBC,yBAA0B,sBAC1BC,0BAA2B,wBAG7BC,KApBe,SAoBVC,GACHnB,EAASC,KAAKkB,MAAQA,EAEtB,IAAMC,EAASC,SAASC,iBAAiB,sBAKzCtB,EAASuB,UAAUH,GACnBI,uBAAsB,WACpBxB,EAASuB,UAAUH,EACpB,IACDpB,EAASyB,eAAeL,GAExBpB,EAAS0B,gBAET,IAAMC,EAAkBN,SAASO,cAAcC,KAAK5B,KAAKG,oBACrDuB,IACF3B,EAAS8B,UAAUH,EAAgBI,QAAQC,eAC3ChC,EAASiC,cAEZ,EAEDH,UA3Ce,SA2CLE,GAAgB,IAAD,OACjBE,EAAS,IAAIC,IAAON,KAAK5B,KAAKG,mBAAoB,CACtDc,MAAM,EACNkB,aAAcJ,EACdK,kBAAmBR,KAAK5B,KAAKE,wBAE7BmC,YAAa,CAEX,EAAG,CACDC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,sBAAsB,GAGxB,IAAK,CACHH,YAAY,IAGhBI,KAAM,CACJC,iBAAkB,iBAClBC,iBAAkB,cAEpBC,WAAY,CACVC,GAAIlB,KAAK5B,KAAKQ,mBACduC,KAAM,UACNC,WAAW,EACXC,YAAarB,KAAK5B,KAAKS,sBACvByC,kBAAmBtB,KAAK5B,KAAKU,6BAE/ByC,WAAY,CACVC,aAAa,EACbC,YAAazB,KAAK5B,KAAKK,kBACvBiD,OAAQ1B,KAAK5B,KAAKM,qBAClBiD,OAAQ3B,KAAK5B,KAAKO,qBAClBiD,cAAe,cAGbC,EAAe,IAAIvB,IAAON,KAAK5B,KAAKI,qBAAsB,CAC9Da,MAAM,EACNkB,aAAcJ,EACdK,kBAAmBR,KAAK5B,KAAKE,0BAgC/B,OA5BA+B,EAAOyB,GAAG,QAAQ,WAChB3D,EAAS4D,aAAa1B,EACvB,IAEDA,EAAOyB,GAAG,eAAe,WAEvB,IAAQE,EAAS3B,EAAOd,OAAOc,EAAO4B,aAAa/B,QAA3C8B,KACFE,EAAeC,OAAOC,QAAQC,MAEhCH,GAAgBA,EAAaF,OAASA,GAI1C7D,EAASmE,kBAAkBjC,EAAQwB,EAAcG,EAClD,IAED3B,EAAOyB,GAAG,YAAY,WACpB3D,EAASoE,aAAa,EAAKnE,KAAKa,cAAe,EAAKb,KAAKc,eAAgBiD,OAAOK,SAASC,KAC1F,IAEDN,OAAOO,iBAAiB,YAAY,SAAAC,GAElCtC,EAAOuC,QAAQD,EAAMN,MAAMQ,OAC3BhB,EAAae,QAAQD,EAAMN,MAAMQ,MAClC,IAEDxC,EAAOhB,OACPwC,EAAaxC,OACNgB,CACR,EAEDiC,kBAvHe,SAuHGjC,EAAQwB,EAAcG,GAGtCG,OAAOC,QAAQU,UAAU,CAAEd,OAAMa,MAAOxC,EAAO4B,aAAe,KAAMD,GAGpEH,EAAae,QAAQvC,EAAO4B,aAG5B9D,EAASC,KAAKkB,MAAMyD,SAASC,cAC9B,EAEDjB,aAnIe,SAmIF1B,GACkB,IAAzBA,EAAOd,OAAO0D,SAGhB5C,EAAO6C,gBAAiB,EAG3B,EAED9C,YA5Ie,WA6Ib,IAAM+C,EAAmB3D,SAASC,iBAAT,WAA8BtB,EAASC,KAAKe,yBAA5C,MAErBgE,GACFA,EAAiBC,SAAQ,SAAAC,GACvB,IAAMjC,EAAYiC,EAElBjC,EAAUkC,QAAU,WAClB,IAAMX,EAAQvB,EAAUmC,aAAV,UAA0BpF,EAASC,KAAKe,2BAChDqE,EAASpC,EAAUmC,aAAV,UAA0BpF,EAASC,KAAKgB,4BAEvDjB,EAASoE,aAAaI,EAAOa,EAAQrB,OAAOK,SAASC,KACtD,CACF,GAEJ,EAED5C,cA7Je,WA8Jb,IAAM4D,EAASjE,SAASC,iBAAiBtB,EAASC,KAAKC,eACvDqF,cAA2BC,MAAK,WAC9BxF,EAASyF,eAAeH,EACzB,GACF,EAED7D,eApKe,SAoKAL,GACbsE,YAAsB,SAAU,mBAChC1B,OAAOO,iBACL,mBACA,WACEvE,EAASuB,UAAUH,EACpB,IACD,EAEH,EAEDG,UA/Ke,SA+KLH,GACRuE,MAAMC,UAAUX,QAAQY,KAAKzE,GAAQ,SAAA0E,GACnC,IAAMC,EAAeD,EACrBC,EAAaC,MAAMC,QAAU,EAE7B,IAAMC,EAAQJ,EAAMlE,cAAc,oBAC1BuE,EAAkBD,EAAlBC,cACRA,EAAcH,MAAMI,OAAS,OAE7B,IAAMC,EAAcF,EAAcG,YAC5BC,EAAeJ,EAAcK,aAE7BC,EAAaP,EAAMnE,QAAQ2E,MAG3BC,EAFcT,EAAMnE,QAAQqE,OAENK,EAExBG,EAAW,EACXC,EAAY,EACZR,EAAcM,EAAQJ,GACxBK,EAAWE,KAAKC,IAAIV,EAAaS,KAAKE,KAAKT,EAAeI,IAC1DE,EAAYC,KAAKG,MAAML,EAAWD,KAElCC,EAAWP,EACXQ,EAAYC,KAAKG,MAAMZ,EAAcM,IAGvCT,EAAMF,MAAMU,MAAZ,UAAuBE,EAAvB,MACAV,EAAMF,MAAMI,OAAZ,UAAwBS,EAAxB,MACAV,EAAcH,MAAMI,OAApB,UAAgCS,EAAhC,MAEA,IAAMK,EAAUpB,EAAMlE,cAAc,sBACpC,GAAIsF,EAAS,CACX,GAA0B,IAAtBhB,EAAMiB,YAER,OAEFD,EAAQlB,MAAMU,MAAd,UAAyBR,EAAMiB,YAA/B,KACD,CAEDpB,EAAaC,MAAMC,QAAU,CAC9B,GACF,EAEDR,eA3Ne,SA2NA2B,GACb,IAIM5E,EAAW,IAAI6E,sBAAqB,SAACC,EAASC,GAClD5B,MAAMC,UAAUX,QAAQY,KAAKyB,GAAS,SAAAE,GAChCA,EAAMC,iBACRzH,EAASoE,aAAapE,EAASC,KAAKW,aAAcZ,EAASC,KAAKY,cAAemD,OAAOK,SAASC,MAC/FiD,EAAKG,UAAUF,EAAMG,QAExB,GACF,GAXc,CACbC,UAAW,IAabjC,MAAMC,UAAUX,QAAQY,KAAKuB,GAAS,SAAAlB,GAAK,OAAI1D,EAASqF,QAAQ3B,EAArB,GAC5C,EAED9B,aA7Oe,SA6OFI,EAAOa,EAAQyC,GAC1BC,IAAUC,MAAMxD,EAAO,CACrBa,SACAyC,SAEH,GAEY9H,W","file":"js/ComicNew-a080b62a0f454e032bd6.chunk.js","sourcesContent":["import Swiper from \"swiper\";\nimport { LoadIntersectionObserver, RequestThrottledFrame } from \"../tfs-utilities\";\nimport Analytics from \"../analytics\";\nimport { collapseComments } from \"../redux/commenting/actions\";\n\nconst ComicNew = {\n  data: {\n    comicSelector: \".js-comic-new\",\n    swiperNoSwipingSelector: \".js-no-swipe\",\n    swiperSelectorMain: \".swiper-container.js-slide-main\",\n    swiperSelectorExtras: \".swiper-container.js-slide-extras\",\n    swiperHiddenClass: \"swiper-button--hidden\",\n    swiperNextElSelector: \".js-next\",\n    swiperPrevElSelector: \".js-prev\",\n    paginationSelector: \".js-pagination\",\n    paginationBulletClass: \"tfs-comic-new__bullet\",\n    paginationBulletActiveClass: \"tfs-comic-new__bullet--active\",\n    gtmViewEvent: \"view-comic\",\n    gtmViewAction: \"view comic\",\n    gtmSwipeEvent: \"click\",\n    gtmSwipeAction: \"swipe carousel\",\n    gtmCarouselEventSelector: \"data-carousel-event\",\n    gtmCarouselActionSelector: \"data-carousel-action\"\n  },\n\n  init(store) {\n    ComicNew.data.store = store;\n\n    const slides = document.querySelectorAll(\".js-slider-wrapper\");\n    // this is a lot, but the first one sizes the image and caption\n    // and the second corrects when the caption shifts things slightly\n    // at least we put it in an RAF so it's not quite as bad\n    // TODO: obviously that isn't great, fix it\n    ComicNew.sizeItems(slides);\n    requestAnimationFrame(() => {\n      ComicNew.sizeItems(slides);\n    });\n    ComicNew.watchForResize(slides);\n\n    ComicNew.observeComics();\n\n    const swiperContainer = document.querySelector(this.data.swiperSelectorMain);\n    if (swiperContainer) {\n      ComicNew.runSwiper(swiperContainer.dataset.selectedIndex);\n      ComicNew.trackClicks();\n    }\n  },\n\n  runSwiper(selectedIndex) {\n    const swiper = new Swiper(this.data.swiperSelectorMain, {\n      init: false,\n      initialSlide: selectedIndex,\n      noSwipingSelector: this.data.swiperNoSwipingSelector,\n      // Responsive breakpoints\n      breakpoints: {\n        // when window width is >= 0px\n        0: {\n          autoHeight: true,\n          observer: true,\n          observeParents: true,\n          observeSlideChildren: true\n        },\n        // when window width is >= 768px (md)\n        768: {\n          autoHeight: false\n        }\n      },\n      a11y: {\n        prevSlideMessage: \"Previous slide\",\n        nextSlideMessage: \"Next slide\"\n      },\n      pagination: {\n        el: this.data.paginationSelector,\n        type: \"bullets\",\n        clickable: true,\n        bulletClass: this.data.paginationBulletClass,\n        bulletActiveClass: this.data.paginationBulletActiveClass\n      },\n      navigation: {\n        hideOnClick: false,\n        hiddenClass: this.data.swiperHiddenClass,\n        nextEl: this.data.swiperNextElSelector,\n        prevEl: this.data.swiperPrevElSelector,\n        disabledClass: \"disabled\"\n      }\n    });\n    const swiperExtras = new Swiper(this.data.swiperSelectorExtras, {\n      init: false,\n      initialSlide: selectedIndex,\n      noSwipingSelector: this.data.swiperNoSwipingSelector\n    });\n\n    // The carousel is almost entirely event driven\n    swiper.on(\"init\", () => {\n      ComicNew.disableSwipe(swiper);\n    });\n\n    swiper.on(\"slideChange\", () => {\n      // get the path for the newly selected slide\n      const { path } = swiper.slides[swiper.activeIndex].dataset;\n      const currentState = window.history.state;\n\n      if (currentState && currentState.path === path) {\n        // somehow haven't actually gone anywhere, nevermind\n        return;\n      }\n      ComicNew.handleSlideChange(swiper, swiperExtras, path);\n    });\n\n    swiper.on(\"touchEnd\", () => {\n      ComicNew.sendGTMEvent(this.data.gtmSwipeEvent, this.data.gtmSwipeAction, window.location.href);\n    });\n\n    window.addEventListener(\"popstate\", event => {\n      // respond to forward/back navigation\n      swiper.slideTo(event.state.index);\n      swiperExtras.slideTo(event.state.index);\n    });\n\n    swiper.init();\n    swiperExtras.init();\n    return swiper;\n  },\n\n  handleSlideChange(swiper, swiperExtras, path) {\n    // update the path to match that slide\n    // Analytics Note: GTM is configured to automatically track history state updates\n    window.history.pushState({ path, index: swiper.activeIndex }, null, path);\n\n    // move the extras to the same slide\n    swiperExtras.slideTo(swiper.activeIndex);\n\n    // unconditionally collapse all comments in the slider to reset state\n    ComicNew.data.store.dispatch(collapseComments());\n  },\n\n  disableSwipe(swiper) {\n    if (swiper.slides.length === 1) {\n      /* eslint-disable no-param-reassign */\n      // override the swiping setting if there's only 1 slide and nowhere to swipe to\n      swiper.allowTouchMove = false;\n      /* eslint-enable no-param-reassign */\n    }\n  },\n\n  trackClicks() {\n    const carouselClickers = document.querySelectorAll(`[${ComicNew.data.gtmCarouselEventSelector}]`);\n\n    if (carouselClickers) {\n      carouselClickers.forEach(element => {\n        const clickable = element;\n\n        clickable.onclick = function didClick() {\n          const event = clickable.getAttribute(`${ComicNew.data.gtmCarouselEventSelector}`);\n          const action = clickable.getAttribute(`${ComicNew.data.gtmCarouselActionSelector}`);\n\n          ComicNew.sendGTMEvent(event, action, window.location.href);\n        };\n      });\n    }\n  },\n\n  observeComics() {\n    const comics = document.querySelectorAll(ComicNew.data.comicSelector);\n    LoadIntersectionObserver().then(() => {\n      ComicNew.createObserver(comics);\n    });\n  },\n\n  watchForResize(slides) {\n    RequestThrottledFrame(\"resize\", \"optimizedResize\");\n    window.addEventListener(\n      \"optimizedResize\",\n      () => {\n        ComicNew.sizeItems(slides);\n      },\n      false\n    );\n  },\n\n  sizeItems(slides) {\n    Array.prototype.forEach.call(slides, slide => {\n      const slideElement = slide;\n      slideElement.style.opacity = 0;\n\n      const image = slide.querySelector(\".js-slider-image\");\n      const { parentElement } = image;\n      parentElement.style.height = \"100%\";\n\n      const parentWidth = parentElement.clientWidth;\n      const parentHeight = parentElement.clientHeight;\n\n      const imageWidth = image.dataset.width;\n      const imageHeight = image.dataset.height;\n\n      const ratio = imageHeight / imageWidth;\n\n      let newWidth = 0;\n      let newHeight = 0;\n      if (parentWidth * ratio > parentHeight) {\n        newWidth = Math.min(parentWidth, Math.ceil(parentHeight / ratio));\n        newHeight = Math.floor(newWidth * ratio);\n      } else {\n        newWidth = parentWidth;\n        newHeight = Math.floor(parentWidth * ratio);\n      }\n\n      image.style.width = `${newWidth}px`;\n      image.style.height = `${newHeight}px`;\n      parentElement.style.height = `${newHeight}px`;\n\n      const caption = slide.querySelector(\".js-slider-caption\");\n      if (caption) {\n        if (image.offsetWidth === 0) {\n          // something happened and the width didn't calculate correctly, fall back on normal styles\n          return;\n        }\n        caption.style.width = `${image.offsetWidth}px`;\n      }\n\n      slideElement.style.opacity = 1;\n    });\n  },\n\n  createObserver(targets) {\n    const config = {\n      threshold: 1\n    };\n\n    const observer = new IntersectionObserver((entries, self) => {\n      Array.prototype.forEach.call(entries, entry => {\n        if (entry.isIntersecting) {\n          ComicNew.sendGTMEvent(ComicNew.data.gtmViewEvent, ComicNew.data.gtmViewAction, window.location.href);\n          self.unobserve(entry.target);\n        }\n      });\n    }, config);\n\n    // Watch for images to come into view\n    Array.prototype.forEach.call(targets, image => observer.observe(image));\n  },\n\n  sendGTMEvent(event, action, label) {\n    Analytics.track(event, {\n      action,\n      label\n    });\n  }\n};\nexport default ComicNew;\n"],"sourceRoot":""}