Make checkbox work

changedetectionio/static/js/diff-render.js

@@ -5,7 +5,9 @@ var result = document.getElementById('result');
 function changed() {
     // https://github.com/kpdecker/jsdiff/issues/389
     // I would love to use `{ignoreWhitespace: true}` here but it breaks the formatting
-    var diff = Diff[window.diffType](a.textContent, b.textContent);
+    options = {ignoreWhitespace: document.getElementById('ignoreWhitespace').checked};
+
+    var diff = Diff[window.diffType](a.textContent, b.textContent, options);
     var fragment = document.createDocumentFragment();
     for (var i = 0; i < diff.length; i++) {
 
@@ -82,6 +84,10 @@ for (var i = 0; i < radio.length; i++) {
     }
 }
 
+document.getElementById('ignoreWhitespace').onchange = function (e) {
+    changed();
+}
+
 
 var inputs = document.getElementsByClassName('change');
 inputs.current = 0;

changedetectionio/templates/diff.html

@@ -37,6 +37,11 @@
     </form>
     <del>Removed text</del>
     <ins>Inserted Text</ins>
+    <span>
+        <!-- https://github.com/kpdecker/jsdiff/issues/389 ? -->
+        <label for="ignoreWhitespace" class="pure-checkbox" id="label-diff-ignorewhitespace">
+            <input type="checkbox" id="ignoreWhitespace" name="ignoreWhitespace"/> Ignore Whitespace</label>
+    </span>
 </div>
 
 <div id="diff-jump">
@@ -103,7 +108,7 @@
 </div>
 
 <script>
-    const newest_version_timestamp = {{newest_version_timestamp}}
+    const newest_version_timestamp = {{newest_version_timestamp}};
 </script>
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='diff.min.js')}}"></script>