Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 00:03:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Calendar <figcaption>

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-09 23:52:58 +00:00
parent 74c22fc8a6
commit 6e4578ec5e
1 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/src/components/Calendar.vue
View file

@ -1,18 +1,25 @@
<template>
<MultiModal ref="multi_modal" />
<figure class="image is-unselectable">
<img :src="$advent22.api_url('general/background')" />
<ThouCanvas>
<CalendarDoor
v-for="(_, index) in doors"
:key="`door-${index}`"
:door="doors[index]"
@doorClick="door_click"
@doorSuccess="door_success"
@doorFailure="door_failure"
/>
</ThouCanvas>
<figure>
<div class="image is-unselectable">
<img :src="$advent22.api_url('general/background')" />
<ThouCanvas>
<CalendarDoor
v-for="(door, index) in doors"
:key="`door-${index}`"
:door="door"
@doorClick="door_click"
@doorSuccess="door_success"
@doorFailure="door_failure"
@touch="door_hover(door.day)"
@mouseover="door_hover(door.day)"
@touchend="door_unhover"
@mouseout="door_unhover"
/>
</ThouCanvas>
</div>
<figcaption>{{ figure_caption }}</figcaption>
</figure>
</template>
@ -36,11 +43,21 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
})
export default class extends Vue {
public readonly doors!: Door[];
private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
public figure_caption = this.idle_caption;
declare $refs: {
multi_modal: MultiModal;
};
public door_hover(index: number) {
this.figure_caption = `Türchen ${index + 1}`;
}
public door_unhover() {
this.figure_caption = this.idle_caption;
}
public door_click() {
this.$refs.multi_modal.show_progress();
}