Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Simple image modal

Browse source
This commit is contained in:
penner 2022-12-21 23:51:01 +00:00
parent fcf9cd458e
commit 82ebd211f6
2 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/src/App.vue
View file

@ -7,12 +7,13 @@
<h2 class="subtitle has-text-centered">Der Gelöt</h2> <h2 class="subtitle has-text-centered">Der Gelöt</h2>
<LoginModal ref="login_modal" /> <LoginModal ref="login_modal" />
<ImageModal v-model="modal_visible" :imageUrl="image_url" /> <ImageModal ref="image_modal" />
<CalendarDoor <CalendarDoor
v-for="(_, index) in 24" v-for="(_, index) in 24"
:key="index" :key="index"
:day="index" :day="index"
@openDoor="paula" @openDoor="open_calendar_door"
/> />
</div> </div>
</div> </div>
@ -33,13 +34,12 @@ import LoginModal from "./components/LoginModal.vue";
}, },
}) })
export default class App extends Vue { export default class App extends Vue {
image_url = "";
modal_visible = false;
private visible_days = 0; private visible_days = 0;
date = ""; date = "";
declare $refs: { declare $refs: {
login_modal: LoginModal; login_modal: LoginModal;
image_modal: ImageModal;
}; };
public mounted(): void { public mounted(): void {
@ -57,9 +57,9 @@ export default class App extends Vue {
this.$refs.login_modal.set_active(true); this.$refs.login_modal.set_active(true);
} }
private paula(url: string): void { private open_calendar_door(image_src: string): void {
this.image_url = url; this.$refs.image_modal.set_src(image_src);
this.modal_visible = true; this.$refs.image_modal.set_active(true);
} }
} }
</script> </script>

26
ui/src/components/ImageModal.vue
View file

@ -1,36 +1,34 @@
<template> <template>
<div class="modal is-active" v-if="modelValue" @click="hide"> <div class="modal is-active" v-if="active" @click="set_active(false)">
<div class="modal-background" /> <div class="modal-background" />
<div class="modal-content"> <div class="modal-content">
<div class="image is-square"> <div class="image is-square">
<img :src="imageUrl" alt="Kalender-Bild" /> <img :src="image_src" alt="Kalender-Bild" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Options, Vue } from "vue-class-component"; import { Vue } from "vue-class-component";
@Options({
props: {
modelValue: Boolean,
imageUrl: String,
},
})
export default class ImageModal extends Vue { export default class ImageModal extends Vue {
modelValue!: boolean; private active = false;
imageUrl!: string; public image_src = "";
public created(): void { public created(): void {
window.addEventListener("keydown", (e) => { window.addEventListener("keydown", (e) => {
if (e.key == "Escape") this.hide(); if (e.key == "Escape") this.set_active(false);
}); });
} }
private hide(): void { public set_active(state: boolean): void {
this.$emit("update:modelValue", false); this.active = state;
}
public set_src(src: string): void {
this.image_src = src;
} }
} }
</script> </script>