rustdoc: dynamically show-hide line numbers on code examples

This commit is contained in:
Michael Howell 2022-09-21 15:43:38 -07:00
parent 7a718f3be2
commit f66769fe8d
3 changed files with 54 additions and 11 deletions

View File

@ -697,20 +697,39 @@ function loadCss(cssFileName) {
}
}());
window.rustdoc_add_line_numbers_to_examples = () => {
onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
const parent = x.parentNode;
const line_numbers = parent.querySelectorAll(".line-number");
if (line_numbers.length > 0) {
return;
}
const count = x.textContent.split("\n").length;
const elems = [];
for (let i = 0; i < count; ++i) {
elems.push(i + 1);
}
const node = document.createElement("pre");
addClass(node, "line-number");
node.innerHTML = elems.join("\n");
parent.insertBefore(node, x);
});
};
window.rustdoc_remove_line_numbers_from_examples = () => {
onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
const parent = x.parentNode;
const line_numbers = parent.querySelectorAll(".line-number");
for (const node of line_numbers) {
parent.removeChild(node);
}
});
};
(function() {
// To avoid checking on "rustdoc-line-numbers" value on every loop...
if (getSettingValue("line-numbers") === "true") {
onEachLazy(document.getElementsByClassName("rust-example-rendered"), x => {
const count = x.textContent.split("\n").length;
const elems = [];
for (let i = 0; i < count; ++i) {
elems.push(i + 1);
}
const node = document.createElement("pre");
addClass(node, "line-number");
node.innerHTML = elems.join("\n");
x.parentNode.insertBefore(node, x);
});
window.rustdoc_add_line_numbers_to_examples();
}
}());

View File

@ -19,6 +19,13 @@
updateSystemTheme();
updateLightAndDark();
break;
case "line-numbers":
if (value === true) {
window.rustdoc_add_line_numbers_to_examples();
} else {
window.rustdoc_remove_line_numbers_from_examples();
}
break;
}
}

View File

@ -20,3 +20,20 @@ assert-css: ("pre.line-number", {
})
// The first code block has two lines so let's check its `<pre>` elements lists both of them.
assert-text: ("pre.line-number", "1\n2")
// Now, try changing the setting dynamically. We'll turn it off, using the settings menu,
// and make sure it goes away.
// First, open the settings menu.
click: "#settings-menu"
wait-for: "#settings"
assert-css: ("#settings", {"display": "block"})
// Then, click the toggle button.
click: "input#line-numbers + .slider"
wait-for: 100 // wait-for-false does not exist
assert-false: "pre.line-number"
// Finally, turn it on again.
click: "input#line-numbers + .slider"
wait-for: "pre.line-number"