render viewer content in element instead of modal

Signed-off-by: Max <[email protected]>

src/services/Viewer.js

@@ -47,6 +47,7 @@ export default class Viewer {
 		this._state.file = ''
 		this._state.fileInfo = null
 		this._state.files = []
+		this._state.el = null
 		this._state.loadMore = () => ([])
 		this._state.onPrev = () => {}
 		this._state.onNext = () => {}
@@ -114,6 +115,16 @@ export default class Viewer {
 		return this._state.files
 	}
 
+	/**
+	 * Get the element to render the current file in
+	 *
+	 * @memberof Viewer
+	 * @return {string} selector of the element
+	 */
+	get el() {
+		return this._state.el
+	}
+
 	/**
 	 * Get the supported mimetypes that can be opened with the viewer
 	 *
@@ -183,6 +194,19 @@ export default class Viewer {
 		return this._state.overrideHandlerId
 	}
 
+	/**
+	 * Set element to open viewer in
+	 *
+	 * @memberof Viewer
+	 * @param {string} el selector of the element to render the file in
+	 */
+	setRootElement(el = null) {
+		if (this._state.file) {
+			throw new Error('Please set root element before calling Viewer.open().')
+		}
+		this._state.el = el
+	}
+
 	/**
 	 * Open the path into the viewer
 	 *
@@ -223,12 +247,14 @@ export default class Viewer {
 		} else {
 			this._state.fileInfo = fileInfo
 		}
-		this._state.files = list
-		this._state.loadMore = loadMore
-		this._state.onPrev = onPrev
-		this._state.onNext = onNext
-		this._state.onClose = onClose
-		this._state.canLoop = canLoop
+		if (!this._state.el) {
+			this._state.files = list
+			this._state.loadMore = loadMore
+			this._state.onPrev = onPrev
+			this._state.onNext = onNext
+			this._state.onClose = onClose
+			this._state.canLoop = canLoop
+		}
 	}
 
 	/**

src/utils/fileUtils.js

@@ -56,18 +56,6 @@ const extractFilePaths = function(path) {
 	return [dirPath, fileName]
 }
 
-/**
- * A single shared file can be opend with path: '/'.
- * In this case there is no parent folder to find sibling files in.
- *
- * @param {string} path the full path
- * @return {boolean}
- */
-const isSingleSharedFile = function(path) {
-
-	return path === '/'
-}
-
 /**
  * Sorting comparison function
  *
@@ -153,4 +141,4 @@ const getDavPath = function({ filename, basename }) {
 	return getRootPath() + encodeFilePath(filename)
 }
 
-export { encodeFilePath, extractFilePaths, isSingleSharedFile, sortCompare, genFileInfo, getDavPath }
+export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, getDavPath }

src/views/Viewer.vue

@@ -22,7 +22,24 @@
  -->
 
 <template>
-	<NcModal v-if="initiated || currentFile.modal"
+	<div v-if="el" id="viewer">
+		<component :is="currentFile.modal"
+			v-if="!currentFile.failed"
+			:key="currentFile.fileid"
+			ref="content"
+			:active="true"
+			:can-swipe="false"
+			v-bind="currentFile"
+			:file-list="[currentFile]"
+			:is-full-screen="false"
+			:loaded.sync="currentFile.loaded"
+			:is-sidebar-shown="false"
+			class="viewer__file viewer__file--active"
+			@error="currentFailed" />
+		<Error v-else
+			:name="currentFile.basename" />
+	</div>
+	<NcModal v-else-if="initiated || currentFile.modal"
 		id="viewer"
 		:additional-trap-elements="trapElements"
 		:class="modalClass"
@@ -141,7 +158,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import isFullscreen from '@nextcloud/vue/dist/Mixins/isFullscreen.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 
-import { extractFilePaths, isSingleSharedFile, sortCompare } from '../utils/fileUtils.js'
+import { extractFilePaths, sortCompare } from '../utils/fileUtils.js'
 import { getRootPath } from '../utils/davUtils.js'
 import canDownload from '../utils/canDownload.js'
 import cancelableRequest from '../utils/CancelableRequest.js'
@@ -230,6 +247,9 @@ export default {
 		files() {
 			return this.Viewer.files
 		},
+		el() {
+			return this.Viewer.el
+		},
 		loadMore() {
 			return this.Viewer.loadMore
 		},
@@ -299,6 +319,23 @@ export default {
 	},
 
 	watch: {
+		el(element) {
+			logger.info(element)
+			this.$nextTick(() => {
+				const viewerRoot = document.getElementById('viewer')
+				if (element) {
+					const el = document.querySelector(element)
+					if (el) {
+						el.appendChild(viewerRoot)
+					} else {
+						logger.warn('Could not find element ', { element })
+					}
+				} else {
+					document.body.appendChild(viewerRoot)
+				}
+			})
+		},
+
 		file(path) {
 			// we got a valid path! Load file...
 			if (path && path.trim() !== '') {
@@ -508,7 +545,7 @@ export default {
 
 				// store current position
 				this.currentIndex = this.fileList.findIndex(file => file.basename === fileInfo.basename)
-			} else if (group && !isSingleSharedFile(path)) {
+			} else if (group && this.el === null) {
 				const mimes = this.mimeGroups[group]
 					? this.mimeGroups[group]
 					: [mime]