ugit/internal/html/repo_file.templ

75 lines
1.8 KiB
Plaintext
Raw Normal View History

package html
type RepoFileContext struct {
BaseContext
RepoHeaderComponentContext
RepoBreadcrumbComponentContext
Code string
}
templ RepoFile(rfc RepoFileContext) {
@base(rfc.BaseContext) {
@repoHeaderComponent(rfc.RepoHeaderComponentContext)
<div class="mt-2 text-text">
@repoBreadcrumbComponent(rfc.RepoBreadcrumbComponentContext)
{ " - " }
<a class="text-text underline decoration-text/50 decoration-dashed hover:decoration-solid" href="?raw">raw</a>
<div class="code">
@templ.Raw(rfc.Code)
</div>
</div>
}
<script>
const lineRe = /#L(\d+)(?:-L(\d+))?/g
const $lineLines = document.querySelectorAll(".chroma .lntable .lnt");
const $codeLines = document.querySelectorAll(".chroma .lntable .line");
let start = 0;
let end = 0;
const results = [...location.hash.matchAll(lineRe)];
if (0 in results) {
start = results[0][1] !== undefined ? parseInt(results[0][1]) : 0;
end = results[0][2] !== undefined ? parseInt(results[0][2]) : 0;
}
if (start != 0) {
deactivateLines();
activateLines(start, end);
}
for (let line of $lineLines) {
line.addEventListener("click", (event) => {
event.preventDefault();
deactivateLines();
const n = parseInt(line.id.substring(1));
let anchor = "";
if (event.shiftKey) {
end = n;
anchor = `#L${start}-L${end}`;
} else {
start = n;
end = 0;
anchor = `#L${start}`;
}
history.replaceState(null, null, anchor);
activateLines(start, end);
});
}
function activateLines(start, end) {
if (end < start) end = start;
for (let idx = start - 1; idx < end; idx++) {
$codeLines[idx].classList.add("active");
}
}
function deactivateLines() {
for (let code of $codeLines) {
code.classList.remove("active");
}
}
</script>
}