feat: Compare files side by side

Signed-off-by: Julius Härtl <[email protected]>

src/services/Viewer.js

@@ -47,6 +47,7 @@ export default class Viewer {
  this._state = {}
  this._state.file = ''
  this._state.fileInfo = null
+ this._state.compareFileInfo = null
  this._state.files = []
  this._state.enableSidebar = true
  this._state.el = null
@@ -107,6 +108,16 @@ export default class Viewer {
  return this._state.fileInfo
  }
 
+ /**
+ * Get the current comparison view opened file fileInfo
+ *
+ * @memberof Viewer
+ * @return {?Fileinfo} the currently opened file fileInfo
+ */
+ get compareFileInfo() {
+ return this._state.compareFileInfo
+ }
+
  /**
  * Get the current files list
  *
@@ -291,6 +302,13 @@ export default class Viewer {
  this.open(options)
  }
 
+ compare(currentFileInfo, versionFileInfo) {
+ /* this.open({
+ fileInfo: currentFileInfo,
+ }) */
+ this._state.compareFileInfo = versionFileInfo
+ }
+
  /**
  * Close the opened file
  *

src/views/Viewer.vue

@@ -111,7 +111,22 @@
  </NcActionButton>
  </template>
 
- <div class="viewer__content" @click.self.exact="close">
+ <div class="viewer__content" :class="contentClass" @click.self.exact="close">
+ <component :is="comparisonFile.modal"
+ v-if="comparisonFile && !comparisonFile.failed"
+ :key="comparisonFile.fileid"
+ ref="content"
+ v-bind="comparisonFile"
+ :active="true"
+ :can-swipe="false"
+ :can-zoom="false"
+ :editing="false"
+ :is-full-screen="isFullscreen"
+ :is-sidebar-shown="isSidebarShown"
+ :loaded.sync="comparisonFile.loaded"
+ class="viewer__file viewer__file--active"
+ @error="currentFailed" />
+
  <!-- PREVIOUS -->
  <component :is="previousFile.modal"
  v-if="previousFile && !previousFile.failed"
@@ -230,6 +245,7 @@ export default {
  currentIndex: 0,
  previousFile: {},
  currentFile: {},
+ comparisonFile: {},
  nextFile: {},
  fileList: [],
 
@@ -274,6 +290,9 @@ export default {
  fileInfo() {
  return this.Viewer.fileInfo
  },
+ comparisonFileInfo() {
+ return this.Viewer.compareFileInfo
+ },
  files() {
  return this.Viewer.files
  },
@@ -365,6 +384,12 @@ export default {
  'image--fullscreen': this.isImage && this.isFullscreenMode,
  }
  },
+
+ contentClass() {
+ return {
+ viewer__split: this.comparisonFile,
+ }
+ },
  },
 
  watch: {
@@ -406,6 +431,16 @@ export default {
  }
  },
 
+ comparisonFileInfo(fileInfo) {
+ if (fileInfo) {
+ logger.info('Opening viewer for comparisonFileInfo ', { fileInfo })
+ this.compareFile(fileInfo)
+ } else {
+ // object is undefined, we're closing!
+ this.cleanup()
+ }
+ },
+
  files(fileList) {
  // the files list changed, let's update the current opened index
  const currentIndex = fileList.findIndex(file => file.basename === this.currentFile.basename)
@@ -516,7 +551,7 @@ export default {
  this.cancelRequestFile()
 
  // do not open the same file again
- if (path === this.currentFile.path) {
+ if (path === this.currentFile.path && !this.currentFile.source) { // need to still run when switching from version to current file
  return
  }
 
@@ -567,7 +602,7 @@ export default {
  this.cancelRequestFolder()
 
  // do not open the same file info again
- if (fileInfo.basename === this.currentFile.basename) {
+ if (fileInfo.basename === this.currentFile.basename && fileInfo.source !== this.currentFile.source) {
  return
  }
 
@@ -637,6 +672,7 @@ export default {
 
  // show file
  this.currentFile = new File(fileInfo, mime, handler.component)
+ this.comparisonFile = null
  this.updatePreviousNext()
 
  // if sidebar was opened before, let's update the file
@@ -656,6 +692,10 @@ export default {
  this.updatePreviousNext()
  },
 
+ async compareFile(fileInfo) {
+ this.comparisonFile = new File(fileInfo, fileInfo.mime, this.components[fileInfo.mime])
+ },
+
  /**
  * Show sidebar if available and a file is already opened
  */
@@ -1085,6 +1125,12 @@ export default {
  cursor: pointer;
  }
 
+ &__split {
+ .viewer__file--active {
+ width: 50%;
+ }
+ }
+
  :deep(.modal-wrapper) {
  .modal-container {
  // Ensure some space at the bottom