fix: img defaul height/width on standalone mode

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
nextcloud · Aug 22, 2024 · efa6d73 · efa6d73
1 parent 4f4c20d
commit efa6d73
Show file tree

Hide file tree

Showing 12 changed files with 56,017 additions and 23 deletions.
diff --git a/css/main-B8JMBDQI.chunk.css b/css/main-B8JMBDQI.chunk.css
diff --git a/css/main-Bib0W53f.chunk.css b/css/main-Bib0W53f.chunk.css
diff --git a/css/main-Bq-oOeTE.chunk.css b/css/main-Bq-oOeTE.chunk.css
diff --git a/css/main-BqxICS9X.chunk.css b/css/main-BqxICS9X.chunk.css
diff --git a/css/main-CTwq7dfv.chunk.css b/css/main-CTwq7dfv.chunk.css
diff --git a/css/main-JMTTP9er.chunk.css b/css/main-JMTTP9er.chunk.css
diff --git a/css/viewer-main.css b/css/viewer-main.css
@@ -1,2 +1,2 @@
 /* extracted by css-entry-points-plugin */
-@import './main-CWJ2NyUp.chunk.css';
+@import './main-Bq-oOeTE.chunk.css';
diff --git a/js/viewer-main.mjs b/js/viewer-main.mjs
@@ -27616,6 +27616,10 @@ const Mime = {
       type: Boolean,
       default: true
     },
+    canZoom: {
+      type: Boolean,
+      default: false
+    },
     // is the content loaded?
     // synced with parent
     loaded: {
@@ -27711,6 +27715,9 @@ const Mime = {
           this.height = this.naturalHeight;
           this.width = this.naturalWidth;
         }
+      } else {
+        this.height = this.naturalHeight;
+        this.width = this.naturalWidth;
       }
     },
     /**
@@ -28021,9 +28028,6 @@ const _sfc_main$D = {
     canLoop() {
       return this.Viewer.canLoop;
     },
-    canZoom() {
-      return !this.Viewer.el;
-    },
     isStartOfList() {
       return this.currentIndex === 0;
     },
@@ -28159,7 +28163,7 @@ const _sfc_main$D = {
     },
     // user reached the end of list
     async isEndOfList(isEndOfList) {
-      if (!isEndOfList) {
+      if (!isEndOfList || this.el) {
         return;
       }
       if (this.loadMore && typeof this.loadMore === "function") {
@@ -28682,7 +28686,7 @@ const _sfc_main$D = {
 };
 var _sfc_render$D = function render16() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.el ? _c("div", { attrs: { "id": "viewer", "data-handler": _vm.handlerId } }, [!_vm.currentFile.failed ? _c(_vm.currentFile.modal, _vm._b({ key: _vm._f("uniqueKey")(_vm.currentFile), ref: "content", tag: "component", staticClass: "viewer__file viewer__file--active", attrs: { "active": true, "can-swipe": false, "file-list": [_vm.currentFile], "is-full-screen": false, "loaded": _vm.currentFile.loaded, "is-sidebar-shown": false }, on: { "update:loaded": function($event) {
+  return _vm.el ? _c("div", { attrs: { "id": "viewer", "data-handler": _vm.handlerId } }, [!_vm.currentFile.failed ? _c(_vm.currentFile.modal, _vm._b({ key: _vm._f("uniqueKey")(_vm.currentFile), ref: "content", tag: "component", staticClass: "viewer__file viewer__file--active", attrs: { "active": true, "can-swipe": false, "can-zoom": false, "file-list": [_vm.currentFile], "is-full-screen": false, "loaded": _vm.currentFile.loaded, "is-sidebar-shown": false }, on: { "update:loaded": function($event) {
     return _vm.$set(_vm.currentFile, "loaded", $event);
   }, "error": _vm.currentFailed } }, "component", _vm.currentFile, false)) : _c("Error", { attrs: { "name": _vm.currentFile.basename } })], 1) : _vm.initiated || _vm.currentFile.modal ? _c("NcModal", { staticClass: "viewer", class: _vm.modalClass, style: { width: _vm.isSidebarShown ? `${_vm.sidebarPosition}px` : null }, attrs: { "id": "viewer", "additional-trap-elements": _vm.trapElements, "clear-view-delay": -1, "close-button-contained": false, "dark": true, "data-handler": _vm.handlerId, "enable-slideshow": _vm.hasPrevious || _vm.hasNext, "slideshow-paused": _vm.editing, "enable-swipe": _vm.canSwipe && !_vm.editing, "has-next": _vm.hasNext, "has-previous": _vm.hasPrevious, "inline-actions": _vm.canEdit ? 1 : 0, "spread-navigation": true, "name": _vm.currentFile.basename, "view": _vm.currentFile.modal, "size": "full" }, on: { "close": _vm.close, "previous": _vm.previous, "next": _vm.next }, scopedSlots: _vm._u([{ key: "actions", fn: function() {
     return [_vm.canEdit ? _c("NcActionButton", { attrs: { "close-after-click": true }, on: { "click": _vm.onEdit }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
@@ -28700,7 +28704,7 @@ var _sfc_render$D = function render16() {
     return _vm.close.apply(null, arguments);
   } } }, [_vm.comparisonFile && !_vm.comparisonFile.failed && _vm.showComparison ? _c("div", { staticClass: "viewer__file-wrapper" }, [_c(_vm.comparisonFile.modal, _vm._b({ key: _vm._f("uniqueKey")(_vm.comparisonFile), ref: "comparison-content", tag: "component", staticClass: "viewer__file viewer__file--active", attrs: { "active": true, "can-swipe": false, "can-zoom": false, "editing": false, "is-full-screen": _vm.isFullscreen, "is-sidebar-shown": _vm.isSidebarShown, "loaded": _vm.comparisonFile.loaded }, on: { "update:loaded": function($event) {
     return _vm.$set(_vm.comparisonFile, "loaded", $event);
-  }, "error": _vm.comparisonFailed } }, "component", _vm.comparisonFile, false))], 1) : _vm._e(), _vm.previousFile ? _c("div", { key: _vm._f("uniqueKey")(_vm.previousFile), staticClass: "viewer__file-wrapper viewer__file-wrapper--hidden", attrs: { "aria-hidden": "true", "inert": "" } }, [!_vm.previousFile.failed ? _c(_vm.previousFile.modal, _vm._b({ ref: "previous-content", tag: "component", staticClass: "viewer__file", attrs: { "file-list": _vm.fileList }, on: { "error": _vm.previousFailed } }, "component", _vm.previousFile, false)) : _c("Error", { attrs: { "name": _vm.previousFile.basename } })], 1) : _vm._e(), _c("div", { key: _vm._f("uniqueKey")(_vm.currentFile), staticClass: "viewer__file-wrapper" }, [!_vm.currentFile.failed ? _c(_vm.currentFile.modal, _vm._b({ ref: "content", tag: "component", staticClass: "viewer__file viewer__file--active", attrs: { "active": true, "can-swipe": _vm.canSwipe, "can-zoom": _vm.canZoom, "editing": _vm.editing, "file-list": _vm.fileList, "is-full-screen": _vm.isFullscreen, "is-sidebar-shown": _vm.isSidebarShown, "loaded": _vm.currentFile.loaded }, on: { "update:canSwipe": function($event) {
+  }, "error": _vm.comparisonFailed } }, "component", _vm.comparisonFile, false))], 1) : _vm._e(), _vm.previousFile ? _c("div", { key: _vm._f("uniqueKey")(_vm.previousFile), staticClass: "viewer__file-wrapper viewer__file-wrapper--hidden", attrs: { "aria-hidden": "true", "inert": "" } }, [!_vm.previousFile.failed ? _c(_vm.previousFile.modal, _vm._b({ ref: "previous-content", tag: "component", staticClass: "viewer__file", attrs: { "file-list": _vm.fileList }, on: { "error": _vm.previousFailed } }, "component", _vm.previousFile, false)) : _c("Error", { attrs: { "name": _vm.previousFile.basename } })], 1) : _vm._e(), _c("div", { key: _vm._f("uniqueKey")(_vm.currentFile), staticClass: "viewer__file-wrapper" }, [!_vm.currentFile.failed ? _c(_vm.currentFile.modal, _vm._b({ ref: "content", tag: "component", staticClass: "viewer__file viewer__file--active", attrs: { "active": true, "can-swipe": _vm.canSwipe, "can-zoom": true, "editing": _vm.editing, "file-list": _vm.fileList, "is-full-screen": _vm.isFullscreen, "is-sidebar-shown": _vm.isSidebarShown, "loaded": _vm.currentFile.loaded }, on: { "update:canSwipe": function($event) {
     _vm.canSwipe = $event;
   }, "update:can-swipe": function($event) {
     _vm.canSwipe = $event;
@@ -28717,7 +28721,7 @@ var __component__$D = /* @__PURE__ */ normalizeComponent$1(
   _sfc_staticRenderFns$D,
   false,
   null,
-  "e16cf4dc"
+  "123bd91f"
 );
 const ViewerComponent = __component__$D.exports;
 function setAsyncState(vm, stateObject, state) {
@@ -121600,10 +121604,6 @@ const _sfc_main$2 = {
     NcLoadingIcon
   },
   props: {
-    canZoom: {
-      type: Boolean,
-      default: false
-    },
     editing: {
       type: Boolean,
       default: false
@@ -121724,6 +121724,9 @@ const _sfc_main$2 = {
     // Try to make sure that image position at stableX, stableY
     // in client coordinates stays in the same place on the screen.
     updateZoomAndShift(stableX, stableY, newZoomRatio) {
+      if (!this.canZoom) {
+        return;
+      }
       const element = this.$refs.image ?? this.$refs.video;
       const scrollX = stableX - element.getBoundingClientRect().x - this.width * this.zoomRatio / 2;
       const scrollY = stableY - element.getBoundingClientRect().y - this.height * this.zoomRatio / 2;
@@ -121803,6 +121806,9 @@ const _sfc_main$2 = {
      * @param {DragEvent} event the event
      */
     pointerMove(event) {
+      if (!this.canZoom) {
+        return;
+      }
       if (this.pointerCache.length > 0) {
         const index2 = this.pointerCache.findIndex(
           (cachedEv) => cachedEv.pointerId === event.pointerId
@@ -121927,7 +121933,7 @@ var __component__$2 = /* @__PURE__ */ normalizeComponent$1(
   _sfc_staticRenderFns$2,
   false,
   null,
-  "8f06eb25"
+  "ef7b99d0"
 );
 const Images$1 = __component__$2.exports;
 /**

diff --git a/js/viewer-main.mjs.map b/js/viewer-main.mjs.map
diff --git a/src/components/Images.vue b/src/components/Images.vue
@@ -115,10 +115,6 @@ export default {
 	},
 
 	props: {
-		canZoom: {
-			type: Boolean,
-			default: false,
-		},
 		editing: {
 			type: Boolean,
 			default: false,
@@ -261,6 +257,10 @@ export default {
 		// Try to make sure that image position at stableX, stableY
 		// in client coordinates stays in the same place on the screen.
 		updateZoomAndShift(stableX, stableY, newZoomRatio) {
+			if (!this.canZoom) {
+				return
+			}
+
 			// scrolling position relative to the image
 			const element = this.$refs.image ?? this.$refs.video
 			const scrollX = stableX - element.getBoundingClientRect().x - (this.width * this.zoomRatio / 2)
@@ -364,6 +364,9 @@ export default {
 		 * @param {DragEvent} event the event
 		 */
 		 pointerMove(event) {
+			if (!this.canZoom) {
+				return
+			}
 
 			if (this.pointerCache.length > 0) {
 				// Update pointer position in the pointer cache

diff --git a/src/mixins/Mime.js b/src/mixins/Mime.js
@@ -77,6 +77,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		canZoom: {
+			type: Boolean,
+			default: false,
+		},
 		// is the content loaded?
 		// synced with parent
 		loaded: {
@@ -197,6 +201,9 @@ export default {
 					this.height = this.naturalHeight
 					this.width = this.naturalWidth
 				}
+			} else {
+				this.height = this.naturalHeight
+				this.width = this.naturalWidth
 			}
 		},
 

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -32,6 +32,7 @@
 			ref="content"
 			:active="true"
 			:can-swipe="false"
+			:can-zoom="false"
 			v-bind="currentFile"
 			:file-list="[currentFile]"
 			:is-full-screen="false"
@@ -155,7 +156,7 @@
 					v-bind="currentFile"
 					:active="true"
 					:can-swipe.sync="canSwipe"
-					:can-zoom="canZoom"
+					:can-zoom="true"
 					:editing.sync="editing"
 					:file-list="fileList"
 					:is-full-screen="isFullscreen"
@@ -332,9 +333,6 @@ export default {
 		canLoop() {
 			return this.Viewer.canLoop
 		},
-		canZoom() {
-			return !this.Viewer.el
-		},
 		isStartOfList() {
 			return this.currentIndex === 0
 		},
@@ -505,7 +503,7 @@ export default {
 
 		// user reached the end of list
 		async isEndOfList(isEndOfList) {
-			if (!isEndOfList) {
+			if (!isEndOfList || this.el) {
 				return
 			}