Changeset 38853

Timestamp:

10/21/2016 06:36:57 AM (8 years ago)

Author:

westonruter

Message:

Customize: Add sticky headers for panels and sections.

Includes autoprefixing of CSS.

Props delawski, celloexpressions.
See #35186.
Fixes #34343.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (19 diffs)
• css/customize-nav-menus.css (modified) (2 diffs)
• js/customize-controls.js (modified) (7 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -56 +56 @@
 #customize-controls .customize-info.section-meta {
     margin-bottom: 15px;
+}
+
+#customize-controls .customize-info.is-in-view,
+#customize-controls .customize-section-title.is-in-view {
+    position: absolute;
+    z-index: 9;
+    width: 100%;
+    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
+}
+
+#customize-controls .customize-section-title.is-in-view {
+    margin-top: 0;
+}
+
+#customize-controls .customize-info.is-in-view + .accordion-section {
+    margin-top: 15px;
+}
+
+#customize-controls .customize-info.is-sticky,
+#customize-controls .customize-section-title.is-sticky {
+    position: fixed;
+    top: 46px;
 }
 
@@ -324 +347 @@
 #customize-theme-controls .customize-pane-child.accordion-section-content {
     padding: 12px;
+}
+
+#customize-theme-controls .customize-pane-child.menu li {
+    position: static;
 }
 
@@ -410 +437 @@
     float: left;
     width: 48px;
-    height: 70px;
+    height: 71px;
     padding: 0 24px 0 0;
     margin: 0;
@@ -424 +451 @@
 
 .customize-section-back {
-    height: 73px;
+    height: 74px;
 }
 
@@ -485 +512 @@
 
 .wp-full-overlay-sidebar .wp-full-overlay-header {
+    background-color: #eee;
     -webkit-transition: padding ease-in-out .18s;
     transition: padding ease-in-out .18s;
@@ -1089 +1117 @@
     top: 0;
     left: 0;
+    -webkit-transition: .18s left ease-in-out;
     transition: .18s left ease-in-out;
     margin: 0 0 0 300px;
     padding:25px;
     overflow-y: scroll;
+    width: -webkit-calc(100% - 350px);
     width: calc(100% - 350px);
+    height: -webkit-calc(100% - 50px);
     height: calc(100% - 50px);
     background: #eee;
@@ -1105 +1136 @@
     position: relative;
     top: 0;
+    -webkit-transition: .18s top ease-in-out;
     transition: .18s top ease-in-out;
 }
@@ -1111 +1143 @@
 #customize-footer-actions .collapse-sidebar {
     bottom: 0;
+    -webkit-transition: .18s bottom ease-in-out;
     transition: .18s bottom ease-in-out;
 }
@@ -1147 +1180 @@
 
 /* Adds a delay before fading in to avoid it "jumping" */
+@-webkit-keyframes themes-fade-in {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 @keyframes themes-fade-in {
     0% {
@@ -1160 +1204 @@
 
 .control-panel-themes .customize-themes-full-container.animate {
+    -webkit-animation: .6s themes-fade-in 1;
     animation: .6s themes-fade-in 1;
 }
 
 .in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
+    -webkit-animation: .6s themes-fade-in 1;
     animation: .6s themes-fade-in 1;
 }
@@ -1206 +1252 @@
 
     .control-panel-themes .filter-themes-count {
+        width: -webkit-calc(100% - 93px);
         width: calc(100% - 93px);
     }
@@ -1237 +1284 @@
 
     .control-panel-themes .customize-themes-full-container {
+        width: -webkit-calc(100% - 50px);
         width: calc(100% - 50px);
         margin: 0;
         top: 46px;
+        height: -webkit-calc(100% - 96px);
         height: calc(100% - 96px);
         z-index: 1;
@@ -1274 +1323 @@
     width: 100%;
     background: #fff;
+    -webkit-box-shadow: none;
     box-shadow: none;
     outline: none;
@@ -1305 +1355 @@
     content: "\f147";
     font: 16px/1 dashicons;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
     width: 20px;
     height: 20px;
     padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
+    -webkit-border-radius: 100%;
     border-radius: 100%;
     position: absolute;
@@ -1377 +1430 @@
     border: none;
     padding: 0;
+    -webkit-box-shadow: none;
     box-shadow: none;
 }
@@ -1407 +1461 @@
     border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
     outline: none;
+    -webkit-box-shadow: none;
     box-shadow: none;
 }
@@ -1426 +1481 @@
     margin: 0;
     padding: 12px 10px 12px 34px;
+    width: -webkit-calc(100% - 46px);
     width: calc(100% - 46px);
     line-height: 16px;
@@ -1454 +1510 @@
     width: 20px;
     height: 20px;
+    left: -webkit-calc(50% - 10px);
     left: calc(50% - 10px);
     float: none;
@@ -1489 +1546 @@
 
 .customize-control.customize-control-theme { /* override most properties on .customize-control */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
     width: 18.4%;

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -66 +66 @@
 }
 
+.wp-customizer .menu-item-handle:hover {
+    z-index: 8;
+}
+
 .customize-control-nav_menu_item.has-notifications .menu-item-handle {
     border-left: 4px solid #00a0d2;
@@ -73 +77 @@
     max-width: 100%;
     overflow: hidden;
+    z-index: 8;
     padding: 10px;
     background: #eee;

trunk/src/wp-admin/js/customize-controls.js

@@ -1005 +1005 @@
                         content.addClass( 'open' );
                         overlay.addClass( 'section-open' );
+                        api.state( 'expandedSection' ).set( section );
                     }, this );
                 }
@@ -1043 +1044 @@
                 content.removeClass( 'open' );
                 overlay.removeClass( 'section-open' );
+                if ( section === api.state( 'expandedSection' ).get() ) {
+                    api.state( 'expandedSection' ).set( false );
+                }
 
             } else {
@@ -1996 +2000 @@
                 overlay.addClass( 'in-sub-panel' );
                 accordionSection.addClass( 'current-panel' );
+                api.state( 'expandedPanel' ).set( panel );
 
             } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
@@ -2012 +2017 @@
                 overlay.removeClass( 'in-sub-panel' );
                 accordionSection.removeClass( 'current-panel' );
+                if ( panel === api.state( 'expandedPanel' ).get() ) {
+                    api.state( 'expandedPanel' ).set( false );
+                }
             }
         },
@@ -4969 +4977 @@
                 processing = state.create( 'processing' ),
                 paneVisible = state.create( 'paneVisible' ),
+                expandedPanel = state.create( 'expandedPanel' ),
+                expandedSection = state.create( 'expandedSection' ),
                 changesetStatus = state.create( 'changesetStatus' ),
                 previewerAlive = state.create( 'previewerAlive' ),
@@ -5004 +5014 @@
             processing( 0 );
             paneVisible( true );
+            expandedPanel( false );
+            expandedSection( false );
             previewerAlive( true );
             changesetStatus( api.settings.changeset.status );
@@ -5157 +5169 @@
         });
 
+        /*
+         * Sticky header feature.
+         */
+        (function initStickyHeaders() {
+            var parentContainer = $( '.wp-full-overlay-sidebar-content' ),
+                changeContainer, getHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
+                activeHeader, lastScrollTop;
+
+            // Determine which panel or section is currently expanded.
+            changeContainer = function( container ) {
+                var newInstance = container,
+                    expandedSection = api.state( 'expandedSection' ).get(),
+                    expandedPanel = api.state( 'expandedPanel' ).get(),
+                    headerElement;
+
+                // Release previously active header element.
+                if ( activeHeader && activeHeader.element ) {
+                    releaseStickyHeader( activeHeader.element );
+                }
+
+                if ( ! newInstance ) {
+                    if ( ! expandedSection && expandedPanel && expandedPanel.contentContainer ) {
+                        newInstance = expandedPanel;
+                    } else if ( ! expandedPanel && expandedSection && expandedSection.contentContainer ) {
+                        newInstance = expandedSection;
+                    } else {
+                        activeHeader = false;
+                        return;
+                    }
+                }
+
+                headerElement = newInstance.contentContainer.find( '.customize-section-title, .panel-meta' ).first();
+                if ( headerElement.length ) {
+                    activeHeader = {
+                        instance: newInstance,
+                        element:  headerElement,
+                        parent:   headerElement.closest( '.customize-pane-child' ),
+                        height:   getHeaderHeight( headerElement )
+                    };
+                    if ( expandedSection ) {
+                        resetStickyHeader( activeHeader.element, activeHeader.parent );
+                    }
+                } else {
+                    activeHeader = false;
+                }
+            };
+            api.state( 'expandedSection' ).bind( changeContainer );
+            api.state( 'expandedPanel' ).bind( changeContainer );
+
+            // Throttled scroll event handler.
+            parentContainer.on( 'scroll', _.throttle( function() {
+                if ( ! activeHeader ) {
+                    return;
+                }
+
+                var scrollTop = parentContainer.scrollTop(),
+                    isScrollingUp = ( lastScrollTop ) ? scrollTop <= lastScrollTop : true;
+
+                lastScrollTop = scrollTop;
+                positionStickyHeader( activeHeader, scrollTop, isScrollingUp );
+            }, 8 ) );
+
+            // Release header element if it is sticky.
+            releaseStickyHeader = function( headerElement ) {
+                if ( ! headerElement.hasClass( 'is-sticky' ) ) {
+                    return;
+                }
+                headerElement
+                    .removeClass( 'is-sticky' )
+                    .addClass( 'maybe-sticky is-in-view' )
+                    .css( 'top', parentContainer.scrollTop() + 'px' );
+            };
+
+            // Reset position of the sticky header.
+            resetStickyHeader = function( headerElement, headerParent ) {
+                headerElement
+                    .removeClass( 'maybe-sticky is-in-view' )
+                    .css( {
+                        width: '',
+                        top: ''
+                    } );
+                headerParent.css( 'padding-top', '' );
+            };
+
+            // Get header height.
+            getHeaderHeight = function( headerElement ) {
+                var height = headerElement.data( 'height' );
+                if ( ! height ) {
+                    height = headerElement.outerHeight();
+                    headerElement.data( 'height', height );
+                }
+                return height;
+            };
+
+            // Reposition header on throttled `scroll` event.
+            positionStickyHeader = function( header, scrollTop, isScrollingUp ) {
+                var headerElement = header.element,
+                    headerParent = header.parent,
+                    headerHeight = header.height,
+                    headerTop = parseInt( headerElement.css( 'top' ), 10 ),
+                    maybeSticky = headerElement.hasClass( 'maybe-sticky' ),
+                    isSticky = headerElement.hasClass( 'is-sticky' ),
+                    isInView = headerElement.hasClass( 'is-in-view' );
+
+                // When scrolling down, gradually hide sticky header.
+                if ( ! isScrollingUp ) {
+                    if ( isSticky ) {
+                        headerTop = scrollTop;
+                        headerElement
+                            .removeClass( 'is-sticky' )
+                            .css( {
+                                top:   headerTop + 'px',
+                                width: ''
+                            } );
+                    }
+                    if ( isInView && scrollTop > headerTop + headerHeight ) {
+                        headerElement.removeClass( 'is-in-view' );
+                        headerParent.css( 'padding-top', '' );
+                    }
+                    return;
+                }
+
+                // Scrolling up.
+                if ( ! maybeSticky && scrollTop >= headerHeight ) {
+                    maybeSticky = true;
+                    headerElement.addClass( 'maybe-sticky' );
+                } else if ( 0 === scrollTop ) {
+                    // Reset header in base position.
+                    headerElement
+                        .removeClass( 'maybe-sticky is-in-view is-sticky' )
+                        .css( {
+                            top:   '',
+                            width: ''
+                        } );
+                    headerParent.css( 'padding-top', '' );
+                    return;
+                }
+
+                if ( isInView && ! isSticky ) {
+                    // Header is in the view but is not yet sticky.
+                    if ( headerTop >= scrollTop ) {
+                        // Header is fully visible.
+                        headerElement
+                            .addClass( 'is-sticky' )
+                            .css( {
+                                top:   '',
+                                width: headerParent.outerWidth() + 'px'
+                            } );
+                    }
+                } else if ( maybeSticky && ! isInView ) {
+                    // Header is out of the view.
+                    headerElement
+                        .addClass( 'is-in-view' )
+                        .css( 'top', ( scrollTop - headerHeight ) + 'px' );
+                    headerParent.css( 'padding-top', headerHeight + 'px' );
+                }
+            };
+        }());
+
         // Previewed device bindings.
         api.previewedDevice = new api.Value();