Make sidebar container scroll internally #554
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -39,15 +39,19 @@ function init() { | |||||
| * @return string Returns the block markup. | ||||||
| */ | ||||||
| function render( $attributes, $content, $block ) { | ||||||
| $back_to_top = $attributes['hasBackToTop'] | ||||||
| ? sprintf( | ||||||
| '<p class="has-small-font-size is-link-to-top"><a href="#wp--skip-link--target">%s</a></p>', | ||||||
| esc_html__( '↑ Back to top', 'wporg' ) | ||||||
| ) | ||||||
| : ''; | ||||||
| $inlineBreakpoint = $attributes['inlineBreakpoint']; | ||||||
|
There was a problem hiding this comment.
Suggested change
PHP variables should be snake case. It looks like we're not running phpcs in the github actions, but you can run it locally with There was a problem hiding this comment. Fixed in 2aed927 |
||||||
|
|
||||||
| $wrapper_attributes = get_block_wrapper_attributes(); | ||||||
| return sprintf( | ||||||
| '<div %1$s data-breakpoint="%2$s">%3$s%4$s</div>', | ||||||
| $wrapper_attributes, | ||||||
| esc_attr( $inlineBreakpoint ), | ||||||
| $content, | ||||||
| $back_to_top | ||||||
| ); | ||||||
|
|
||||||
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,20 +1,13 @@ | ||
| /** | ||
| * Fallback values for custom properties match CSS defaults. | ||
| */ | ||
| const SPACE_TO_TOP = getCustomPropValue( '--wp--custom--wporg-sidebar-container--spacing--margin--top' ) || 80; | ||
|
|
||
| let containers; | ||
| let mainEl; | ||
| let adminBarHeight; | ||
| let globalNavHeight; | ||
| const scrollHandlers = []; | ||
|
|
||
| /** | ||
| * Get the value of a CSS custom property. | ||
|
|
@@ -26,120 +19,91 @@ let mainEl; | |
| */ | ||
| function getCustomPropValue( name, element = document.body ) { | ||
| const value = window.getComputedStyle( element ).getPropertyValue( name ); | ||
| if ( '0' === value ) { | ||
| return 0; | ||
| } | ||
| if ( 'px' === value.slice( -2 ) ) { | ||
| return Number( value.replace( 'px', '' ) ); | ||
| } | ||
| return value; | ||
| } | ||
|
|
||
| /** | ||
| * Check the position of the sidebar relative to the scroll position, | ||
| * and toggle the "fixed" class at a certain point. | ||
| * Reduce the height of the sidebar to stop it overlapping the footer. | ||
| * | ||
| * @param {HTMLElement} container The sidebar container. | ||
| * @return {Function} onScroll The sidebar scroll handler. | ||
| */ | ||
| function createScrollHandler( container ) { | ||
| return function onScroll() { | ||
| // Only run the scroll code if the sidebar is floating. | ||
| if ( ! container.classList.contains( 'is-floating-sidebar' ) ) { | ||
| return false; | ||
| } | ||
|
|
||
| const { scrollY, innerHeight: windowHeight } = window; | ||
| const scrollPosition = scrollY - adminBarHeight; | ||
| const localNavOffset = getCustomPropValue( '--local--nav--offset', container ); | ||
| const paddingTop = getCustomPropValue( '--local--padding', container ); | ||
|
|
||
| // Toggle the fixed position based on whether the scrollPosition is greater than the | ||
| // initial gap from the top minus the padding applied when fixed. | ||
| container.classList.toggle( | ||
| 'is-fixed-sidebar', | ||
| scrollPosition > SPACE_TO_TOP + globalNavHeight + localNavOffset - adminBarHeight - paddingTop | ||
| ); | ||
|
|
||
| const footerStart = mainEl.offsetTop + mainEl.offsetHeight; | ||
|
|
||
| // Is the footer visible in the viewport? | ||
| if ( footerStart < scrollPosition + windowHeight ) { | ||
| container.style.setProperty( 'height', `${ footerStart - scrollPosition - container.offsetTop }px` ); | ||
| } else { | ||
| container.style.removeProperty( 'height' ); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Set the height for the admin bar and global nav vars. | ||
| * Set the floating sidebar class on each container based on its breakpoint. | ||
| * Show hidden containers after layout. | ||
| */ | ||
| function onResize() { | ||
| adminBarHeight = getCustomPropValue( '--wp-admin--admin-bar--height' ) || 32; | ||
| globalNavHeight = getCustomPropValue( '--wp-global-header-height' ) || 90; | ||
|
|
||
| containers.forEach( ( container ) => { | ||
| // Toggle the floating class based on the configured breakpoint. | ||
| const shouldFloat = window.matchMedia( `(min-width: ${ container.dataset.breakpoint })` ).matches; | ||
| container.classList.toggle( 'is-floating-sidebar', shouldFloat ); | ||
| // Show the sidebar after layout, if it has been hidden to avoid FOUC. | ||
| if ( 'none' === window.getComputedStyle( container ).display ) { | ||
| container.style.setProperty( 'display', 'revert' ); | ||
| } | ||
| } ); | ||
|
|
||
| scrollHandlers.forEach( ( handler ) => handler() ); | ||
| } | ||
|
|
||
| function init() { | ||
| containers = document.querySelectorAll( '.wp-block-wporg-sidebar-container' ); | ||
| mainEl = document.getElementById( 'wp--skip-link--target' ); | ||
|
|
||
adamwoodnz marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| if ( mainEl && containers.length ) { | ||
| containers.forEach( ( container ) => { | ||
| const scrollHandler = createScrollHandler( container ); | ||
| scrollHandlers.push( scrollHandler ); | ||
| window.addEventListener( 'scroll', scrollHandler ); | ||
| } ); | ||
| } | ||
|
|
||
|
Comment on lines
-138
to
-142
There was a problem hiding this comment. Moved to the render |
||
| // Run once to set height vars and position elements on load. | ||
| // Avoids footer collisions (ex, when linked to #reply-title). | ||
| onResize(); | ||
| window.addEventListener( 'resize', onResize ); | ||
| } | ||
|
|
||
| window.addEventListener( 'load', init ); | ||
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.
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.
Moved from the sidebar container styles, as it relates directly to the change in positioning of the local nav bar