From 3932b2c21d5e2a8184739eb41df7501929f70194 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Mon, 17 Oct 2022 11:41:39 -0700 Subject: [PATCH] rustdoc: factor JS mobile scroll lock into its own function https://github.com/rust-lang/rust/pull/98775#issuecomment-1172728308 --- src/librustdoc/html/static/js/main.js | 36 +++++++++++++------ .../html/static/js/source-script.js | 33 ++--------------- 2 files changed, 28 insertions(+), 41 deletions(-) diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index db1cc8e451627..3bcadcda534dc 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -733,37 +733,51 @@ function loadCss(cssFileName) { 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"); - 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. oldSidebarScrollPosition = window.scrollY; document.body.style.width = `${document.body.offsetWidth}px`; document.body.style.position = "fixed"; document.body.style.top = `-${oldSidebarScrollPosition}px`; - mobile_topbar.style.top = `${oldSidebarScrollPosition}px`; - mobile_topbar.style.position = "relative"; + if (mobile_topbar) { + mobile_topbar.style.top = `${oldSidebarScrollPosition}px`; + mobile_topbar.style.position = "relative"; + } } else { oldSidebarScrollPosition = null; } - const sidebar = document.getElementsByClassName("sidebar")[0]; - addClass(sidebar, "shown"); - } + }; - function hideSidebar() { + window.rustdocMobileScrollUnlock = function() { const mobile_topbar = document.querySelector(".mobile-topbar"); - if (oldSidebarScrollPosition !== null && mobile_topbar) { + if (oldSidebarScrollPosition !== null) { // This is to keep the scroll position on mobile. document.body.style.width = ""; document.body.style.position = ""; document.body.style.top = ""; - mobile_topbar.style.top = ""; - mobile_topbar.style.position = ""; + if (mobile_topbar) { + mobile_topbar.style.top = ""; + mobile_topbar.style.position = ""; + } // The scroll position is lost when resetting the style, hence why we store it in // `oldSidebarScrollPosition`. window.scrollTo(0, oldSidebarScrollPosition); 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]; removeClass(sidebar, "shown"); } diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js index 8286e9201e649..0b9368dd89948 100644 --- a/src/librustdoc/html/static/js/source-script.js +++ b/src/librustdoc/html/static/js/source-script.js @@ -10,7 +10,6 @@ (function() { const rootPath = document.getElementById("rustdoc-vars").attributes["data-root-path"].value; -let oldScrollPosition = null; const NAME_OFFSET = 0; const DIRS_OFFSET = 1; @@ -70,44 +69,18 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) { function toggleSidebar() { const child = this.parentNode.children[0]; if (child.innerText === ">") { - if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) { - // 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; - } + window.rustdocMobileScrollLock(); addClass(document.documentElement, "source-sidebar-expanded"); child.innerText = "<"; updateLocalStorage("source-sidebar-show", "true"); } else { - if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT && oldScrollPosition !== null) { - // 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; - } + window.rustdocMobileScrollUnlock(); removeClass(document.documentElement, "source-sidebar-expanded"); child.innerText = ">"; 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() { const sidebarToggle = document.createElement("div"); sidebarToggle.id = "sidebar-toggle"; @@ -125,7 +98,7 @@ function createSidebarToggle() { 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 function createSourceSidebar() { const container = document.querySelector("nav.sidebar");