/Web/wp-includes/js/customize-preview.dev.js

  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-position: top ' + 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 );