advent22/ui/src/components/MultiModal.vue

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

    <div class="modal-content">
      <template v-if="progress">
        <progress class="progress is-primary" max="100" />
      </template>
      <template v-else>
        <figure>
          <div class="image is-square">
            <img :src="image_src" alt="Kalender-Bild" />
          </div>
          <figcaption class="tag is-primary">
            {{ figure_caption }}
          </figcaption>
        </figure>
      </template>
    </div>
  </div>
</template>

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

export default class extends Vue {
  public active = false;
  public progress = false;
  public image_src = "";
  public figure_caption = "";

  private on_keydown(e: KeyboardEvent) {
    if (e.key == "Escape") this.set_active(false);
  }

  public mounted(): void {
    window.addEventListener("keydown", this.on_keydown);
  }

  public beforeUnmount(): void {
    window.removeEventListener("keydown", this.on_keydown);
  }

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

  public show_image(src: string, caption: string = "") {
    this.progress = false;
    this.image_src = src;
    this.figure_caption = caption;
    this.set_active(true);
  }

  public show_progress() {
    this.progress = true;
    this.set_active(true);
  }
}
</script>