fix(attachments): Show all loaded images in ShowImageModal

Instead of just opening native image attachments, query the HTML document to get all loaded attachments (regardless whether native, via direct URL or via DAV) and list them. Signed-off-by: Jonas <[email protected]>
nextcloud · Nov 28, 2023 · 2770625 · 2770625
1 parent 35ff52f
commit 2770625
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue
@@ -24,6 +24,7 @@
 	<NodeViewWrapper :contenteditable="isEditable">
 		<figure class="image image-view"
 			data-component="image-view"
+			:data-attachment-type="attachmentType"
 			:class="{'icon-loading': !loaded, 'image-view--failed': failed}"
 			:data-src="src">
 			<div v-if="canDisplayImage"
@@ -101,7 +102,7 @@
 					</div>
 				</transition>
 				<div class="image__modal">
-					<ShowImageModal :images="imageAttachments"
+					<ShowImageModal :images="embeddedImageList"
 						:start-index="imageIndex"
 						:show="showImageModal"
 						@close="showImageModal=false" />
@@ -179,6 +180,7 @@ export default {
 			showImageModal: false,
 			imageIndex: null,
 			isEditable: false,
+			embeddedImageList: [],
 		}
 	},
 	computed: {
@@ -241,7 +243,6 @@ export default {
 					this.loaded = true
 					this.attachmentType = this.attachment.isImage ? this.$attachmentResolver.ATTACHMENT_TYPE_IMAGE : this.$attachmentResolver.ATTACHMENT_TYPE_MEDIA
 					this.attachmentSize = this.attachment.size
-					resolve(this.attachment.previewUrl)
 				}
 				img.onerror = (e) => {
 					reject(new LoadImageError(e, this.attachment.previewUrl))
@@ -269,7 +270,23 @@ export default {
 		onLoaded() {
 			this.loaded = true
 		},
-		async handleAttachmentClick() {
+		async updateEmbeddedImageList() {
+			this.embeddedImageList = []
+			// Get all images that succeeded to load
+			const imageViews = Array.from(document.querySelectorAll('figure[data-component="image-view"][data-attachment-type="image"]:not(.image-view--failed).image-view'))
+			for (const imgv of imageViews) {
+				const src = imgv.getAttribute('data-src')
+				if(!this.embeddedImageList.find(i => i.src === src)) {
+					// Don't add duplicates (e.g. when several editors are loaded in HTML document)
+					const attachment = await this.$attachmentResolver.resolve(imgv.getAttribute('data-src'))
+					this.embeddedImageList.push({
+						src,
+						...attachment,
+					})
+				}
+			}
+		},
+		handleAttachmentClick() {
 			// Open in viewer if possible
 			if (OCA.Viewer
 				// Viewer is not in use
@@ -288,7 +305,8 @@ export default {
 			window.location.assign(this.attachment.fullUrl)
 		},
 		async handleImageClick() {
-			this.imageIndex = this.imageAttachments.findIndex(i => (i.isImage && i.fileId === this.attachment.fileId))
+			await this.updateEmbeddedImageList()
+			this.imageIndex = this.embeddedImageList.findIndex(i => (i.src === this.src))
 			if (this.imageIndex !== -1) {
 				this.showImageModal = true
 			} else {

diff --git a/src/services/AttachmentResolver.js b/src/services/AttachmentResolver.js
@@ -86,6 +86,7 @@ export default class AttachmentResolver {
 		if (isDirectUrl(src)) {
 			return {
 				isImage: true,
+				name: this.#name(src),
 				previewUrl: src,
 				fullUrl: src,
 			}
@@ -94,11 +95,16 @@ export default class AttachmentResolver {
 		// Fallback: Return DAV url (e.g. for relative paths to images)
 		return {
 			isImage: true,
+			name: this.#name(src),
 			previewUrl: this.#davUrl(src),
 			fullUrl: this.#davUrl(src),
 		}
 	}
 
+	#name(src) {
+		return src.split('/').pop()
+	}
+
 	#davUrl(src) {
 		if (this.#user) {
 			const uid = this.#user.uid