sergiotarxz/Wordpress
sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Themes: Improve Twenty Fifteen sticky sidebar logic

Browse Source 
The current logic in TwentyFifteen (#30366) for making the sidebar sticky while still allowing to scroll through it when the sidebar height is larger than the viewport height is flawed and massively overcomplicated.
This can be mitigated by removing the admin bar specific logic and leaving most of the heavy lifting up to the browser.

Fixes #37536

Props DvanKooten, lukecavanagh, karmatosed, ianbelanger, davidbaumwald



git-svn-id: https://develop.svn.wordpress.org/trunk@46308 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jake Spurlock 2019-09-25 21:37:09 +00:00
parent 2d4521d82a
commit 6649b3638c
2 changed files with 21 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/wp-content/themes/twentyfifteen/js/functions.js
View File

@ -6,10 +6,8 @@
*/
( function( $ ) {
var $body, $window, $sidebar, adminbarOffset, top = false,
bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
secondary, button;
var $body, $window, $sidebar, resizeTimer,
secondary, button;
function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
@ -96,71 +94,32 @@
}
// Sidebar scrolling.
function resize() {
windowWidth = $window.width();
if ( 955 > windowWidth ) {
top = bottom = false;
$sidebar.removeAttr( 'style' );
}
}
function scroll() {
var windowPos = $window.scrollTop();
if ( 955 > windowWidth ) {
return;
}
sidebarHeight = $sidebar.height();
windowHeight = $window.height();
bodyHeight = $body.height();
if ( sidebarHeight + adminbarOffset > windowHeight ) {
if ( windowPos > lastWindowPos ) {
if ( top ) {
top = false;
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
} else if ( ! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight ) {
bottom = true;
$sidebar.attr( 'style', 'position: fixed; bottom: 0;' );
}
} else if ( windowPos < lastWindowPos ) {
if ( bottom ) {
bottom = false;
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
} else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
top = true;
$sidebar.attr( 'style', 'position: fixed;' );
}
} else {
top = bottom = false;
topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
$sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
}
} else if ( ! top ) {
top = true;
$sidebar.attr( 'style', 'position: fixed;' );
}
lastWindowPos = windowPos;
}
function resizeAndScroll() {
resize();
scroll();
var windowPos = $window.scrollTop(),
windowHeight = $window.height(),
sidebarHeight = $sidebar.height(),
bodyHeight = $body.height();
if( 955 < $window.width()
&& bodyHeight > sidebarHeight
&& ( windowPos + windowHeight ) >= sidebarHeight ) {
$sidebar.css({
position: "fixed",
bottom: sidebarHeight > windowHeight ? 0 : 'auto'
});
} else {
$sidebar.css('position', 'relative')
}
}
$( document ).ready( function() {
$body = $( document.body );
$window = $( window );
$sidebar = $( '#sidebar' ).first();
adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
$window
.on( 'scroll.twentyfifteen', scroll )
.on( 'scroll.twentyfifteen', resizeAndScroll )
.on( 'load.twentyfifteen', onResizeARIA )
.on( 'resize.twentyfifteen', function() {
clearTimeout( resizeTimer );
@ -169,9 +128,7 @@
} );
$sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
resizeAndScroll();
for ( var i = 1; i < 6; i++ ) {
for ( var i = 0; i < 6; i++ ) {
setTimeout( resizeAndScroll, 100 * i );
}
} );

2
tests/qunit/fixtures/wp-api-generated.js
View File

@ -7434,7 +7434,7 @@ mockedApiResponse.StatusesCollection = {
"public": false,
"queryable": false,
"slug": "pending",
"date_floating": false,
"date_floating": true,
"_links": {
"archives": [
{