Show sidebar when viewer is opened

The Viewer expects that, if the app has a sidebar, an
"OCA.Files.Sidebar" object exists. This object should contain a
"state.file" property with the name of the file currently shown (or an
empty string if the sidebar is closed), and "open" and "close" functions
to be called by the Viewer when opening and closing the sidebar is
triggered by the Viewer.

The sidebar adjusts its width to the width of the sidebar once the
opening ends. The sidebar comes from nextcloud/vue, and its opening is
animated with a transition, so "OCA.Files.Sidebar.open" needs to wait
until the transition ends to be resolved.

Besides the "OCA.Files.Sidebar" object the Viewer also expects that the
sidebar element in the DOM has an "app-sidebar" id. In nextcloud/vue >=
2.0.0 the id of the sidebar was changed to "app-sidebar-vue", so it
needs to be overridden to be found by the Viewer.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 75 insertions, 0 deletions

diff --git a/src/main.js b/src/main.js
index 7103b0b52..457184880 100644
--- a/src/main.js
+++ b/src/main.js
@@ -74,3 +74,78 @@ export default new Vue({
 	},
 	render: h => h(App),
 })
+
+window.store = store
+
+// Setup OCA.Files.Sidebar to be used by the viewer
+window.OCA.Files = {}
+
+const Sidebar = function() {
+	this.state = {
+		file: '',
+	}
+
+	store.watch(
+		(state, getters) => {
+			return getters.getSidebarStatus
+		},
+		(sidebarShown) => {
+			if (!sidebarShown) {
+				this.state.file = ''
+			}
+		}
+	)
+}
+
+const waitForSidebarToBeOpen = function(sidebarElement, resolve) {
+	if ('ontransitionend' in sidebarElement) {
+		const resolveOnceSidebarWidthHasChanged = (event) => {
+			if (event.propertyName !== 'min-width' && event.propertyName !== 'width' && event.propertyName !== 'max-width') {
+				return
+			}
+
+			sidebarElement.removeEventListener('transitionend', resolveOnceSidebarWidthHasChanged)
+
+			resolve()
+		}
+
+		sidebarElement.addEventListener('transitionend', resolveOnceSidebarWidthHasChanged)
+	} else {
+		const animationQuickValue = getComputedStyle(document.documentElement).getPropertyValue('--animation-quick')
+
+		// The browser does not support the "ontransitionend" event, so just
+		// wait a few milliseconds more than the duration of the transition.
+		setTimeout(() => {
+			console.debug('ontransitionend is not supported; the sidebar should have been fully shown by now')
+
+			resolve()
+		}, Number.parseInt(animationQuickValue) + 200)
+	}
+}
+
+Sidebar.prototype.open = function(path) {
+	// The sidebar is already open, so this can return immediately.
+	if (this.state.file) {
+		return
+	}
+
+	store.commit('showSidebar')
+	this.state.file = path
+
+	const sidebarElement = document.getElementById('app-sidebar')
+
+	// The Viewer adjusts its width to the sidebar width once the sidebar has
+	// been opened. The sidebar opens with an animation, so a delay is needed
+	// before the width can be properly adjusted.
+	return new Promise((resolve, reject) => {
+		waitForSidebarToBeOpen(sidebarElement, resolve)
+	})
+}
+Sidebar.prototype.close = function() {
+	store.dispatch('hideSidebar')
+	this.state.file = ''
+}
+
+Object.assign(window.OCA.Files, {
+	Sidebar: new Sidebar(),
+})