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
This commit is contained in:
Weston Ruter 2016-09-01 05:54:32 +00:00
parent 0b67b63857
commit db0fedd69f
1 changed files with 17 additions and 7 deletions

View File

@ -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.