You've already forked comprehensive-rust
mirror of
https://github.com/google/comprehensive-rust.git
synced 2025-10-09 10:55:26 +02:00
5f3010d88a
Way back in #187, I introduced a hacky tool to show the available space on a slide: it was a `mdbook` plugin which injected the necessary CSS on each slide. Crude, but it got the job done. The logic was moved from Python to a real CSS file with associated JavaScript in #1842. In #1917, the functionality was moved to a dedicated “instructor menu”, together with functionality for saving the state of the Playground on each slide. Unfortunately, the whole thing was disabled in #1935 since I found that the Playgrounds lost their code with the saving logic. I was also not 100% happy with dedicating space on each slide for a menu only used by instructors. However, I really think we need a tool to let slide editors know about the available space, so I would like to re-introduce the red box. This time via a keyboard shortcut to make it easy to toggle as needed. I’m suggesting enabling this for everyone, with the expectation that most people won’t find the shortcut and will quickly disable the box if they do (there is a dedicated button to hide it again). End-to-end tests have been added for the new functionality.
62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
(function () {
|
|
if (window.location.hash === "#speaker-notes-open") {
|
|
return;
|
|
}
|
|
|
|
const redBox = document.createElement("div");
|
|
redBox.id = "aspect-ratio-helper";
|
|
redBox.style.display = "none"; // Initially hidden
|
|
|
|
const nestedDiv = document.createElement("div");
|
|
redBox.appendChild(nestedDiv);
|
|
|
|
const turnOffButton = document.createElement("button");
|
|
turnOffButton.id = "turn-off-red-box";
|
|
turnOffButton.textContent = "Hide Red Box";
|
|
nestedDiv.appendChild(turnOffButton);
|
|
|
|
document.body.prepend(redBox);
|
|
|
|
const storageKey = "showRedBox";
|
|
|
|
const turnOff = () => {
|
|
redBox.style.display = "none";
|
|
sessionStorage.removeItem(storageKey);
|
|
};
|
|
|
|
const turnOn = () => {
|
|
sessionStorage.setItem(storageKey, "true");
|
|
redBox.style.display = "block";
|
|
};
|
|
|
|
const toggleRedBox = () => {
|
|
if (redBox.style.display === "none") {
|
|
turnOn();
|
|
} else {
|
|
turnOff();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
// Toggle the red box with Ctrl+Alt+B
|
|
if (event.ctrlKey && event.altKey && event.key === "b") {
|
|
event.preventDefault();
|
|
toggleRedBox();
|
|
}
|
|
});
|
|
|
|
turnOffButton.addEventListener("click", turnOff);
|
|
|
|
// Check initial state from URL parameter or session storage
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const showRedBoxParam = searchParams.get("show-red-box");
|
|
|
|
if (showRedBoxParam === "true") {
|
|
turnOn();
|
|
} else if (showRedBoxParam === "false") {
|
|
turnOff();
|
|
} else if (sessionStorage.getItem(storageKey) === "true") {
|
|
turnOn();
|
|
}
|
|
})();
|