{"version":3,"sources":["webpack://loftware/./src/js/helpers/variables.js","webpack://loftware/./src/js/helpers/index.js","webpack://loftware/./src/js/components/VideoModal.js"],"names":[],"mappings":"iKAGO,KAAM,GAAU,CACrB,IAAK,EACL,OAAQ,GACR,IAAK,GACL,MAAO,GACP,OAAQ,GACR,SAAU,GACV,IAAK,GACL,KAAM,GACN,KAAM,GACN,GAAI,GACJ,MAAO,GACP,KAAM,IAMK,EAAc,CACzB,OAAQ,IACR,OAAQ,IACR,gBAAiB,KACjB,QAAS,KACT,KAAM,O,sKCpBD,KAAM,GAAW,CAAC,EAAU,IAAS,CAC1C,GAAI,GACJ,MAAO,IAAI,IAAS,CAClB,aAAa,GACb,EAAU,WAAW,IAAM,CACzB,EAAS,GAAG,IACX,KASM,EAAc,GAAM,CAC/B,GACE,EAAG,SAAW,GACb,EAAG,WAAa,GAAK,EAAG,aAAa,cAAgB,KAEtD,MAAO,GAGT,GAAI,EAAG,SACL,MAAO,GAIT,OAAQ,EAAG,cACJ,IACH,MAAO,CAAC,CAAC,EAAG,MAAQ,EAAG,MAAQ,aAC5B,QACH,MAAO,GAAG,OAAS,UAAY,EAAG,OAAS,WACxC,aACA,aACA,WACH,MAAO,WAEP,MAAO,KAkBA,EAAO,CAAC,CAAE,UAAS,WAAW,OAAU,CACnD,QAAM,CACJ,QAAS,EACT,OAAQ,CAAC,EAAG,EAAQ,cACpB,OAAQ,gBACR,cAgBS,EAAQ,CAAC,CAAE,UAAS,WAAW,OAAU,CACpD,IAAM,IAAI,EAAS,CAAE,OAAQ,EAAQ,eACrC,QAAM,CACJ,QAAS,EACT,OAAQ,EACR,OAAQ,gBACR,cAOS,EAAU,CACrB,IAAK,EACL,OAAQ,GACR,IAAK,GACL,MAAO,GACP,OAAQ,GACR,SAAU,GACV,IAAK,GACL,KAAM,GACN,KAAM,GACN,GAAI,GACJ,MAAO,GACP,KAAM,K,kECxGR,eAAyB,KAAU,CACjC,eAAgB,CACd,KAAK,SAAW,KAAK,GAAG,QAAQ,SAChC,KAAK,QAAU,KAAK,GAAG,QAAQ,QAC/B,KAAK,MAAQ,KAAK,GAAG,QAAQ,MAC7B,KAAK,uBAAyB,GAC9B,KAAK,UAAY,KACjB,KAAK,WAAa,KAAK,GAAG,QAAQ,WAGlC,KAAK,sBAAwB,KAAK,sBAAsB,KAAK,MAC7D,KAAK,aAAe,KAAK,aAAa,KAAK,MAC3C,KAAK,YAAc,KAAK,YAAY,KAAK,MAEzC,KAAK,IAAM,CACT,KAAM,SAAS,cAAc,SAG/B,KAAK,mBAGP,cAAe,CACb,KAAK,GAAG,iBAAiB,QAAS,KAAK,qBAAqB,KAAK,OACjE,KAAK,GAAG,iBACN,WACA,KAAK,wBAAwB,KAAK,OAItC,kBAAmB,CAIjB,GAHsB,iBAAgB,OAAO,SAAS,QAC1B,IAAI,eAEd,KAAK,YACrB,KAAK,uBAIT,iBAAkB,CAEhB,KAAK,IAAI,WAAW,oBAClB,QACA,KAAK,uBAEP,SAAS,oBAAoB,QAAS,KAAK,cAC3C,SAAS,oBAAoB,QAAS,KAAK,YAAa,IAG1D,WAAY,CACV,GAAI,GAAM,GAEV,KAAS,WAAa,SACpB,GAAM,kCAAkC,KAAK,sBAG3C,KAAK,WAAa,UACpB,GAAM,kCAAkC,KAAK,sBAG/C,KAAK,IAAI,WAAa,SAAS,cAAc,OAC7C,KAAK,IAAI,WAAW,aAAa,OAAQ,UACzC,KAAK,IAAI,WAAW,aAAa,aAAc,KAAK,OACpD,KAAK,IAAI,WAAW,UAAU,IAAI,eAClC,KAAK,IAAI,WAAW,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAUP,8FAAgG,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9H,KAAK,IAAI,aAAe,KAAK,IAAI,WAAW,cAC1C,6BAGF,KAAK,IAAI,WAAa,KAAK,IAAI,WAAW,cACxC,uBAGF,KAAK,IAAI,WAAW,iBAAiB,QAAS,KAAK,uBACnD,SAAS,iBAAiB,QAAS,KAAK,cACxC,SAAS,iBAAiB,QAAS,KAAK,YAAa,IAGvD,sBAAuB,CACrB,KAAK,YAEL,KAAM,CAAE,WAAY,OACpB,KAAK,IAAI,KAAK,MAAM,SAAW,QAC/B,KAAK,IAAI,KAAK,MAAM,MAAQ,OAC5B,KAAK,IAAI,KAAK,MAAM,IAAM,IAAI,MAC9B,KAAK,IAAI,KAAK,UAAU,IAAI,aAC5B,KAAK,IAAI,KAAK,YAAY,KAAK,IAAI,YACnC,KAAK,qBAAqB,KAAK,IAAI,YAGrC,wBAAwB,EAAG,CACzB,KAAM,GAAM,EAAE,OAAS,EAAE,QAEzB,KAAY,IAAM,IAAQ,KACxB,GAAE,iBACF,KAAK,wBAIT,mBAAmB,EAAG,CACpB,EACI,SAAW,KAAK,IAAI,cACtB,KAAK,IAAI,aAAa,SAAS,EAAE,SAInC,KAAK,wBAGP,uBAAwB,CACtB,KAAK,kBAEL,KAAM,GAAU,SAAS,KAAK,MAAM,IACpC,KAAK,IAAI,KAAK,MAAM,SAAW,SAC/B,KAAK,IAAI,KAAK,MAAM,MAAQ,GAC5B,KAAK,IAAI,KAAK,MAAM,IAAM,GAC1B,KAAK,IAAI,KAAK,UAAU,OAAO,aAC/B,KAAK,IAAI,KAAK,YAAY,KAAK,IAAI,YACnC,OAAO,SAAS,EAAG,SAAS,GAAW,IAAK,IAAM,IAClD,KAAK,GAAG,QAGV,aAAa,EAAG,CAGd,GAFc,OAAS,EAAE,WAEb,IAAQ,KAClB,GAAE,kBACF,KAAK,yBAIT,YAAY,EAAG,CACb,KAAS,wBAEL,MAAK,IAAI,WAAW,SAAS,EAAE,QACjC,KAAK,UAAY,EAAE,OAEnB,MAAK,qBAAqB,KAAK,IAAI,YAE/B,KAAK,YAAc,SAAS,eAC9B,KAAK,oBAAoB,KAAK,IAAI,YAEpC,KAAK,UAAY,SAAS,gBAI9B,qBAAqB,EAAS,CAC5B,OAAS,GAAI,EAAG,EAAI,EAAQ,WAAW,OAAQ,IAAK,CAClD,KAAM,GAAQ,EAAQ,WAAW,GACjC,GAAI,KAAK,aAAa,IAAU,KAAK,qBAAqB,GACxD,MAAO,GAGX,MAAO,GAGT,oBAAoB,EAAS,CAC3B,OAAS,GAAI,EAAQ,WAAW,OAAS,EAAG,GAAK,EAAG,IAAK,CACvD,KAAM,GAAQ,EAAQ,WAAW,GACjC,GAAI,KAAK,aAAa,IAAU,KAAK,oBAAoB,GACvD,MAAO,GAGX,MAAO,GAGT,aAAa,EAAS,CACpB,GAAI,CAAC,SAAY,GACf,MAAO,GAGT,KAAK,uBAAyB,GAC9B,GAAI,CACF,EAAQ,cAER,OAEF,YAAK,uBAAyB,GACvB,SAAS,gBAAkB,GAItC,UAAe","file":"scripts/656.700702b543464e81ebb8.js","sourcesContent":["// /**\r\n// * Key code list object\r\n// */\r\nexport const keyCode = {\r\n  TAB: 9,\r\n  RETURN: 13,\r\n  ESC: 27,\r\n  SPACE: 32,\r\n  PAGEUP: 33,\r\n  PAGEDOWN: 34,\r\n  END: 35,\r\n  HOME: 36,\r\n  LEFT: 37,\r\n  UP: 38,\r\n  RIGHT: 39,\r\n  DOWN: 40\r\n};\r\n\r\n// /**\r\n// * Key code list object\r\n// */\r\nexport const breakpoints = {\r\n  mobile: 360,\r\n  tablet: 768,\r\n  tabletLandscape: 1024,\r\n  desktop: 1280,\r\n  wide: 1600\r\n};\r\n","import anime from 'animejs/lib/anime.es';\r\n\r\n// /**\r\n// * debounce function\r\n// * Delays the processing of the event\r\n// */\r\nexport const debounce = (callback, wait) => {\r\n  let timerId;\r\n  return (...args) => {\r\n    clearTimeout(timerId);\r\n    timerId = setTimeout(() => {\r\n      callback(...args);\r\n    }, wait);\r\n  };\r\n};\r\n\r\n// /**\r\n// * Checks if an element is focusable\r\n// *\r\n// * @param {Object} el - HTML element you want to check if it's focusable\r\n// */\r\nexport const isFocusable = el => {\r\n  if (\r\n    el.tabIndex > 0 ||\r\n    (el.tabIndex === 0 && el.getAttribute('tabIndex') !== null)\r\n  ) {\r\n    return true;\r\n  }\r\n\r\n  if (el.disabled) {\r\n    return false;\r\n  }\r\n\r\n  /* eslint-disable indent */\r\n  switch (el.nodeName) {\r\n    case 'A':\r\n      return !!el.href && el.rel !== 'ignore';\r\n    case 'INPUT':\r\n      return el.type !== 'hidden' && el.type !== 'file';\r\n    case 'BUTTON':\r\n    case 'SELECT':\r\n    case 'TEXTAREA':\r\n      return true;\r\n    default:\r\n      return false;\r\n  }\r\n  /* eslint-enable indent */\r\n};\r\n\r\n/**\r\n * Opens an element\r\n *\r\n * @example\r\n * import {open} from '../helpers';\r\n *\r\n * open({ element: this.el.querySelector('.element)});\r\n *\r\n * @param {Object} element - HTML element you want to target for animation\r\n * @param {Number} duration - Speed of the animation\r\n * @param {String} ease - Ease of the animation\r\n * @param {Function} onComplete - On complete function\r\n */\r\nexport const open = ({ element, duration = 400 }) => {\r\n  anime({\r\n    targets: element,\r\n    height: [0, element.offsetHeight],\r\n    easing: 'easeInOutQuad',\r\n    duration\r\n  });\r\n};\r\n/**\r\n * Closes an element\r\n *\r\n * @example\r\n * import {close} from '../helpers';\r\n *\r\n * close({ element: this.el.querySelector('.element)});\r\n *\r\n * @param {Object} element - HTML element you want to target for animation\r\n * @param {Number} duration - Speed of the animation\r\n * @param {String} ease - Ease of the animation\r\n * @param {Function} onComplete - On complete function\r\n */\r\nexport const close = ({ element, duration = 400 }) => {\r\n  anime.set(element, { height: element.offsetHeight });\r\n  anime({\r\n    targets: element,\r\n    height: 0,\r\n    easing: 'easeInOutQuad',\r\n    duration\r\n  });\r\n};\r\n\r\n// /**\r\n// * Key code list object\r\n// */\r\nexport const keyCode = {\r\n  TAB: 9,\r\n  RETURN: 13,\r\n  ESC: 27,\r\n  SPACE: 32,\r\n  PAGEUP: 33,\r\n  PAGEDOWN: 34,\r\n  END: 35,\r\n  HOME: 36,\r\n  LEFT: 37,\r\n  UP: 38,\r\n  RIGHT: 39,\r\n  DOWN: 40\r\n};\r\n","import { Component } from '@verndale/core';\r\nimport { isFocusable } from '../helpers';\r\nimport { keyCode } from '../helpers/variables';\r\n\r\nclass VideoModal extends Component {\r\n  setupDefaults() {\r\n    this.provider = this.el.dataset.provider;\r\n    this.videoId = this.el.dataset.videoId;\r\n    this.title = this.el.dataset.title;\r\n    this.ignoreUtilFocusChanges = false;\r\n    this.lastFocus = null;\r\n    this.identifier = this.el.dataset.identifier;\r\n\r\n    // this.handleClickOutSide = this.handleClickOutSide.bind(this);\r\n    this.handleVideoModalClose = this.handleVideoModalClose.bind(this);\r\n    this.handleEscape = this.handleEscape.bind(this);\r\n    this.handleFocus = this.handleFocus.bind(this);\r\n\r\n    this.dom = {\r\n      body: document.querySelector('body')\r\n    };\r\n\r\n    this.checkQueryString();\r\n  }\r\n\r\n  addListeners() {\r\n    this.el.addEventListener('click', this.handleVideoModalOpen.bind(this));\r\n    this.el.addEventListener(\r\n      'keypress',\r\n      this.handleModalOpenKeyboard.bind(this)\r\n    );\r\n  }\r\n\r\n  checkQueryString() {\r\n    const urlParams = new URLSearchParams(window.location.search);\r\n    const videoName = urlParams.get('videoName');\r\n   \r\n    if (videoName === this.identifier) {\r\n      this.handleVideoModalOpen();\r\n    }\r\n  }\r\n\r\n  removeListeners() {\r\n    // this.dom.videoModal.removeEventListener('click', this.handleClickOutSide);\r\n    this.dom.closeVideo.removeEventListener(\r\n      'click',\r\n      this.handleVideoModalClose\r\n    );\r\n    document.removeEventListener('keyup', this.handleEscape);\r\n    document.removeEventListener('focus', this.handleFocus, true);\r\n  }\r\n\r\n  buildHtml() {\r\n    let url = '';\r\n\r\n    if (this.provider === 'vimeo') {\r\n      url = `https://player.vimeo.com/video/${this.videoId}?autoplay=1`;\r\n    }\r\n\r\n    if (this.provider === 'wistia') {\r\n      url = `//fast.wistia.net/embed/iframe/${this.videoId}?autoplay=1`;\r\n    }\r\n\r\n    this.dom.videoModal = document.createElement('div');\r\n    this.dom.videoModal.setAttribute('role', 'dialog');\r\n    this.dom.videoModal.setAttribute('aria-label', this.title);\r\n    this.dom.videoModal.classList.add('video-modal');\r\n    this.dom.videoModal.innerHTML = `\r\n      <div class=\"video-modal__inner\">\r\n        <div class=\"video-modal__inner-height\">\r\n          <div class=\"video-modal__video-frame\">\r\n            <button class=\"video-modal__close\" arialabel=\"Close Video Modal\">\r\n              <svg role=\"presentation\">\r\n                <use xlink:href=\"#close\" />\r\n              </svg>\r\n            </button>\r\n            <div class=\"video-modal__video-wrapper\">\r\n              <iframe src=\"${url}\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen title=\"${this.title}\"></iframe>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    `;\r\n\r\n    this.dom.videoWrapper = this.dom.videoModal.querySelector(\r\n      '.video-modal__video-frame'\r\n    );\r\n\r\n    this.dom.closeVideo = this.dom.videoModal.querySelector(\r\n      '.video-modal__close'\r\n    );\r\n    // this.dom.videoModal.addEventListener('click', this.handleClickOutSide);\r\n    this.dom.closeVideo.addEventListener('click', this.handleVideoModalClose);\r\n    document.addEventListener('keyup', this.handleEscape);\r\n    document.addEventListener('focus', this.handleFocus, true);\r\n  }\r\n\r\n  handleVideoModalOpen() {\r\n    this.buildHtml();\r\n\r\n    const { scrollY } = window;\r\n    this.dom.body.style.position = 'fixed';\r\n    this.dom.body.style.width = '100%';\r\n    this.dom.body.style.top = `-${scrollY}px`;\r\n    this.dom.body.classList.add('has-modal');\r\n    this.dom.body.appendChild(this.dom.videoModal);\r\n    this.focusFirstDescendant(this.dom.videoModal);\r\n  }\r\n\r\n  handleModalOpenKeyboard(e) {\r\n    const key = e.which || e.keyCode;\r\n\r\n    if (key === 13 || key === 32) {\r\n      e.preventDefault();\r\n      this.handleVideoModalOpen();\r\n    }\r\n  }\r\n\r\n  handleClickOutSide(e) {\r\n    if (\r\n      e.target === this.dom.videoWrapper ||\r\n      this.dom.videoWrapper.contains(e.target)\r\n    ) {\r\n      return;\r\n    }\r\n    this.handleVideoModalClose();\r\n  }\r\n\r\n  handleVideoModalClose() {\r\n    this.removeListeners();\r\n\r\n    const scrollY = document.body.style.top;\r\n    this.dom.body.style.position = 'static';\r\n    this.dom.body.style.width = '';\r\n    this.dom.body.style.top = '';\r\n    this.dom.body.classList.remove('has-modal');\r\n    this.dom.body.removeChild(this.dom.videoModal);\r\n    window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);\r\n    this.el.focus();\r\n  }\r\n\r\n  handleEscape(e) {\r\n    const key = e.which || e.keyCode;\r\n\r\n    if (key === keyCode.ESC) {\r\n      e.stopPropagation();\r\n      this.handleVideoModalClose();\r\n    }\r\n  }\r\n\r\n  handleFocus(e) {\r\n    if (this.ignoreUtilFocusChanges) return;\r\n\r\n    if (this.dom.videoModal.contains(e.target)) {\r\n      this.lastFocus = e.target;\r\n    } else {\r\n      this.focusFirstDescendant(this.dom.videoModal);\r\n\r\n      if (this.lastFocus === document.activeElement) {\r\n        this.focusLastDescendant(this.dom.videoModal);\r\n      }\r\n      this.lastFocus = document.activeElement;\r\n    }\r\n  }\r\n\r\n  focusFirstDescendant(element) {\r\n    for (let i = 0; i < element.childNodes.length; i++) {\r\n      const child = element.childNodes[i];\r\n      if (this.attemptFocus(child) || this.focusFirstDescendant(child)) {\r\n        return true;\r\n      }\r\n    }\r\n    return false;\r\n  }\r\n\r\n  focusLastDescendant(element) {\r\n    for (let i = element.childNodes.length - 1; i >= 0; i--) {\r\n      const child = element.childNodes[i];\r\n      if (this.attemptFocus(child) || this.focusLastDescendant(child)) {\r\n        return true;\r\n      }\r\n    }\r\n    return false;\r\n  }\r\n\r\n  attemptFocus(element) {\r\n    if (!isFocusable(element)) {\r\n      return false;\r\n    }\r\n\r\n    this.ignoreUtilFocusChanges = true;\r\n    try {\r\n      element.focus();\r\n    } catch (e) {\r\n      return;\r\n    }\r\n    this.ignoreUtilFocusChanges = false;\r\n    return document.activeElement === element;\r\n  }\r\n}\r\n\r\nexport default VideoModal;\r\n"],"sourceRoot":""}