WIP: render viewer content in element instead of modal

Signed-off-by: Max <max@nextcloud.com>

src/main.js

@@ -58,6 +58,7 @@ if (window.OCA) {
 	OCA.Viewer.version = appVersion
 }
 
+
 // Create document root
 const ViewerRoot = document.createElement('div')
 ViewerRoot.id = 'viewer'

src/services/Viewer.js

@@ -39,6 +39,7 @@ export default class Viewer {
 		this._state.onNext = () => {}
 		this._state.onClose = () => {}
 		this._state.canLoop = true
+		this._state.el = null
 		this._state.handlers = []
 
 		// ! built-in handlers
@@ -90,6 +91,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
 	 *
@@ -157,13 +168,14 @@ export default class Viewer {
 	 * @param {object} options Options for opening the viewer
 	 * @param {string} options.path path of the file to open
 	 * @param {object[]} [options.list] the list of files as objects (fileinfo) format
+	 * @param {string} options.el selector of the element to render the file in
 	 * @param {Function} options.loadMore callback for loading more files
 	 * @param {boolean} options.canLoop can the viewer loop over the array
 	 * @param {Function} options.onPrev callback when navigating back to previous file
 	 * @param {Function} options.onNext callback when navigation forward to next file
 	 * @param {Function} options.onClose callback when closing the viewer
 	 */
-	open({ path, list = [], loadMore = () => ([]), canLoop = true, onPrev = () => {}, onNext = () => {}, onClose = () => {} } = {}) {
+	open({ path, list = [], el = null, loadMore = () => ([]), canLoop = true, onPrev = () => {}, onNext = () => {}, onClose = () => {} } = {}) {
 		if (typeof arguments[0] === 'string') {
 			throw new Error('Opening the viewer with a single string parameter is deprecated. Please use a destructuring object instead', `OCA.Viewer.open({ path: '${path}' })`)
 		}
@@ -187,6 +199,7 @@ export default class Viewer {
 		this._state.onNext = onNext
 		this._state.onClose = onClose
 		this._state.canLoop = canLoop
+		this._state.el = el
 	}
 
 	/**

src/views/Viewer.vue

@@ -22,7 +22,24 @@
  -->
 
 <template>
-	<Modal 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>
+	<Modal v-else-if="initiated || currentFile.modal"
 		id="viewer"
 		size="full"
 		:class="{'icon-loading': !currentFile.loaded && !currentFile.failed,
@@ -203,6 +220,9 @@ export default {
 		files() {
 			return this.Viewer.files
 		},
+		el() {
+			return this.Viewer.el
+		},
 		loadMore() {
 			return this.Viewer.loadMore
 		},
@@ -249,6 +269,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.trim() !== '') {