Changeset 38492

Timestamp:

09/01/2016 05:54:32 AM (8 years ago)

Author:

westonruter

Message:

Customize: Introduce paneVisible state and ensure pane is visible when a construct is expanded (or focused).

Fixes issue whereby a user would see nothing happen if the pane is collapsed while they shift-click to edit an element in the preview.

Props curdin, celloexpressions, westonruter.
See #27403.
Fixes #36678.

File:

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

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

@@ -126 +126 @@
             params.completeCallback = focus;
         }
+
+        api.state( 'paneVisible' ).set( true );
         if ( construct.expand ) {
             construct.expand( params );
@@ -442 +444 @@
             }
 
+            api.state( 'paneVisible' ).set( true );
             params.completeCallback = function() {
                 if ( previousCompleteCallback ) {
@@ -3913 +3916 @@
                 saved = state.create( 'saved' ),
                 activated = state.create( 'activated' ),
-                processing = state.create( 'processing' );
+                processing = state.create( 'processing' ),
+                paneVisible = state.create( 'paneVisible' );
 
             state.bind( 'change', function() {
@@ -3934 +3938 @@
             activated( api.settings.theme.active );
             processing( 0 );
+            paneVisible( true );
 
             api.bind( 'change', function() {
@@ -3975 +3980 @@
 
         $( '.collapse-sidebar' ).on( 'click', function() {
-            if ( 'true' === $( this ).attr( 'aria-expanded' ) ) {
-                $( this ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
+            api.state( 'paneVisible' ).set( ! api.state( 'paneVisible' ).get() );
+        });
+
+        api.state( 'paneVisible' ).bind( function( paneVisible ) {
+            overlay.toggleClass( 'expanded', paneVisible );
+            overlay.toggleClass( 'collapsed', ! paneVisible );
+
+            if ( ! paneVisible ) {
+                $( '.collapse-sidebar' ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
             } else {
-                $( this ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
-            }
-
-            overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+                $( '.collapse-sidebar' ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
+            }
         });