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

[0] Fix | Delete

/**

[1] Fix | Delete

* Customizer enhancements for a better user experience.

[2] Fix | Delete

*

[3] Fix | Delete

* Contains handlers to make Theme Customizer preview reload changes asynchronously.

[4] Fix | Delete

*

[5] Fix | Delete

* @since Twenty Twenty 1.0

[6] Fix | Delete

*/

[7] Fix | Delete

[8] Fix | Delete

( function( $, api, _ ) {

[9] Fix | Delete

/**

[10] Fix | Delete

* Return a value for our partial refresh.

[11] Fix | Delete

*

[12] Fix | Delete

* @param {Object} partial Current partial.

[13] Fix | Delete

*

[14] Fix | Delete

* @return {jQuery.Promise} Resolved promise.

[15] Fix | Delete

*/

[16] Fix | Delete

function returnDeferred( partial ) {

[17] Fix | Delete

var deferred = new $.Deferred();

[18] Fix | Delete

[19] Fix | Delete

deferred.resolveWith( partial, _.map( partial.placements(), function() {

[20] Fix | Delete

return '';

[21] Fix | Delete

} ) );

[22] Fix | Delete

[23] Fix | Delete

return deferred.promise();

[24] Fix | Delete

}

[25] Fix | Delete

[26] Fix | Delete

// Selective refresh for "Fixed Background Image".

[27] Fix | Delete

api.selectiveRefresh.partialConstructor.cover_fixed = api.selectiveRefresh.Partial.extend( {

[28] Fix | Delete

[29] Fix | Delete

/**

[30] Fix | Delete

* Override the refresh method.

[31] Fix | Delete

*

[32] Fix | Delete

* @return {jQuery.Promise} Resolved promise.

[33] Fix | Delete

*/

[34] Fix | Delete

refresh: function() {

[35] Fix | Delete

var partial, cover, params;

[36] Fix | Delete

[37] Fix | Delete

partial = this;

[38] Fix | Delete

params = partial.params;

[39] Fix | Delete

cover = $( params.selector );

[40] Fix | Delete

[41] Fix | Delete

if ( cover.length && cover.hasClass( 'bg-image' ) ) {

[42] Fix | Delete

cover.toggleClass( 'bg-attachment-fixed' );

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

return returnDeferred( partial );

[46] Fix | Delete

}

[47] Fix | Delete

[48] Fix | Delete

} );

[49] Fix | Delete

[50] Fix | Delete

// Selective refresh for "Image Overlay Opacity".

[51] Fix | Delete

api.selectiveRefresh.partialConstructor.cover_opacity = api.selectiveRefresh.Partial.extend( {

[52] Fix | Delete

[53] Fix | Delete

/**

[54] Fix | Delete

* Input attributes.

[55] Fix | Delete

*

[56] Fix | Delete

* @type {Object}

[57] Fix | Delete

*/

[58] Fix | Delete

attrs: {},

[59] Fix | Delete

[60] Fix | Delete

/**

[61] Fix | Delete

* Override the refresh method.

[62] Fix | Delete

*

[63] Fix | Delete

* @return {jQuery.Promise} Resolved promise.

[64] Fix | Delete

*/

[65] Fix | Delete

refresh: function() {

[66] Fix | Delete

var partial, ranges, attrs, setting, params, cover, className, classNames;

[67] Fix | Delete

[68] Fix | Delete

partial = this;

[69] Fix | Delete

attrs = partial.attrs;

[70] Fix | Delete

ranges = _.range( attrs.min, attrs.max + attrs.step, attrs.step );

[71] Fix | Delete

params = partial.params;

[72] Fix | Delete

setting = api( params.primarySetting );

[73] Fix | Delete

cover = $( params.selector );

[74] Fix | Delete

[75] Fix | Delete

if ( cover.length ) {

[76] Fix | Delete

classNames = _.map( ranges, function( val ) {

[77] Fix | Delete

return 'opacity-' + val;

[78] Fix | Delete

} );

[79] Fix | Delete

[80] Fix | Delete

className = classNames[ ranges.indexOf( parseInt( setting.get(), 10 ) ) ];

[81] Fix | Delete

[82] Fix | Delete

cover.removeClass( classNames.join( ' ' ) );

[83] Fix | Delete

cover.addClass( className );

[84] Fix | Delete

}

[85] Fix | Delete

[86] Fix | Delete

return returnDeferred( partial );

[87] Fix | Delete

}

[88] Fix | Delete

[89] Fix | Delete

} );

[90] Fix | Delete

[91] Fix | Delete

// Add listener for the "header_footer_background_color" control.

[92] Fix | Delete

api( 'header_footer_background_color', function( value ) {

[93] Fix | Delete

value.bind( function( to ) {

[94] Fix | Delete

// Add background color to header and footer wrappers.

[95] Fix | Delete

$( 'body:not(.overlay-header)#site-header, #site-footer' ).css( 'background-color', to );

[96] Fix | Delete

[97] Fix | Delete

// Change body classes if this is the same background-color as the content background.

[98] Fix | Delete

if ( to.toLowerCase() === api( 'background_color' ).get().toLowerCase() ) {

[99] Fix | Delete

$( 'body' ).addClass( 'reduced-spacing' );

[100] Fix | Delete

} else {

[101] Fix | Delete

$( 'body' ).removeClass( 'reduced-spacing' );

[102] Fix | Delete

}

[103] Fix | Delete

} );

[104] Fix | Delete

} );

[105] Fix | Delete

[106] Fix | Delete

// Add listener for the "background_color" control.

[107] Fix | Delete

api( 'background_color', function( value ) {

[108] Fix | Delete

value.bind( function( to ) {

[109] Fix | Delete

// Change body classes if this is the same background-color as the header/footer background.

[110] Fix | Delete

if ( to.toLowerCase() === api( 'header_footer_background_color' ).get().toLowerCase() ) {

[111] Fix | Delete

$( 'body' ).addClass( 'reduced-spacing' );

[112] Fix | Delete

} else {

[113] Fix | Delete

$( 'body' ).removeClass( 'reduced-spacing' );

[114] Fix | Delete

}

[115] Fix | Delete

} );

[116] Fix | Delete

} );

[117] Fix | Delete

[118] Fix | Delete

// Add listener for the accent color.

[119] Fix | Delete

api( 'accent_hue', function( value ) {

[120] Fix | Delete

value.bind( function() {

[121] Fix | Delete

// Generate the styles.

[122] Fix | Delete

// Add a small delay to be sure the accessible colors were generated.

[123] Fix | Delete

setTimeout( function() {

[124] Fix | Delete

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

[125] Fix | Delete

twentyTwentyGenerateColorA11yPreviewStyles( context );

[126] Fix | Delete

} );

[127] Fix | Delete

}, 50 );

[128] Fix | Delete

} );

[129] Fix | Delete

} );

[130] Fix | Delete

[131] Fix | Delete

// Add listeners for background-color settings.

[132] Fix | Delete

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

[133] Fix | Delete

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

[134] Fix | Delete

value.bind( function() {

[135] Fix | Delete

// Generate the styles.

[136] Fix | Delete

// Add a small delay to be sure the accessible colors were generated.

[137] Fix | Delete

setTimeout( function() {

[138] Fix | Delete

twentyTwentyGenerateColorA11yPreviewStyles( context );

[139] Fix | Delete

}, 50 );

[140] Fix | Delete

} );

[141] Fix | Delete

} );

[142] Fix | Delete

} );

[143] Fix | Delete

[144] Fix | Delete

/**

[145] Fix | Delete

* Add styles to elements in the preview pane.

[146] Fix | Delete

*

[147] Fix | Delete

* @since Twenty Twenty 1.0

[148] Fix | Delete

*

[149] Fix | Delete

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

[150] Fix | Delete

*

[151] Fix | Delete

* @return {void}

[152] Fix | Delete

*/

[153] Fix | Delete

function twentyTwentyGenerateColorA11yPreviewStyles( context ) {

[154] Fix | Delete

// Get the accessible colors option.

[155] Fix | Delete

var a11yColors = window.parent.wp.customize( 'accent_accessible_colors' ).get(),

[156] Fix | Delete

stylesheedID = 'twentytwenty-customizer-styles-' + context,

[157] Fix | Delete

stylesheet = $( '#' + stylesheedID ),

[158] Fix | Delete

styles = '';

[159] Fix | Delete

// If the stylesheet doesn't exist, create it and append it to <head>.

[160] Fix | Delete

if ( ! stylesheet.length ) {

[161] Fix | Delete

$( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );

[162] Fix | Delete

stylesheet = $( '#' + stylesheedID );

[163] Fix | Delete

}

[164] Fix | Delete

if ( ! _.isUndefined( a11yColors[ context ] ) ) {

[165] Fix | Delete

// Check if we have elements defined.

[166] Fix | Delete

if ( twentyTwentyPreviewEls[ context ] ) {

[167] Fix | Delete

_.each( twentyTwentyPreviewEls[ context ], function( items, setting ) {

[168] Fix | Delete

_.each( items, function( elements, property ) {

[169] Fix | Delete

if ( ! _.isUndefined( a11yColors[ context ][ setting ] ) ) {

[170] Fix | Delete

styles += elements.join( ',' ) + '{' + property + ':' + a11yColors[ context ][ setting ] + ';}';

[171] Fix | Delete

}

[172] Fix | Delete

} );

[173] Fix | Delete

} );

[174] Fix | Delete

}

[175] Fix | Delete

}

[176] Fix | Delete

// Add styles.

[177] Fix | Delete

stylesheet.html( styles );

[178] Fix | Delete

}

[179] Fix | Delete

// Generate styles on load. Handles page-changes on the preview pane.

[180] Fix | Delete

$( document ).ready( function() {

[181] Fix | Delete

twentyTwentyGenerateColorA11yPreviewStyles( 'content' );

[182] Fix | Delete

twentyTwentyGenerateColorA11yPreviewStyles( 'header-footer' );

[183] Fix | Delete

} );

[184] Fix | Delete

}( jQuery, wp.customize, _ ) );

[185] Fix | Delete

[186] Fix | Delete