Image Diff Viewing + Download Diff Viewing

1 files changed, 35 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index a5999f909ca..6851029018a 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import { numberToHumanSize } from '../../../../lib/utils/number_utils';
 
 export default {
@@ -12,6 +13,10 @@ export default {
       required: false,
       default: 0,
     },
+    renderInfo: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -26,14 +31,34 @@ export default {
       return numberToHumanSize(this.fileSize);
     },
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeThrottled, false);
+  },
+  mounted() {
+    // The onImgLoad may have happened before the control was actually mounted
+    this.onImgLoad();
+    this.resizeThrottled = _.throttle(this.onImgLoad, 400);
+    window.addEventListener('resize', this.resizeThrottled, false);
+  },
   methods: {
     onImgLoad() {
       const contentImg = this.$refs.contentImg;
-      this.isZoomable =
-        contentImg.naturalWidth > contentImg.width || contentImg.naturalHeight > contentImg.height;
 
-      this.width = contentImg.naturalWidth;
-      this.height = contentImg.naturalHeight;
+      if (contentImg) {
+        this.isZoomable =
+          contentImg.naturalWidth > contentImg.width ||
+          contentImg.naturalHeight > contentImg.height;
+
+        this.width = contentImg.naturalWidth;
+        this.height = contentImg.naturalHeight;
+
+        this.$emit('imgLoaded', {
+          width: this.width,
+          height: this.height,
+          renderedWidth: contentImg.clientWidth,
+          renderedHeight: contentImg.clientHeight,
+        });
+      }
     },
     onImgClick() {
       if (this.isZoomable) this.isZoomed = !this.isZoomed;
@@ -47,20 +72,22 @@ export default {
     <div class="file-content image_file">
       <img
         ref="contentImg"
-        :class="{ 'isZoomable': isZoomable, 'isZoomed': isZoomed }"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
         :src="path"
         :alt="path"
         @load="onImgLoad"
         @click="onImgClick"/>
-      <p class="file-info prepend-top-10">
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
         <template v-if="fileSize>0">
           {{ fileSizeReadable }}
         </template>
         <template v-if="fileSize>0 && width && height">
-          -
+          |
         </template>
         <template v-if="width && height">
-          {{ width }} x {{ height }}
+          W: {{ width }} | H: {{ height }}
         </template>
       </p>
     </div>