Changeset 42033

Timestamp:

10/28/2017 05:21:42 AM (9 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:

• trunk/src/wp-admin/js/customize-controls.js (modified) (7 diffs)

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

@@ -1888 +1888 @@
                         });
 
+                        function updateSelectedState() {
+                                var el = section.headerContainer.find( '.customize-themes-section-title' );
+                                el.toggleClass( 'selected', section.expanded() );
+                                el.attr( 'aria-expanded', section.expanded() ? 'true' : 'false' );
+                                if ( ! section.expanded() ) {
+                                        el.removeClass( 'details-open' );
+                                }
+                        }
+                        section.expanded.bind( updateSelectedState );
+                        updateSelectedState();
+
                         // Move section controls to the themes area.
                         api.bind( 'ready', function () {
@@ -1921 +1932 @@
                         }
 
-                        if ( expanded ) {
+                        function expand() {
 
                                 // Try to load controls if none are loaded yet.
@@ -1950 +1961 @@
                                                                 }
                                                         }
+                                                        otherSection.collapse( { duration: args.duration } );
                                                 }
-                                                otherSection.collapse( { duration: args.duration } );
                                         }
                                 });
@@ -1957 +1968 @@
                                 section.contentContainer.addClass( 'current-section' );
                                 container.scrollTop();
-                                section.headerContainer.find( '.customize-themes-section-title' ).addClass( 'selected' ).attr( 'aria-expanded', 'true' );
 
                                 container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
@@ -1966 +1976 @@
                                 }
                                 section.updateCount(); // Show this section's count.
+                        }
+
+                        if ( expanded ) {
+                                if ( section.panel() && api.panel.has( section.panel() ) ) {
+                                        api.panel( section.panel() ).expand({
+                                                duration: args.duration,
+                                                completeCallback: expand
+                                        });
+                                } else {
+                                        expand();
+                                }
                         } else {
                                 section.contentContainer.removeClass( 'current-section' );
 
                                 // Always hide, even if they don't exist or are already hidden.
-                                section.headerContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
                                 section.headerContainer.find( '.filter-details' ).slideUp( 180 );
 
@@ -3059 +3079 @@
                  */
                 onChangeExpanded: function( expanded, args ) {
-                        var panel = this, overlay;
+                        var panel = this, overlay, sections, hasExpandedSection = false;
 
                         // Expand/collapse the panel normally.
@@ -3083 +3103 @@
                                 }, 200 );
 
-                                // Automatically open the installed themes section (except on small screens).
+                                // Automatically open the first section (except on small screens), if one isn't already expanded.
                                 if ( 600 < window.innerWidth ) {
-                                        api.section( 'installed_themes' ).expand();
+                                        sections = panel.sections();
+                                        _.each( sections, function( section ) {
+                                                if ( section.expanded() ) {
+                                                        hasExpandedSection = true;
+                                                }
+                                        } );
+                                        if ( ! hasExpandedSection && sections.length > 0 ) {
+                                                sections[0].expand();
+                                        }
                                 }
                         } else {