angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

customize-controls.js (3822B)

      1 /* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */
      2 /**
      3  * Customizer enhancements for a better user experience.
      4  *
      5  * Contains extra logic for our Customizer controls & settings.
      6  *
      7  * @since Twenty Twenty 1.0
      8  */
      9 
     10 ( function() {
     11 	// Wait until the customizer has finished loading.
     12 	wp.customize.bind( 'ready', function() {
     13 		// Add a listener for accent-color changes.
     14 		wp.customize( 'accent_hue', function( value ) {
     15 			value.bind( function( to ) {
     16 				// Update the value for our accessible colors for all areas.
     17 				Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
     18 					var backgroundColorValue;
     19 					if ( twentyTwentyBgColors[ context ].color ) {
     20 						backgroundColorValue = twentyTwentyBgColors[ context ].color;
     21 					} else {
     22 						backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get();
     23 					}
     24 					twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to );
     25 				} );
     26 			} );
     27 		} );
     28 
     29 		// Add a listener for background-color changes.
     30 		Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
     31 			wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
     32 				value.bind( function( to ) {
     33 					// Update the value for our accessible colors for this area.
     34 					twentyTwentySetAccessibleColorsValue( context, to, wp.customize( 'accent_hue' ).get(), to );
     35 				} );
     36 			} );
     37 		} );
     38 
     39 		// Show or hide retina_logo setting on the first load.
     40 		twentyTwentySetRetineLogoVisibility( !! wp.customize( 'custom_logo' )() );
     41 
     42 		// Add a listener for custom_logo changes.
     43 		wp.customize( 'custom_logo', function( value ) {
     44 			value.bind( function( to ) {
     45 				// Show or hide retina_logo setting on changing custom_logo.
     46 				twentyTwentySetRetineLogoVisibility( !! to );
     47 			} );
     48 		} );
     49 	} );
     50 
     51 	/**
     52 	 * Updates the value of the "accent_accessible_colors" setting.
     53 	 *
     54 	 * @since Twenty Twenty 1.0
     55 	 *
     56 	 * @param {string} context The area for which we want to get colors. Can be for example "content", "header" etc.
     57 	 * @param {string} backgroundColor The background color (HEX value).
     58 	 * @param {number} accentHue Numeric representation of the selected hue (0 - 359).
     59 	 *
     60 	 * @return {void}
     61 	 */
     62 	function twentyTwentySetAccessibleColorsValue( context, backgroundColor, accentHue ) {
     63 		var value, colors;
     64 
     65 		// Get the current value for our accessible colors, and make sure it's an object.
     66 		value = wp.customize( 'accent_accessible_colors' ).get();
     67 		value = ( _.isObject( value ) && ! _.isArray( value ) ) ? value : {};
     68 
     69 		// Get accessible colors for the defined background-color and hue.
     70 		colors = twentyTwentyColor( backgroundColor, accentHue );
     71 
     72 		// Sanity check.
     73 		if ( colors.getAccentColor() && 'function' === typeof colors.getAccentColor().toCSS ) {
     74 			// Update the value for this context.
     75 			value[ context ] = {
     76 				text: colors.getTextColor(),
     77 				accent: colors.getAccentColor().toCSS(),
     78 				background: backgroundColor
     79 			};
     80 
     81 			// Get borders color.
     82 			value[ context ].borders = colors.bgColorObj
     83 				.clone()
     84 				.getReadableContrastingColor( colors.bgColorObj, 1.36 )
     85 				.toCSS();
     86 
     87 			// Get secondary color.
     88 			value[ context ].secondary = colors.bgColorObj
     89 				.clone()
     90 				.getReadableContrastingColor( colors.bgColorObj )
     91 				.s( colors.bgColorObj.s() / 2 )
     92 				.toCSS();
     93 		}
     94 
     95 		// Change the value.
     96 		wp.customize( 'accent_accessible_colors' ).set( value );
     97 
     98 		// Small hack to save the option.
     99 		wp.customize( 'accent_accessible_colors' )._dirty = true;
    100 	}
    101 
    102 	/**
    103 	 * Shows or hides the "retina_logo" setting based on the given value.
    104 	 *
    105 	 * @since Twenty Twenty 1.3
    106 	 *
    107 	 * @param {boolean} visible The visible value.
    108 	 *
    109 	 * @return {void}
    110 	 */
    111 	function twentyTwentySetRetineLogoVisibility( visible ) {
    112 		wp.customize.control( 'retina_logo' ).container.toggle( visible );
    113 	}
    114 }( jQuery ) );