wp-includes/js/customize-preview.js

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