IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Customizer: Replace accordion behavior of sections with a slide-in navigation.

Browse Source 
This allows users to focus on the contents of the active section more easily and separating the navigation from the content/controls in the Customizer.

props valendesigns, celloexpressions.
see #31336.
Built from https://develop.svn.wordpress.org/trunk@32649


git-svn-id: http://core.svn.wordpress.org/trunk@32619 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling
2015-05-29 13:57:26 +00:00
parent ebac76facc
commit fccc19b510
17 changed files with 724 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
wp-admin/js/customize-controls.js
View File

@@ -443,10 +443,12 @@
* @since 4.1.0
*/
attachEvents: function () {
var section = this;
var section = this,
backBtn = section.container.find( '.customize-section-back' ),
sectionTitle = section.container.find( '.accordion-section-title' ).first();
// Expand/Collapse accordion sections on click.
section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
@@ -454,8 +456,14 @@
if ( section.expanded() ) {
section.collapse();
backBtn.attr( 'tabindex', '-1' );
sectionTitle.attr( 'tabindex', '0' );
sectionTitle.focus();
} else {
section.expand();
sectionTitle.attr( 'tabindex', '-1' );
backBtn.attr( 'tabindex', '0' );
backBtn.focus();
}
});
},
@@ -499,18 +507,24 @@
* @param {Object} args
*/
onChangeExpanded: function ( expanded, args ) {
var section = this,
var position, scroll, section = this,
container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
content = section.container.find( '.accordion-section-content' ),
overlay = section.container.closest( '.wp-full-overlay' ),
expand;
if ( expanded ) {
if ( expanded && ! section.container.hasClass( 'open' ) ) {
if ( args.unchanged ) {
expand = args.completeCallback;
} else {
container.scrollTop( 0 );
expand = function () {
content.stop().slideDown( args.duration, args.completeCallback );
section.container.addClass( 'open' );
overlay.addClass( 'section-open' );
position = content.offset().top;
scroll = container.scrollTop();
content.css( 'margin-top', ( 45 - position - scroll ) );
};
}
@@ -531,9 +545,12 @@
expand();
}
} else {
} else if ( section.container.hasClass( 'open' ) ) {
section.container.removeClass( 'open' );
content.slideUp( args.duration, args.completeCallback );
overlay.removeClass( 'section-open' );
content.css( 'margin-top', 'inherit' );
container.scrollTop( 0 );
section.container.find( '.accordion-section-title' ).focus();
}
}
});
@@ -718,7 +735,6 @@
overlay = section.closest( '.wp-full-overlay' ),
container = section.closest( '.wp-full-overlay-sidebar-content' ),
siblings = container.find( '.open' ),
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
customizeBtn = section.find( '.customize-theme' ),
changeBtn = section.find( '.change-theme' ),
content = section.find( '.control-panel-content' );
@@ -748,8 +764,6 @@
args.completeCallback();
}
} );
topPanel.attr( 'tabindex', '-1' );
changeBtn.attr( 'tabindex', '-1' );
customizeBtn.focus();
} else {
siblings.removeClass( 'open' );
@@ -762,7 +776,6 @@
args.completeCallback();
}
} );
topPanel.attr( 'tabindex', '0' );
customizeBtn.attr( 'tabindex', '0' );
changeBtn.focus();
container.scrollTop( 0 );
@@ -1012,9 +1025,21 @@
}
});
// Close panel.
panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
event.preventDefault(); // Keep this AFTER the key filter above
if ( panel.expanded() ) {
panel.collapse();
}
});
meta = panel.container.find( '.panel-meta:first' );
meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
@@ -1024,13 +1049,15 @@
return;
}
var content = meta.find( '.accordion-section-content:first' );
var content = meta.find( '.customize-panel-description:first' );
if ( meta.hasClass( 'open' ) ) {
meta.toggleClass( 'open' );
content.slideUp( panel.defaultExpandedArguments.duration );
$( this ).attr( 'aria-expanded', false );
} else {
content.slideDown( panel.defaultExpandedArguments.duration );
meta.toggleClass( 'open' );
$( this ).attr( 'aria-expanded', true );
}
});
@@ -1089,12 +1116,12 @@
// Note: there is a second argument 'args' passed
var position, scroll,
panel = this,
section = panel.container.closest( '.accordion-section' ),
section = panel.container.closest( '.accordion-section' ), // This is actually the panel.
overlay = section.closest( '.wp-full-overlay' ),
container = section.closest( '.wp-full-overlay-sidebar-content' ),
siblings = container.find( '.open' ),
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
backBtn = overlay.find( '.control-panel-back' ),
topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
backBtn = section.find( '.customize-panel-back' ),
panelTitle = section.find( '.accordion-section-title' ).first(),
content = section.find( '.control-panel-content' );
@@ -2573,7 +2600,7 @@
var parent, topFocus,
body = $( document.body ),
overlay = body.children( '.wp-full-overlay' ),
title = $( '#customize-info .theme-name.site-title' ),
title = $( '#customize-info .panel-title.site-title' ),
closeBtn = $( '.customize-controls-close' ),
saveBtn = $( '#save' );
@@ -2588,14 +2615,14 @@
});
// Expand/Collapse the main customizer customize info.
$( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
$( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
return;
}
event.preventDefault(); // Keep this AFTER the key filter above
var section = $( this ).parent(),
content = section.find( '.accordion-section-content:first' );
var section = $( this ).closest( '.accordion-section' ),
content = section.find( '.customize-panel-description:first' );
if ( section.hasClass( 'cannot-expand' ) ) {
return;
@@ -2604,9 +2631,11 @@
if ( section.hasClass( 'open' ) ) {
section.toggleClass( 'open' );
content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
$( this ).attr( 'aria-expanded', false );
} else {
content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
section.toggleClass( 'open' );
$( this ).attr( 'aria-expanded', true );
}
});