{"version":3,"sources":["webpack://loftware/./src/js/modules/GifSectionsWithMenu.js"],"names":[],"mappings":"2IAGA,eAAkC,KAAU,CAC1C,eAAgB,CACd,KAAK,IAAM,CACT,KAAM,KAAK,GAAG,iBAAiB,sBAC/B,UAAW,KAAK,GAAG,iBAAiB,4BACpC,OAAQ,KAAK,GAAG,cAAc,oCAEhC,KAAK,OAAS,OAAO,WAAW,sBAChC,KAAK,gBAAgB,KAAK,IAAI,KAAK,GAAG,aAAa,kBACnD,KAAK,cAGP,cAAe,CACb,KAAK,IAAI,KAAK,QAAQ,GAAO,CAC3B,EAAI,iBAAiB,YAAa,KAAK,eAAe,KAAK,OAC3D,EAAI,iBAAiB,QAAS,KAAK,eAAe,KAAK,SAGzD,KAAK,OAAO,SAAW,GAAK,CAC1B,EAAO,SACL,KAAK,eAKX,eAAgB,CACd,KAAK,IAAI,UAAU,QAAQ,GAAS,CAClC,EAAM,OAAS,KAEjB,KAAK,IAAI,KAAK,QAAQ,GAAO,CAC3B,EAAI,UAAU,OAAO,+BAIzB,gBAAgB,EAAO,CACrB,KAAK,IAAI,UAAU,QAAQ,GAAS,CAClC,EAAU,KAAO,GAAO,GAAM,OAAS,MAEzC,KAAK,IAAI,KAAK,QAAQ,GAAO,CAC3B,EAAQ,aAAa,mBAAqB,GACxC,EAAI,UAAU,IAAI,+BAIxB,eAAe,EAAG,CAEhB,KAAM,GAAQ,EADA,cACI,aAAa,iBAC/B,KAAK,gBACL,KAAK,gBAAgB,GAGvB,eAAgB,CACd,KAAM,GAAY,KAAK,GAAG,iBACxB,4CAEI,EAAiB,MAAM,KAAK,GAClC,EAAe,QAAQ,GAAY,CACjC,EAAS,gBAAgB,WAE3B,KAAM,GAAkB,EAAe,IACrC,GAAY,EAAS,cAEjB,EAAY,KAAK,IAAI,GAAG,GAC9B,EAAe,QAAQ,GAAY,CACjC,EAAS,gBAAgB,SACzB,EAAS,MAAM,OAAS,GAAG,QAI/B,aAAc,CACZ,KAAS,OAAO,SAChB,MAAK,OAAS,GAAI,KAAO,wBAAyB,CAChD,cAAe,IACf,aAAc,GACd,SAAU,GACV,cAAe,GACf,sBAAuB,GACvB,oBAAqB,GACrB,eAAgB,GAChB,OAAQ,IACR,GAAI,CACF,KAAM,IAAM,CACV,KAAS,IAAI,KAAK,QAChB,KAAK,IAAI,KAAK,QAAQ,CAAC,EAAK,IAAU,CACpC,EAAI,iBAAiB,YAAa,IAAM,CACtC,EAAK,KAAK,OAAO,SAAW,KAAK,OAAO,UACtC,KAAK,OAAO,QAAQ,QAK9B,UAAW,IAAM,CACf,KAAK,iBAEP,YAAa,IAAM,CACjB,KAAK,gBACL,KAAK,gBAAgB,KAAK,OAAO,OAAO,KAAK,OAAO,aAAa,KAEnE,OAAQ,IAAM,CACZ,KAAS,OAAO,QACd,KAAK,OAAO,QAAQ,GAAM,IAE1B,KAAK,sBAQjB,UAAe","file":"scripts/234.ce545d70371da5247fb8.js","sourcesContent":["import { Component } from '@verndale/core';\r\nimport Swiper from 'swiper';\r\n\r\nclass GifSectionsWithMenu extends Component {\r\n  setupDefaults() {\r\n    this.dom = {\r\n      tabs: this.el.querySelectorAll('.gif-sections__tab'),\r\n      tabPanels: this.el.querySelectorAll('.gif-sections__tab-panel'),\r\n      swiper: this.el.querySelector('.gif-sections__swiper-container')\r\n    };\r\n    this.tablet = window.matchMedia('(min-width: 768px)');\r\n    this.showActivePanel(this.dom.tabs[0].getAttribute('aria-controls'));\r\n    this.setupSwiper();\r\n  }\r\n\r\n  addListeners() {\r\n    this.dom.tabs.forEach(tab => {\r\n      tab.addEventListener('mouseover', this.handleTabClick.bind(this));\r\n      tab.addEventListener('focus', this.handleTabClick.bind(this));\r\n    });\r\n\r\n    this.tablet.onchange = e => {\r\n      if (!e.matches) {\r\n        this.setupSwiper();\r\n      }\r\n    };\r\n  }\r\n\r\n  hideAllPanels() {\r\n    this.dom.tabPanels.forEach(panel => {\r\n      panel.hidden = true;\r\n    });\r\n    this.dom.tabs.forEach(tab => {\r\n      tab.classList.remove('gif-sections__tab--active');\r\n    });\r\n  }\r\n\r\n  showActivePanel(tabId) {\r\n    this.dom.tabPanels.forEach(panel => {\r\n      if (panel.id === tabId) panel.hidden = false;\r\n    });\r\n    this.dom.tabs.forEach(tab => {\r\n      if (tab.getAttribute('aria-controls') === tabId)\r\n        tab.classList.add('gif-sections__tab--active');\r\n    });\r\n  }\r\n\r\n  handleTabClick(e) {\r\n    const tab = e.currentTarget;\r\n    const tabId = tab.getAttribute('aria-controls');\r\n    this.hideAllPanels();\r\n    this.showActivePanel(tabId);\r\n  }\r\n\r\n  setSameHeight() {\r\n    const tabPanels = this.el.querySelectorAll(\r\n      '.gif-sections__tab-panel-media-container'\r\n    );\r\n    const tabPanelsArray = Array.from(tabPanels);\r\n    tabPanelsArray.forEach(tabPanel => {\r\n      tabPanel.removeAttribute('style');\r\n    });\r\n    const tabPanelsHeight = tabPanelsArray.map(\r\n      tabPanel => tabPanel.offsetHeight\r\n    );\r\n    const maxHeight = Math.max(...tabPanelsHeight);\r\n    tabPanelsArray.forEach(tabPanel => {\r\n      tabPanel.removeAttribute('style');\r\n      tabPanel.style.height = `${maxHeight}px`;\r\n    });\r\n  }\r\n\r\n  setupSwiper() {\r\n    if (this.tablet.matches) return;\r\n    this.swiper = new Swiper('.gif-sections__swiper', {\r\n      slidesPerView: 1.1,\r\n      spaceBetween: 16,\r\n      freeMode: true,\r\n      watchOverflow: true,\r\n      watchSlidesVisibility: true,\r\n      watchSlidesProgress: true,\r\n      setWrapperSize: true,\r\n      height: 300,\r\n      on: {\r\n        init: () => {\r\n          if (this.dom.tabs.length) {\r\n            this.dom.tabs.forEach((tab, index) => {\r\n              tab.addEventListener('mouseover', () => {\r\n                if (!this.swiper.destroy || this.swiper.enabled)\r\n                  this.swiper.slideTo(index);\r\n              });\r\n            });\r\n          }\r\n        },\r\n        afterInit: () => {\r\n          this.setSameHeight();\r\n        },\r\n        slideChange: () => {\r\n          this.hideAllPanels();\r\n          this.showActivePanel(this.swiper.slides[this.swiper.activeIndex].id);\r\n        },\r\n        resize: () => {\r\n          if (this.tablet.matches) {\r\n            this.swiper.destroy(true, true);\r\n          } else {\r\n            this.setSameHeight();\r\n          }\r\n        }\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nexport default GifSectionsWithMenu;\r\n"],"sourceRoot":""}