mirror of
https://github.com/google/comprehensive-rust.git
synced 2024-12-05 12:01:05 +02:00
b7de49e1b8
Before, we attempted to change state from “popup” to “inline-open” when the speaker note window was closed. We did this by listening to “pagehide” and change the state there. The event fires every time you navigate away from the page, so we had a complex setup where we would reset the state to “popup” when the next page was loaded into the speaker note window. The problem with this is that it’s racy: we could end up in a situation where we set the state to “inline-open” right after the speaker note window was updated. When that happened, we would mark the window as “defunct”, meaning that it was supposed to be closed. With this change, we no longer try to change the state from the speaker note window. If the window is lost (closed), the user will have to click the “Close speaker notes” button in the top-right to reset the state. This should be much more reliable. Long-term, a better solution would be to let the speaker notes fetch the current URL using JavaScript instead of doing it via an actual page navigation. That should allow us to react to “pagehide” events again (since they won’t fire on every page transition).
247 lines
8.2 KiB
JavaScript
247 lines
8.2 KiB
JavaScript
// Copyright 2023 Google LLC
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
(function() {
|
|
let notes = document.querySelector("details");
|
|
// Create an unattached DOM node for the code below.
|
|
if (!notes) {
|
|
notes = document.createElement("details");
|
|
}
|
|
let popIn = document.createElement("button");
|
|
|
|
// Mark the speaker note window defunct. This means that it will no longer
|
|
// show the notes.
|
|
function markDefunct() {
|
|
const main = document.querySelector("main");
|
|
const h4 = document.createElement("h4");
|
|
h4.append("(You can close this window now.)");
|
|
main.replaceChildren(h4);
|
|
window.location.hash = "#speaker-notes-defunct";
|
|
}
|
|
|
|
// Update the window. This shows/hides controls as necessary for regular and
|
|
// speaker note pages.
|
|
function applyState() {
|
|
if (window.location.hash == "#speaker-notes-open") {
|
|
if (getState() != "popup") {
|
|
markDefunct();
|
|
}
|
|
return;
|
|
}
|
|
|
|
switch (getState()) {
|
|
case "popup":
|
|
popIn.classList.remove("hidden");
|
|
notes.classList.add("hidden");
|
|
break;
|
|
case "inline-open":
|
|
popIn.classList.add("hidden");
|
|
notes.open = true;
|
|
notes.classList.remove("hidden");
|
|
break;
|
|
case "inline-closed":
|
|
popIn.classList.add("hidden");
|
|
notes.open = false;
|
|
notes.classList.remove("hidden");
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Get the state of the speaker note window: "inline-open", "inline-closed",
|
|
// or "popup".
|
|
function getState() {
|
|
return window.localStorage["speakerNotes"] || "inline-closed";
|
|
}
|
|
|
|
// Set the state of the speaker note window. Call applyState as needed
|
|
// afterwards.
|
|
function setState(state) {
|
|
window.localStorage["speakerNotes"] = state;
|
|
}
|
|
|
|
// Create controls for a regular page.
|
|
function setupRegularPage() {
|
|
// Create pop-in button.
|
|
popIn.setAttribute("id", "speaker-notes-toggle");
|
|
popIn.setAttribute("type", "button");
|
|
popIn.setAttribute("title", "Close speaker notes");
|
|
popIn.setAttribute("aria-label", "Close speaker notes");
|
|
popIn.classList.add("icon-button");
|
|
let popInIcon = document.createElement("i");
|
|
popInIcon.classList.add("fa", "fa-window-close-o");
|
|
popIn.append(popInIcon);
|
|
popIn.addEventListener("click", (event) => {
|
|
setState("inline-open");
|
|
applyState();
|
|
});
|
|
document.querySelector(".left-buttons").append(popIn);
|
|
|
|
// Create speaker notes.
|
|
notes.addEventListener("toggle", (event) => {
|
|
setState(notes.open ? "inline-open" : "inline-closed");
|
|
});
|
|
|
|
let summary = document.createElement("summary");
|
|
notes.insertBefore(summary, notes.firstChild);
|
|
|
|
let h4 = document.createElement("h4");
|
|
h4.setAttribute("id", "speaker-notes");
|
|
h4.append("Speaker Notes");
|
|
h4.addEventListener("click", (event) => {
|
|
// Update fragment as if we had clicked a link. A regular a element would
|
|
// result in double-fire of the event.
|
|
window.location.hash = "#speaker-notes";
|
|
});
|
|
summary.append(h4);
|
|
|
|
// Create pop-out button.
|
|
let popOutLocation = new URL(window.location.href);
|
|
popOutLocation.hash = "#speaker-notes-open";
|
|
let popOut = document.createElement("button");
|
|
popOut.classList.add("icon-button", "pop-out");
|
|
popOut.addEventListener("click", (event) => {
|
|
let popup = window.open(popOutLocation.href, "speakerNotes", "popup");
|
|
if (popup) {
|
|
setState("popup");
|
|
applyState();
|
|
} else {
|
|
window.alert("Could not open popup, please check your popup blocker settings.");
|
|
}
|
|
})
|
|
let popOutIcon = document.createElement("i");
|
|
popOutIcon.classList.add("fa", "fa-external-link");
|
|
popOut.append(popOutIcon);
|
|
summary.append(popOut);
|
|
}
|
|
|
|
// Create headers on the print page.
|
|
function setupPrintPage() {
|
|
for (const notes of document.querySelectorAll("details")) {
|
|
notes.open = true;
|
|
let summary = document.createElement("summary");
|
|
notes.insertBefore(summary, notes.firstChild);
|
|
let h4 = document.createElement("h4");
|
|
h4.append("Speaker Notes");
|
|
summary.append(h4);
|
|
}
|
|
}
|
|
|
|
// Create controls for a speaker note window.
|
|
function setupSpeakerNotes() {
|
|
// Hide sidebar and buttons.
|
|
document.querySelector("html").classList.remove("sidebar-visible");
|
|
document.querySelector("html").classList.add("sidebar-hidden");
|
|
document.querySelector(".left-buttons").classList.add("hidden");
|
|
document.querySelector(".right-buttons").classList.add("hidden");
|
|
|
|
// Hide content except for the speaker notes and h1 elements.
|
|
const main = document.querySelector("main");
|
|
let children = main.childNodes;
|
|
let i = 0;
|
|
while (i < children.length) {
|
|
const node = children[i];
|
|
switch (node.tagName) {
|
|
case "DETAILS":
|
|
// We found the speaker notes: extract their content.
|
|
let div = document.createElement("div");
|
|
div.replaceChildren(...node.childNodes);
|
|
node.replaceWith(div);
|
|
i += 1;
|
|
break;
|
|
case "H1":
|
|
// We found a header: turn it into a smaller header for the speaker
|
|
// note window.
|
|
let h4 = document.createElement("h4");
|
|
let pageLocation = new URL(window.location.href);
|
|
pageLocation.hash = "";
|
|
let a = document.createElement("a");
|
|
a.setAttribute("href", pageLocation.href);
|
|
a.append(node.innerText);
|
|
h4.append("Speaker Notes for ", a);
|
|
node.replaceWith(h4);
|
|
i += 1;
|
|
break;
|
|
default:
|
|
// We found something else: remove it.
|
|
main.removeChild(node);
|
|
}
|
|
}
|
|
|
|
// Update prev/next buttons to keep speaker note state.
|
|
document.querySelectorAll('a[rel="prev"], a[rel="next"]').forEach((elem) => {
|
|
elem.href += "#speaker-notes-open";
|
|
});
|
|
}
|
|
|
|
let timeout = null;
|
|
// This will fire on _other_ open windows when we change window.localStorage.
|
|
window.addEventListener("storage", (event) => {
|
|
switch (event.key) {
|
|
case "currentPage":
|
|
if (getState() == "popup") {
|
|
// We link all windows when we are showing speaker notes.
|
|
window.location.pathname = event.newValue;
|
|
}
|
|
break;
|
|
case "speakerNotes":
|
|
// When nagigating to another page, we see two state changes in rapid
|
|
// succession:
|
|
//
|
|
// - "popup" -> "inline-open"
|
|
// - "inline-open" -> "popup"
|
|
//
|
|
// When the page is closed, we only see:
|
|
//
|
|
// - "popup" -> "inline-open"
|
|
//
|
|
// We can use a timeout to detect the difference. The effect is that
|
|
// showing the speaker notes is delayed by 500 ms when closing the
|
|
// speaker notes window.
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(applyState, 500);
|
|
break;
|
|
}
|
|
});
|
|
window.localStorage["currentPage"] = window.location.pathname;
|
|
|
|
// We encode the kind of page in the location hash:
|
|
switch (window.location.hash) {
|
|
case "#speaker-notes-open":
|
|
// We are on a page in the speaker notes.
|
|
setupSpeakerNotes();
|
|
break;
|
|
case "#speaker-notes-defunct":
|
|
// We are on a page in a defunct speaker note window. We keep the state
|
|
// unchanged and mark the window defunct.
|
|
setupSpeakerNotes();
|
|
markDefunct();
|
|
break;
|
|
default:
|
|
if (window.location.pathname == "/print.html") {
|
|
setupPrintPage();
|
|
return;
|
|
}
|
|
|
|
// We are on a regular page. We force the state to "inline-open" if this
|
|
// looks like a direct link to the speaker notes.
|
|
if (window.location.hash == "#speaker-notes") {
|
|
setState("inline-open");
|
|
}
|
|
applyState();
|
|
setupRegularPage();
|
|
}
|
|
})();
|