2024-01-15 22:26:51 +00:00
|
|
|
package html
|
|
|
|
|
|
|
|
type RepoFileContext struct {
|
2024-06-27 04:23:41 +00:00
|
|
|
BaseContext
|
2024-01-15 22:26:51 +00:00
|
|
|
RepoHeaderComponentContext
|
2024-06-27 04:23:41 +00:00
|
|
|
RepoBreadcrumbComponentContext
|
|
|
|
Code string
|
2024-01-15 22:26:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
templ RepoFile(rfc RepoFileContext) {
|
|
|
|
@base(rfc.BaseContext) {
|
|
|
|
@repoHeaderComponent(rfc.RepoHeaderComponentContext)
|
2024-03-01 17:58:05 +00:00
|
|
|
<div class="mt-2 text-text">
|
2024-06-27 04:23:41 +00:00
|
|
|
@repoBreadcrumbComponent(rfc.RepoBreadcrumbComponentContext)
|
|
|
|
{ " - " }
|
2024-03-20 03:46:57 +00:00
|
|
|
<a class="text-text underline decoration-text/50 decoration-dashed hover:decoration-solid" href="?raw">raw</a>
|
2024-10-22 17:25:23 +00:00
|
|
|
<div class="code relative">
|
2024-06-27 04:23:41 +00:00
|
|
|
@templ.Raw(rfc.Code)
|
2024-10-22 17:25:23 +00:00
|
|
|
<button id="copy" class="absolute top-0 right-0 rounded bg-base hover:bg-surface0"></button>
|
2024-06-27 04:23:41 +00:00
|
|
|
</div>
|
2024-03-01 17:58:05 +00:00
|
|
|
</div>
|
2024-01-15 22:26:51 +00:00
|
|
|
}
|
|
|
|
<script>
|
|
|
|
const lineRe = /#L(\d+)(?:-L(\d+))?/g
|
|
|
|
const $lineLines = document.querySelectorAll(".chroma .lntable .lnt");
|
|
|
|
const $codeLines = document.querySelectorAll(".chroma .lntable .line");
|
2024-10-22 17:25:23 +00:00
|
|
|
const $copyButton = document.getElementById('copy');
|
|
|
|
const $copyIcon = "📋";
|
|
|
|
const $copiedIcon = "✅";
|
|
|
|
let $code = ""
|
|
|
|
for (let codeLine of $codeLines) $code += codeLine.innerText;
|
2024-01-15 22:26:51 +00:00
|
|
|
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);
|
2024-10-22 17:25:23 +00:00
|
|
|
$lineLines[start-1].scrollIntoView(true);
|
2024-01-15 22:26:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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}`;
|
|
|
|
}
|
2024-06-27 04:23:41 +00:00
|
|
|
history.replaceState(null, null, anchor);
|
2024-01-15 22:26:51 +00:00
|
|
|
activateLines(start, end);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2024-10-22 17:25:23 +00:00
|
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
|
|
$copyButton.innerText = $copyIcon;
|
|
|
|
$copyButton.classList.remove("hidden");
|
|
|
|
}
|
|
|
|
$copyButton.addEventListener("click", () => {
|
|
|
|
navigator.clipboard.writeText($code);
|
|
|
|
$copyButton.innerText = $copiedIcon;
|
|
|
|
setTimeout(() => {
|
|
|
|
$copyButton.innerText = $copyIcon;
|
|
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
|
2024-01-15 22:26:51 +00:00
|
|
|
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>
|
|
|
|
}
|