rustdoc: factor JS mobile scroll lock into its own function

https://github.com/rust-lang/rust/pull/98775#issuecomment-1172728308
This commit is contained in:
Michael Howell 2022-10-17 11:41:39 -07:00
parent a9d1cafa87
commit 3932b2c21d
2 changed files with 28 additions and 41 deletions

View file

@ -733,37 +733,51 @@ function loadCss(cssFileName) {
let oldSidebarScrollPosition = null; let oldSidebarScrollPosition = null;
function showSidebar() { // Scroll locking used both here and in source-script.js
window.rustdocMobileScrollLock = function() {
const mobile_topbar = document.querySelector(".mobile-topbar"); const mobile_topbar = document.querySelector(".mobile-topbar");
if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT && mobile_topbar) { if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) {
// This is to keep the scroll position on mobile. // This is to keep the scroll position on mobile.
oldSidebarScrollPosition = window.scrollY; oldSidebarScrollPosition = window.scrollY;
document.body.style.width = `${document.body.offsetWidth}px`; document.body.style.width = `${document.body.offsetWidth}px`;
document.body.style.position = "fixed"; document.body.style.position = "fixed";
document.body.style.top = `-${oldSidebarScrollPosition}px`; document.body.style.top = `-${oldSidebarScrollPosition}px`;
if (mobile_topbar) {
mobile_topbar.style.top = `${oldSidebarScrollPosition}px`; mobile_topbar.style.top = `${oldSidebarScrollPosition}px`;
mobile_topbar.style.position = "relative"; mobile_topbar.style.position = "relative";
}
} else { } else {
oldSidebarScrollPosition = null; oldSidebarScrollPosition = null;
} }
const sidebar = document.getElementsByClassName("sidebar")[0]; };
addClass(sidebar, "shown");
}
function hideSidebar() { window.rustdocMobileScrollUnlock = function() {
const mobile_topbar = document.querySelector(".mobile-topbar"); const mobile_topbar = document.querySelector(".mobile-topbar");
if (oldSidebarScrollPosition !== null && mobile_topbar) { if (oldSidebarScrollPosition !== null) {
// This is to keep the scroll position on mobile. // This is to keep the scroll position on mobile.
document.body.style.width = ""; document.body.style.width = "";
document.body.style.position = ""; document.body.style.position = "";
document.body.style.top = ""; document.body.style.top = "";
if (mobile_topbar) {
mobile_topbar.style.top = ""; mobile_topbar.style.top = "";
mobile_topbar.style.position = ""; mobile_topbar.style.position = "";
}
// The scroll position is lost when resetting the style, hence why we store it in // The scroll position is lost when resetting the style, hence why we store it in
// `oldSidebarScrollPosition`. // `oldSidebarScrollPosition`.
window.scrollTo(0, oldSidebarScrollPosition); window.scrollTo(0, oldSidebarScrollPosition);
oldSidebarScrollPosition = null; oldSidebarScrollPosition = null;
} }
};
function showSidebar() {
window.rustdocMobileScrollLock();
const sidebar = document.getElementsByClassName("sidebar")[0];
addClass(sidebar, "shown");
}
function hideSidebar() {
window.rustdocMobileScrollUnlock();
const sidebar = document.getElementsByClassName("sidebar")[0]; const sidebar = document.getElementsByClassName("sidebar")[0];
removeClass(sidebar, "shown"); removeClass(sidebar, "shown");
} }

View file

@ -10,7 +10,6 @@
(function() { (function() {
const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-path"].value; const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-path"].value;
let oldScrollPosition = null;
const NAME_OFFSET = 0; const NAME_OFFSET = 0;
const DIRS_OFFSET = 1; const DIRS_OFFSET = 1;
@ -70,44 +69,18 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) {
function toggleSidebar() { function toggleSidebar() {
const child = this.parentNode.children[0]; const child = this.parentNode.children[0];
if (child.innerText === ">") { if (child.innerText === ">") {
if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) { window.rustdocMobileScrollLock();
// This is to keep the scroll position on mobile.
oldScrollPosition = window.scrollY;
document.body.style.position = "fixed";
document.body.style.top = `-${oldScrollPosition}px`;
} else {
oldScrollPosition = null;
}
addClass(document.documentElement, "source-sidebar-expanded"); addClass(document.documentElement, "source-sidebar-expanded");
child.innerText = "<"; child.innerText = "<";
updateLocalStorage("source-sidebar-show", "true"); updateLocalStorage("source-sidebar-show", "true");
} else { } else {
if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT && oldScrollPosition !== null) { window.rustdocMobileScrollUnlock();
// This is to keep the scroll position on mobile.
document.body.style.position = "";
document.body.style.top = "";
// The scroll position is lost when resetting the style, hence why we store it in
// `oldScrollPosition`.
window.scrollTo(0, oldScrollPosition);
oldScrollPosition = null;
}
removeClass(document.documentElement, "source-sidebar-expanded"); removeClass(document.documentElement, "source-sidebar-expanded");
child.innerText = ">"; child.innerText = ">";
updateLocalStorage("source-sidebar-show", "false"); updateLocalStorage("source-sidebar-show", "false");
} }
} }
window.addEventListener("resize", () => {
if (window.innerWidth >= window.RUSTDOC_MOBILE_BREAKPOINT && oldScrollPosition !== null) {
// If the user opens the sidebar in "mobile" mode, and then grows the browser window,
// we need to switch away from mobile mode and make the main content area scrollable.
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, oldScrollPosition);
oldScrollPosition = null;
}
});
function createSidebarToggle() { function createSidebarToggle() {
const sidebarToggle = document.createElement("div"); const sidebarToggle = document.createElement("div");
sidebarToggle.id = "sidebar-toggle"; sidebarToggle.id = "sidebar-toggle";
@ -125,7 +98,7 @@ function createSidebarToggle() {
return sidebarToggle; return sidebarToggle;
} }
// This function is called from "source-files.js", generated in `html/render/mod.rs`. // This function is called from "source-files.js", generated in `html/render/write_shared.rs`.
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function createSourceSidebar() { function createSourceSidebar() {
const container = document.querySelector("nav.sidebar"); const container = document.querySelector("nav.sidebar");