{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/media-masonry.js"],"names":[],"mappings":"kOAOA,SAAW,CAAC,KAAY,IAAU,CAAC,EAEnC,MAAM,SAAqB,KAAU,CACnC,eAAgB,CACd,KAAK,IAAM,CACT,cAAe,KAAK,GAAG,iBAAiB,sBAAsB,EAC9D,iBAAkB,KAAK,GAAG,cAAc,SAAS,EACjD,QAAS,KAAK,GAAG,iBAAiB,eAAe,EACjD,cAAe,KAAK,GAAG,iBAAiB,eAAe,EACvD,kBAAmB,KAAK,GAAG,cAAc,oBAAoB,EAC7D,kBAAmB,KAAK,GAAG,cAAc,qBAAqB,EAC9D,kBAAmB,KAAK,GAAG,cAAc,qBAAqB,CAChE,EAEA,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,SAAgB,CAClB,CAEA,cAAe,CACb,KAAK,IAAI,cAAc,QAAQ,CAAC,EAAM,IAAU,CAC9C,EAAK,iBAAiB,QAAS,IAAM,CACnC,KAAK,UAAU,CAAK,CACtB,CAAC,CACH,CAAC,CACH,CAEA,aAAc,CACZ,IAAa,KAAK,GAAI,IAAM,CAC1B,KAAM,GAAQ,GAAI,MAAQ,KAAK,GAAI,CACjC,aAAc,uBACd,gBAAiB,EACnB,CAAC,EAEK,EAAkB,IAAS,IAAM,CACrC,EAAM,OAAO,CACf,EAAG,GAAG,EAMN,GAJ2B,gBAAe,IAAM,CAC9C,EAAgB,CAClB,CAAC,EAEc,QAAQ,KAAK,EAAE,CAChC,CAAC,CACH,CAEA,UAAU,EAAO,CACf,KAAK,OAAO,QAAQ,CAAK,EACzB,SAAgB,SAAS,CAC3B,CAEA,YAAa,CACX,KAAK,OAAS,GAAI,MAAO,KAAK,IAAI,iBAAkB,CAClD,KAAM,GACN,eAAgB,GAChB,oBAAqB,GACrB,UAAW,aACX,OAAQ,GACR,cAAe,EACf,WAAY,CACV,GAAI,KAAK,IAAI,kBACb,KAAM,UACR,EACA,WAAY,CACV,OAAQ,KAAK,IAAI,kBACjB,OAAQ,KAAK,IAAI,iBACnB,CACF,CAAC,CACH,CACF,CAEA,UAAe,C","file":"scripts/273.24b4f41e846262cdbaf8.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Masonry from 'masonry-layout';\nimport imagesLoaded from 'imagesloaded';\nimport debounce from 'lodash/debounce';\nimport MicroModal from 'micromodal';\nimport Swiper, { Navigation, Pagination } from 'swiper';\n\nSwiper.use([Navigation, Pagination]);\n\nclass mediaMasonry extends Component {\n  setupDefaults() {\n    this.dom = {\n      $masonryItems: this.el.querySelectorAll('.media-masonry__item'),\n      $swiperContainer: this.el.querySelector('.swiper'),\n      $slides: this.el.querySelectorAll('.swiper-slide'),\n      $swiperSlides: this.el.querySelectorAll('.swiper-slide'),\n      $swiperPagination: this.el.querySelector('.swiper-pagination'),\n      $swiperNextButton: this.el.querySelector('.swiper-button-next'),\n      $swiperPrevButton: this.el.querySelector('.swiper-button-prev')\n    };\n\n    this.initSwiper();\n    this.initMasonry();\n    MicroModal.init();\n  }\n\n  addListeners() {\n    this.dom.$masonryItems.forEach((item, index) => {\n      item.addEventListener('click', () => {\n        this.openModal(index);\n      });\n    });\n  }\n\n  initMasonry() {\n    imagesLoaded(this.el, () => {\n      const msnry = new Masonry(this.el, {\n        itemSelector: '.media-masonry__item',\n        percentPosition: true\n      });\n\n      const debouncedLayout = debounce(() => {\n        msnry.layout();\n      }, 100);\n\n      const resizeObserver = new ResizeObserver(() => {\n        debouncedLayout();\n      });\n  \n      resizeObserver.observe(this.el);\n    });\n  }\n\n  openModal(index) {\n    this.swiper.slideTo(index);\n    MicroModal.show('modal-1');\n  }\n\n  initSwiper() {\n    this.swiper = new Swiper(this.dom.$swiperContainer, {\n      a11y: true,\n      centeredSlides: true,\n      watchSlidesProgress: true,\n      direction: 'horizontal',\n      rewind: true,\n      slidesPerView: 1,\n      pagination: {\n        el: this.dom.$swiperPagination,\n        type: 'fraction'\n      },\n      navigation: {\n        nextEl: this.dom.$swiperNextButton,\n        prevEl: this.dom.$swiperPrevButton\n      }\n    });\n  }\n}\n\nexport default mediaMasonry;\n"],"sourceRoot":""}