WordPress.org

Make WordPress Core

Ticket #34343: 34343_1.diff

File 34343_1.diff, 7.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 a7648fd..668db09 100644
    a b body { 
    5454        margin-bottom: 15px;
    5555}
    5656
     57#customize-controls .customize-info.maybe-sticky,
     58#customize-controls .customize-section-title.maybe-sticky {
     59        box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
     60        -webkit-transform: translateY(-100%);
     61        -ms-transform: translateY(-100%);
     62        transform: translateY(-100%);
     63        -webkit-transition: -webkit-transform 0.24s ease-out;
     64        transition: -webkit-transform 0.24s ease-out;
     65        transition: transform 0.24s ease-out;
     66        transition: transform 0.24s ease-out, -webkit-transform 0.24s ease-out;
     67
     68}
     69
     70#customize-controls .customize-info.maybe-sticky.is-sticky,
     71#customize-controls .customize-section-title.maybe-sticky.is-sticky {
     72        position: relative;
     73        z-index: 9;
     74        -webkit-transform: none;
     75        -ms-transform: none;
     76        transform: none;
     77}
     78
    5779#customize-controls .customize-info .accordion-section-title {
    5880        background: #fff;
    5981        color: #555;
  • 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 66d2b08..5cd59da 100644
    a b  
    6161        text-align: right;
    6262}
    6363
     64.wp-customizer .menu-item-handle:hover {
     65        z-index: 8;
     66}
     67
    6468.customize-control-nav_menu_item.has-notifications .menu-item-handle {
    6569        border-left: 4px solid #00a0d2;
    6670}
     
    6872.wp-customizer .menu-item-settings {
    6973        max-width: 100%;
    7074        overflow: hidden;
     75        z-index: 8;
    7176        padding: 10px;
    7277        background: #eee;
    7378        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 7078cfd..aee1c4e 100644
    a b  
    582582                                                        parentContainer = panel.container.find( 'ul:first' );
    583583                                                        if ( ! section.container.parent().is( parentContainer ) ) {
    584584                                                                parentContainer.append( section.container );
     585                                                                section.header = section.container.find( '.customize-section-title:first' );
    585586                                                        }
    586587                                                        section.deferred.embedded.resolve();
    587588                                                });
     
    591592                                        parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
    592593                                        if ( ! section.container.parent().is( parentContainer ) ) {
    593594                                                parentContainer.append( section.container );
     595                                                section.header = section.container.find( '.customize-section-title:first' );
    594596                                        }
    595597                                        section.deferred.embedded.resolve();
    596598                                }
     
    712714                                                $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
    713715
    714716                                                setTimeout( _.bind( section._recalculateTopMargin, section ), 0 );
     717                                                api.trigger( 'expandedSection', section );
    715718                                        };
    716719                                }
    717720
     
    747750                                        args.completeCallback();
    748751                                }
    749752                                $( window ).off( 'resize.customizer-section' );
     753                                api.trigger( 'collapsedSection', section );
    750754                        } else {
    751755                                if ( args.completeCallback ) {
    752756                                        args.completeCallback();
     
    12421246                        if ( ! panel.container.parent().is( parentContainer ) ) {
    12431247                                parentContainer.append( panel.container );
    12441248                                panel.renderContent();
     1249                                panel.header = panel.container.find( '.panel-meta:first' );
    12451250                        }
    12461251
    12471252                        api.bind( 'pane-contents-reflowed', _.debounce( function() {
     
    13051310                                        $( this ).attr( 'aria-expanded', true );
    13061311                                }
    13071312                        });
    1308 
    13091313                },
    13101314
    13111315                /**
     
    14011405                                backBtn.attr( 'tabindex', '0' );
    14021406                                backBtn.focus();
    14031407                                panel._recalculateTopMargin();
     1408                                api.trigger( 'expandedPanel', panel );
    14041409                        } else {
    14051410                                siblings.removeClass( 'open' );
    14061411                                accordionSection.removeClass( 'current-panel' );
     
    14151420                                backBtn.attr( 'tabindex', '-1' );
    14161421                                panelTitle.focus();
    14171422                                container.scrollTop( 0 );
     1423                                api.trigger( 'collapsedPanel', panel );
    14181424                        }
    14191425                },
    14201426
     
    40324038                        }
    40334039                });
    40344040
     4041
    40354042                $( '.customize-controls-preview-toggle' ).on( 'click', function() {
    40364043                        overlay.toggleClass( 'preview-only' );
    40374044                });
    40384045
     4046                // Sticky header functionality.
     4047                (function() {
     4048                        var container = $( '.wp-full-overlay-sidebar-content' ),
     4049                                lastScrollTop = 0,
     4050                                expandedPanel = false,
     4051                                expandedSection = false,
     4052                                positionStickyHeader, resetStickyHeader, _scroll;
     4053
     4054                        api.bind( 'expandedPanel', function( panel ) {
     4055                                if ( ! expandedPanel ) {
     4056                                        container.on( 'scroll', _scroll );
     4057                                }
     4058                                expandedPanel = panel;
     4059                        } );
     4060
     4061                        api.bind( 'collapsedPanel', function( panel ) {
     4062                                container.off( 'scroll', _scroll );
     4063                                if ( panel.id === expandedPanel.id ) {
     4064                                        expandedPanel = false;
     4065                                }
     4066                        } );
     4067
     4068                        api.bind( 'expandedSection', function( section ) {
     4069                                section.container.find( '.accordion-section-content' ).on( 'scroll', _scroll );
     4070                                expandedSection = section;
     4071
     4072                                if ( expandedPanel ) {
     4073                                        resetStickyHeader( expandedPanel.header );
     4074                                }
     4075                        } );
     4076
     4077                        api.bind( 'collapsedSection', function( section ) {
     4078                                section.container.find( '.accordion-section-content' ).off( 'scroll', _scroll );
     4079                                if ( section.id === expandedSection.id ) {
     4080                                        expandedSection = false;
     4081                                }
     4082                        } );
     4083
     4084                        /**
     4085                         * Throttled scroll event handler.
     4086                         */
     4087                        _scroll = _.throttle( function() {
     4088                                var scrollTop = $( this ).scrollTop(),
     4089                                        isScrollingUp;
     4090
     4091                                if ( lastScrollTop !== scrollTop ) {
     4092                                        isScrollingUp = ( scrollTop < lastScrollTop );
     4093                                        lastScrollTop = scrollTop;
     4094                                        positionStickyHeader( scrollTop, isScrollingUp );
     4095                                }
     4096                        }, 8 );
     4097
     4098                        /**
     4099                         * Reposition header on scroll event.
     4100                         *
     4101                         * @param {Number} scrollTop
     4102                         * @param {Boolean} isScrollingUp
     4103                         * @private
     4104                         */
     4105                        positionStickyHeader = function( scrollTop, isScrollingUp ) {
     4106                                var header,
     4107                                        updateTopPosition = false,
     4108                                        isSticky, headerTopPosition, headerHeight;
     4109
     4110                                if ( expandedSection ) {
     4111                                        header = expandedSection.header;
     4112                                } else if ( expandedPanel ) {
     4113                                        header = expandedPanel.header;
     4114                                } else {
     4115                                        return;
     4116                                }
     4117
     4118                                // In initial position - reset header and exit.
     4119                                if ( 0 === scrollTop ) {
     4120                                        resetStickyHeader( header );
     4121                                        return;
     4122                                }
     4123
     4124                                // Get header top position and height.
     4125                                headerTopPosition = parseInt( header.css( 'top' ), 0 ) || 0;
     4126                                headerHeight = header.data( 'header-height' );
     4127                                if ( ! headerHeight ) {
     4128                                        headerHeight = header.height();
     4129                                        header.data( 'header-height', headerHeight );
     4130                                }
     4131
     4132                                // Make header potentially sticky when it gets out of the view.
     4133                                if ( scrollTop >= headerHeight ) {
     4134                                        header.addClass( 'maybe-sticky' );
     4135                                }
     4136
     4137                                isSticky = header.hasClass( 'is-sticky' );
     4138                                if ( isScrollingUp ) {
     4139                                        if ( ! isSticky || headerTopPosition >= scrollTop ) {
     4140                                                isSticky = true;
     4141                                                updateTopPosition = true;
     4142                                        }
     4143                                } else {
     4144                                        if ( isSticky && headerTopPosition + headerHeight <= scrollTop ) {
     4145                                                isSticky = false;
     4146                                                updateTopPosition = true;
     4147                                        }
     4148                                }
     4149
     4150                                header.toggleClass( 'is-sticky', isSticky );
     4151                                if ( updateTopPosition ) {
     4152                                        header.css( 'top', scrollTop + 'px' );
     4153                                }
     4154                        };
     4155
     4156                        /**
     4157                         * Reset header's sticky-related classes and position.
     4158                         *
     4159                         * @param {Object} header
     4160                         */
     4161                        resetStickyHeader = function( header ) {
     4162                                header.removeClass( 'is-sticky maybe-sticky' );
     4163                                header.css( 'top', '' );
     4164                        };
     4165                }());
     4166
    40394167                // Previewed device bindings.
    40404168                api.previewedDevice = new api.Value();
    40414169