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) => {
|
.catch((error) => {
|
||||||
alert(error);
|
alert(error);
|
||||||
this.multi_modal!.set_active(false);
|
this.multi_modal!.hide();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue