WordPress.org

Make WordPress Core

Ticket #34343: 34343_2.diff

File 34343_2.diff, 9.4 KB (added by delawski, 3 years ago)
  • src/wp-admin/css/customize-controls.css

    diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
    index 04e0b54..5497eed 100644
    a b body { 
    5353        margin-bottom: 15px;
    5454}
    5555
     56#customize-controls .customize-info.maybe-sticky,
     57#customize-controls .customize-section-title.maybe-sticky {
     58        position: fixed;
     59        z-index: 9;
     60        top: 46px;
     61        box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
     62        -webkit-transform: translateY(-102%);
     63        -ms-transform: translateY(-102%);
     64        transform: translateY(-102%);
     65}
     66
     67#customize-controls .customize-section-title.maybe-sticky {
     68        margin-top: 0;
     69}
     70
     71#customize-controls .customize-info.maybe-sticky.is-sticky,
     72#customize-controls .customize-section-title.maybe-sticky.is-sticky {
     73        -webkit-transform: none;
     74        -ms-transform: none;
     75        transform: none;
     76        -webkit-transition: -webkit-transform 0.18s ease-out;
     77        transition: -webkit-transform 0.18s ease-out;
     78        transition: transform 0.18s ease-out;
     79        transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
     80}
     81
     82#customize-controls .customize-info.maybe-sticky.was-sticky,
     83#customize-controls .customize-section-title.maybe-sticky.was-sticky {
     84        position: absolute;
     85        -webkit-transform: none;
     86        -ms-transform: none;
     87        transform: none;
     88}
     89
     90#customize-controls .maybe-sticky .current-panel,
     91#customize-controls .maybe-sticky .open {
     92        padding-top: 72px;
     93}
     94
    5695#customize-controls .customize-info .accordion-section-title {
    5796        background: #fff;
    5897        color: #555;
    h3.customize-section-title { 
    481520}
    482521
    483522.wp-full-overlay-sidebar .wp-full-overlay-header {
     523        background-color: #eee;
    484524        -webkit-transition: padding ease-in-out .18s;
    485525        transition: padding ease-in-out .18s;
    486526}
  • src/wp-admin/css/customize-nav-menus.css

    diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
    index d180fb3..37c9738 100644
    a b  
    6565        text-align: right;
    6666}
    6767
     68.wp-customizer .menu-item-handle:hover {
     69        z-index: 8;
     70}
     71
    6872.customize-control-nav_menu_item.has-notifications .menu-item-handle {
    6973        border-left: 4px solid #00a0d2;
    7074}
     
    7276.wp-customizer .menu-item-settings {
    7377        max-width: 100%;
    7478        overflow: hidden;
     79        z-index: 8;
    7580        padding: 10px;
    7681        background: #eee;
    7782        border: 1px solid #999;
  • src/wp-admin/js/customize-controls.js

    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
    index d5f2e4e..03fd3a5 100644
    a b  
    816816
    817817                                                content.addClass( 'open' );
    818818                                                overlay.addClass( 'section-open' );
     819                                                api.state( 'expandedSection' ).set( section );
    819820                                        }, this );
    820821                                }
    821822
     
    854855
    855856                                content.removeClass( 'open' );
    856857                                overlay.removeClass( 'section-open' );
     858                                if ( section === api.state( 'expandedSection' ).get() ) {
     859                                        api.state( 'expandedSection' ).set( false );
     860                                }
    857861
    858862                        } else {
    859863                                if ( args.completeCallback ) {
     
    14711475
    14721476                                overlay.addClass( 'in-sub-panel' );
    14731477                                accordionSection.addClass( 'current-panel' );
     1478                                api.state( 'expandedPanel' ).set( panel );
    14741479
    14751480                        } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
    14761481                                panel._animateChangeExpanded( function() {
     
    14871492
    14881493                                overlay.removeClass( 'in-sub-panel' );
    14891494                                accordionSection.removeClass( 'current-panel' );
     1495                                if ( panel === api.state( 'expandedPanel' ).get() ) {
     1496                                        api.state( 'expandedPanel' ).set( false );
     1497                                }
    14901498                        }
    14911499                },
    14921500
     
    39753983                                saved = state.create( 'saved' ),
    39763984                                activated = state.create( 'activated' ),
    39773985                                processing = state.create( 'processing' ),
    3978                                 paneVisible = state.create( 'paneVisible' );
     3986                                paneVisible = state.create( 'paneVisible' ),
     3987                                expandedPanel = state.create( 'expandedPanel' ),
     3988                                expandedSection = state.create( 'expandedSection' );
    39793989
    39803990                        state.bind( 'change', function() {
    39813991                                if ( ! activated() ) {
     
    39974007                        activated( api.settings.theme.active );
    39984008                        processing( 0 );
    39994009                        paneVisible( true );
     4010                        expandedPanel( false );
     4011                        expandedSection( false );
    40004012
    40014013                        api.bind( 'change', function() {
    40024014                                state('saved').set( false );
     
    40944106                        overlay.toggleClass( 'preview-only' );
    40954107                });
    40964108
     4109                // Sticky header functionality.
     4110                (function() {
     4111                        var parentContainer = $( '.wp-full-overlay-sidebar-content' ),
     4112                                changeContainer, getHeaderDimensions, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
     4113                                activeHeader, lastScrollTop;
     4114
     4115                        // Determine which panel or section is currently expanded.
     4116                        changeContainer = function( container ) {
     4117                                var newInstance = container,
     4118                                        expandedSection = api.state( 'expandedSection' ).get(),
     4119                                        expandedPanel = api.state( 'expandedPanel' ).get(),
     4120                                        headerElement, headerDimensions;
     4121
     4122                                // Release previously active header element.
     4123                                if ( activeHeader && activeHeader.element ) {
     4124                                        releaseStickyHeader( activeHeader.element );
     4125                                }
     4126
     4127                                if ( ! newInstance ) {
     4128                                        if ( ! expandedSection && expandedPanel && expandedPanel.contentContainer ) {
     4129                                                newInstance = expandedPanel;
     4130                                        } else if ( ! expandedPanel && expandedSection && expandedSection.contentContainer ) {
     4131                                                newInstance = expandedSection;
     4132                                        } else {
     4133                                                activeHeader = false;
     4134                                                return;
     4135                                        }
     4136                                }
     4137
     4138                                headerElement = newInstance.contentContainer.find( '.customize-section-title, .panel-meta' ).first();
     4139                                if ( headerElement.length ) {
     4140                                        headerDimensions = getHeaderDimensions( headerElement );
     4141                                        activeHeader = {
     4142                                                instance: newInstance,
     4143                                                element: headerElement,
     4144                                                parent: headerElement.closest( '.customize-pane-child' ),
     4145                                                top: headerDimensions.top,
     4146                                                width: headerDimensions.width,
     4147                                                height: headerDimensions.height
     4148                                        };
     4149                                        if ( expandedSection ) {
     4150                                                resetStickyHeader( activeHeader.element, activeHeader.parent );
     4151                                        }
     4152                                } else {
     4153                                        activeHeader = false;
     4154                                }
     4155                        };
     4156                        api.state( 'expandedSection' ).bind( changeContainer );
     4157                        api.state( 'expandedPanel' ).bind( changeContainer );
     4158
     4159                        // Throttled scroll event handler.
     4160                        parentContainer.on( 'scroll', _.throttle( function() {
     4161                                if ( ! activeHeader ) {
     4162                                        return;
     4163                                }
     4164
     4165                                var scrollTop = parentContainer.scrollTop(),
     4166                                        isScrollingUp = ( lastScrollTop ) ? scrollTop <= lastScrollTop : true;
     4167
     4168                                lastScrollTop = scrollTop;
     4169                                positionStickyHeader( activeHeader, scrollTop, isScrollingUp );
     4170                        }, 8 ) );
     4171
     4172                        // Release header element if it is sticky.
     4173                        releaseStickyHeader = function( headerElement ) {
     4174                                if ( ! headerElement.hasClass( 'is-sticky' ) ) {
     4175                                        return;
     4176                                }
     4177                                headerElement
     4178                                        .removeClass( 'is-sticky' )
     4179                                        .addClass( 'was-sticky' )
     4180                                        .css( 'top', parentContainer.scrollTop() + 'px' );
     4181                        };
     4182
     4183                        // Reset position of the sticky header.
     4184                        resetStickyHeader = function( headerElement, headerParent ) {
     4185                                headerElement
     4186                                        .removeClass( 'maybe-sticky was-sticky is-sticky' )
     4187                                        .css( {
     4188                                                width: '',
     4189                                                top: ''
     4190                                        } );
     4191                                headerParent.css( 'padding-top', '' );
     4192                        };
     4193
     4194                        // Get header top position and height.
     4195                        getHeaderDimensions = function( headerElement ) {
     4196                                var dimensions = {
     4197                                        height: headerElement.data( 'headerHeight' ),
     4198                                        width: headerElement.data( 'headerWidth' )
     4199                                };
     4200                                if ( ! dimensions.height || ! dimensions.width ) {
     4201                                        dimensions.height = headerElement.height();
     4202                                        dimensions.width = headerElement.width();
     4203                                        headerElement.data( {
     4204                                                headerHeight: dimensions.height,
     4205                                                headerWidth: dimensions.width
     4206                                        } );
     4207                                }
     4208                                return dimensions;
     4209                        };
     4210
     4211                        // Reposition header on throttled `scroll` event.
     4212                        positionStickyHeader = function( header, scrollTop, isScrollingUp ) {
     4213                                var headerElement = header.element,
     4214                                        headerParent = header.parent,
     4215                                        headerHeight = header.height,
     4216                                        headerWidth = header.width,
     4217                                        headerTop = headerElement.data( 'top' ),
     4218                                        maybeSticky, wasSticky, headerSiblingTop;
     4219
     4220                                // If in base position, then reset.
     4221                                if ( 0 === scrollTop ) {
     4222                                        resetStickyHeader( headerElement, headerParent );
     4223                                        return;
     4224                                }
     4225
     4226                                maybeSticky = headerElement.hasClass( 'maybe-sticky' );
     4227                                wasSticky = headerElement.hasClass( 'was-sticky' );
     4228
     4229                                // Scrolled past the header height - element may become sticky now.
     4230                                if ( ! maybeSticky && scrollTop >= headerHeight ) {
     4231                                        headerSiblingTop = headerParent.children( ':nth-child(2)' ).position().top;
     4232                                        headerParent.css( 'padding-top', headerSiblingTop + 'px' );
     4233                                        headerElement
     4234                                                .addClass( 'maybe-sticky' )
     4235                                                .css( 'width', headerWidth + 'px' );
     4236                                }
     4237
     4238                                if ( isScrollingUp ) {
     4239                                        headerElement.css( 'top', '' );
     4240                                        if ( ! wasSticky ) {
     4241                                                headerElement.addClass( 'is-sticky' );
     4242                                        } else if ( wasSticky && headerTop >= scrollTop ) {
     4243                                                headerElement
     4244                                                        .addClass( 'is-sticky' )
     4245                                                        .removeClass( 'was-sticky' );
     4246                                        }
     4247                                } else {
     4248                                        if ( wasSticky ) {
     4249                                                if ( scrollTop >= headerHeight + headerTop ) {
     4250                                                        headerElement.removeClass( 'was-sticky' );
     4251                                                        headerElement.css( 'top', '' );
     4252                                                }
     4253                                        } else if ( headerElement.hasClass( 'is-sticky' ) ) {
     4254                                                headerElement
     4255                                                        .removeClass( 'is-sticky' )
     4256                                                        .addClass( 'was-sticky' )
     4257                                                        .css( 'top', scrollTop + 'px' )
     4258                                                        .data( 'top', scrollTop );
     4259                                        }
     4260                                }
     4261                        };
     4262                }());
     4263
    40974264                // Previewed device bindings.
    40984265                api.previewedDevice = new api.Value();
    40994266