[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

title

Body

[close]

/wp-content/themes/twentytwenty/assets/js/ -> customize-controls.js (source)

   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 1.0.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  
  40      /**
  41       * Updates the value of the "accent_accessible_colors" setting.
  42       *
  43       * @since 1.0.0
  44       *
  45       * @param {string} context The area for which we want to get colors. Can be for example "content", "header" etc.
  46       * @param {string} backgroundColor The background color (HEX value).
  47       * @param {number} accentHue Numeric representation of the selected hue (0 - 359).
  48       *
  49       * @return {void}
  50       */
  51  	function twentyTwentySetAccessibleColorsValue( context, backgroundColor, accentHue ) {
  52          var value, colors;
  53  
  54          // Get the current value for our accessible colors, and make sure it's an object.
  55          value = wp.customize( 'accent_accessible_colors' ).get();
  56          value = ( _.isObject( value ) && ! _.isArray( value ) ) ? value : {};
  57  
  58          // Get accessible colors for the defined background-color and hue.
  59          colors = twentyTwentyColor( backgroundColor, accentHue );
  60  
  61          // Sanity check.
  62          if ( colors.getAccentColor() && 'function' === typeof colors.getAccentColor().toCSS ) {
  63              // Update the value for this context.
  64              value[ context ] = {
  65                  text: colors.getTextColor(),
  66                  accent: colors.getAccentColor().toCSS(),
  67                  background: backgroundColor
  68              };
  69  
  70              // Get borders color.
  71              value[ context ].borders = colors.bgColorObj
  72                  .clone()
  73                  .getReadableContrastingColor( colors.bgColorObj, 1.36 )
  74                  .toCSS();
  75  
  76              // Get secondary color.
  77              value[ context ].secondary = colors.bgColorObj
  78                  .clone()
  79                  .getReadableContrastingColor( colors.bgColorObj )
  80                  .s( colors.bgColorObj.s() / 2 )
  81                  .toCSS();
  82          }
  83  
  84          // Change the value.
  85          wp.customize( 'accent_accessible_colors' ).set( value );
  86  
  87          // Small hack to save the option.
  88          wp.customize( 'accent_accessible_colors' )._dirty = true;
  89      }
  90  }( jQuery ) );


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7