From 6622be235286747f787001e56dd483e79f319190 Mon Sep 17 00:00:00 2001
From: Ricardo Wurmus <rekado@elephly.net>
Date: Sat, 24 Dec 2022 15:24:34 +0100
Subject: Reduce page weight by simplifying line number anchors.

For large issues with many lines the DOM becomes littered with anchors
that slow down rendering significantly.  Dropping the anchor tags cuts
the page size in half and speeds up rendering.  We can still address
lines by their identifiers, but to act on clicks we need a little bit
of JavaScript.
---
 assets/js/lines.js | 12 ++++++++++++
 assets/mumi.scss   | 11 ++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 assets/js/lines.js

(limited to 'assets')

diff --git a/assets/js/lines.js b/assets/js/lines.js
new file mode 100644
index 0000000..f22057d
--- /dev/null
+++ b/assets/js/lines.js
@@ -0,0 +1,12 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3.0-or-later
+window.addEventListener('DOMContentLoaded', function () {
+  let lineClickHandler = (evt) => {
+    if (evt.target.classList.contains("line")) {
+      window.location.hash = evt.target.id;
+      return;
+    }
+  };
+  var root = document.querySelector("div.conversation");
+  root.addEventListener("click", lineClickHandler);
+});
+// @license-end
diff --git a/assets/mumi.scss b/assets/mumi.scss
index 963ebd8..f2c6d07 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -344,17 +344,18 @@ details.search-hints summary:after{
     margin-left: 0;
 }
 
-a.line-anchor {
+div.line:before {
     position: absolute;
+    display: inline-block;
     visibility: hidden;
-}
-a.line-anchor:before {
     content: "# ";
     margin-left: -1em;
     padding-right: 1em;
+    text-align: right;
+    cursor: pointer;
+    color: $grey-300;
 }
-
-div.line:hover a.line-anchor {
+div.line:hover:before {
     visibility: visible;
 }
 
-- 
cgit v1.2.3