From db0fedd69fb739863feee4030fd9c4614a13fe3e Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Thu, 1 Sep 2016 05:54:32 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38492 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-controls.js | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 1f2f5db1cf..320f892781 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -125,6 +125,8 @@
 		} else {
 			params.completeCallback = focus;
 		}
+
+		api.state( 'paneVisible' ).set( true );
 		if ( construct.expand ) {
 			construct.expand( params );
 		} else {
@@ -441,6 +443,7 @@
 				return false;
 			}
 
+			api.state( 'paneVisible' ).set( true );
 			params.completeCallback = function() {
 				if ( previousCompleteCallback ) {
 					previousCompleteCallback.apply( instance, arguments );
@@ -3912,7 +3915,8 @@
 			var state = new api.Values(),
 				saved = state.create( 'saved' ),
 				activated = state.create( 'activated' ),
-				processing = state.create( 'processing' );
+				processing = state.create( 'processing' ),
+				paneVisible = state.create( 'paneVisible' );
 
 			state.bind( 'change', function() {
 				if ( ! activated() ) {
@@ -3933,6 +3937,7 @@
 			saved( true );
 			activated( api.settings.theme.active );
 			processing( 0 );
+			paneVisible( true );
 
 			api.bind( 'change', function() {
 				state('saved').set( false );
@@ -3974,13 +3979,18 @@
 		});
 
 		$( '.collapse-sidebar' ).on( 'click', function() {
-			if ( 'true' === $( this ).attr( 'aria-expanded' ) ) {
-				$( this ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
-			} else {
-				$( this ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
-			}
+			api.state( 'paneVisible' ).set( ! api.state( 'paneVisible' ).get() );
+		});
 
-			overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+		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 {
+				$( '.collapse-sidebar' ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
+			}
 		});
 
 		// Keyboard shortcuts - esc to exit section/panel.