[Summary view] [Print] [Text view]

   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          // Confidence 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 ) );