kot.pink
1{{ define "fragments/multiline-select" }}
2 <script>
3 function highlight(scroll = false) {
4 document.querySelectorAll(".hl").forEach(el => {
5 el.classList.remove("hl");
6 });
7
8 const hash = window.location.hash;
9 if (!hash || !hash.startsWith("#L")) {
10 return;
11 }
12
13 const rangeStr = hash.substring(2);
14 const parts = rangeStr.split("-");
15 let startLine, endLine;
16
17 if (parts.length === 2) {
18 startLine = parseInt(parts[0], 10);
19 endLine = parseInt(parts[1], 10);
20 } else {
21 startLine = parseInt(parts[0], 10);
22 endLine = startLine;
23 }
24
25 if (isNaN(startLine) || isNaN(endLine)) {
26 console.log("nan");
27 console.log(startLine);
28 console.log(endLine);
29 return;
30 }
31
32 let target = null;
33
34 for (let i = startLine; i<= endLine; i++) {
35 const idEl = document.getElementById(`L${i}`);
36 if (idEl) {
37 const el = idEl.closest(".line");
38 if (el) {
39 el.classList.add("hl");
40 target = el;
41 }
42 }
43 }
44
45 if (scroll && target) {
46 target.scrollIntoView({
47 behavior: "smooth",
48 block: "center",
49 });
50 }
51 }
52
53 document.addEventListener("DOMContentLoaded", () => {
54 console.log("DOMContentLoaded");
55 highlight(true);
56 });
57 window.addEventListener("hashchange", () => {
58 console.log("hashchange");
59 highlight();
60 });
61 window.addEventListener("popstate", () => {
62 console.log("popstate");
63 highlight();
64 });
65
66 const lineNumbers = document.querySelectorAll('a[href^="#L"');
67 let startLine = null;
68
69 lineNumbers.forEach(el => {
70 el.addEventListener("click", (event) => {
71 event.preventDefault();
72 const currentLine = parseInt(el.href.split("#L")[1]);
73
74 if (event.shiftKey && startLine !== null) {
75 const endLine = currentLine;
76 const min = Math.min(startLine, endLine);
77 const max = Math.max(startLine, endLine);
78 const newHash = `#L${min}-${max}`;
79 history.pushState(null, '', newHash);
80 } else {
81 const newHash = `#L${currentLine}`;
82 history.pushState(null, '', newHash);
83 startLine = currentLine;
84 }
85
86 highlight();
87 });
88 });
89 </script>
90{{ end }}