wp/wp-includes/js/customize-preview.js
changeset 5 5e2f62d02dcd
parent 0 d970ebf37754
child 7 cf61fcea0001
equal deleted inserted replaced
4:346c88efed21 5:5e2f62d02dcd
     1 (function( exports, $ ){
     1 (function( exports, $ ){
     2 	var api = wp.customize,
     2 	var api = wp.customize,
     3 		debounce;
     3 		debounce;
     4 
     4 
       
     5 	/**
       
     6 	 * Returns a debounced version of the function.
       
     7 	 *
       
     8 	 * @todo Require Underscore.js for this file and retire this.
       
     9 	 */
     5 	debounce = function( fn, delay, context ) {
    10 	debounce = function( fn, delay, context ) {
     6 		var timeout;
    11 		var timeout;
     7 		return function() {
    12 		return function() {
     8 			var args = arguments;
    13 			var args = arguments;
     9 
    14 
    15 				fn.apply( context, args );
    20 				fn.apply( context, args );
    16 			}, delay );
    21 			}, delay );
    17 		};
    22 		};
    18 	};
    23 	};
    19 
    24 
       
    25 	/**
       
    26 	 * @constructor
       
    27 	 * @augments wp.customize.Messenger
       
    28 	 * @augments wp.customize.Class
       
    29 	 * @mixes wp.customize.Events
       
    30 	 */
    20 	api.Preview = api.Messenger.extend({
    31 	api.Preview = api.Messenger.extend({
    21 		/**
    32 		/**
    22 		 * Requires params:
    33 		 * Requires params:
    23 		 *  - url    - the URL of preview frame
    34 		 *  - url    - the URL of preview frame
    24 		 */
    35 		 */
    54 	$( function() {
    65 	$( function() {
    55 		api.settings = window._wpCustomizeSettings;
    66 		api.settings = window._wpCustomizeSettings;
    56 		if ( ! api.settings )
    67 		if ( ! api.settings )
    57 			return;
    68 			return;
    58 
    69 
    59 		var preview, bg;
    70 		var bg;
    60 
    71 
    61 		preview = new api.Preview({
    72 		api.preview = new api.Preview({
    62 			url: window.location.href,
    73 			url: window.location.href,
    63 			channel: api.settings.channel
    74 			channel: api.settings.channel
    64 		});
    75 		});
    65 
    76 
    66 		preview.bind( 'settings', function( values ) {
    77 		api.preview.bind( 'settings', function( values ) {
    67 			$.each( values, function( id, value ) {
    78 			$.each( values, function( id, value ) {
    68 				if ( api.has( id ) )
    79 				if ( api.has( id ) )
    69 					api( id ).set( value );
    80 					api( id ).set( value );
    70 				else
    81 				else
    71 					api.create( id, value );
    82 					api.create( id, value );
    72 			});
    83 			});
    73 		});
    84 		});
    74 
    85 
    75 		preview.trigger( 'settings', api.settings.values );
    86 		api.preview.trigger( 'settings', api.settings.values );
    76 
    87 
    77 		preview.bind( 'setting', function( args ) {
    88 		api.preview.bind( 'setting', function( args ) {
    78 			var value;
    89 			var value;
    79 
    90 
    80 			args = args.slice();
    91 			args = args.slice();
    81 
    92 
    82 			if ( value = api( args.shift() ) )
    93 			if ( value = api( args.shift() ) )
    83 				value.set.apply( value, args );
    94 				value.set.apply( value, args );
    84 		});
    95 		});
    85 
    96 
    86 		preview.bind( 'sync', function( events ) {
    97 		api.preview.bind( 'sync', function( events ) {
    87 			$.each( events, function( event, args ) {
    98 			$.each( events, function( event, args ) {
    88 				preview.trigger( event, args );
    99 				api.preview.trigger( event, args );
    89 			});
   100 			});
    90 			preview.send( 'synced' );
   101 			api.preview.send( 'synced' );
    91 		});
   102 		});
    92 
   103 
    93 	 	preview.bind( 'active', function() {
   104 		api.preview.bind( 'active', function() {
    94 	 		if ( api.settings.nonce )
   105 			if ( api.settings.nonce ) {
    95 	 			preview.send( 'nonce', api.settings.nonce );
   106 				api.preview.send( 'nonce', api.settings.nonce );
    96 	 	});
   107 			}
    97 
   108 
    98 		preview.send( 'ready' );
   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 		});
    99 
   127 
   100 		/* Custom Backgrounds */
   128 		/* Custom Backgrounds */
   101 		bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
   129 		bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
   102 			return 'background_' + prop;
   130 			return 'background_' + prop;
   103 		});
   131 		});
   105 		api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
   133 		api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
   106 			var body = $(document.body),
   134 			var body = $(document.body),
   107 				head = $('head'),
   135 				head = $('head'),
   108 				style = $('#custom-background-css'),
   136 				style = $('#custom-background-css'),
   109 				update;
   137 				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 
   138 
   116 			update = function() {
   139 			update = function() {
   117 				var css = '';
   140 				var css = '';
   118 
   141 
   119 				// The body will support custom backgrounds if either
   142 				// The body will support custom backgrounds if either
   139 
   162 
   140 			$.each( arguments, function() {
   163 			$.each( arguments, function() {
   141 				this.bind( update );
   164 				this.bind( update );
   142 			});
   165 			});
   143 		});
   166 		});
       
   167 
       
   168 		api.trigger( 'preview-ready' );
   144 	});
   169 	});
   145 
   170 
   146 })( wp, jQuery );
   171 })( wp, jQuery );