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:
parent
a9d1cafa87
commit
3932b2c21d
2 changed files with 28 additions and 41 deletions
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
|
@ -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");
|
||||||
|
|
Loading…
Add table
Reference in a new issue