mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-11-23 00:03:07 +00:00
MultiModal visibility
This commit is contained in:
parent
39d375ced0
commit
066b6686d8
3 changed files with 16 additions and 8 deletions
|
@ -103,7 +103,7 @@ export default class extends Vue {
|
|||
})
|
||||
.catch((error) => {
|
||||
alert(error);
|
||||
this.multi_modal!.set_active(false);
|
||||
this.multi_modal!.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<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-content">
|
||||
|
@ -33,7 +33,7 @@ export default class extends Vue {
|
|||
public caption = "";
|
||||
|
||||
private on_keydown(e: KeyboardEvent) {
|
||||
if (e.key == "Escape") this.set_active(false);
|
||||
if (e.key == "Escape") this.dismiss();
|
||||
}
|
||||
|
||||
public created(): void {
|
||||
|
@ -48,23 +48,31 @@ export default class extends Vue {
|
|||
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
|
||||
if (this.active && this.progress) return;
|
||||
|
||||
this.active = state;
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
public show_image(src: string, caption: string = "") {
|
||||
this.progress = false;
|
||||
this.image_src = src;
|
||||
this.caption = caption;
|
||||
this.set_active(true);
|
||||
this.show();
|
||||
}
|
||||
|
||||
public show_progress() {
|
||||
this.progress = true;
|
||||
this.set_active(true);
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -110,7 +110,7 @@ export default class extends Vue {
|
|||
.then((data) =>
|
||||
this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
|
||||
)
|
||||
.catch(() => this.multi_modal!.set_active(false));
|
||||
.catch(() => this.multi_modal!.hide());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue