1 files changed, 38 insertions, 20 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 9f3fb715150..8388458b11c 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -101,6 +101,7 @@ export default class Diff {
       const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
       diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
         this.highlightSelectedLine();
+        this.prepareRenderedDiff();
         if (cb) cb();
       });
     } else if (cb) {
@@ -156,20 +157,22 @@ export default class Diff {
   }
 
   prepareRenderedDiff() {
-    const $elements = $('[data-diff-toggle-entity]');
-
-    if ($elements.length === 0) return;
-
+    const allElements = this.elementsForRenderedDiff();
     const diff = this;
 
-    const elements = $elements.toArray().map(this.formatElementToObject).reduce(merge);
+    for (const [fileHash, fileElements] of Object.entries(allElements)) {
+      // eslint-disable no-param-reassign
+      fileElements.rawButton.onclick = () => {
+        diff.showRawViewer(fileHash, diff.elementsForRenderedDiff()[fileHash]);
+      };
 
-    Object.values(elements).forEach((e) => {
-      e.toShowBtn.onclick = () => diff.showOneHideAnother('rendered', e); // eslint-disable-line no-param-reassign
-      e.toHideBtn.onclick = () => diff.showOneHideAnother('raw', e); // eslint-disable-line no-param-reassign
+      fileElements.renderedButton.onclick = () => {
+        diff.showRenderedViewer(fileHash, diff.elementsForRenderedDiff()[fileHash]);
+      };
+      // eslint-enable no-param-reassign
 
-      diff.showOneHideAnother('rendered', e);
-    });
+      diff.showRenderedViewer(fileHash, fileElements);
+    }
   }
 
   formatElementToObject = (element) => {
@@ -179,18 +182,33 @@ export default class Diff {
     return { [key]: { [name]: element } };
   };
 
-  showOneHideAnother = (mode, elements) => {
-    let { toShowBtn, toHideBtn, toShow, toHide } = elements;
+  elementsForRenderedDiff = () => {
+    const $elements = $('[data-diff-toggle-entity]');
+
+    if ($elements.length === 0) return {};
 
-    if (mode === 'raw') {
-      [toShowBtn, toHideBtn] = [toHideBtn, toShowBtn];
-      [toShow, toHide] = [toHide, toShow];
-    }
+    const diff = this;
+
+    return $elements.toArray().map(diff.formatElementToObject).reduce(merge);
+  };
+
+  showRawViewer = (fileHash, elements) => {
+    if (elements === undefined) return;
+
+    elements.rawButton.classList.add('selected');
+    elements.renderedButton.classList.remove('selected');
+
+    elements.renderedViewer.classList.add('hidden');
+    elements.rawViewer.classList.remove('hidden');
+  };
+
+  showRenderedViewer = (fileHash, elements) => {
+    if (elements === undefined) return;
 
-    toShowBtn.classList.add('selected');
-    toHideBtn.classList.remove('selected');
+    elements.rawButton.classList.remove('selected');
+    elements.rawViewer.classList.add('hidden');
 
-    toHide.classList.add('hidden');
-    toShow.classList.remove('hidden');
+    elements.renderedButton.classList.add('selected');
+    elements.renderedViewer.classList.remove('hidden');
   };
 }