fix: positioning and scrollbar in singe file share

* Only hide the scrollbar when showing the modal. * Inherit max width and height from element for the viewer. * Replace element with viewer rather than inserting the viewer in it. Signed-off-by: Max <[email protected]>
nextcloud · Jul 25, 2022 · 9b3bdc4 · 9b3bdc4
1 parent 3ce6892
commit 9b3bdc4
Show file tree

Hide file tree

Showing 4 changed files with 75,673 additions and 6 deletions.
diff --git a/js/viewer-main.js b/js/viewer-main.js
diff --git a/js/viewer-main.js.map b/js/viewer-main.js.map
diff --git a/src/services/Viewer.js b/src/services/Viewer.js
@@ -34,6 +34,7 @@ export default class Viewer {
 		this._state = {}
 		this._state.file = ''
 		this._state.files = []
+		this._state.el = null
 		this._state.loadMore = () => ([])
 		this._state.onPrev = () => {}
 		this._state.onNext = () => {}

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -278,7 +278,9 @@ export default {
 				if (element) {
 					const el = document.querySelector(element)
 					if (el) {
-						el.appendChild(viewerRoot)
+						viewerRoot.style.maxWidth = el.style.maxWidth
+						viewerRoot.style.maxHeight = el.style.maxHeight
+						el.replaceWith(viewerRoot)
 					} else {
 						logger.warn('Could not find element ', { element })
 					}
@@ -406,7 +408,9 @@ export default {
 			const [dirPath, fileName] = extractFilePaths(path)
 
 			// prevent scrolling while opened
-			document.body.style.overflow = 'hidden'
+			if (!this.el) {
+				document.body.style.overflow = 'hidden'
+			}
 
 			// swap title with original one
 			const title = document.getElementsByTagName('head')[0].getElementsByTagName('title')[0]