Make WordPress Core

Changeset 42033


Ignore:
Timestamp:
10/28/2017 05:21:42 AM (6 years ago)
Author:
westonruter
Message:

Customize: Fix deep-linking to sections for themes via autofocus[section] query parameter.

  • Expand containing panel when expanding themes section.
  • Consolidate UI changes related to a section's expanded state change.
  • Prevent collapsing current section when expanding.
  • Auto-expand first themes section when expanding panel if one is not expanded already.

See #37661, #42354.
Fixes #42360.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r42031 r42033  
    18881888            });
    18891889
     1890            function updateSelectedState() {
     1891                var el = section.headerContainer.find( '.customize-themes-section-title' );
     1892                el.toggleClass( 'selected', section.expanded() );
     1893                el.attr( 'aria-expanded', section.expanded() ? 'true' : 'false' );
     1894                if ( ! section.expanded() ) {
     1895                    el.removeClass( 'details-open' );
     1896                }
     1897            }
     1898            section.expanded.bind( updateSelectedState );
     1899            updateSelectedState();
     1900
    18901901            // Move section controls to the themes area.
    18911902            api.bind( 'ready', function () {
     
    19211932            }
    19221933
    1923             if ( expanded ) {
     1934            function expand() {
    19241935
    19251936                // Try to load controls if none are loaded yet.
     
    19501961                                }
    19511962                            }
     1963                            otherSection.collapse( { duration: args.duration } );
    19521964                        }
    1953                         otherSection.collapse( { duration: args.duration } );
    19541965                    }
    19551966                });
     
    19571968                section.contentContainer.addClass( 'current-section' );
    19581969                container.scrollTop();
    1959                 section.headerContainer.find( '.customize-themes-section-title' ).addClass( 'selected' ).attr( 'aria-expanded', 'true' );
    19601970
    19611971                container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
     
    19661976                }
    19671977                section.updateCount(); // Show this section's count.
     1978            }
     1979
     1980            if ( expanded ) {
     1981                if ( section.panel() && api.panel.has( section.panel() ) ) {
     1982                    api.panel( section.panel() ).expand({
     1983                        duration: args.duration,
     1984                        completeCallback: expand
     1985                    });
     1986                } else {
     1987                    expand();
     1988                }
    19681989            } else {
    19691990                section.contentContainer.removeClass( 'current-section' );
    19701991
    19711992                // Always hide, even if they don't exist or are already hidden.
    1972                 section.headerContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
    19731993                section.headerContainer.find( '.filter-details' ).slideUp( 180 );
    19741994
     
    30593079         */
    30603080        onChangeExpanded: function( expanded, args ) {
    3061             var panel = this, overlay;
     3081            var panel = this, overlay, sections, hasExpandedSection = false;
    30623082
    30633083            // Expand/collapse the panel normally.
     
    30833103                }, 200 );
    30843104
    3085                 // Automatically open the installed themes section (except on small screens).
     3105                // Automatically open the first section (except on small screens), if one isn't already expanded.
    30863106                if ( 600 < window.innerWidth ) {
    3087                     api.section( 'installed_themes' ).expand();
     3107                    sections = panel.sections();
     3108                    _.each( sections, function( section ) {
     3109                        if ( section.expanded() ) {
     3110                            hasExpandedSection = true;
     3111                        }
     3112                    } );
     3113                    if ( ! hasExpandedSection && sections.length > 0 ) {
     3114                        sections[0].expand();
     3115                    }
    30883116                }
    30893117            } else {
Note: See TracChangeset for help on using the changeset viewer.