[Summary view] [Print] [Text view]

   1  (function( exports, $ ){
   2      var api = wp.customize,
   3          debounce;
   4  
   5      debounce = function( fn, delay, context ) {
   6          var timeout;
   7          return function() {
   8              var args = arguments;
   9  
  10              context = context || this;
  11  
  12              clearTimeout( timeout );
  13              timeout = setTimeout( function() {
  14                  timeout = null;
  15                  fn.apply( context, args );
  16              }, delay );
  17          };
  18      };
  19  
  20      api.Preview = api.Messenger.extend({
  21          /**
  22           * Requires params:
  23           *  - url    - the URL of preview frame
  24           */
  25          initialize: function( params, options ) {
  26              var self = this;
  27  
  28              api.Messenger.prototype.initialize.call( this, params, options );
  29  
  30              this.body = $( document.body );
  31              this.body.on( 'click.preview', 'a', function( event ) {
  32                  event.preventDefault();
  33                  self.send( 'scroll', 0 );
  34                  self.send( 'url', $(this).prop('href') );
  35              });
  36  
  37              // You cannot submit forms.
  38              // @todo: Allow form submissions by mixing $_POST data with the customize setting $_POST data.
  39              this.body.on( 'submit.preview', 'form', function( event ) {
  40                  event.preventDefault();
  41              });
  42  
  43              this.window = $( window );
  44              this.window.on( 'scroll.preview', debounce( function() {
  45                  self.send( 'scroll', self.window.scrollTop() );
  46              }, 200 ));
  47  
  48              this.bind( 'scroll', function( distance ) {
  49                  self.window.scrollTop( distance );
  50              });
  51          }
  52      });
  53  
  54      $( function() {
  55          api.settings = window._wpCustomizeSettings;
  56          if ( ! api.settings )
  57              return;
  58  
  59          var preview, bg;
  60  
  61          preview = new api.Preview({
  62              url: window.location.href,
  63              channel: api.settings.channel
  64          });
  65  
  66          preview.bind( 'settings', function( values ) {
  67              $.each( values, function( id, value ) {
  68                  if ( api.has( id ) )
  69                      api( id ).set( value );
  70                  else
  71                      api.create( id, value );
  72              });
  73          });
  74  
  75          preview.trigger( 'settings', api.settings.values );
  76  
  77          preview.bind( 'setting', function( args ) {
  78              var value;
  79  
  80              args = args.slice();
  81  
  82              if ( value = api( args.shift() ) )
  83                  value.set.apply( value, args );
  84          });
  85  
  86          preview.bind( 'sync', function( events ) {
  87              $.each( events, function( event, args ) {
  88                  preview.trigger( event, args );
  89              });
  90              preview.send( 'synced' );
  91          });
  92  
  93          preview.bind( 'active', function() {
  94              if ( api.settings.nonce )
  95                  preview.send( 'nonce', api.settings.nonce );
  96          });
  97  
  98          preview.send( 'ready' );
  99  
 100          /* Custom Backgrounds */
 101          bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
 102              return 'background_' + prop;
 103          });
 104  
 105          api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
 106              var body = $(document.body),
 107                  head = $('head'),
 108                  style = $('#custom-background-css'),
 109                  update;
 110  
 111              // If custom backgrounds are active and we can't find the
 112              // default output, bail.
 113              if ( body.hasClass('custom-background') && ! style.length )
 114                  return;
 115  
 116              update = function() {
 117                  var css = '';
 118  
 119                  // The body will support custom backgrounds if either
 120                  // the color or image are set.
 121                  //
 122                  // See get_body_class() in /wp-includes/post-template.php
 123                  body.toggleClass( 'custom-background', !! ( color() || image() ) );
 124  
 125                  if ( color() )
 126                      css += 'background-color: ' + color() + ';';
 127  
 128                  if ( image() ) {
 129                      css += 'background-image: url("' + image() + '");';
 130                      css += 'background-position: top ' + position_x() + ';';
 131                      css += 'background-repeat: ' + repeat() + ';';
 132                      css += 'background-attachment: ' + attachment() + ';';
 133                  }
 134  
 135                  // Refresh the stylesheet by removing and recreating it.
 136                  style.remove();
 137                  style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );
 138              };
 139  
 140              $.each( arguments, function() {
 141                  this.bind( update );
 142              });
 143          });
 144      });
 145  
 146  })( wp, jQuery );