Fix event propagation

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

@@ -5,8 +5,8 @@
 			'bg-primary-100 dark:bg-primary-900/50': isSelected,
 		}"
 		:data-album-id="album.id"
-		@click="$emit('clicked', $event, album)"
-		@contextmenu.prevent="$emit('contexted', $event, album)"
+		@click="propagateClicked($event, album.id)"
+		@contextmenu.prevent="propagateContexted($event, album.id)"
 	>
 		<!-- Thumbnail -->
 		<router-link
@@ -78,6 +78,7 @@ import { useAlbumStore } from "@/stores/AlbumState";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { useAlbumsStore } from "@/stores/AlbumsState";
 import ListBadge from "./thumbs/ListBadge.vue";
+import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
 
 const albumStore = useAlbumStore();
 const albumsStore = useAlbumsStore();
@@ -89,11 +90,13 @@ defineProps<{
 	isSelected: boolean;
 }>();
 
-defineEmits<{
-	clicked: [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
-	contexted: [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
+const emits = defineEmits<{
+	clicked: [event: MouseEvent, id: string];
+	contexted: [event: MouseEvent, id: string];
 }>();
 
+const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
+
 const aspectRatio = computed(
 	() => albumStore.config?.album_thumb_css_aspect_ratio ?? albumsStore.rootConfig?.album_thumb_css_aspect_ratio ?? "aspect-square",
 );

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

@@ -5,8 +5,8 @@
 				v-if="!album.is_nsfw || are_nsfw_visible"
 				:album="album"
 				:is-selected="selectedIds.includes(album.id)"
-				@clicked="(event, album) => $emit('album-clicked', event, album)"
-				@contexted="(event, album) => $emit('album-contexted', event, album)"
+				@clicked="propagateClicked"
+				@contexted="propagateContexted"
 			/>
 		</template>
 	</div>
@@ -16,17 +16,20 @@
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import AlbumListItem from "./AlbumListItem.vue";
 import { storeToRefs } from "pinia";
+import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
 
 const props = defineProps<{
 	albums: App.Http.Resources.Models.ThumbAlbumResource[];
 	selectedIds: string[];
 }>();
 
-defineEmits<{
-	"album-clicked": [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
-	"album-contexted": [event: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource];
+const emits = defineEmits<{
+	clicked: [event: MouseEvent, id: string];
+	contexted: [event: MouseEvent, id: string];
 }>();
 
+const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
+
 const lycheeStore = useLycheeStateStore();
 const { are_nsfw_visible } = storeToRefs(lycheeStore);
 </script>

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

@@ -13,16 +13,15 @@
 				v-if="album_view_mode === 'list'"
 				:albums="props.albums"
 				:selected-ids="props.selectedAlbums"
-				@album-clicked="propagateClickedFromList"
-				@album-contexted="propagateMenuOpenFromList"
+				@clicked="propagateClicked"
+				@contexted="propagateContexted"
 			/>
 			<AlbumThumbPanelList
 				v-else
 				:albums="props.albums"
-				:is-interactive="props.isInteractive"
 				:selected-albums="props.selectedAlbums"
-				@clicked="(id, e) => emits('clicked', id, e)"
-				@contexted="(id, e) => emits('contexted', id, e)"
+				@clicked="propagateClicked"
+				@contexted="propagateContexted"
 			/>
 		</div>
 	</Panel>
@@ -43,17 +42,16 @@
 						v-if="album_view_mode === 'list'"
 						:albums="slotProps.item.data"
 						:selected-ids="props.selectedAlbums"
-						@album-clicked="propagateClickedFromList"
-						@album-contexted="propagateMenuOpenFromList"
+						@clicked="propagateClicked"
+						@contexted="propagateContexted"
 					/>
 
 					<AlbumThumbPanelList
 						v-else
 						:albums="slotProps.item.data"
-						:is-interactive="props.isInteractive"
 						:selected-albums="props.selectedAlbums"
-						@clicked="(id, e) => emits('clicked', id, e)"
-						@contexted="(id, e) => emits('contexted', id, e)"
+						@clicked="propagateClicked"
+						@contexted="propagateContexted"
 					/>
 				</div>
 			</template>
@@ -70,17 +68,16 @@
 						v-if="album_view_mode === 'list'"
 						:albums="albumTimeline.data"
 						:selected-ids="props.selectedAlbums"
-						@album-clicked="propagateClickedFromList"
-						@album-contexted="propagateMenuOpenFromList"
+						@clicked="propagateClicked"
+						@contexted="propagateContexted"
 					/>
 
 					<AlbumThumbPanelList
 						v-else
 						:albums="albumTimeline.data"
-						:is-interactive="props.isInteractive"
 						:selected-albums="props.selectedAlbums"
-						@clicked="(id, e) => emits('clicked', id, e)"
-						@contexted="(id, e) => emits('contexted', id, e)"
+						@clicked="propagateClicked"
+						@contexted="propagateContexted"
 					/>
 				</div>
 			</template>
@@ -98,6 +95,7 @@ import AlbumThumbPanelList from "./AlbumThumbPanelList.vue";
 import AlbumListView from "./AlbumListView.vue";
 import { useLtRorRtL } from "@/utils/Helpers";
 import { isTouchDevice } from "@/utils/keybindings-utils";
+import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
 
 const { isLTR } = useLtRorRtL();
 
@@ -108,28 +106,19 @@ const props = defineProps<{
 	header: string;
 	albums: App.Http.Resources.Models.ThumbAlbumResource[];
 	isAlone: boolean;
-	isInteractive?: boolean;
 	selectedAlbums: string[];
 	isTimeline: boolean;
 }>();
 
 // bubble up.
 const emits = defineEmits<{
-	clicked: [id: string, event: MouseEvent];
-	contexted: [id: string, event: MouseEvent];
+	clicked: [event: MouseEvent, id: string];
+	contexted: [event: MouseEvent, id: string];
 }>();
+const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
 
 const { spliter, verifyOrder } = useSplitter();
 
-// Handlers for list view - emit album ID directly
-const propagateClickedFromList = (e: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource) => {
-	emits("clicked", album.id, e);
-};
-
-const propagateMenuOpenFromList = (e: MouseEvent, album: App.Http.Resources.Models.ThumbAlbumResource) => {
-	emits("contexted", album.id, e);
-};
-
 const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>(() =>
 	split(props.albums as App.Http.Resources.Models.ThumbAlbumResource[]),
 );

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

@@ -5,13 +5,14 @@
 			:album="album"
 			:cover_id="null"
 			:is-selected="props.selectedAlbums.includes(album.id)"
-			@click="(e: MouseEvent) => maySelect(album.id, e)"
-			@contextmenu.prevent="(e: MouseEvent) => menuOpen(album.id, e)"
+			@click="propagateClicked($event, album.id)"
+			@contextmenu.prevent="propagateContexted($event, album.id)"
 		/>
 	</template>
 </template>
 <script setup lang="ts">
 import AlbumThumb from "@/components/gallery/albumModule/thumbs/AlbumThumb.vue";
+import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
 
@@ -20,27 +21,14 @@ const { are_nsfw_visible } = storeToRefs(lycheeStore);
 
 const props = defineProps<{
 	albums: App.Http.Resources.Models.ThumbAlbumResource[];
-	isInteractive?: boolean;
 	selectedAlbums: string[];
 }>();
 
 // bubble up.
 const emits = defineEmits<{
-	clicked: [id: string, event: MouseEvent];
-	contexted: [id: string, event: MouseEvent];
+	clicked: [event: MouseEvent, id: string];
+	contexted: [event: MouseEvent, id: string];
 }>();
 
-const maySelect = (id: string, e: MouseEvent) => {
-	if (props.isInteractive === false) {
-		return;
-	}
-	emits("clicked", id, e);
-};
-
-const menuOpen = (id: string, e: MouseEvent) => {
-	if (props.isInteractive === false) {
-		return;
-	}
-	emits("contexted", id, e);
-};
+const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
 </script>

resources/js/composables/album/propagateEvents.ts

@@ -0,0 +1,16 @@
+export function usePropagateAlbumEvents(
+	emits: ((evt: "clicked", event: MouseEvent, id: string) => void) & ((evt: "contexted", event: MouseEvent, id: string) => void),
+) {
+	function propagateClicked(event: MouseEvent, id: string) {
+		emits("clicked", event, id);
+	}
+
+	function propagateContexted(event: MouseEvent, id: string) {
+		emits("contexted", event, id);
+	}
+
+	return {
+		propagateClicked,
+		propagateContexted,
+	};
+}

resources/js/composables/contextMenus/contextMenu.ts

@@ -356,7 +356,7 @@ export function useContextMenu(selectors: Selectors, photoCallbacks: PhotoCallba
 		menu.value.show(e);
 	}
 
-	function albumMenuOpen(albumId: string, e: MouseEvent): void {
+	function albumMenuOpen(e: MouseEvent, albumId: string): void {
 		// Clear up Photo selection (if any)
 		if (selectors.selectedPhotosIds !== undefined) {
 			selectors.selectedPhotosIds.value = [];

resources/js/composables/selections/selections.ts

@@ -149,7 +149,7 @@ export function useSelection(photosStore: PhotosStore, albumsStore: AlbumsStore,
 		lastPhotoClicked.value = photoId;
 	}
 
-	function albumSelect(albumId: string, e: MouseEvent): void {
+	function albumSelect(e: MouseEvent, albumId: string): void {
 		// clear the Photo selection.
 		selectedPhotosIds.value = [];