[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

title

Body

[close]

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

   1  /* global twentyTwentyBgColors, twentyTwentyPreviewEls, jQuery, _, wp */
   2  /**
   3   * Customizer enhancements for a better user experience.
   4   *
   5   * Contains handlers to make Theme Customizer preview reload changes asynchronously.
   6   *
   7   * @since 1.0.0
   8   */
   9  
  10  ( function( $, api, _ ) {
  11      /**
  12       * Return a value for our partial refresh.
  13       *
  14       * @param {Object} partial  Current partial.
  15       *
  16       * @return {jQuery.Promise} Resolved promise.
  17       */
  18  	function returnDeferred( partial ) {
  19          var deferred = new $.Deferred();
  20  
  21          deferred.resolveWith( partial, _.map( partial.placements(), function() {
  22              return '';
  23          } ) );
  24  
  25          return deferred.promise();
  26      }
  27  
  28      // Selective refresh for "Fixed Background Image"
  29      api.selectiveRefresh.partialConstructor.cover_fixed = api.selectiveRefresh.Partial.extend( {
  30  
  31          /**
  32           * Override the refresh method
  33           *
  34           * @return {jQuery.Promise} Resolved promise.
  35           */
  36          refresh: function() {
  37              var partial, cover, params;
  38  
  39              partial = this;
  40              params = partial.params;
  41              cover = $( params.selector );
  42  
  43              if ( cover.length && cover.hasClass( 'bg-image' ) ) {
  44                  cover.toggleClass( 'bg-attachment-fixed' );
  45              }
  46  
  47              return returnDeferred( partial );
  48          }
  49  
  50      } );
  51  
  52      // Selective refresh for "Image Overlay Opacity"
  53      api.selectiveRefresh.partialConstructor.cover_opacity = api.selectiveRefresh.Partial.extend( {
  54  
  55          /**
  56           * Input attributes.
  57           *
  58           * @type {Object}
  59           */
  60          attrs: {},
  61  
  62          /**
  63           * Override the refresh method
  64           *
  65           * @return {jQuery.Promise} Resolved promise.
  66           */
  67          refresh: function() {
  68              var partial, ranges, attrs, setting, params, cover, className, classNames;
  69  
  70              partial = this;
  71              attrs = partial.attrs;
  72              ranges = _.range( attrs.min, attrs.max + attrs.step, attrs.step );
  73              params = partial.params;
  74              setting = api( params.primarySetting );
  75              cover = $( params.selector );
  76  
  77              if ( cover.length ) {
  78                  classNames = _.map( ranges, function( val ) {
  79                      return 'opacity-' + val;
  80                  } );
  81  
  82                  className = classNames[ ranges.indexOf( parseInt( setting.get(), 10 ) ) ];
  83  
  84                  cover.removeClass( classNames.join( ' ' ) );
  85                  cover.addClass( className );
  86              }
  87  
  88              return returnDeferred( partial );
  89          }
  90  
  91      } );
  92  
  93      // Add listener for the "header_footer_background_color" control.
  94      api( 'header_footer_background_color', function( value ) {
  95          value.bind( function( to ) {
  96              // Add background color to header and footer wrappers.
  97              $( 'body:not(.overlay-header)#site-header, #site-footer' ).css( 'background-color', to );
  98  
  99              // Change body classes if this is the same background-color as the content background.
 100              if ( to.toLowerCase() === api( 'background_color' ).get().toLowerCase() ) {
 101                  $( 'body' ).addClass( 'reduced-spacing' );
 102              } else {
 103                  $( 'body' ).removeClass( 'reduced-spacing' );
 104              }
 105          } );
 106      } );
 107  
 108      // Add listener for the "background_color" control.
 109      api( 'background_color', function( value ) {
 110          value.bind( function( to ) {
 111              // Change body classes if this is the same background-color as the header/footer background.
 112              if ( to.toLowerCase() === api( 'header_footer_background_color' ).get().toLowerCase() ) {
 113                  $( 'body' ).addClass( 'reduced-spacing' );
 114              } else {
 115                  $( 'body' ).removeClass( 'reduced-spacing' );
 116              }
 117          } );
 118      } );
 119  
 120      // Add listener for the accent color.
 121      api( 'accent_hue', function( value ) {
 122          value.bind( function() {
 123              // Generate the styles.
 124              // Add a small delay to be sure the accessible colors were generated.
 125              setTimeout( function() {
 126                  Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
 127                      twentyTwentyGenerateColorA11yPreviewStyles( context );
 128                  } );
 129              }, 50 );
 130          } );
 131      } );
 132  
 133      // Add listeners for background-color settings.
 134      Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
 135          wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
 136              value.bind( function() {
 137                  // Generate the styles.
 138                  // Add a small delay to be sure the accessible colors were generated.
 139                  setTimeout( function() {
 140                      twentyTwentyGenerateColorA11yPreviewStyles( context );
 141                  }, 50 );
 142              } );
 143          } );
 144      } );
 145  
 146      /**
 147       * Add styles to elements in the preview pane.
 148       *
 149       * @since 1.0.0
 150       *
 151       * @param {string} context The area for which we want to generate styles. Can be for example "content", "header" etc.
 152       *
 153       * @return {void}
 154       */
 155  	function twentyTwentyGenerateColorA11yPreviewStyles( context ) {
 156          // Get the accessible colors option.
 157          var a11yColors = window.parent.wp.customize( 'accent_accessible_colors' ).get(),
 158              stylesheedID = 'twentytwenty-customizer-styles-' + context,
 159              stylesheet = $( '#' + stylesheedID ),
 160              styles = '';
 161          // If the stylesheet doesn't exist, create it and append it to <head>.
 162          if ( ! stylesheet.length ) {
 163              $( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
 164              stylesheet = $( '#' + stylesheedID );
 165          }
 166          if ( ! _.isUndefined( a11yColors[ context ] ) ) {
 167              // Check if we have elements defined.
 168              if ( twentyTwentyPreviewEls[ context ] ) {
 169                  _.each( twentyTwentyPreviewEls[ context ], function( items, setting ) {
 170                      _.each( items, function( elements, property ) {
 171                          if ( ! _.isUndefined( a11yColors[ context ][ setting ] ) ) {
 172                              styles += elements.join( ',' ) + '{' + property + ':' + a11yColors[ context ][ setting ] + ';}';
 173                          }
 174                      } );
 175                  } );
 176              }
 177          }
 178          // Add styles.
 179          stylesheet.html( styles );
 180      }
 181      // Generate styles on load. Handles page-changes on the preview pane.
 182      $( document ).ready( function() {
 183          twentyTwentyGenerateColorA11yPreviewStyles( 'content' );
 184          twentyTwentyGenerateColorA11yPreviewStyles( 'header-footer' );
 185      } );
 186  }( jQuery, wp.customize, _ ) );


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