Image Diff Viewing + Download Diff Viewing

7 files changed, 619 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js b/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
new file mode 100644
index 00000000000..6c1840361af
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/constants.js
@@ -0,0 +1,12 @@
+export const diffModes = {
+  replaced: 'replaced',
+  new: 'new',
+  deleted: 'deleted',
+  renamed: 'renamed',
+};
+
+export const imageViewMode = {
+  twoup: 'twoup',
+  swipe: 'swipe',
+  onion: 'onion',
+};
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
new file mode 100644
index 00000000000..4eca3fd4e97
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -0,0 +1,70 @@
+<script>
+import { viewerInformationForPath } from '../content_viewer/lib/viewer_utils';
+import ImageDiffViewer from './viewers/image_diff_viewer.vue';
+import DownloadDiffViewer from './viewers/download_diff_viewer.vue';
+
+export default {
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    newSha: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    oldSha: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    viewer() {
+      if (!this.newPath) return null;
+
+      const previewInfo = viewerInformationForPath(this.newPath);
+      if (!previewInfo) return DownloadDiffViewer;
+
+      switch (previewInfo.id) {
+        case 'image':
+          return ImageDiffViewer;
+        default:
+          return DownloadDiffViewer;
+      }
+    },
+    fullOldPath() {
+      return `${gon.relative_url_root}/${this.projectPath}/raw/${this.oldSha}/${this.oldPath}`;
+    },
+    fullNewPath() {
+      return `${gon.relative_url_root}/${this.projectPath}/raw/${this.newSha}/${this.newPath}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="diff-file preview-container"
+    v-if="viewer">
+    <component
+      :is="viewer"
+      :diff-mode="diffMode"
+      :new-path="fullNewPath"
+      :old-path="fullOldPath"
+      :project-path="projectPath"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
new file mode 100644
index 00000000000..50389b6ae63
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue
@@ -0,0 +1,69 @@
+<script>
+import DownloadViewer from '../../content_viewer/viewers/download_viewer.vue';
+import { diffModes } from '../constants';
+
+export default {
+  components: {
+    DownloadViewer,
+  },
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  diffModes,
+};
+</script>
+
+<template>
+  <div class="diff-file-container">
+    <div class="diff-viewer">
+      <div
+        v-if="diffMode === $options.diffModes.replaced"
+        class="two-up view row">
+        <div class="col-sm-6 deleted">
+          <download-viewer
+            :path="oldPath"
+            :project-path="projectPath"
+          />
+        </div>
+        <div class="col-sm-6 added">
+          <download-viewer
+            :path="newPath"
+            :project-path="projectPath"
+          />
+        </div>
+      </div>
+      <div
+        v-else-if="diffMode === $options.diffModes.new"
+        class="added">
+        <download-viewer
+          :path="newPath"
+          :project-path="projectPath"
+        />
+      </div>
+      <div
+        v-else
+        class="deleted">
+        <download-viewer
+          :path="oldPath"
+          :project-path="projectPath"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
new file mode 100644
index 00000000000..efcc39197b0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -0,0 +1,160 @@
+<script>
+import { pixeliseValue } from '../../../lib/utils/dom_utils';
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      onionMaxWidth: undefined,
+      onionMaxHeight: undefined,
+      onionOldImgInfo: null,
+      onionNewImgInfo: null,
+      onionDraggerPos: 0,
+      onionOpacity: 1,
+      dragging: false,
+    };
+  },
+  computed: {
+    onionMaxPixelWidth() {
+      return pixeliseValue(this.onionMaxWidth);
+    },
+    onionMaxPixelHeight() {
+      return pixeliseValue(this.onionMaxHeight);
+    },
+    onionDraggerPixelPos() {
+      return pixeliseValue(this.onionDraggerPos);
+    },
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('mouseup', this.stopDrag);
+    this.$refs.dragger.removeEventListener('mousedown', this.startDrag);
+  },
+  methods: {
+    dragMove(e) {
+      if (!this.dragging) return;
+      const left = e.pageX - this.$refs.dragTrack.getBoundingClientRect().left;
+      const dragTrackWidth =
+        this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
+
+      let leftValue = left;
+      if (leftValue < 0) leftValue = 0;
+      if (leftValue > dragTrackWidth) leftValue = dragTrackWidth;
+
+      this.onionOpacity = left / dragTrackWidth;
+      this.onionDraggerPos = leftValue;
+    },
+    startDrag() {
+      this.dragging = true;
+      document.body.style.userSelect = 'none';
+      document.body.addEventListener('mousemove', this.dragMove);
+    },
+    stopDrag() {
+      this.dragging = false;
+      document.body.style.userSelect = '';
+      document.body.removeEventListener('mousemove', this.dragMove);
+    },
+    prepareOnionSkin() {
+      if (this.onionOldImgInfo && this.onionNewImgInfo) {
+        this.onionMaxWidth = Math.max(
+          this.onionOldImgInfo.renderedWidth,
+          this.onionNewImgInfo.renderedWidth,
+        );
+        this.onionMaxHeight = Math.max(
+          this.onionOldImgInfo.renderedHeight,
+          this.onionNewImgInfo.renderedHeight,
+        );
+
+        this.onionOpacity = 1;
+        this.onionDraggerPos =
+          this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
+
+        document.body.addEventListener('mouseup', this.stopDrag);
+      }
+    },
+    onionNewImgLoaded(imgInfo) {
+      this.onionNewImgInfo = imgInfo;
+      this.prepareOnionSkin();
+    },
+    onionOldImgLoaded(imgInfo) {
+      this.onionOldImgInfo = imgInfo;
+      this.prepareOnionSkin();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="onion-skin view">
+    <div
+      class="onion-skin-frame"
+      :style="{
+        'width': onionMaxPixelWidth,
+        'height': onionMaxPixelHeight,
+        'user-select': dragging === true ? 'none' : '',
+    }">
+      <div
+        class="frame deleted"
+        :style="{
+          'width': onionMaxPixelWidth,
+          'height': onionMaxPixelHeight,
+      }">
+        <image-viewer
+          key="onionOldImg"
+          :render-info="false"
+          :path="oldPath"
+          :project-path="projectPath"
+          @imgLoaded="onionOldImgLoaded"
+        />
+      </div>
+      <div
+        class="added frame"
+        ref="addedFrame"
+        :style="{
+          'opacity': onionOpacity,
+          'width': onionMaxPixelWidth,
+          'height': onionMaxPixelHeight,
+      }">
+        <image-viewer
+          key="onionNewImg"
+          :render-info="false"
+          :path="newPath"
+          :project-path="projectPath"
+          @imgLoaded="onionNewImgLoaded"
+        />
+      </div>
+      <div class="controls">
+        <div class="transparent"></div>
+        <div
+          class="drag-track"
+          ref="dragTrack"
+          @mousedown="startDrag"
+          @mouseup="stopDrag">
+          <div
+            class="dragger"
+            ref="dragger"
+            :style="{ 'left': onionDraggerPixelPos }">
+          </div>
+        </div>
+        <div class="opaque"></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
new file mode 100644
index 00000000000..fc513ebfce1
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -0,0 +1,158 @@
+<script>
+import _ from 'underscore';
+import { pixeliseValue } from '../../../lib/utils/dom_utils';
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dragging: false,
+      swipeOldImgInfo: null,
+      swipeNewImgInfo: null,
+      swipeMaxWidth: undefined,
+      swipeMaxHeight: undefined,
+      swipeBarPos: 1,
+      swipeWrapWidth: undefined,
+    };
+  },
+  computed: {
+    swipeMaxPixelWidth() {
+      return pixeliseValue(this.swipeMaxWidth);
+    },
+    swipeMaxPixelHeight() {
+      return pixeliseValue(this.swipeMaxHeight);
+    },
+    swipeWrapPixelWidth() {
+      return pixeliseValue(this.swipeWrapWidth);
+    },
+    swipeBarPixelPos() {
+      return pixeliseValue(this.swipeBarPos);
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeThrottled, false);
+    document.body.removeEventListener('mouseup', this.stopDrag);
+    document.body.removeEventListener('mousemove', this.dragMove);
+  },
+  mounted() {
+    window.addEventListener('resize', this.resize, false);
+  },
+  methods: {
+    dragMove(e) {
+      if (!this.dragging) return;
+
+      let leftValue = e.pageX - this.$refs.swipeFrame.getBoundingClientRect().left;
+      const spaceLeft = 20;
+      const { clientWidth } = this.$refs.swipeFrame;
+      if (leftValue <= 0) {
+        leftValue = 0;
+      } else if (leftValue > clientWidth - spaceLeft) {
+        leftValue = clientWidth - spaceLeft;
+      }
+
+      this.swipeWrapWidth = this.swipeMaxWidth - leftValue;
+      this.swipeBarPos = leftValue;
+    },
+    startDrag() {
+      this.dragging = true;
+      document.body.style.userSelect = 'none';
+      document.body.addEventListener('mousemove', this.dragMove);
+    },
+    stopDrag() {
+      this.dragging = false;
+      document.body.style.userSelect = '';
+      document.body.removeEventListener('mousemove', this.dragMove);
+    },
+    prepareSwipe() {
+      if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
+        // Add 2 for border width
+        this.swipeMaxWidth =
+          Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2;
+        this.swipeWrapWidth = this.swipeMaxWidth;
+        this.swipeMaxHeight =
+          Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
+
+        document.body.addEventListener('mouseup', this.stopDrag);
+      }
+    },
+    swipeNewImgLoaded(imgInfo) {
+      this.swipeNewImgInfo = imgInfo;
+      this.prepareSwipe();
+    },
+    swipeOldImgLoaded(imgInfo) {
+      this.swipeOldImgInfo = imgInfo;
+      this.prepareSwipe();
+    },
+    resize: _.throttle(function throttledResize() {
+      this.swipeBarPos = 0;
+    }, 400),
+  },
+};
+</script>
+
+<template>
+  <div class="swipe view">
+    <div
+      class="swipe-frame"
+      ref="swipeFrame"
+      :style="{
+        'width': swipeMaxPixelWidth,
+        'height': swipeMaxPixelHeight,
+    }">
+      <div class="frame deleted">
+        <image-viewer
+          key="swipeOldImg"
+          ref="swipeOldImg"
+          :render-info="false"
+          :path="oldPath"
+          :project-path="projectPath"
+          @imgLoaded="swipeOldImgLoaded"
+        />
+      </div>
+      <div
+        class="swipe-wrap"
+        ref="swipeWrap"
+        :style="{
+          'width': swipeWrapPixelWidth,
+          'height': swipeMaxPixelHeight,
+      }">
+        <div class="frame added">
+          <image-viewer
+            key="swipeNewImg"
+            :render-info="false"
+            :path="newPath"
+            :project-path="projectPath"
+            @imgLoaded="swipeNewImgLoaded"
+          />
+        </div>
+      </div>
+      <span
+        class="swipe-bar"
+        ref="swipeBar"
+        @mousedown="startDrag"
+        @mouseup="stopDrag"
+        :style="{ 'left': swipeBarPixelPos }">
+        <span class="top-handle"></span>
+        <span class="bottom-handle"></span>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
new file mode 100644
index 00000000000..9c19266ecdf
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -0,0 +1,41 @@
+<script>
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="two-up view row">
+    <div class="col-sm-6 frame deleted">
+      <image-viewer
+        :path="oldPath"
+        :project-path="projectPath"
+      />
+    </div>
+    <div class="col-sm-6 frame added">
+      <image-viewer
+        :path="newPath"
+        :project-path="projectPath"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
new file mode 100644
index 00000000000..43b28f96a06
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -0,0 +1,109 @@
+<script>
+import ImageViewer from '../../content_viewer/viewers/image_viewer.vue';
+import TwoUpViewer from './image_diff/two_up_viewer.vue';
+import SwipeViewer from './image_diff/swipe_viewer.vue';
+import OnionSkinViewer from './image_diff/onion_skin_viewer.vue';
+import { diffModes, imageViewMode } from '../constants';
+
+export default {
+  components: {
+    ImageViewer,
+    TwoUpViewer,
+    SwipeViewer,
+    OnionSkinViewer,
+  },
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      mode: imageViewMode.twoup,
+    };
+  },
+  methods: {
+    changeMode(newMode) {
+      this.mode = newMode;
+    },
+  },
+  diffModes,
+  imageViewMode,
+};
+</script>
+
+<template>
+  <div class="diff-file-container">
+    <div
+      class="diff-viewer"
+      v-if="diffMode === $options.diffModes.replaced">
+      <div class="image js-replaced-image">
+        <two-up-viewer
+          v-if="mode === $options.imageViewMode.twoup"
+          v-bind="$props"/>
+        <swipe-viewer
+          v-else-if="mode === $options.imageViewMode.swipe"
+          v-bind="$props"/>
+        <onion-skin-viewer
+          v-else-if="mode === $options.imageViewMode.onion"
+          v-bind="$props"/>
+      </div>
+      <div class="view-modes">
+        <ul class="view-modes-menu">
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.twoup
+            }"
+            @click="changeMode($options.imageViewMode.twoup)">
+            {{ s__('ImageDiffViewer|2-up') }}
+          </li>
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.swipe
+            }"
+            @click="changeMode($options.imageViewMode.swipe)">
+            {{ s__('ImageDiffViewer|Swipe') }}
+          </li>
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.onion
+            }"
+            @click="changeMode($options.imageViewMode.onion)">
+            {{ s__('ImageDiffViewer|Onion skin') }}
+          </li>
+        </ul>
+      </div>
+      <div class="note-container"></div>
+    </div>
+    <div
+      v-else-if="diffMode === $options.diffModes.new"
+      class="diff-viewer added">
+      <image-viewer
+        :path="newPath"
+        :project-path="projectPath"
+      />
+    </div>
+    <div
+      v-else
+      class="diff-viewer deleted">
+      <image-viewer
+        :path="oldPath"
+        :project-path="projectPath"
+      />
+    </div>
+  </div>
+</template>