mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-04 09:49:37 +01:00
43b86a246c
Welcome to the bundled themes family! Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/. Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc. See #48110. Built from https://develop.svn.wordpress.org/trunk@46271 git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
86 lines
2.9 KiB
JavaScript
86 lines
2.9 KiB
JavaScript
/* global backgroundColors, previewElements, jQuery, _, wp */
|
|
/**
|
|
* Customizer enhancements for a better user experience.
|
|
*
|
|
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
( function() {
|
|
// Add listener for the "header_footer_background_color" control.
|
|
wp.customize( 'header_footer_background_color', function( value ) {
|
|
value.bind( function( to ) {
|
|
// Add background color to header and footer wrappers.
|
|
jQuery( '#site-header,#site-footer' ).css( 'background-color', to );
|
|
} );
|
|
} );
|
|
|
|
// Add listener for the accent color.
|
|
wp.customize( 'accent_hue', function( value ) {
|
|
value.bind( function() {
|
|
// Generate the styles.
|
|
// Add a small delay to be sure the accessible colors were generated.
|
|
setTimeout( function() {
|
|
Object.keys( backgroundColors ).forEach( function( context ) {
|
|
twentyTwentyGenerateColorA11yPreviewStyles( context );
|
|
} );
|
|
}, 50 );
|
|
} );
|
|
} );
|
|
|
|
// Add listeners for background-color settings.
|
|
Object.keys( backgroundColors ).forEach( function( context ) {
|
|
wp.customize( backgroundColors[ context ].setting, function( value ) {
|
|
value.bind( function() {
|
|
// Generate the styles.
|
|
// Add a small delay to be sure the accessible colors were generated.
|
|
setTimeout( function() {
|
|
twentyTwentyGenerateColorA11yPreviewStyles( context );
|
|
}, 50 );
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
/**
|
|
* Add styles to elements in the preview pane.
|
|
*
|
|
* @since 1.0.0
|
|
*
|
|
* @param {string} context The area for which we want to generate styles. Can be for example "content", "header" etc.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
function twentyTwentyGenerateColorA11yPreviewStyles( context ) {
|
|
// Get the accessible colors option.
|
|
var a11yColors = window.parent.wp.customize( 'accent_accessible_colors' ).get(),
|
|
stylesheedID = 'twentytwenty-customizer-styles-' + context,
|
|
stylesheet = jQuery( '#' + stylesheedID ),
|
|
styles = '';
|
|
// If the stylesheet doesn't exist, create it and append it to <head>.
|
|
if ( ! stylesheet.length ) {
|
|
jQuery( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
|
|
stylesheet = jQuery( '#' + stylesheedID );
|
|
}
|
|
if ( ! _.isUndefined( a11yColors[ context ] ) ) {
|
|
// Check if we have elements defined.
|
|
if ( previewElements[ context ] ) {
|
|
_.each( previewElements[ context ], function( items, setting ) {
|
|
_.each( items, function( elements, property ) {
|
|
if ( ! _.isUndefined( a11yColors[ context ][ setting ] ) ) {
|
|
styles += elements.join( ',' ) + '{' + property + ':' + a11yColors[ context ][ setting ] + ';}';
|
|
}
|
|
} );
|
|
} );
|
|
}
|
|
}
|
|
// Add styles.
|
|
stylesheet.html( styles );
|
|
}
|
|
// Generate styles on load. Handles page-changes on the preview pane.
|
|
jQuery( document ).ready( function() {
|
|
twentyTwentyGenerateColorA11yPreviewStyles( 'content' );
|
|
twentyTwentyGenerateColorA11yPreviewStyles( 'header-footer' );
|
|
} );
|
|
}() );
|