added function to update other side scroll postion

babobski · Dec 12, 2021 · e552475 · e552475
1 parent 6991a45
commit e552475
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/media/js/TatuDiff.js b/media/js/TatuDiff.js
@@ -750,6 +750,10 @@ let TatuDiff = {
         let leftSide = document.getElementById('left-side');
         leftSide.removeEventListener('mousemove', TatuDiff.scrollMoveLeft);
     },
+    clearExistingListeners: () => {
+        TatuDiff.disableScrollMoveLeft();
+        TatuDiff.disableScrollMoveRight();
+    },
     makeSidesEqualWidth: () => {
         let rightSide = document.getElementById('right-side'),
             leftSide = document.getElementById('left-side'),
@@ -762,10 +766,16 @@ let TatuDiff = {
         if (leftSide.scrollWidth > width) {
             width = leftSide.scrollWidth;
         }
-        
+
         rightSide.firstChild.style.width = width + 'px';
         leftSide.firstChild.style.width = width + 'px';
     },
+    updateOtherSideScrollPosition: (e) => {
+        let panel = e.target,
+            panelId = panel.id,
+            otherPanel = panelId === 'left-side' ? document.getElementById('right-side') : document.getElementById('left-side');
+        otherPanel.scrollLeft = panel.scrollLeft;
+    },
     setButtonListners: () => {
         let scrollToPrev = document.getElementById('scroll_to_prev'),
             scrollToNext = document.getElementById('scroll_to_next'),
@@ -791,9 +801,10 @@ let TatuDiff = {
         closeInfo.addEventListener('click', TatuDiff.closeInfoWindow);
         closeWindow.addEventListener('click', TatuDiff.closeWindow);
         rightSide.addEventListener('mousedown', TatuDiff.enableScrollMoveRight);
-        rightSide.addEventListener('mouseup', TatuDiff.disableScrollMoveRight);
+        rightSide.addEventListener('scroll', TatuDiff.updateOtherSideScrollPosition);
         leftSide.addEventListener('mousedown', TatuDiff.enableScrollMoveLeft);
-        leftSide.addEventListener('mouseup', TatuDiff.disableScrollMoveLeft);
+        leftSide.addEventListener('scroll', TatuDiff.updateOtherSideScrollPosition);
+        window.addEventListener('mouseup', TatuDiff.clearExistingListeners);
     }
 };
 

diff --git a/media/js/bundle.js b/media/js/bundle.js
@@ -5330,6 +5330,10 @@ let TatuDiff = {
         let leftSide = document.getElementById('left-side');
         leftSide.removeEventListener('mousemove', TatuDiff.scrollMoveLeft);
     },
+    clearExistingListeners: () => {
+        TatuDiff.disableScrollMoveLeft();
+        TatuDiff.disableScrollMoveRight();
+    },
     makeSidesEqualWidth: () => {
         let rightSide = document.getElementById('right-side'),
             leftSide = document.getElementById('left-side'),
@@ -5343,13 +5347,15 @@ let TatuDiff = {
             width = leftSide.scrollWidth;
         }
 
-        console.log(width);
-
-        console.log(rightSide.firstChild);
-
         rightSide.firstChild.style.width = width + 'px';
         leftSide.firstChild.style.width = width + 'px';
     },
+    updateOtherSideScrollPosition: (e) => {
+        let panel = e.target,
+            panelId = panel.id,
+            otherPanel = panelId === 'left-side' ? document.getElementById('right-side') : document.getElementById('left-side');
+        otherPanel.scrollLeft = panel.scrollLeft;
+    },
     setButtonListners: () => {
         let scrollToPrev = document.getElementById('scroll_to_prev'),
             scrollToNext = document.getElementById('scroll_to_next'),
@@ -5375,9 +5381,10 @@ let TatuDiff = {
         closeInfo.addEventListener('click', TatuDiff.closeInfoWindow);
         closeWindow.addEventListener('click', TatuDiff.closeWindow);
         rightSide.addEventListener('mousedown', TatuDiff.enableScrollMoveRight);
-        rightSide.addEventListener('mouseup', TatuDiff.disableScrollMoveRight);
+        rightSide.addEventListener('scroll', TatuDiff.updateOtherSideScrollPosition);
         leftSide.addEventListener('mousedown', TatuDiff.enableScrollMoveLeft);
-        leftSide.addEventListener('mouseup', TatuDiff.disableScrollMoveLeft);
+        leftSide.addEventListener('scroll', TatuDiff.updateOtherSideScrollPosition);
+        window.addEventListener('mouseup', TatuDiff.clearExistingListeners);
     }
 };