{"version":3,"file":"Lightbox-aee5a1e7.js","sources":["../../../app/javascript/components/Lightbox.vue?vue&type=template&lang.js","../../../app/javascript/components/Lightbox.vue"],"sourcesContent":["\n<transition name=\"LightboxTransition\">\n  <div v-if=\"imageIndex !== null\" class=\"Lightbox\" @click=\"close\">\n    <input autofocus class=\"hidden\" type=\"text\" />\n    <button class=\"Lightbox__close\" type=\"button\" @click=\"close\">\n      <Icon name=\"x\" size=\"5\" />\n    </button>\n    <button v-if=\"hasMultipleImages\" class=\"Lightbox__previous\" type=\"button\" @click.stop=\"previousImage\">\n      <Icon name=\"arrow-sm-left\" size=\"5\" />\n    </button>\n    <div class=\"Lightbox__info\">{{ imageIndex + 1 }} / {{ images.length }}</div>\n    <div v-if=\"images\" class=\"Lightbox__container\">\n      <figure>\n        <transition name=\"ImageTransition\">\n          <img :key=\"imageUrl\" :src=\"imageUrl\" @click.stop=\"nextImage\" />\n        </transition>\n      </figure>\n    </div>\n    <button v-if=\"hasMultipleImages\" class=\"Lightbox__next\" type=\"button\" @click.stop=\"nextImage\">\n      <Icon name=\"arrow-sm-right\" size=\"5\" />\n    </button>\n  </div>\n</transition>\n","<template>\n  <transition name=\"LightboxTransition\">\n    <div v-if=\"imageIndex !== null\" class=\"Lightbox\" @click=\"close\">\n      <input autofocus class=\"hidden\" type=\"text\" />\n      <button class=\"Lightbox__close\" type=\"button\" @click=\"close\">\n        <Icon name=\"x\" size=\"5\" />\n      </button>\n      <button v-if=\"hasMultipleImages\" class=\"Lightbox__previous\" type=\"button\" @click.stop=\"previousImage\">\n        <Icon name=\"arrow-sm-left\" size=\"5\" />\n      </button>\n      <div class=\"Lightbox__info\">{{ imageIndex + 1 }} / {{ images.length }}</div>\n      <div v-if=\"images\" class=\"Lightbox__container\">\n        <figure>\n          <transition name=\"ImageTransition\">\n            <img :key=\"imageUrl\" :src=\"imageUrl\" @click.stop=\"nextImage\" />\n          </transition>\n        </figure>\n      </div>\n      <button v-if=\"hasMultipleImages\" class=\"Lightbox__next\" type=\"button\" @click.stop=\"nextImage\">\n        <Icon name=\"arrow-sm-right\" size=\"5\" />\n      </button>\n    </div>\n  </transition>\n</template>\n\n<script>\nexport default {\n  props: {\n    images: {\n      type: Array\n    },\n    index: {\n      type: Number,\n      required: false\n    }\n  },\n  data() {\n    return {\n      imageIndex: this.index\n    }\n  },\n  computed: {\n    imageUrl() {\n      return this.imageIndex !== null ? this.images[this.imageIndex] : ''\n    },\n    hasMultipleImages() {\n      return this.images.length > 1\n    }\n  },\n  watch: {\n    index(value) {\n      this.imageIndex = value\n    }\n  },\n  mounted() {\n    window.addEventListener('keydown', (e) => {\n      if (e.keyCode === 37) {\n        this.previousImage()\n      }\n      if (e.keyCode === 39) {\n        this.nextImage()\n      }\n      if (e.keyCode === 27) {\n        this.close()\n      }\n    })\n\n    // Preload the previous / next images from clicked image\n    window.addEventListener('click', (e) => {\n      if (this.imageIndex === null) {\n        return\n      }\n      if (this.imageIndex === 0) {\n        this.preLoad(this.images[this.images.length - 1], this.images[this.imageIndex + 1])\n      } else if (this.imageIndex === this.images.length - 1) {\n        this.preLoad(this.images[this.imageIndex - 1], this.images[0])\n      } else {\n        this.preLoad(this.images[this.imageIndex - 1], this.images[this.imageIndex + 1])\n      }\n    })\n\n    // Preload the first image\n    if (this.images.length > 0) {\n      this.preLoad(this.images[0])\n    }\n  },\n  methods: {\n    close: function () {\n      this.imageIndex = null\n      this.$emit('close')\n    },\n    previousImage: function () {\n      if (this.imageIndex === null) return\n\n      this.imageIndex = this.imageIndex > 0 ? this.imageIndex - 1 : this.images.length - 1\n\n      if (this.imageIndex > 0) {\n        this.preLoad(this.images[this.imageIndex - 1])\n      } else {\n        this.preLoad(this.images[this.images.length - 1])\n      }\n    },\n    nextImage: function () {\n      if (this.imageIndex === null) return\n\n      this.imageIndex = this.imageIndex < this.images.length - 1 ? this.imageIndex + 1 : 0\n\n      if (this.imageIndex < this.images.length - 1) {\n        this.preLoad(this.images[this.imageIndex + 1])\n      } else {\n        this.preLoad(this.images[0])\n      }\n    },\n    preLoad: function (...urls) {\n      let preloaded = []\n      for (let idx = 0; idx < urls.length; idx++) {\n        preloaded[idx] = new Image()\n        preloaded[idx].src = urls[idx]\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"postcss\" scoped>\n.LightboxTransition-enter,\n.LightboxTransition-leave-to {\n  opacity: 0;\n}\n\n.Lightbox {\n  transition: opacity 0.2s ease;\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  width: 100%;\n  min-height: 100%;\n  height: 100vh;\n  background-color: rgba(30, 30, 30, 0.9);\n  display: table;\n\n  &__info {\n    position: absolute;\n    color: white;\n    top: 0.75rem;\n    left: 0.75rem;\n    font-size: 0.875rem;\n  }\n\n  &__container {\n    position: absolute;\n    overflow: hidden;\n    cursor: pointer;\n    max-width: 100vw;\n    height: 100vh;\n    margin: 0 auto;\n    left: 0.5rem;\n    right: 0.5rem;\n  }\n  & figure {\n    margin: 0;\n    padding: 3rem;\n    height: 100%;\n\n    img {\n      height: 100%;\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n  }\n  button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: white;\n    width: 2.5rem;\n    height: 2.5rem;\n    background: rgba(35, 35, 35, 0.6);\n    border: none;\n    cursor: pointer;\n    z-index: 900;\n    border-radius: 4px;\n    &:focus {\n      background: rgba(0, 0, 0, 0.6);\n      outline: 2px solid black;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 4rem;\n    right: 0.5rem;\n\n    @screen sm {\n      top: 0.5rem;\n    }\n  }\n  &__previous,\n  &__next {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  &__previous {\n    left: 0.5rem;\n  }\n  &__next {\n    right: 0.5rem;\n  }\n}\n\n.ImageTransition-enter {\n  opacity: 0;\n}\n\n.ImageTransition-enter-active {\n  /* transition: opacity 0.25s ease; */\n}\n</style>\n"],"names":["render","_vm","_h","_c","$event","staticRenderFns","__vue2_script","value","e","urls","preloaded","idx"],"mappings":"8CAAA,IAAIA,EAAS,UAAsB,CACjC,IAAIC,EAAI,KACJC,EAAGD,EAAI,eACPE,EAAGF,EAAI,MAAM,IAAIC,EAErB,OAAOC,EAAG,aAAc,CACtB,MAAO,CACL,KAAQ,oBACT,CACF,EAAE,CAACF,EAAI,aAAe,KAAOE,EAAG,MAAO,CACtC,YAAa,WACb,GAAI,CACF,MAASF,EAAI,KACd,CACL,EAAK,CAACE,EAAG,QAAS,CACd,YAAa,SACb,MAAO,CACL,UAAa,GACb,KAAQ,MACT,CACL,CAAG,EAAGA,EAAG,SAAU,CACf,YAAa,kBACb,MAAO,CACL,KAAQ,QACT,EACD,GAAI,CACF,MAASF,EAAI,KACd,CACL,EAAK,CAACE,EAAG,OAAQ,CACb,MAAO,CACL,KAAQ,IACR,KAAQ,GACT,CACL,CAAG,CAAC,EAAG,CAAC,EAAGF,EAAI,kBAAoBE,EAAG,SAAU,CAC5C,YAAa,qBACb,MAAO,CACL,KAAQ,QACT,EACD,GAAI,CACF,MAAS,SAAeC,EAAQ,CAC9B,OAAAA,EAAO,gBAAe,EACfH,EAAI,cAAcG,CAAM,CAChC,CACF,CACL,EAAK,CAACD,EAAG,OAAQ,CACb,MAAO,CACL,KAAQ,gBACR,KAAQ,GACT,CACL,CAAG,CAAC,EAAG,CAAC,EAAIF,EAAI,GAAI,EAAEE,EAAG,MAAO,CAC5B,YAAa,gBACjB,EAAK,CAACF,EAAI,GAAGA,EAAI,GAAGA,EAAI,WAAa,CAAC,EAAI,MAAQA,EAAI,GAAGA,EAAI,OAAO,MAAM,CAAC,CAAC,CAAC,EAAGA,EAAI,OAASE,EAAG,MAAO,CACnG,YAAa,qBACd,EAAE,CAACA,EAAG,SAAU,CAACA,EAAG,aAAc,CACjC,MAAO,CACL,KAAQ,iBACT,CACL,EAAK,CAACA,EAAG,MAAO,CACZ,IAAKF,EAAI,SACT,MAAO,CACL,IAAOA,EAAI,QACZ,EACD,GAAI,CACF,MAAS,SAAeG,EAAQ,CAC9B,OAAAA,EAAO,gBAAe,EACfH,EAAI,UAAUG,CAAM,CAC5B,CACF,CACF,CAAA,CAAC,CAAC,CAAC,EAAG,CAAC,CAAC,CAAC,EAAIH,EAAI,GAAE,EAAIA,EAAI,kBAAoBE,EAAG,SAAU,CAC3D,YAAa,iBACb,MAAO,CACL,KAAQ,QACT,EACD,GAAI,CACF,MAAS,SAAeC,EAAQ,CAC9B,OAAAA,EAAO,gBAAe,EACfH,EAAI,UAAUG,CAAM,CAC5B,CACF,CACL,EAAK,CAACD,EAAG,OAAQ,CACb,MAAO,CACL,KAAQ,iBACR,KAAQ,GACT,CACL,CAAG,CAAC,EAAG,CAAC,EAAIF,EAAI,IAAI,CAAC,EAAIA,EAAI,GAAI,CAAA,CAAC,CAClC,EACII,EAAkB,CAAE,EC5DxB,MAAAC,EAAA,CACA,MAAA,CACA,OAAA,CACA,KAAA,KACA,EACA,MAAA,CACA,KAAA,OACA,SAAA,EACA,CACA,EACA,MAAA,CACA,MAAA,CACA,WAAA,KAAA,KACA,CACA,EACA,SAAA,CACA,UAAA,CACA,OAAA,KAAA,aAAA,KAAA,KAAA,OAAA,KAAA,UAAA,EAAA,EACA,EACA,mBAAA,CACA,OAAA,KAAA,OAAA,OAAA,CACA,CACA,EACA,MAAA,CACA,MAAAC,EAAA,CACA,KAAA,WAAAA,CACA,CACA,EACA,SAAA,CACA,OAAA,iBAAA,UAAAC,GAAA,CACAA,EAAA,UAAA,IACA,KAAA,cAAA,EAEAA,EAAA,UAAA,IACA,KAAA,UAAA,EAEAA,EAAA,UAAA,IACA,KAAA,MAAA,CAEA,CAAA,EAGA,OAAA,iBAAA,QAAAA,GAAA,CACA,KAAA,aAAA,OAGA,KAAA,aAAA,EACA,KAAA,QAAA,KAAA,OAAA,KAAA,OAAA,OAAA,CAAA,EAAA,KAAA,OAAA,KAAA,WAAA,CAAA,CAAA,EACA,KAAA,aAAA,KAAA,OAAA,OAAA,EACA,KAAA,QAAA,KAAA,OAAA,KAAA,WAAA,CAAA,EAAA,KAAA,OAAA,CAAA,CAAA,EAEA,KAAA,QAAA,KAAA,OAAA,KAAA,WAAA,CAAA,EAAA,KAAA,OAAA,KAAA,WAAA,CAAA,CAAA,EAEA,CAAA,EAGA,KAAA,OAAA,OAAA,GACA,KAAA,QAAA,KAAA,OAAA,CAAA,CAAA,CAEA,EACA,QAAA,CACA,MAAA,UAAA,CACA,KAAA,WAAA,KACA,KAAA,MAAA,OAAA,CACA,EACA,cAAA,UAAA,CACA,KAAA,aAAA,OAEA,KAAA,WAAA,KAAA,WAAA,EAAA,KAAA,WAAA,EAAA,KAAA,OAAA,OAAA,EAEA,KAAA,WAAA,EACA,KAAA,QAAA,KAAA,OAAA,KAAA,WAAA,CAAA,CAAA,EAEA,KAAA,QAAA,KAAA,OAAA,KAAA,OAAA,OAAA,CAAA,CAAA,EAEA,EACA,UAAA,UAAA,CACA,KAAA,aAAA,OAEA,KAAA,WAAA,KAAA,WAAA,KAAA,OAAA,OAAA,EAAA,KAAA,WAAA,EAAA,EAEA,KAAA,WAAA,KAAA,OAAA,OAAA,EACA,KAAA,QAAA,KAAA,OAAA,KAAA,WAAA,CAAA,CAAA,EAEA,KAAA,QAAA,KAAA,OAAA,CAAA,CAAA,EAEA,EACA,QAAA,YAAAC,EAAA,CACA,IAAAC,EAAA,CAAA,EACA,QAAAC,EAAA,EAAAA,EAAAF,EAAA,OAAAE,IACAD,EAAAC,CAAA,EAAA,IAAA,MACAD,EAAAC,CAAA,EAAA,IAAAF,EAAAE,CAAA,CAEA,CACA,CACA"}