/* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */

[0] Fix | Delete

/**

[1] Fix | Delete

* Customizer enhancements for a better user experience.

[2] Fix | Delete

*

[3] Fix | Delete

* Contains extra logic for our Customizer controls & settings.

[4] Fix | Delete

*

[5] Fix | Delete

* @since Twenty Twenty 1.0

[6] Fix | Delete

*/

[7] Fix | Delete

[8] Fix | Delete

( function() {

[9] Fix | Delete

// Wait until the customizer has finished loading.

[10] Fix | Delete

wp.customize.bind( 'ready', function() {

[11] Fix | Delete

// Add a listener for accent-color changes.

[12] Fix | Delete

wp.customize( 'accent_hue', function( value ) {

[13] Fix | Delete

value.bind( function( to ) {

[14] Fix | Delete

// Update the value for our accessible colors for all areas.

[15] Fix | Delete

Object.keys( twentyTwentyBgColors ).forEach( function( context ) {

[16] Fix | Delete

var backgroundColorValue;

[17] Fix | Delete

if ( twentyTwentyBgColors[ context ].color ) {

[18] Fix | Delete

backgroundColorValue = twentyTwentyBgColors[ context ].color;

[19] Fix | Delete

} else {

[20] Fix | Delete

backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get();

[21] Fix | Delete

}

[22] Fix | Delete

twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to );

[23] Fix | Delete

} );

[24] Fix | Delete

} );

[25] Fix | Delete

} );

[26] Fix | Delete

[27] Fix | Delete

// Add a listener for background-color changes.

[28] Fix | Delete

Object.keys( twentyTwentyBgColors ).forEach( function( context ) {

[29] Fix | Delete

wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {

[30] Fix | Delete

value.bind( function( to ) {

[31] Fix | Delete

// Update the value for our accessible colors for this area.

[32] Fix | Delete

twentyTwentySetAccessibleColorsValue( context, to, wp.customize( 'accent_hue' ).get(), to );

[33] Fix | Delete

} );

[34] Fix | Delete

} );

[35] Fix | Delete

} );

[36] Fix | Delete

[37] Fix | Delete

// Show or hide retina_logo setting on the first load.

[38] Fix | Delete

twentyTwentySetRetineLogoVisibility( !! wp.customize( 'custom_logo' )() );

[39] Fix | Delete

[40] Fix | Delete

// Add a listener for custom_logo changes.

[41] Fix | Delete

wp.customize( 'custom_logo', function( value ) {

[42] Fix | Delete

value.bind( function( to ) {

[43] Fix | Delete

// Show or hide retina_logo setting on changing custom_logo.

[44] Fix | Delete

twentyTwentySetRetineLogoVisibility( !! to );

[45] Fix | Delete

} );

[46] Fix | Delete

} );

[47] Fix | Delete

} );

[48] Fix | Delete

[49] Fix | Delete

/**

[50] Fix | Delete

* Updates the value of the "accent_accessible_colors" setting.

[51] Fix | Delete

*

[52] Fix | Delete

* @since Twenty Twenty 1.0

[53] Fix | Delete

*

[54] Fix | Delete

* @param {string} context The area for which we want to get colors. Can be for example "content", "header" etc.

[55] Fix | Delete

* @param {string} backgroundColor The background color (HEX value).

[56] Fix | Delete

* @param {number} accentHue Numeric representation of the selected hue (0 - 359).

[57] Fix | Delete

*

[58] Fix | Delete

* @return {void}

[59] Fix | Delete

*/

[60] Fix | Delete

function twentyTwentySetAccessibleColorsValue( context, backgroundColor, accentHue ) {

[61] Fix | Delete

var value, colors;

[62] Fix | Delete

[63] Fix | Delete

// Get the current value for our accessible colors, and make sure it's an object.

[64] Fix | Delete

value = wp.customize( 'accent_accessible_colors' ).get();

[65] Fix | Delete

value = ( _.isObject( value ) && ! _.isArray( value ) ) ? value : {};

[66] Fix | Delete

[67] Fix | Delete

// Get accessible colors for the defined background-color and hue.

[68] Fix | Delete

colors = twentyTwentyColor( backgroundColor, accentHue );

[69] Fix | Delete

[70] Fix | Delete

// Sanity check.

[71] Fix | Delete

if ( colors.getAccentColor() && 'function' === typeof colors.getAccentColor().toCSS ) {

[72] Fix | Delete

// Update the value for this context.

[73] Fix | Delete

value[ context ] = {

[74] Fix | Delete

text: colors.getTextColor(),

[75] Fix | Delete

accent: colors.getAccentColor().toCSS(),

[76] Fix | Delete

background: backgroundColor

[77] Fix | Delete

};

[78] Fix | Delete

[79] Fix | Delete

// Get borders color.

[80] Fix | Delete

value[ context ].borders = colors.bgColorObj

[81] Fix | Delete

.clone()

[82] Fix | Delete

.getReadableContrastingColor( colors.bgColorObj, 1.36 )

[83] Fix | Delete

.toCSS();

[84] Fix | Delete

[85] Fix | Delete

// Get secondary color.

[86] Fix | Delete

value[ context ].secondary = colors.bgColorObj

[87] Fix | Delete

.clone()

[88] Fix | Delete

.getReadableContrastingColor( colors.bgColorObj )

[89] Fix | Delete

.s( colors.bgColorObj.s() / 2 )

[90] Fix | Delete

.toCSS();

[91] Fix | Delete

}

[92] Fix | Delete

[93] Fix | Delete

// Change the value.

[94] Fix | Delete

wp.customize( 'accent_accessible_colors' ).set( value );

[95] Fix | Delete

[96] Fix | Delete

// Small hack to save the option.

[97] Fix | Delete

wp.customize( 'accent_accessible_colors' )._dirty = true;

[98] Fix | Delete

}

[99] Fix | Delete

[100] Fix | Delete

/**

[101] Fix | Delete

* Shows or hides the "retina_logo" setting based on the given value.

[102] Fix | Delete

*

[103] Fix | Delete

* @since Twenty Twenty 1.3

[104] Fix | Delete

*

[105] Fix | Delete

* @param {boolean} visible The visible value.

[106] Fix | Delete

*

[107] Fix | Delete

* @return {void}

[108] Fix | Delete

*/

[109] Fix | Delete

function twentyTwentySetRetineLogoVisibility( visible ) {

[110] Fix | Delete

wp.customize.control( 'retina_logo' ).container.toggle( visible );

[111] Fix | Delete

}

[112] Fix | Delete

}( jQuery ) );

[113] Fix | Delete

[114] Fix | Delete