Changeset 46308

Timestamp:

09/25/2019 09:37:09 PM (7 years ago)

Author:

whyisjake

Message:

Themes: Improve Twenty Fifteen sticky sidebar logic

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

Location:

trunk

Files:

• src/wp-content/themes/twentyfifteen/js/functions.js (modified) (4 diffs)
• tests/qunit/fixtures/wp-api-generated.js (modified) (1 diff)

trunk/src/wp-content/themes/twentyfifteen/js/functions.js

@@ -7 +7 @@
 
 ( 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 ) {
@@ -97 +95 @@
 
         // Sidebar scrolling.
-        function resize() {
-                windowWidth = $window.width();
+        function resizeAndScroll() {
+                var windowPos = $window.scrollTop(),
+                        windowHeight = $window.height(),
+                        sidebarHeight = $sidebar.height(),
+                        bodyHeight = $body.height();
 
-                if ( 955 > windowWidth ) {
-                        top = bottom = false;
-                        $sidebar.removeAttr( 'style' );
+                if( 955 < $window.width()
+                        && bodyHeight > sidebarHeight
+                        && ( windowPos + windowHeight ) >= sidebarHeight ) {
+
+                        $sidebar.css({
+                                position: "fixed",
+                                bottom: sidebarHeight > windowHeight ? 0 : 'auto'
+                        });
+                } else {
+                        $sidebar.css('position', 'relative')
                 }
-        }
-
-        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();
         }
 
@@ -158 +118 @@
                 $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() {
@@ -170 +129 @@
                 $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 );
                 }

trunk/tests/qunit/fixtures/wp-api-generated.js

@@ -7435 +7435 @@
         "queryable": false,
         "slug": "pending",
-        "date_floating": false,
+        "date_floating": true,
         "_links": {
             "archives": [