Changeset 42033

Timestamp:

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