Remove extra space above ToC when scrolling down the page #525
There are no files selected for viewing
This file contains 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 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 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,7 +1,20 @@ | ||
| /** | ||
| * Fallback values for custom properties match CSS defaults. | ||
| */ | ||
| const globalNavHeight = 90; | ||
|
|
||
| const LOCAL_NAV_HEIGHT = getCustomPropValue( '--wp--custom--local-navigation-bar--spacing--height' ) || 60; | ||
| const ADMIN_BAR_HEIGHT = parseInt( | ||
| window.getComputedStyle( document.documentElement ).getPropertyValue( 'margin-top' ), | ||
| 10 | ||
| ); | ||
| const SPACE_FROM_BOTTOM = getCustomPropValue( '--wp--preset--spacing--edge-space' ) || 80; | ||
| const SPACE_TO_TOP = getCustomPropValue( '--wp--custom--wporg-sidebar-container--spacing--margin--top' ) || 80; | ||
| const FIXED_HEADER_HEIGHT = globalNavHeight + LOCAL_NAV_HEIGHT + ADMIN_BAR_HEIGHT; | ||
| const SCROLL_POSITION_TO_FIX = globalNavHeight + SPACE_TO_TOP - LOCAL_NAV_HEIGHT - ADMIN_BAR_HEIGHT; | ||
|
|
||
| let container; | ||
| let mainEl; | ||
|
|
||
| /** | ||
| * Get the value of a CSS custom property. | ||
|
|
@@ -27,64 +40,60 @@ function getCustomPropValue( name, element = document.body ) { | |
| * @return {boolean} True if the sidebar is at the bottom of the page. | ||
| */ | ||
| function onScroll() { | ||
| // Only run the scroll code if the sidebar is floating on a wide screen. | ||
| if ( ! mainEl || ! container || ! window.matchMedia( '(min-width: 1200px)' ).matches ) { | ||
| return; | ||
| } | ||
|
|
||
|
Comment on lines
-36
to
-43
There was a problem hiding this comment. Optimization: these don't need to be set on every scroll event |
||
| const scrollPosition = window.scrollY - ADMIN_BAR_HEIGHT; | ||
|
|
||
| if ( ! container.classList.contains( 'is-bottom-sidebar' ) ) { | ||
| const footerStart = mainEl.offsetTop + mainEl.offsetHeight; | ||
| // The pixel location of the bottom of the sidebar, relative to the top of the page. | ||
| const sidebarBottom = scrollPosition + container.offsetHeight + container.offsetTop - ADMIN_BAR_HEIGHT; | ||
|
|
||
| // Is the sidebar bottom crashing into the footer? | ||
| if ( footerStart - SPACE_FROM_BOTTOM < sidebarBottom ) { | ||
| container.classList.add( 'is-bottom-sidebar' ); | ||
|
|
||
| // Bottom sidebar is absolutely positioned, so we need to set the top relative to the page origin. | ||
| // The pixel location of the top of the sidebar, relative to the footer. | ||
| const sidebarTop = | ||
| footerStart - container.offsetHeight - LOCAL_NAV_HEIGHT * 2 + ADMIN_BAR_HEIGHT - SPACE_FROM_BOTTOM; | ||
| container.style.setProperty( 'top', `${ sidebarTop }px` ); | ||
|
|
||
| return true; | ||
| } | ||
| } else if ( container.getBoundingClientRect().top > LOCAL_NAV_HEIGHT * 2 + ADMIN_BAR_HEIGHT ) { | ||
| // If the top of the sidebar is above the top fixing position, switch back to just a fixed sidebar. | ||
| container.classList.remove( 'is-bottom-sidebar' ); | ||
| container.style.removeProperty( 'top' ); | ||
| } | ||
|
|
||
| // Toggle the fixed position based on whether the scrollPosition is greater than the initial gap from the top. | ||
| container.classList.toggle( 'is-fixed-sidebar', scrollPosition > SCROLL_POSITION_TO_FIX ); | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| function isSidebarWithinViewport() { | ||
| if ( ! container ) { | ||
| return false; | ||
| } | ||
| // Usable viewport height. | ||
| const viewHeight = window.innerHeight - LOCAL_NAV_HEIGHT + ADMIN_BAR_HEIGHT; | ||
| // Get the height of the sidebar, plus the top offset and 60px for the | ||
| // "Back to top" link, which isn't visible until `is-fixed-sidebar` is | ||
| // added, therefore not included in the offsetHeight value. | ||
| const sidebarHeight = container.offsetHeight + LOCAL_NAV_HEIGHT + 60; | ||
| // If the sidebar is shorter than the view area, apply the class so | ||
| // that it's fixed and scrolls with the page content. | ||
| return sidebarHeight < viewHeight; | ||
| } | ||
|
|
||
| function init() { | ||
| container = document.querySelector( '.wp-block-wporg-sidebar-container' ); | ||
| mainEl = document.getElementById( 'wp--skip-link--target' ); | ||
| const toggleButton = container?.querySelector( '.wporg-table-of-contents__toggle' ); | ||
| const list = container?.querySelector( '.wporg-table-of-contents__list' ); | ||
|
|
||
|
|
@@ -97,68 +106,33 @@ function init() { | |
| toggleButton.setAttribute( 'aria-expanded', true ); | ||
| list.setAttribute( 'style', 'display:block;' ); | ||
| } | ||
|
Comment on lines
-101
to
-130
There was a problem hiding this comment. The toggle behaviour on desktop is disabled as of #499 so this is dead code |
||
| } ); | ||
| } | ||
|
|
||
| if ( isSidebarWithinViewport() ) { | ||
| onScroll(); // Run once to avoid footer collisions on load (ex, when linked to #reply-title). | ||
| window.addEventListener( 'scroll', onScroll ); | ||
|
|
||
| const observer = new window.ResizeObserver( () => { | ||
| // If the sidebar is positioned at the bottom and mainEl resizes, | ||
| // it will remain fixed at the previous bottom position, leading to a broken page layout. | ||
| // In this case manually trigger the scroll handler to reposition. | ||
| if ( container.classList.contains( 'is-bottom-sidebar' ) ) { | ||
| container.classList.remove( 'is-bottom-sidebar' ); | ||
| container.style.removeProperty( 'top' ); | ||
| const isBottom = onScroll(); | ||
| // After the sidebar is repositioned, also adjusts the scroll position | ||
| // to a point where the sidebar is visible. | ||
| if ( isBottom ) { | ||
| window.scrollTo( { | ||
| top: container.offsetTop - FIXED_HEADER_HEIGHT, | ||
| behavior: 'instant', | ||
| } ); | ||
| } | ||
| } | ||
| } ); | ||
|
|
||
| observer.observe( mainEl ); | ||
| } | ||
|
|
||
| // If there is no table of contents, hide the heading. | ||
|
|
||
This file contains 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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I originally thought this already meant that it could be overridden by settings in the theme.json, but it turns out it can't? Asking this because I saw you explicitly set up 60px below.
Or setting explicitly here is primarily for easier usage elsewhere in the code, but I only saw one that doesn't have fallback in place though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question; I've been following Kelly's example here.
I can't remember exactly why I had to make this change, but I think I found that JS wasn't reading the custom property default value correctly, probably because this var is scoped to the component and not on body like they are in other components.