Merge pull request #2358 from laws-africa/diffs

improve diff navigation

indigo/analysis/differ.py

@@ -209,7 +209,7 @@ def repl(match):
                 return '\xA0' * (b - a)
             del_.text = ws_re.sub(repl, del_.text)
 
-            if ins is None or ins.tag != 'ins' or del_.tail:
+            if del_.tail or ins is None or (ins.tag != 'ins' and not (ins.get('class') or '').startswith('ins ')):
                 ins = del_.makeelement('ins')
                 # non-breaking space
                 ins.text = '\xA0'

indigo/tests/test_differ.py

@@ -71,7 +71,7 @@ def test_inline_tag_added(self):
         )
 
         self.assertEqual(
-            '<p>Some text <span class="diff-pair"><del>bold text and a tail.</del><ins>&#xA0;</ins></span><b class="ins ">bold text</b><ins> and a tail.</ins></p>',
+            '<p>Some text <span class="diff-pair"><del>bold text and a tail.</del><b class="ins ">bold text</b></span><ins> and a tail.</ins></p>',
             diff,
         )
 

indigo_app/static/javascript/indigo/views/diff_navigator.js

@@ -14,12 +14,27 @@
     },
 
     initialize: function (options) {
+      this.counterEl = this.el.querySelector('.diff-counter');
       this.refresh();
     },
 
     refresh: function() {
-      this.changedElements = $(this.el.getAttribute('data-bs-target')).find('ins, del, .ins, .del');
+      const target = document.querySelector(this.el.getAttribute('data-bs-target'));
+      const changedElements = target.querySelectorAll('.diff-pair, ins, del, .ins, .del');
+
+      this.changedElements = [];
+
+      for (let i = 0; i < changedElements.length; i++) {
+        const el = changedElements[i];
+        // don't go inside diff-pairs, and ignore adjacent diffs
+        if (!el.parentElement.classList.contains('diff-pair') && (
+          this.changedElements.length === 0 || this.changedElements[this.changedElements.length - 1] !== el.previousElementSibling)) {
+          this.changedElements.push(el);
+        }
+      }
+
       this.currentElementIndex = -1;
+      this.updateCounter();
     },
 
     prevChange: function (e) {
@@ -30,11 +45,23 @@
         this.currentElementIndex--;
       }
       if (this.currentElementIndex > -1) this.changedElements[this.currentElementIndex].scrollIntoView();
+      this.updateCounter();
     },
 
     nextChange: function (e) {
       this.currentElementIndex = (this.currentElementIndex + 1) % this.changedElements.length;
       if (this.currentElementIndex > -1) this.changedElements[this.currentElementIndex].scrollIntoView();
-    }
+      this.updateCounter();
+    },
+
+    updateCounter: function () {
+      if (this.counterEl) {
+        if (this.changedElements.length === 0) {
+          this.counterEl.textContent = '0';
+        } else {
+          this.counterEl.textContent = (this.currentElementIndex + 1) + ' / ' + this.changedElements.length;
+        }
+      }
+    },
   });
 })(window);

indigo_app/static/javascript/indigo/views/document_revisions.js

@@ -99,8 +99,6 @@
       $.get(revision.url() + '/diff')
         .then(function(response) {
           var $akn = self.$el.find('.revision-preview la-akoma-ntoso').html(response.content);
-          self.$el.find('.change-count').text(
-            response.n_changes + ' change' + (response.n_changes != 1 ? 's' : ''));
           self.diffNavigator.refresh();
         });
     },

indigo_app/static/stylesheets/_diffs.scss

@@ -30,6 +30,14 @@
 }
 
 .diffset {
+  .diff-pair,
+  .ins,
+  ins,
+  .del,
+  del {
+    scroll-margin-top: 3em;
+  }
+
   ins,
   .ins,
   .ins > .akn-num {

indigo_app/templates/indigo_api/document/_revisions.html

@@ -4,7 +4,7 @@
   <header class="revisions-header">
     <div class="title">
       <div class="diff-navigator float-end" data-bs-target="#revision-akn">
-        <span class="change-count me-3"></span>
+        <span class="diff-counter me-3"></span>
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-outline-secondary prev-change-btn">{% trans 'Previous' %} <i class="fas fa-chevron-up"></i></button>
           <button type="button" class="btn btn-outline-secondary next-change-btn">{% trans 'Next' %} <i class="fas fa-chevron-down"></i></button>