deblan-mirror/TabFS
1
0
Fork 0
mirror of https://github.com/osnr/TabFS.git synced 2024-04-28 03:52:45 +02:00
Code Issues Projects Releases Wiki Activity

extension: Compress/expand lines in html view.

Browse source
This commit is contained in:
Omar Rizwan 2021-03-22 21:56:19 -07:00
parent 345c7a4af5
commit 2819f3325b
1 changed files with 50 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
extension/background.js
View file

@ -546,7 +546,7 @@ Router["/runtime/background.js.html"] = defineFile(async () => {
const classedJs = const classedJs =
js.split('\n') js.split('\n')
.map(line => { .map((line, i) => {
const class_ = classes.find(([re, class_]) => re.test(line)); const class_ = classes.find(([re, class_]) => re.test(line));
line = line line = line
.replace(/&/g, "&") .replace(/&/g, "&")
@ -554,27 +554,69 @@ Router["/runtime/background.js.html"] = defineFile(async () => {
.replace(/>/g, ">") .replace(/>/g, ">")
.replace(/"/g, """) .replace(/"/g, """)
.replace(/'/g, "'"); .replace(/'/g, "'");
if (!class_) { return `<span>${line}</span>`; } if (!class_) { return `<div class="normal line">${line}</div>`; }
return `<span class="${class_[1]}">${line}</span>`; return `<div class="${class_[1]} line">${line}</div>`;
}) })
.join('\n'); .join('');
return ` return `
<html> <html>
<head> <head>
<style> <style>
.route { background-color: red; } body { overflow-x: hidden; }
span:not(.route) { height: 0px; } .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> </style>
</head> </head>
<body> <body>
<dl> <!-- <dl>
${Object.entries(Router).map(([a, b]) => ` ${Object.entries(Router).map(([a, b]) => `
<dt>${a}</dt> <dt>${a}</dt>
<dd>${b}</dd> <dd>${b}</dd>
`).join('\n')} `).join('\n')}
</dl> </dl> -->
<pre><code>${classedJs}</code></pre> <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> </body>
</html> </html>
`; `;