@@ -488,16 +488,13 @@ function showVersionWarningBanner(data) {
488488 return ;
489489 }
490490 // now construct the warning banner
491- var outer = document . createElement ( "aside" ) ;
492- // TODO: add to translatable strings
493- outer . setAttribute ( "aria-label" , "Version warning" ) ;
491+ const banner = document . querySelector ( ".bd-header-version-warning" ) ;
494492 const middle = document . createElement ( "div" ) ;
495493 const inner = document . createElement ( "div" ) ;
496494 const bold = document . createElement ( "strong" ) ;
497495 const button = document . createElement ( "a" ) ;
498496 // these classes exist since pydata-sphinx-theme v0.10.0
499497 // the init class is used for animation
500- outer . classList = "bd-header-version-warning container-fluid init" ;
501498 middle . classList = "bd-header-announcement__content" ;
502499 inner . classList = "sidebar-message" ;
503500 button . classList =
@@ -522,35 +519,12 @@ function showVersionWarningBanner(data) {
522519 } else {
523520 bold . innerText = `version ${ version } ;
524521 }
525- outer . appendChild ( middle ) ;
522+ banner . appendChild ( middle ) ;
526523 middle . appendChild ( inner ) ;
527524 inner . appendChild ( bold ) ;
528525 inner . appendChild ( document . createTextNode ( "." ) ) ;
529526 inner . appendChild ( button ) ;
530- const skipLink = document . getElementById ( "pst-skip-link" ) ;
531- skipLink . after ( outer ) ;
532- // At least 3rem height
533- const autoHeight = Math . max (
534- outer . offsetHeight ,
535- 3 * parseFloat ( getComputedStyle ( document . documentElement ) . fontSize ) ,
536- ) ;
537- // Set height and vertical padding to 0 to prepare the height transition
538- outer . style . setProperty ( "height" , 0 ) ;
539- outer . style . setProperty ( "padding-top" , 0 ) ;
540- outer . style . setProperty ( "padding-bottom" , 0 ) ;
541- outer . classList . remove ( "init" ) ;
542- // Set height to the computed height with a small timeout to activate the transition
543- setTimeout ( ( ) => {
544- outer . style . setProperty ( "height" , `${ autoHeight } ) ;
545- // Wait for a bit more than 300ms (the transition duration) then remove the
546- // forcefully set styles and let CSS take over
547- setTimeout ( ( ) => {
548- outer . style . removeProperty ( "padding-top" ) ;
549- outer . style . removeProperty ( "padding-bottom" ) ;
550- outer . style . removeProperty ( "height" ) ;
551- outer . style . setProperty ( "min-height" , "3rem" ) ;
552- } , 320 ) ;
553- } , 10 ) ;
527+ banner . classList . remove ( "d-none" ) ;
554528}
555529
556530/*******************************************************************************
@@ -584,27 +558,29 @@ function initRTDObserver() {
584558 observer . observe ( document . body , config ) ;
585559}
586560
587- // fetch the JSON version data (only once), then use it to populate the version
588- // switcher and maybe show the version warning bar
589- var versionSwitcherBtns = document . querySelectorAll (
590- ".version-switcher__button" ,
591- ) ;
592- const hasSwitcherMenu = versionSwitcherBtns . length > 0 ;
593- const hasVersionsJSON = DOCUMENTATION_OPTIONS . hasOwnProperty (
594- "theme_switcher_json_url" ,
595- ) ;
596- const wantsWarningBanner = DOCUMENTATION_OPTIONS . show_version_warning_banner ;
597-
598- if ( hasVersionsJSON && ( hasSwitcherMenu || wantsWarningBanner ) ) {
599- const data = await fetchVersionSwitcherJSON (
600- DOCUMENTATION_OPTIONS . theme_switcher_json_url ,
561+ async function fetchAndUseVersions ( ) {
562+ // fetch the JSON version data (only once), then use it to populate the version
563+ // switcher and maybe show the version warning bar
564+ var versionSwitcherBtns = document . querySelectorAll (
565+ ".version-switcher__button" ,
566+ ) ;
567+ const hasSwitcherMenu = versionSwitcherBtns . length > 0 ;
568+ const hasVersionsJSON = DOCUMENTATION_OPTIONS . hasOwnProperty (
569+ "theme_switcher_json_url" ,
601570 ) ;
602- // TODO: remove the `if(data)` once the `return null` is fixed within fetchVersionSwitcherJSON.
603- // We don't really want the switcher and warning bar to silently not work.
604- if ( data ) {
605- populateVersionSwitcher ( data , versionSwitcherBtns ) ;
606- if ( wantsWarningBanner ) {
607- showVersionWarningBanner ( data ) ;
571+ const wantsWarningBanner = DOCUMENTATION_OPTIONS . show_version_warning_banner ;
572+
573+ if ( hasVersionsJSON && ( hasSwitcherMenu || wantsWarningBanner ) ) {
574+ const data = await fetchVersionSwitcherJSON (
575+ DOCUMENTATION_OPTIONS . theme_switcher_json_url ,
576+ ) ;
577+ // TODO: remove the `if(data)` once the `return null` is fixed within fetchVersionSwitcherJSON.
578+ // We don't really want the switcher and warning bar to silently not work.
579+ if ( data ) {
580+ populateVersionSwitcher ( data , versionSwitcherBtns ) ;
581+ if ( wantsWarningBanner ) {
582+ showVersionWarningBanner ( data ) ;
583+ }
608584 }
609585 }
610586}
@@ -718,10 +694,70 @@ function debounce(callback, wait) {
718694 } ;
719695}
720696
697+ /*******************************************************************************
698+ * Announcement banner - fetch and load remote HTML
699+ */
700+ async function setupAnnouncementBanner ( ) {
701+ const banner = document . querySelector ( ".bd-header-announcement" ) ;
702+ const { pstAnnouncementUrl } = banner . dataset ;
703+
704+ if ( ! pstAnnouncementUrl ) {
705+ return ;
706+ }
707+
708+ try {
709+ const response = await fetch ( pstAnnouncementUrl ) ;
710+ if ( ! response . ok ) {
711+ throw new Error (
712+ `[PST]: HTTP response status not ok: ${ response . status } ${ response . statusText } ,
713+ ) ;
714+ }
715+ const data = await response . text ( ) ;
716+ if ( data . length === 0 ) {
717+ console . log ( `[PST]: Empty announcement at: ${ pstAnnouncementUrl } ) ;
718+ return ;
719+ }
720+ banner . innerHTML = `<div class="bd-header-announcement__content">${ data } ;
721+ banner . classList . remove ( "d-none" ) ;
722+ } catch ( _error ) {
723+ console . log ( `[PST]: Failed to load announcement at: ${ pstAnnouncementUrl } ) ;
724+ console . error ( _error ) ;
725+ }
726+ }
727+
728+ /*******************************************************************************
729+ * Reveal (and animate) the banners (version warning, announcement) together
730+ */
731+ async function fetchRevealBannersTogether ( ) {
732+ // Wait until finished fetching and loading banners
733+ await Promise . allSettled ( [ fetchAndUseVersions ( ) , setupAnnouncementBanner ( ) ] ) ;
734+
735+ // The revealer element should have CSS rules that set height to 0, overflow
736+ // to hidden, and an animation transition on the height (unless the user has
737+ // turned off animations)
738+ const revealer = document . querySelector ( ".pst-async-banner-revealer" ) ;
739+
740+ // Remove the d-none (display-none) class to calculate the children heights.
741+ revealer . classList . remove ( "d-none" ) ;
742+
743+ // Add together the heights of the element's children
744+ const height = Array . from ( revealer . children ) . reduce (
745+ ( height , el ) => height + el . offsetHeight ,
746+ 0 ,
747+ ) ;
748+
749+ // Use the calculated height to give the revealer a non-zero height (if
750+ // animations allowed, the height change will animate)
751+ revealer . style . setProperty ( "height" , `${ height } ) ;
752+ }
753+
721754/*******************************************************************************
722755 * Call functions after document loading.
723756 */
724757
758+ // Call this one first to kick off the network request for the version warning
759+ // and announcement banner data as early as possible.
760+ documentReady ( fetchRevealBannersTogether ) ;
725761documentReady ( addModeListener ) ;
726762documentReady ( scrollToActive ) ;
727763documentReady ( addTOCInteractivity ) ;
0 commit comments