WordPress/wp-content/themes/twentytwenty/assets/js/customize-controls.js
hellofromTonya d30fe43245 Docs: Replace "sanity" with "confidence" for inclusive language.
The phrase "sanity check" unnecessarily references mental health. It's an old phrase used to denote an extra step in verifying code works as expected.

“The WordPress open source community cares about diversity. We strive to maintain a welcoming environment where everyone can feel included.”

While "sanity check" is a well-known phrase with a specific meaning, "confidence check" is a direct replacement that is more clear of its intent while being more inclusive.

Words matter.

Follow-up to [49216], [46271], [40583], [38832], [38637], [37409], [33359], [32162], [30346], [30345], [30238], [30055], [29902], [28763], [26141], [25002], [22227], [13428], [12148], [11025], [8927].

Props dartiss, hellofromTonya.
Fixes #60187.
Built from https://develop.svn.wordpress.org/trunk@57239


git-svn-id: http://core.svn.wordpress.org/trunk@56745 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-01-03 21:59:19 +00:00

115 lines
3.7 KiB
JavaScript

/* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */
/**
* Customizer enhancements for a better user experience.
*
* Contains extra logic for our Customizer controls & settings.
*
* @since Twenty Twenty 1.0
*/
( function() {
// Wait until the customizer has finished loading.
wp.customize.bind( 'ready', function() {
// Add a listener for accent-color changes.
wp.customize( 'accent_hue', function( value ) {
value.bind( function( to ) {
// Update the value for our accessible colors for all areas.
Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
var backgroundColorValue;
if ( twentyTwentyBgColors[ context ].color ) {
backgroundColorValue = twentyTwentyBgColors[ context ].color;
} else {
backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get();
}
twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to );
} );
} );
} );
// Add a listener for background-color changes.
Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
value.bind( function( to ) {
// Update the value for our accessible colors for this area.
twentyTwentySetAccessibleColorsValue( context, to, wp.customize( 'accent_hue' ).get(), to );
} );
} );
} );
// Show or hide retina_logo setting on the first load.
twentyTwentySetRetineLogoVisibility( !! wp.customize( 'custom_logo' )() );
// Add a listener for custom_logo changes.
wp.customize( 'custom_logo', function( value ) {
value.bind( function( to ) {
// Show or hide retina_logo setting on changing custom_logo.
twentyTwentySetRetineLogoVisibility( !! to );
} );
} );
} );
/**
* Updates the value of the "accent_accessible_colors" setting.
*
* @since Twenty Twenty 1.0
*
* @param {string} context The area for which we want to get colors. Can be for example "content", "header" etc.
* @param {string} backgroundColor The background color (HEX value).
* @param {number} accentHue Numeric representation of the selected hue (0 - 359).
*
* @return {void}
*/
function twentyTwentySetAccessibleColorsValue( context, backgroundColor, accentHue ) {
var value, colors;
// Get the current value for our accessible colors, and make sure it's an object.
value = wp.customize( 'accent_accessible_colors' ).get();
value = ( _.isObject( value ) && ! _.isArray( value ) ) ? value : {};
// Get accessible colors for the defined background-color and hue.
colors = twentyTwentyColor( backgroundColor, accentHue );
// Confidence check.
if ( colors.getAccentColor() && 'function' === typeof colors.getAccentColor().toCSS ) {
// Update the value for this context.
value[ context ] = {
text: colors.getTextColor(),
accent: colors.getAccentColor().toCSS(),
background: backgroundColor
};
// Get borders color.
value[ context ].borders = colors.bgColorObj
.clone()
.getReadableContrastingColor( colors.bgColorObj, 1.36 )
.toCSS();
// Get secondary color.
value[ context ].secondary = colors.bgColorObj
.clone()
.getReadableContrastingColor( colors.bgColorObj )
.s( colors.bgColorObj.s() / 2 )
.toCSS();
}
// Change the value.
wp.customize( 'accent_accessible_colors' ).set( value );
// Small hack to save the option.
wp.customize( 'accent_accessible_colors' )._dirty = true;
}
/**
* Shows or hides the "retina_logo" setting based on the given value.
*
* @since Twenty Twenty 1.3
*
* @param {boolean} visible The visible value.
*
* @return {void}
*/
function twentyTwentySetRetineLogoVisibility( visible ) {
wp.customize.control( 'retina_logo' ).container.toggle( visible );
}
}( jQuery ) );