MultiModal visibility

This commit is contained in:
Jörn-Michael Miehe 2023-11-01 02:00:23 +00:00
parent 39d375ced0
commit 066b6686d8
3 changed files with 16 additions and 8 deletions

View file

@ -103,7 +103,7 @@ export default class extends Vue {
}) })
.catch((error) => { .catch((error) => {
alert(error); alert(error);
this.multi_modal!.set_active(false); this.multi_modal!.hide();
}); });
} }
} }

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="modal is-active" v-if="active" @click="set_active(false)"> <div class="modal is-active" v-if="active" @click="dismiss()">
<div class="modal-background" /> <div class="modal-background" />
<div class="modal-content"> <div class="modal-content">
@ -33,7 +33,7 @@ export default class extends Vue {
public caption = ""; public caption = "";
private on_keydown(e: KeyboardEvent) { private on_keydown(e: KeyboardEvent) {
if (e.key == "Escape") this.set_active(false); if (e.key == "Escape") this.dismiss();
} }
public created(): void { public created(): void {
@ -48,23 +48,31 @@ export default class extends Vue {
window.removeEventListener("keydown", this.on_keydown); window.removeEventListener("keydown", this.on_keydown);
} }
public set_active(state: boolean) { public show() {
this.active = true;
}
public hide() {
this.active = false;
}
public dismiss() {
// Cannot dismiss the "loading" screen // Cannot dismiss the "loading" screen
if (this.active && this.progress) return; if (this.active && this.progress) return;
this.active = state; this.active = false;
} }
public show_image(src: string, caption: string = "") { public show_image(src: string, caption: string = "") {
this.progress = false; this.progress = false;
this.image_src = src; this.image_src = src;
this.caption = caption; this.caption = caption;
this.set_active(true); this.show();
} }
public show_progress() { public show_progress() {
this.progress = true; this.progress = true;
this.set_active(true); this.show();
} }
} }
</script> </script>

View file

@ -110,7 +110,7 @@ export default class extends Vue {
.then((data) => .then((data) =>
this.multi_modal!.show_image(data, this.$advent22.name_door(day)), this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
) )
.catch(() => this.multi_modal!.set_active(false)); .catch(() => this.multi_modal!.hide());
} }
} }
</script> </script>