diff options
| author | Omar Rizwan <omar@omar.website> | 2021-03-22 21:56:19 -0700 |
|---|---|---|
| committer | Omar Rizwan <omar@omar.website> | 2021-03-22 21:56:19 -0700 |
| commit | 2819f3325b203a8390a25bf2e073ff6968d295ef (patch) | |
| tree | a229d86e943181b61d239bfc581cbf52569285d7 /extension/background.js | |
| parent | 345c7a4af5294c5d548973eb9da3ac560e429cc5 (diff) | |
| download | TabFS-2819f3325b203a8390a25bf2e073ff6968d295ef.tar.gz TabFS-2819f3325b203a8390a25bf2e073ff6968d295ef.zip | |
extension: Compress/expand lines in html view.
Diffstat (limited to 'extension/background.js')
| -rw-r--r-- | extension/background.js | 58 |
1 files changed, 50 insertions, 8 deletions
diff --git a/extension/background.js b/extension/background.js index 237b02d..92421b6 100644 --- a/extension/background.js +++ b/extension/background.js @@ -546,7 +546,7 @@ Router["/runtime/background.js.html"] = defineFile(async () => { const classedJs = js.split('\n') - .map(line => { + .map((line, i) => { const class_ = classes.find(([re, class_]) => re.test(line)); line = line .replace(/&/g, "&") @@ -554,27 +554,69 @@ Router["/runtime/background.js.html"] = defineFile(async () => { .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); - if (!class_) { return `<span>${line}</span>`; } - return `<span class="${class_[1]}">${line}</span>`; + if (!class_) { return `<div class="normal line">${line}</div>`; } + return `<div class="${class_[1]} line">${line}</div>`; }) - .join('\n'); + .join(''); return ` <html> <head> <style> - .route { background-color: red; } - span:not(.route) { height: 0px; } + body { overflow-x: hidden; } + .route { background-color: rgb(255, 196, 196); } + .line { position: absolute; height: 15px; width: 100%; } + .line { transition: height 0.5s cubic-bezier(0.64, 0.08, 0.24, 1), transform 0.5s cubic-bezier(0.64, 0.08, 0.24, 1); } </style> </head> <body> - <dl> + <!-- <dl> ${Object.entries(Router).map(([a, b]) => ` <dt>${a}</dt> <dd>${b}</dd> `).join('\n')} - </dl> + </dl> --> <pre><code>${classedJs}</code></pre> + + <script> + const lines = [...document.querySelectorAll('div.line')]; + function render() { + let y = 0; + for (let line of lines) { + if (line.classList.contains('route') || line.dataset.expand == 'true') { + line.style.height = '15px'; + line.style.transform = 'translate(0px, ' + y + 'px)'; + y += 15; + + } else { + line.style.height = '15px'; + line.style.transform = 'translate(0px, ' + (y - 7.5) + 'px) scaleY(' + 2/15 + ')'; + y += 2; + } + } + } + render(); + + for (let line of lines) { + function treatNeighborLines(line, expand) { + let neighborLine = line; + while (neighborLine && !neighborLine.classList.contains('route')) { + neighborLine.dataset.expand = expand; + neighborLine = neighborLine.nextElementSibling; + } + neighborLine = line; + while (neighborLine && !neighborLine.classList.contains('route')) { + neighborLine.dataset.expand = expand; + neighborLine = neighborLine.previousElementSibling; + } + render(); + } + line.onmousedown = () => { + treatNeighborLines(line, true); + document.body.onmouseup = () => { treatNeighborLines(line, false); }; + }; + } + </script> </body> </html> `; |