mirror of
https://github.com/osnr/TabFS.git
synced 2024-05-13 02:56:35 +02:00
extension: Compress/expand lines in html view.
This commit is contained in:
parent
345c7a4af5
commit
2819f3325b
|
@ -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>
|
||||||
`;
|
`;
|
||||||
|
|
Loading…
Reference in a new issue