advent22/ui/src/components/ImageModal.vue

<template>
  <div class="modal is-active" v-if="active" @click="set_active(false)">
    <div class="modal-background" />

    <div class="modal-content">
      <div class="image is-square">
        <img :src="image_src" alt="Kalender-Bild" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class ImageModal extends Vue {
  private active = false;
  public image_src = "";

  public created(): void {
    window.addEventListener("keydown", (e) => {
      if (e.key == "Escape") this.set_active(false);
    });
  }

  public set_active(state: boolean): void {
    this.active = state;
  }

  public show_src(src: string): void {
    this.image_src = src;
    this.set_active(true);
  }
}
</script>