Animate remotely loaded banners together #1808
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -476,16 +476,13 @@ function showVersionWarningBanner(data) { | |
| return; | ||
| } | ||
| // now construct the warning banner | ||
| const banner = document.querySelector(".bd-header-version-warning"); | ||
| const middle = document.createElement("div"); | ||
| const inner = document.createElement("div"); | ||
| const bold = document.createElement("strong"); | ||
| const button = document.createElement("a"); | ||
| // these classes exist since pydata-sphinx-theme v0.10.0 | ||
| // the init class is used for animation | ||
| middle.classList = "bd-header-announcement__content"; | ||
| inner.classList = "sidebar-message"; | ||
| button.classList = | ||
|
|
@@ -510,35 +507,12 @@ function showVersionWarningBanner(data) { | |
| } else { | ||
| bold.innerText = `version ${version}`; | ||
| } | ||
| banner.appendChild(middle); | ||
| middle.appendChild(inner); | ||
| inner.appendChild(bold); | ||
| inner.appendChild(document.createTextNode(".")); | ||
| inner.appendChild(button); | ||
| banner.classList.remove("d-none"); | ||
| } | ||
|
|
||
| /******************************************************************************* | ||
|
|
@@ -572,27 +546,29 @@ function initRTDObserver() { | |
| observer.observe(document.body, config); | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. When I discovered this line I was a bit surprised. An This was introduced in #1344. Previously, the fetch was also executed at the module level, but without the So I decided to put all of this code into a new asynchronous function, |
||
| async function fetchAndUseVersions() { | ||
|
There was a problem hiding this comment. This function definition should arguably moved to a different part of the file, next to other code that has to do with the version switcher, but I didn't want to make the diff harder to compare so I left this code at the same place in the file. |
||
| // fetch the JSON version data (only once), then use it to populate the version | ||
| // switcher and maybe show the version warning bar | ||
| var versionSwitcherBtns = document.querySelectorAll( | ||
| ".version-switcher__button", | ||
| ); | ||
| const hasSwitcherMenu = versionSwitcherBtns.length > 0; | ||
| const hasVersionsJSON = DOCUMENTATION_OPTIONS.hasOwnProperty( | ||
| "theme_switcher_json_url", | ||
| ); | ||
| const wantsWarningBanner = DOCUMENTATION_OPTIONS.show_version_warning_banner; | ||
|
|
||
| if (hasVersionsJSON && (hasSwitcherMenu || wantsWarningBanner)) { | ||
| const data = await fetchVersionSwitcherJSON( | ||
| DOCUMENTATION_OPTIONS.theme_switcher_json_url, | ||
| ); | ||
| // TODO: remove the `if(data)` once the `return null` is fixed within fetchVersionSwitcherJSON. | ||
| // We don't really want the switcher and warning bar to silently not work. | ||
| if (data) { | ||
| populateVersionSwitcher(data, versionSwitcherBtns); | ||
| if (wantsWarningBanner) { | ||
| showVersionWarningBanner(data); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -718,10 +694,65 @@ function debounce(callback, wait) { | |
| }; | ||
| } | ||
|
|
||
| /******************************************************************************* | ||
| * Announcement banner - fetch and load remote HTML | ||
| */ | ||
| async function setupAnnouncementBanner() { | ||
| const banner = document.querySelector(".bd-header-announcement"); | ||
| const { pstAnnouncementUrl } = banner.dataset; | ||
|
|
||
| if (!pstAnnouncementUrl) { | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| const response = await fetch(pstAnnouncementUrl); | ||
| const data = await response.text(); | ||
| if (data.length === 0) { | ||
| console.log(`[PST]: Empty announcement at: ${pstAnnouncementUrl}`); | ||
| return; | ||
| } | ||
| banner.innerHTML = `<div class="bd-header-announcement__content">${data}</div>`; | ||
| banner.classList.remove("d-none"); | ||
| } catch (_error) { | ||
| console.log(`[PST]: Failed to load announcement at: ${pstAnnouncementUrl}`); | ||
| console.error(_error); | ||
|
There was a problem hiding this comment. Previously the error was not being printed to the console. I thought it might be helpful to our users to print the error. |
||
| } | ||
| } | ||
|
|
||
| /******************************************************************************* | ||
| * Reveal (and animate) the banners (version warning, announcement) together | ||
| */ | ||
| async function fetchRevealBannersTogether() { | ||
| // Wait until finished fetching and loading banners | ||
| await Promise.allSettled([fetchAndUseVersions(), setupAnnouncementBanner()]); | ||
|
|
||
| // The revealer element should have CSS rules that set height to 0, overflow | ||
| // to hidden, and an animation transition on the height (unless the user has | ||
| // turned off animations) | ||
| const revealer = document.querySelector(".pst-async-banner-revealer"); | ||
|
|
||
| // Remove the d-none (display-none) class to calculate the children heights. | ||
| revealer.classList.remove("d-none"); | ||
|
|
||
| // Add together the heights of the element's children | ||
| const height = Array.from(revealer.children).reduce( | ||
| (height, el) => height + el.offsetHeight, | ||
| 0, | ||
| ); | ||
|
|
||
| // Use the calculated height to give the revealer a non-zero height (if | ||
| // animations allowed, the height change will animate) | ||
| revealer.style.setProperty("height", `${height}px`); | ||
| } | ||
|
|
||
| /******************************************************************************* | ||
| * Call functions after document loading. | ||
| */ | ||
|
|
||
| // Call this one first to kick off the network request for the version warning | ||
| // and announcement banner data as early as possible. | ||
| documentReady(fetchRevealBannersTogether); | ||
| documentReady(addModeListener); | ||
| documentReady(scrollToActive); | ||
| documentReady(addTOCInteractivity); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,38 @@ | ||
| .pst-async-banner-revealer { | ||
| // Setting height to 0 and overflow to hidden allows us to add up the heights | ||
| // of this element's children before revealing them. | ||
| height: 0; | ||
| overflow: hidden; | ||
|
|
||
| // Height to be set by JavaScript, which should trigger the following | ||
| // transition rule (unless the user has set their system to reduce motion). | ||
| transition: height 300ms ease-in-out; | ||
| @media (prefers-reduced-motion) { | ||
| transition: none; | ||
| } | ||
| } | ||
|
|
||
| .bd-header-version-warning, | ||
| .bd-header-announcement { | ||
| min-height: 3rem; | ||
| width: 100%; | ||
| display: flex; | ||
| position: relative; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
|
There was a problem hiding this comment. Moved the transition and overflow rules to the new container element. |
||
| padding: 0.5rem 12.5%; // Horizontal padding so the width is 75% | ||
| // One breakpoint less than $breakpoint-sidebar-primary. See variables/_layout.scss for more info. | ||
| @include media-breakpoint-down(lg) { | ||
| // Announcements can take a bit more width on mobile | ||
| padding: 0.5rem 2%; | ||
| } | ||
|
|
||
|
Comment on lines
-18
to
-22
There was a problem hiding this comment. This class was added by #1693. It's not needed now. |
||
| p { | ||
| font-weight: bold; | ||
| margin: 0; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. This functionality—not showing the banner if it's empty—is now taken care of with the changes from #1703 and with the |
||
| // Ensure there is enough contrast against the background | ||
| a { | ||
| color: var(--pst-color-inline-code-links); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,7 +9,7 @@ msgid "" | |
| msgstr "" | ||
| "Project-Id-Version: PROJECT VERSION\n" | ||
| "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" | ||
| "POT-Creation-Date: 2024-05-10 18:43+0200\n" | ||
| "PO-Revision-Date: 2023-04-14 14:57+0000\n" | ||
| "Last-Translator: Jan Breuer <[email protected]>, 2024\n" | ||
| "Language: cs\n" | ||
|
|
@@ -156,7 +156,11 @@ msgstr "" | |
| "theme.readthedocs.io/en/stable/index.html\">PyData Sphinx Theme</a> " | ||
| "%(theme_version)s." | ||
|
|
||
| #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html:4 | ||
| msgid "Version warning" | ||
| msgstr "" | ||
|
|
||
| #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html:6 | ||
| msgid "Announcement" | ||
| msgstr "" | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,7 +9,7 @@ msgid "" | |
| msgstr "" | ||
| "Project-Id-Version: PROJECT VERSION\n" | ||
| "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" | ||
| "POT-Creation-Date: 2024-05-10 18:43+0200\n" | ||
| "PO-Revision-Date: 2023-04-14 14:57+0000\n" | ||
| "Last-Translator: Rambaud Pierrick <[email protected]>, 2024\n" | ||
| "Language: fr\n" | ||
|
|
@@ -156,7 +156,11 @@ msgstr "" | |
| "theme.readthedocs.io/en/stable/index.html\">Thème PyData Sphinx</a> " | ||
| "%(theme_version)s." | ||
|
|
||
| #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html:4 | ||
| msgid "Version warning" | ||
| msgstr "" | ||
|
|
||
| #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html:6 | ||
| msgid "Announcement" | ||
| msgstr "" | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,7 +9,7 @@ msgid "" | |
| msgstr "" | ||
| "Project-Id-Version: PROJECT VERSION\n" | ||
| "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" | ||
| "POT-Creation-Date: 2024-05-10 18:43+0200\n" | ||
| "PO-Revision-Date: 2023-04-14 14:57+0000\n" | ||
| "Last-Translator: Rambaud Pierrick <[email protected]>, 2023\n" | ||
| "Language: ru\n" | ||
|
|
@@ -157,7 +157,11 @@ msgstr "" | |
| "theme.readthedocs.io/en/stable/index.html\\\">PyData Sphinx</a> " | ||
| "%(theme_version)s." | ||
|
|
||
| #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html:4 | ||
| msgid "Version warning" | ||
| msgstr "" | ||
|
|
||
| #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html:6 | ||
| msgid "Announcement" | ||
| msgstr "" | ||
|
|
||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.