[Summary view] [Print] [Text view]

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