Merge pull request #497 from azul/callbacks

add onPrev, onNext, and onClose callbacks

package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@nextcloud/auth": "^1.3.0",
     "@nextcloud/axios": "^1.3.3",
+    "@nextcloud/paths": "^1.1.2",
     "@nextcloud/router": "^1.1.0",
     "@nextcloud/vue": "^2.3.0",
     "camelcase": "^6.0.0",

src/services/FilesActionHandler.js

@@ -0,0 +1,47 @@
+/**
+ * @copyright Copyright (c) 2020 Azul <azul@riseup.net>
+ *
+ * @author Azul <azul@riseup.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { encodePath } from '@nextcloud/paths'
+
+export default function(name, context) {
+	// replace potential leading double slashes
+	const path = `${context.dir}/${name}`.replace(/^\/\//, '/')
+	const oldQuery = location.search.replace(/^\?/, '')
+	const onClose = () => OC.Util.History.pushState(oldQuery)
+	if (!context.fileInfoModel && context.fileList) {
+		context.fileInfoModel = context.fileList.getModelForFile(name)
+	}
+	if (context.fileInfoModel) {
+		pushToHistory({ fileid: context.fileInfoModel.get('id') })
+	}
+	OCA.Viewer.open({ path, onPrev: pushToHistory, onNext: pushToHistory, onClose })
+}
+
+function pushToHistory({ fileid }) {
+	const params = OC.Util.History.parseUrlQuery()
+	const dir = params.dir
+	delete params.dir
+	delete params.fileid
+	params.openfile = fileid
+	const query = 'dir=' + encodePath(dir) + '&' + OC.buildQueryString(params)
+	OC.Util.History.pushState(query)
+}

src/services/Viewer.js

@@ -32,6 +32,9 @@ export default class Viewer {
 		this.#state.file = ''
 		this.#state.files = []
 		this.#state.loadMore = () => ([])
+		this.#state.onPrev = () => {}
+		this.#state.onNext = () => {}
+		this.#state.onClose = () => {}
 		this.#state.handlers = []
 
 		// ! built-in handlers
@@ -87,10 +90,15 @@ export default class Viewer {
 	 * Open the path into the viewer
 	 *
 	 * @memberof Viewer
-	 * @param {string} path the path to open
-	 * @param {Object[]} [list] the list of files as objects (fileinfo) format
+	 * @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 {function} options.loadMore callback for loading more files
+	 * @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 = () => ([]) } = {}) {
+	open({ path, list = [], loadMore = () => ([]), onPrev = () => {}, onNext = () => {}, onClose = () => {} } = {}) {
 		// TODO: remove legacy method in NC 20 ?
 		if (typeof arguments[0] === 'string') {
 			path = arguments[0]
@@ -112,6 +120,9 @@ export default class Viewer {
 		this.#state.file = path
 		this.#state.files = list
 		this.#state.loadMore = loadMore
+		this.#state.onPrev = onPrev
+		this.#state.onNext = onNext
+		this.#state.onClose = onClose
 	}
 
 	/**

src/views/Viewer.vue

@@ -115,6 +115,7 @@ import File from '../models/file'
 import Mime from '../mixins/Mime'
 import getFileList from '../services/FileList'
 import getFileInfo from '../services/FileInfo'
+import filesActionHandler from '../services/FilesActionHandler'
 
 import cancelableRequest from '../utils/CancelableRequest'
 
@@ -223,8 +224,8 @@ export default {
 				console.info('Opening viewer for file ', path)
 				this.openFile(path)
 			} else {
-				// path is empty, closing!
-				this.close()
+				// path is empty, we're closing!
+				this.cleanup()
 			}
 		},
 
@@ -329,7 +330,7 @@ export default {
 			const title = document.getElementsByTagName('head')[0].getElementsByTagName('title')[0]
 			if (title && !title.dataset.old) {
 				title.dataset.old = document.title
-				document.title = `${fileName} - ${OC.theme.title}`
+				this.updateTitle(fileName)
 			}
 
 			try {
@@ -447,6 +448,10 @@ export default {
 
 		},
 
+		updateTitle(fileName) {
+			document.title = `${fileName} - ${OCA.Theming.name}`
+		},
+
 		/**
 		 * Registering possible new handers
 		 *
@@ -555,10 +560,7 @@ export default {
 					displayName: t('viewer', 'View'),
 					mime,
 					permissions: OC.PERMISSION_READ,
-					actionHandler: (name, { dir }) => {
-						// replace potential leading double slashes
-						OCA.Viewer.open(`${dir}/${name}`.replace(/^\/\//, '/'))
-					},
+					actionHandler: filesActionHandler,
 				})
 				OCA.Files.fileActions.setDefault(mime, 'view')
 			}
@@ -578,8 +580,13 @@ export default {
 		 * Close the viewer
 		 */
 		close() {
-			// reset all properties
+			// This will set file to ''
+			// which then triggers cleanup.
 			OCA.Viewer.close()
+		},
+
+		cleanup() {
+			// reset all properties
 			this.currentFile = {}
 			this.currentModal = null
 			this.fileList = []
@@ -593,6 +600,12 @@ export default {
 			// restore default
 			document.body.style.overflow = null
 
+			// Callback before updating the title
+			// If the callback creates a new entry in browser history
+			// the title update will affect the new entry
+			// rather then the previous one.
+			this.onClose()
+
 			// swap back original title
 			const title = document.getElementsByTagName('head')[0].getElementsByTagName('title')[0]
 			if (title && title.dataset.old) {
@@ -605,24 +618,32 @@ export default {
 		 * Open previous available file
 		 */
 		previous() {
+			const oldFileInfo = this.fileList[this.currentIndex]
 			this.currentIndex--
 			if (this.currentIndex < 0) {
 				this.currentIndex = this.fileList.length - 1
 			}
 
-			this.openFileFromList(this.fileList[this.currentIndex])
+			const fileInfo = this.fileList[this.currentIndex]
+			this.openFileFromList(fileInfo)
+			this.onPrev(fileInfo, oldFileInfo)
+			this.updateTitle(this.currentFile.basename)
 		},
 
 		/**
 		 * Open next available file
 		 */
 		next() {
+			const oldFileInfo = this.fileList[this.currentIndex]
 			this.currentIndex++
 			if (this.currentIndex > this.fileList.length - 1) {
 				this.currentIndex = 0
 			}
 
-			this.openFileFromList(this.fileList[this.currentIndex])
+			const fileInfo = this.fileList[this.currentIndex]
+			this.openFileFromList(fileInfo)
+			this.onNext(fileInfo, oldFileInfo)
+			this.updateTitle(this.currentFile.basename)
 		},
 
 		/**
@@ -674,6 +695,18 @@ export default {
 				this.sidebarWidth = sidebar.offsetWidth
 			}
 		},
+
+		onPrev(info, oldFileInfo) {
+			this.Viewer.onPrev(info, oldFileInfo)
+		},
+
+		onNext(info, oldFileInfo) {
+			this.Viewer.onNext(oldFileInfo)
+		},
+
+		onClose() {
+			this.Viewer.onClose()
+		},
 	},
 }
 </script>