fix: Open in new tab does not work

kodadot · Oct 14, 2024 · 173ad7b · 173ad7b
1 parent 53f38bc
commit 173ad7b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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) {