{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/gallery-row.js"],"names":["Swiper","Navigation","Thumbs","Module","Component","el","debounce","i","activeSlide","activeIframe","activeButton","resolve","videoSrc","e","nextIdx","KEYS"],"mappings":"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","file":"Areas/SunriseSeniorLiving/Scripts/8728.ae527ed90fad6bd2320d.bundle.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Thumbs } from 'swiper';\nimport { debounce, matches } from 'lodash';\nimport { BREAKPOINTS, KEYS } from '../constants';\n\nSwiper.use([Navigation, Thumbs]);\n\nclass Module extends Component {\n  setupDefaults() {\n    this.dom = {\n      $thumbsGallery: this.el._$('.gallery-row__thumbs'),\n      $thumbsContainer: this.el._$('.gallery-row__thumbs-container'),\n      $thumbsWrapper: this.el._$('.gallery-row__thumbs-wrapper'),\n      $thumbs: this.el._$$('.gallery-row__thumb'),\n      $singlePicture: this.el._$('.gallery-row__preview picture'),\n      $singleImg: this.el._$('.gallery-row__preview img'),\n      $previewsContainer: this.el._$('.gallery-row__previews-container'),\n      $previews: this.el._$$('.gallery-row__previews-slide'),\n      $prev: this.el._$('.gallery-row__swiper-btn-prev'),\n      $next: this.el._$('.gallery-row__swiper-btn-next'),\n      $videoTriggers: this.el._$$('.gallery-row__preview__play-video-btn'),\n      $videoIframes: this.el._$$('.gallery-row__preview__video__iframe')\n    };\n    this.activeThumbClass = 'swiper-slide-thumb-active';\n    this.fullWidthImg = this.dom.$singlePicture.dataset.fullWidthImage;\n\n    this.moveThumbsToContainer();\n\n    if (!this.el.classList.contains('isExperienceEditor')){\n      this.initSliders();\n      this.initVideos();\n    }\n  }\n\n  moveThumbsToContainer(){\n    this.dom.$thumbs.forEach(el => {\n      this.dom.$thumbsWrapper.appendChild(el);\n    })\n  }\n\n  addListeners(){\n    if (!this.el.classList.contains('isExperienceEditor')) this.dom.$videoTriggers.forEach(el => el._on('click', this.handlePlayClick.bind(this)));\n    window.addEventListener('resize', debounce(this.handleResize.bind(this), 300));\n  }\n\n  initSliders() {\n    if (this.dom.$previews.length === 1) {\n      this.el.classList.add('gallery-row--single-slide')\n      this.dom.$singleImg.src = this.fullWidthImg;\n    }\n    this.el.dataset.slideCount = this.dom.$previews.length\n    if (this.dom.$previews.length > 1){\n      this.dom.$thumbsGallery.style.display = 'block';\n      this.thumbsSlider = new Swiper(this.dom.$thumbsContainer, {\n        allowTouchMove:false,\n        watchSlidesProgress: true,\n        spaceBetween: 10,\n        slidesPerView: this.dom.$thumbs.length >= 4 ? 4 : this.dom.$thumbs.length,\n        breakpoints: {\n          1024: {\n            direction: 'vertical',\n            spaceBetween: 25,\n            slidesPerView: this.dom.$thumbs.length >= 3 ? 3 : this.dom.$thumbs.length\n          }\n        }\n      });\n    }\n\n    this.previewsSlider = new Swiper(this.dom.$previewsContainer, {\n      loop: this.dom.$previews.length > 1 ? true : false,\n      thumbs: {\n        swiper: this.thumbsSlider\n      },\n      a11y: {\n        prevSlideMessage: 'Previous slide',\n        nextSlideMessage: 'Next slide'\n      },\n      navigation: {\n        prevEl: this.dom.$prev,\n        nextEl: this.dom.$next\n      },\n      breakpoints: {\n        1024:{\n          allowTouchMove: false\n        }\n      }\n    });\n\n    this.previewsSlider.on('slideChange', () => {\n      this.resetSlides();\n    });\n\n    this.handleResize();\n  }\n\n  initVideos(){\n    this.dom.$previews = this.el._$$('.gallery-row__previews-slide');\n    this.dom.$videoTriggers = this.el._$$('.gallery-row__preview__play-video-btn');\n    this.dom.$videoIframes = this.el._$$('.gallery-row__preview__video__iframe');\n\n    this.dom.$previews.forEach(el => el._$('picture').style.display = null);\n    this.dom.$videoIframes.forEach(el =>  {\n      el.videoSrc = el.getAttribute('src').trim();\n      el.style.transitionDuration = '0ms';\n      el.style.transitionDelay = '0ms';\n      el.style.opacity = '0';\n      el.style.display = 'none';\n    });\n    this.dom.$videoTriggers.forEach(el => {\n      el.hidden = false;\n    });\n    this.dom.$thumbs = this.el._$$('.gallery-row__thumb');\n    this.dom.$thumbs.forEach((el, i) => {\n      el._on('keydown', this.handleKeyDown.bind(this, i))\n      if (i) el.setAttribute('tabindex', '0');\n    });\n  }\n\n  resetSlides(){\n    this.dom.$previews.forEach(el => el._$('picture').style.display = null);\n    this.dom.$videoIframes.forEach(el => {\n      el.setAttribute('src', el.videoSrc)\n      el.style.transitionDuration = '0ms';\n      el.style.transitionDelay = '0ms';\n      el.style.opacity = '0';\n    });\n    this.dom.$videoTriggers.forEach(el => {\n      el.hidden = false;\n    });\n  }\n\n  async handlePlayClick(e){\n    const activeSlide = this.el._$('.swiper-slide-active');\n    const activeIframe = activeSlide._$('.gallery-row__preview__video__iframe');\n    const activeButton = activeSlide._$('.gallery-row__preview__play-video-btn');\n    if (!activeButton) return;\n    activeButton.hidden = true;\n    activeSlide._$('picture').style.display = 'none';\n    activeIframe.style.transitionDuration = '500ms';\n    activeIframe.style.transitionDelay = '300ms';\n    activeIframe.style.display = 'block';\n    // eslint-disable-next-line no-undef\n    await new Promise(resolve => {\n      requestAnimationFrame(() => resolve());\n    });\n    activeIframe.style.opacity = '1';\n\n    const videoSrc = activeIframe.getAttribute('src').trim()\n    const isWistia = videoSrc.includes('wistia')\n\n    if (isWistia) activeIframe.setAttribute('src', `${videoSrc}?autoPlay=true&muted=true`)\n    else activeIframe.setAttribute('src', `${videoSrc}?autoplay=1&mute=1`)\n  }\n\n  handleKeyDown(i, e) {\n    let nextIdx = null;\n\n    switch (e.which) {\n\n    case KEYS.LEFT:\n      nextIdx = i === 0 ? null : i - 1;\n      break;\n    case KEYS.RIGHT:\n      nextIdx = i === this.dom.$thumbs.length - 1 ? null : i + 1;\n      break;\n    default:\n      break;\n    }\n\n    if (nextIdx !== null) {\n      this.dom.$thumbs.forEach(el => el.setAttribute('tabindex', '-1'));\n      this.previewsSlider.slideTo(nextIdx + 1);\n      this.dom.$thumbs[nextIdx].removeAttribute('tabindex');\n      this.dom.$thumbs[nextIdx].focus();\n    }\n  }\n\n  handleResize(){\n  }\n}\n\nexport default Module;\n"],"sourceRoot":""}