UI - Fixing jump to next difference button after refactor

changedetectionio/static/js/diff-render.js

@@ -5,6 +5,24 @@ $(document).ready(function () {
     var inputs = document.getElementsByClassName("change");
     inputs.current = 0;
 
+    $('#jump-next-diff').click(function () {
+
+        var element = inputs[inputs.current];
+        var headerOffset = 80;
+        var elementPosition = element.getBoundingClientRect().top;
+        var offsetPosition = elementPosition - headerOffset + window.scrollY;
+
+        window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+        });
+
+        inputs.current++;
+        if (inputs.current >= inputs.length) {
+            inputs.current = 0;
+        }
+    });
+
     function changed() {
         // https://github.com/kpdecker/jsdiff/issues/389
         // I would love to use `{ignoreWhitespace: true}` here but it breaks the formatting
@@ -98,23 +116,5 @@ $(document).ready(function () {
         changed();
     };
 
-
-    function next_diff() {
-        var element = inputs[inputs.current];
-        var headerOffset = 80;
-        var elementPosition = element.getBoundingClientRect().top;
-        var offsetPosition = elementPosition - headerOffset + window.scrollY;
-
-        window.scrollTo({
-            top: offsetPosition,
-            behavior: "smooth",
-        });
-
-        inputs.current++;
-        if (inputs.current >= inputs.length) {
-            inputs.current = 0;
-        }
-    }
-
 });
 

changedetectionio/templates/diff.html

@@ -60,7 +60,7 @@
 </div>
 
 <div id="diff-jump">
-    <a onclick="next_diff();">Jump</a>
+    <a id="jump-next-diff">Jump</a>
 </div>
 
 <script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>