From 173ad7b3d4ba9d3f14271738145a9e69a130e748 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 14 Oct 2024 22:54:02 +0200
Subject: [PATCH] fix: Open in new tab does not work

---
 components/gallery/GalleryItem.vue        | 9 +++++++--
 components/gallery/GalleryItemToolBar.vue | 6 +++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index df745da9ec..716b683ef4 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -8,7 +8,7 @@
     <div class="flex flex-col lg:flex-row">
       <div class="w-full lg:w-2/5 lg:pr-7 group">
         <div
-          id="nft-img-container"
+          :id="CONTAINER_ID"
           ref="imgref"
           :class="{
             'relative': !isFullscreen,
@@ -41,7 +41,10 @@
             :audio-player-cover="image"
           />
         </div>
-        <GalleryItemToolBar @toggle="toggleFullscreen" />
+        <GalleryItemToolBar
+          :container-id="CONTAINER_ID"
+          @toggle="toggleFullscreen"
+        />
       </div>
 
       <div class="w-full lg:w-3/5 lg:pl-5 py-7">
@@ -188,6 +191,8 @@ import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
 import { convertMarkdownToText } from '@/utils/markdown'
 import { generateNftImage } from '@/utils/seoImageGenerator'
 
+const CONTAINER_ID = 'nft-img-container'
+
 const NuxtImg = resolveComponent('NuxtImg')
 
 const { urlPrefix } = usePrefix()
diff --git a/components/gallery/GalleryItemToolBar.vue b/components/gallery/GalleryItemToolBar.vue
index aaec8605a5..42f5c53847 100644
--- a/components/gallery/GalleryItemToolBar.vue
+++ b/components/gallery/GalleryItemToolBar.vue
@@ -74,6 +74,10 @@ type ReloadElement =
 
 defineEmits(['toggle'])
 
+const props = defineProps<{
+  containerId: string
+}>()
+
 const { getNft: nft, getNftImage: nftImage, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
 
 const isLoading = ref(false)
@@ -126,7 +130,7 @@ const handleReloadClick = () => {
 }
 
 const openInNewTab = (selector: string, attribute: string = 'src') => {
-  const element = document.querySelector(selector)
+  const element = document.querySelector(`#${props.containerId} ${selector}`)
   if (element) {
     const src = element.getAttribute(attribute)
     if (src) {