Skip to content

Commit e5278d6

Browse files
ildyriaildyria
authored
Fix event propagation (#4044)
1 parent 682e287 commit e5278d6

File tree

7 files changed

+56
-57
lines changed

7 files changed

+56
-57
lines changed

‎resources/js/components/gallery/albumModule/AlbumListItem.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
'bg-primary-100 dark:bg-primary-900/50': isSelected,
66
}"
77
:data-album-id="album.id"
8-
@click="$emit('clicked', $event, album)"
9-
@contextmenu.prevent="$emit('contexted', $event, album)"
8+
@click="propagateClicked($event, album.id)"
9+
@contextmenu.prevent="propagateContexted($event, album.id)"
1010
>
1111
<!-- Thumbnail -->
1212
<router-link
@@ -78,6 +78,7 @@ import { useAlbumStore } from "@/stores/AlbumState";
7878
import { useLycheeStateStore } from "@/stores/LycheeState";
7979
import { useAlbumsStore } from "@/stores/AlbumsState";
8080
import ListBadge from "./thumbs/ListBadge.vue";
81+
import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
8182
8283
const albumStore = useAlbumStore();
8384
const albumsStore = useAlbumsStore();
@@ -89,11 +90,13 @@ defineProps<{
8990
isSelected: boolean;
9091
}>();
9192
92-
defineEmits<{
93-
clicked: [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
94-
contexted: [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
93+
const emits = defineEmits<{
94+
clicked: [event: MouseEvent, id: string];
95+
contexted: [event: MouseEvent, id: string];
9596
}>();
9697
98+
const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
99+
97100
const aspectRatio = computed(
98101
() => albumStore.config?.album_thumb_css_aspect_ratio ?? albumsStore.rootConfig?.album_thumb_css_aspect_ratio ?? "aspect-square",
99102
);

‎resources/js/components/gallery/albumModule/AlbumListView.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
v-if="!album.is_nsfw || are_nsfw_visible"
66
:album="album"
77
:is-selected="selectedIds.includes(album.id)"
8-
@clicked="(event, album) => $emit('album-clicked', event, album)"
9-
@contexted="(event, album) => $emit('album-contexted', event, album)"
8+
@clicked="propagateClicked"
9+
@contexted="propagateContexted"
1010
/>
1111
</template>
1212
</div>
@@ -16,17 +16,20 @@
1616
import { useLycheeStateStore } from "@/stores/LycheeState";
1717
import AlbumListItem from "./AlbumListItem.vue";
1818
import { storeToRefs } from "pinia";
19+
import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
1920
2021
const props = defineProps<{
2122
albums: App.Http.Resources.Models.ThumbAlbumResource[];
2223
selectedIds: string[];
2324
}>();
2425
25-
defineEmits<{
26-
"album-clicked": [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
27-
"album-contexted": [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
26+
const emits = defineEmits<{
27+
clicked: [event: MouseEvent, id: string];
28+
contexted: [event: MouseEvent, id: string];
2829
}>();
2930
31+
const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
32+
3033
const lycheeStore = useLycheeStateStore();
3134
const { are_nsfw_visible } = storeToRefs(lycheeStore);
3235
</script>

‎resources/js/components/gallery/albumModule/AlbumThumbPanel.vue‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,15 @@
1313
v-if="album_view_mode === 'list'"
1414
:albums="props.albums"
1515
:selected-ids="props.selectedAlbums"
16-
@album-clicked="propagateClickedFromList"
17-
@album-contexted="propagateMenuOpenFromList"
16+
@clicked="propagateClicked"
17+
@contexted="propagateContexted"
1818
/>
1919
<AlbumThumbPanelList
2020
v-else
2121
:albums="props.albums"
22-
:is-interactive="props.isInteractive"
2322
:selected-albums="props.selectedAlbums"
24-
@clicked="(id, e) => emits('clicked', id, e)"
25-
@contexted="(id, e) => emits('contexted', id, e)"
23+
@clicked="propagateClicked"
24+
@contexted="propagateContexted"
2625
/>
2726
</div>
2827
</Panel>
@@ -43,17 +42,16 @@
4342
v-if="album_view_mode === 'list'"
4443
:albums="slotProps.item.data"
4544
:selected-ids="props.selectedAlbums"
46-
@album-clicked="propagateClickedFromList"
47-
@album-contexted="propagateMenuOpenFromList"
45+
@clicked="propagateClicked"
46+
@contexted="propagateContexted"
4847
/>
4948

5049
<AlbumThumbPanelList
5150
v-else
5251
:albums="slotProps.item.data"
53-
:is-interactive="props.isInteractive"
5452
:selected-albums="props.selectedAlbums"
55-
@clicked="(id, e) => emits('clicked', id, e)"
56-
@contexted="(id, e) => emits('contexted', id, e)"
53+
@clicked="propagateClicked"
54+
@contexted="propagateContexted"
5755
/>
5856
</div>
5957
</template>
@@ -70,17 +68,16 @@
7068
v-if="album_view_mode === 'list'"
7169
:albums="albumTimeline.data"
7270
:selected-ids="props.selectedAlbums"
73-
@album-clicked="propagateClickedFromList"
74-
@album-contexted="propagateMenuOpenFromList"
71+
@clicked="propagateClicked"
72+
@contexted="propagateContexted"
7573
/>
7674

7775
<AlbumThumbPanelList
7876
v-else
7977
:albums="albumTimeline.data"
80-
:is-interactive="props.isInteractive"
8178
:selected-albums="props.selectedAlbums"
82-
@clicked="(id, e) => emits('clicked', id, e)"
83-
@contexted="(id, e) => emits('contexted', id, e)"
79+
@clicked="propagateClicked"
80+
@contexted="propagateContexted"
8481
/>
8582
</div>
8683
</template>
@@ -98,6 +95,7 @@ import AlbumThumbPanelList from "./AlbumThumbPanelList.vue";
9895
import AlbumListView from "./AlbumListView.vue";
9996
import { useLtRorRtL } from "@/utils/Helpers";
10097
import { isTouchDevice } from "@/utils/keybindings-utils";
98+
import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
10199
102100
const { isLTR } = useLtRorRtL();
103101
@@ -108,28 +106,19 @@ const props = defineProps<{
108106
header: string;
109107
albums: App.Http.Resources.Models.ThumbAlbumResource[];
110108
isAlone: boolean;
111-
isInteractive?: boolean;
112109
selectedAlbums: string[];
113110
isTimeline: boolean;
114111
}>();
115112
116113
// bubble up.
117114
const emits = defineEmits<{
118-
clicked: [id: string, event: MouseEvent];
119-
contexted: [id: string, event: MouseEvent];
115+
clicked: [event: MouseEvent, id: string];
116+
contexted: [event: MouseEvent, id: string];
120117
}>();
118+
const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
121119
122120
const { spliter, verifyOrder } = useSplitter();
123121
124-
// Handlers for list view - emit album ID directly
125-
const propagateClickedFromList = (e: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource) => {
126-
emits("clicked", album.id, e);
127-
};
128-
129-
const propagateMenuOpenFromList = (e: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource) => {
130-
emits("contexted", album.id, e);
131-
};
132-
133122
const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>(() =>
134123
split(props.albums as App.Http.Resources.Models.ThumbAlbumResource[]),
135124
);

‎resources/js/components/gallery/albumModule/AlbumThumbPanelList.vue‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
:album="album"
66
:cover_id="null"
77
:is-selected="props.selectedAlbums.includes(album.id)"
8-
@click="(e: MouseEvent) => maySelect(album.id, e)"
9-
@contextmenu.prevent="(e: MouseEvent) => menuOpen(album.id, e)"
8+
@click="propagateClicked($event, album.id)"
9+
@contextmenu.prevent="propagateContexted($event, album.id)"
1010
/>
1111
</template>
1212
</template>
1313
<script setup lang="ts">
1414
import AlbumThumb from "@/components/gallery/albumModule/thumbs/AlbumThumb.vue";
15+
import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
1516
import { useLycheeStateStore } from "@/stores/LycheeState";
1617
import { storeToRefs } from "pinia";
1718
@@ -20,27 +21,14 @@ const { are_nsfw_visible } = storeToRefs(lycheeStore);
2021
2122
const props = defineProps<{
2223
albums: App.Http.Resources.Models.ThumbAlbumResource[];
23-
isInteractive?: boolean;
2424
selectedAlbums: string[];
2525
}>();
2626
2727
// bubble up.
2828
const emits = defineEmits<{
29-
clicked: [id: string, event: MouseEvent];
30-
contexted: [id: string, event: MouseEvent];
29+
clicked: [event: MouseEvent, id: string];
30+
contexted: [event: MouseEvent, id: string];
3131
}>();
3232
33-
const maySelect = (id: string, e: MouseEvent) => {
34-
if (props.isInteractive === false) {
35-
return;
36-
}
37-
emits("clicked", id, e);
38-
};
39-
40-
const menuOpen = (id: string, e: MouseEvent) => {
41-
if (props.isInteractive === false) {
42-
return;
43-
}
44-
emits("contexted", id, e);
45-
};
33+
const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
4634
</script>

‎resources/js/composables/album/propagateEvents.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export function usePropagateAlbumEvents(
2+
emits: ((evt: "clicked", event: MouseEvent, id: string) => void) & ((evt: "contexted", event: MouseEvent, id: string) => void),
3+
) {
4+
function propagateClicked(event: MouseEvent, id: string) {
5+
emits("clicked", event, id);
6+
}
7+
8+
function propagateContexted(event: MouseEvent, id: string) {
9+
emits("contexted", event, id);
10+
}
11+
12+
return {
13+
propagateClicked,
14+
propagateContexted,
15+
};
16+
}

‎resources/js/composables/contextMenus/contextMenu.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ export function useContextMenu(selectors: Selectors, photoCallbacks: PhotoCallba
356356
menu.value.show(e);
357357
}
358358

359-
function albumMenuOpen(albumId: string, e: MouseEvent): void {
359+
function albumMenuOpen(e: MouseEvent, albumId: string): void {
360360
// Clear up Photo selection (if any)
361361
if (selectors.selectedPhotosIds !== undefined) {
362362
selectors.selectedPhotosIds.value = [];

‎resources/js/composables/selections/selections.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export function useSelection(photosStore: PhotosStore, albumsStore: AlbumsStore,
149149
lastPhotoClicked.value = photoId;
150150
}
151151

152-
function albumSelect(albumId: string, e: MouseEvent): void {
152+
function albumSelect(e: MouseEvent, albumId: string): void {
153153
// clear the Photo selection.
154154
selectedPhotosIds.value = [];
155155

0 commit comments

Comments
 (0)