x/pastebin
1
0
Fork 0
mirror of https://github.com/skidoodle/pastebin synced 2026-04-28 19:27:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

optimize client side experience

Browse Source
This commit is contained in:
albert
2026-04-21 11:54:49 +02:00
parent 86ee692c94
commit d465b7f386
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
view/static/style.css
+6 -2
View File
@@ -121,10 +121,11 @@ main {
.content-wrapper { .content-wrapper {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
contain: layout;
} }
#paste-form { #paste-form {
@@ -169,6 +170,9 @@ code.with-line-numbers {
width: 100%; width: 100%;
min-height: calc(1em * var(--line-height)); min-height: calc(1em * var(--line-height));
scroll-margin-top: 2rem; scroll-margin-top: 2rem;
content-visibility: auto;
contain-intrinsic-size: 1px calc(1em * var(--line-height));
contain: paint;
} }
.line-number { .line-number {
@@ -193,7 +197,7 @@ code.with-line-numbers {
grid-column: 2; grid-column: 2;
padding-left: 1rem; padding-left: 1rem;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; overflow-wrap: anywhere;
} }
.line:target { .line:target {
view/templates/bin.html
+13 -5
View File
@@ -33,15 +33,23 @@
hljs.highlightElement(code); hljs.highlightElement(code);
if (lineCount < 5000) { if (lineCount < 10000) {
const lines = code.innerHTML.split(/\r?\n/); const lines = code.innerHTML.split(/\r?\n/);
let finalHtml = ''; const fragment = [];
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
const num = i + 1; const num = i + 1;
finalHtml += '<div class="line" id="L' + num + '"><a href="#L' + num + '" class="line-number">' + num + '</a><div class="line-code">' + (lines[i] || ' ') + '</div></div>'; fragment.push('<div class="line" id="L' + num + '"><a href="#L' + num + '" class="line-number">' + num + '</a><div class="line-code">' + (lines[i] || ' ') + '</div></div>');
} }
code.innerHTML = finalHtml;
code.classList.add('with-line-numbers'); requestAnimationFrame(() => {
code.innerHTML = fragment.join('');
code.classList.add('with-line-numbers');
if (window.location.hash) {
const target = document.querySelector(window.location.hash);
if (target) target.scrollIntoView();
}
});
} }
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {