snapshotdiff: scss & js files (#89477)

.gitignore

@@ -6,6 +6,7 @@
 /gadjo/locale/fr/LC_MESSAGES/django.mo
 /gadjo/static/css/gadjo.css
 /gadjo/static/css/gadjo.multiselectwidget.css
+/gadjo/static/css/gadjo.snapshotdiff.css
 /gadjo/static/css/icons
 node_modules
 MANIFEST

gadjo/static/css/gadjo.snapshotdiff.scss

@@ -0,0 +1,98 @@
+p.snapshot-description {
+	font-size: 80%;
+	margin: 0;
+}
+
+table.diff {
+	background: white;
+	border: 1px solid #f3f3f3;
+	border-collapse: collapse;
+	width: 100%;
+	colgroup, thead, tbody, td {
+		border: 1px solid #f3f3f3;
+	}
+	tbody tr:nth-child(even) {
+		background: #fdfdfd;
+	}
+	th, td {
+		max-width: 30vw;
+		/* it will not actually limit width as the table is set to
+		 * expand to 100% but it will prevent one side getting wider
+		 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		vertical-align: top;
+	}
+	.diff_header {
+		background: #f7f7f7;
+	}
+	td.diff_header {
+		text-align: right;
+		padding-right: 10px;
+		color: #606060;
+	}
+	.diff_next {
+		display: none;
+	}
+	.diff_add {
+		background-color: #aaffaa;
+	}
+	.diff_chg {
+		background-color: #ffff77;
+	}
+	.diff_sub {
+		background-color: #ffaaaa;
+	}
+	.difflib_chg_to td {
+		background-color: #f7f7f7;
+	}
+	.expand-handler td {
+		text-align: left;
+		background-color: #f7f7f7;
+		&:hover {
+			background-color: inherit;
+		}
+	}
+	.expand-before, .expand-between, .expand-after {
+		cursor: pointer;
+		&::before {
+			font-family: FontAwesome;
+			padding: 0 2ex;
+		}
+	}
+	.expand-before::before {
+		content: "\f176";  // long-arrow-up
+	}
+	.expand-between::before {
+		content: "\f07d";  // arrows-v
+	}
+	.expand-after::before {
+		content: "\f175";  // long-arrow-down
+	}
+}
+
+div.snapshot-diff {
+	margin: 1em 0;
+	display: none;
+	ins {
+		text-decoration: none;
+		background-color: #d4fcbc;
+	}
+	del {
+		text-decoration: line-through;
+		background-color: #fbb6c2;
+		color: #555;
+	}
+	h3 {
+		del, ins {
+			font-weight: bold;
+			background-color: transparent;
+		}
+		del, del a {
+			color: #fbb6c2 !important;
+		}
+		ins, ins a {
+			color: #d4fcbc !important;
+		}
+	}
+}

gadjo/static/js/gadjo.snapshotdiff.js

@@ -0,0 +1,69 @@
+const $ = window.$
+$(function () {
+  $('div.snapshot-diff tr').each(function () {
+    let $tr = $(this)
+    if (!$tr.find('.diff_add, .diff_chg, .diff_sub').length) {
+      return
+    }
+    // mark 3 lines before and after each change
+    $tr.addClass('no-collapse')
+      .prev().addClass('no-collapse')
+      .prev().addClass('no-collapse')
+      .prev().addClass('no-collapse')
+    $tr
+      .next().addClass('no-collapse')
+      .next().addClass('no-collapse')
+      .next().addClass('no-collapse')
+  })
+  $('div.snapshot-diff tr').each(function () {
+    let $tr = $(this)
+    if (!$tr.find('.diff_next a').length) {
+      return
+    }
+    let trId = $tr.find('a').first().attr('href').substring(1)
+    // collapse previous lines
+    let previousLines = $tr.prevUntil('.difflib_chg_to')
+    previousLines.each(function () {
+      let $line = $(this)
+      if ($line.hasClass('no-collapse') || $line.hasClass('expand-handler')) {
+        return
+      }
+      $line.addClass(trId).addClass('difflib_chg_to').hide()
+    })
+    // add expand
+    if ($tr.prevAll('.difflib_chg_to').first().hasClass(trId)) {
+      let expandClass = 'expand-between'
+      if ($tr.prevAll('.difflib_chg_to').first().prevAll('.no-collapse').length === 0) {
+        expandClass = 'expand-before'
+      }
+      $('<tr class="expand-handler"></tr>')
+        .html(
+          '<td colspan="6" class="diff_header expand ' + expandClass + '" data-expand="' + trId + '"></td>',
+        )
+        .insertAfter($tr.prevAll('.difflib_chg_to').first())
+    }
+    // if last change
+    if ($tr.find('a').first().text() === 't') {
+      // collapse next lines
+      let nextLines = $tr.nextAll()
+      nextLines.each(function () {
+        let $line = $(this)
+        if ($line.hasClass('no-collapse') || $line.hasClass('expand-handler')) {
+          return
+        }
+        $line.addClass(trId + '-end').addClass('difflib_chg_to').hide()
+      })
+      // add expand
+      $('<tr class="expand-handler"></tr>')
+        .html('<td colspan="6" class="diff_header expand expand-after" data-expand="' + trId + '-end"></td>')
+        .insertAfter($tr.nextAll('.difflib_chg_to').first())
+    }
+  })
+  $('div.snapshot-diff').show()
+  $(document).on('click', '.expand-handler', function () {
+    let $handler = $(this)
+    $handler.hide()
+    let expandClass = $handler.find('td.expand').first().data('expand')
+    $('.' + expandClass).show()
+  })
+})