Widget Customizer: Fix 'WidgetCustomizerPreview' is undefined error in IE8/9.

* Move `WidgetCustomizerPreview` to `wp.customize.WidgetCustomizerPreview`
* Move `WidgetCustomizerPreview_exports` to export_preview_data()
* Use `_wpWidgetCustomizerPreviewSettings` to transfer settings to `wp.customize.WidgetCustomizerPreview`

see #27485.
Built from https://develop.svn.wordpress.org/trunk@27653


git-svn-id: http://core.svn.wordpress.org/trunk@27496 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/customize-widgets.js

@@ -1510,7 +1510,7 @@ var WidgetCustomizer = ( function ($) {
 		 */
 		getPreviewWidgetElement: function () {
 			var control = this,
-				widget_customizer_preview = self.getPreviewWindow().WidgetCustomizerPreview;
+				widget_customizer_preview = self.getPreviewWindow().wp.customize.WidgetCustomizerPreview;
 			return widget_customizer_preview.getWidgetElement( control.params.widget_id );
 		},
 

wp-includes/class-wp-customize-widgets.php

@@ -696,8 +696,9 @@ class WP_Customize_Widgets {
 	 */
 	static function customize_preview_init() {
 		add_filter( 'sidebars_widgets', array( __CLASS__, 'preview_sidebars_widgets' ), 1 );
-		add_action( 'wp_enqueue_scripts', array( __CLASS__, 'customize_preview_enqueue_deps' ) );
-		add_action( 'wp_footer', array( __CLASS__, 'export_preview_data' ), 9999 );
+		add_action( 'wp_enqueue_scripts', array( __CLASS__, 'customize_preview_enqueue' ) );
+		add_action( 'wp_print_styles', array( __CLASS__, 'inject_preview_css' ), 1 );
+		add_action( 'wp_footer', array( __CLASS__, 'export_preview_data' ), 20 );
 	}
 
 	/**
@@ -719,29 +720,9 @@ class WP_Customize_Widgets {
 	 *
 	 * @action wp_enqueue_scripts
 	 */
-	static function customize_preview_enqueue_deps() {
+	static function customize_preview_enqueue() {
 		wp_enqueue_script( 'customize-preview-widgets' );
-
-		add_action( 'wp_print_styles', array( __CLASS__, 'inject_preview_css' ), 1 );
-
-		// Why not wp_localize_script? Because we're not localizing, and it forces values into strings
-		global $wp_scripts;
-		$exports = array(
-			'registered_sidebars' => array_values( $GLOBALS['wp_registered_sidebars'] ),
-			'registered_widgets' => $GLOBALS['wp_registered_widgets'],
-			'i18n' => array(
-				'widget_tooltip' => ( 'Shift-click to edit this widget.' ),
-			),
-		);
-		foreach ( $exports['registered_widgets'] as &$registered_widget ) {
-			unset( $registered_widget['callback'] ); // may not be JSON-serializeable
 		}
-		$wp_scripts->add_data(
-			'customize-preview-widgets',
-			'data',
-			sprintf( 'var WidgetCustomizerPreview_exports = %s;', json_encode( $exports ) )
-		);
-	}
 
 	/**
 	 * Insert default style for highlighted widget at early point so theme
@@ -767,14 +748,23 @@ class WP_Customize_Widgets {
 	 * @action wp_footer
 	 */
 	static function export_preview_data() {
-		wp_print_scripts( array( 'customize-preview-widgets' ) );
+		// Prepare customizer settings to pass to Javascript.
+		$settings = array(
+			'renderedSidebars'   => array_fill_keys( array_unique( self::$rendered_sidebars ), true ),
+			'renderedWidgets'    => array_fill_keys( array_keys( self::$rendered_widgets ), true ),
+			'registeredSidebars' => array_values( $GLOBALS['wp_registered_sidebars'] ),
+			'registeredWidgets'  => $GLOBALS['wp_registered_widgets'],
+			'l10n'               => array(
+				'widgetTooltip' => ( 'Shift-click to edit this widget.' ),
+			),
+		);
+		foreach ( $settings['registeredWidgets'] as &$registered_widget ) {
+			unset( $registered_widget['callback'] ); // may not be JSON-serializeable
+		}
+
 		?>
-		<script>
-		(function () {
-			/*global WidgetCustomizerPreview */
-			WidgetCustomizerPreview.rendered_sidebars = <?php echo json_encode( array_fill_keys( array_unique( self::$rendered_sidebars ), true ) ) ?>;
-			WidgetCustomizerPreview.rendered_widgets = <?php echo json_encode( array_fill_keys( array_keys( self::$rendered_widgets ), true ) ); ?>;
-		}());
+		<script type="text/javascript">
+			var _wpWidgetCustomizerPreviewSettings = <?php echo json_encode( $settings ); ?>;
 		</script>
 		<?php
 	}

wp-includes/js/customize-preview-widgets.js

@@ -1,24 +1,31 @@
-/*global jQuery, WidgetCustomizerPreview_exports */
-/*exported WidgetCustomizerPreview */
-var WidgetCustomizerPreview = (function ($) {
-	'use strict';
+(function( $, wp ){
 
-	var OldPreview, self = {
-		rendered_sidebars: {}, // @todo Make rendered a property of the Backbone model
-		rendered_widgets: {}, // @todo Make rendered a property of the Backbone model
-		registered_sidebars: [], // @todo Make a Backbone collection
-		registered_widgets: {}, // @todo Make array, Backbone collection
-		widget_selectors: [],
+	if ( ! wp || ! wp.customize ) { return; }
+
+	var api = wp.customize,
+		OldPreview;
+
+	/**
+	 * wp.customize.WidgetCustomizerPreview
+	 *
+	 */
+	api.WidgetCustomizerPreview = {
+		renderedSidebars: {}, // @todo Make rendered a property of the Backbone model
+		renderedWidgets: {}, // @todo Make rendered a property of the Backbone model
+		registeredSidebars: [], // @todo Make a Backbone collection
+		registeredWidgets: {}, // @todo Make array, Backbone collection
+		widgetSelectors: [],
 		preview: null,
-		i18n: {},
+		l10n: {},
 
 		init: function () {
+			var self = this;
 			this.buildWidgetSelectors();
 			this.highlightControls();
 
-			self.preview.bind( 'active', function() {
-				self.preview.send( 'rendered-sidebars', self.rendered_sidebars ); // @todo Only send array of IDs
-				self.preview.send( 'rendered-widgets', self.rendered_widgets ); // @todo Only send array of IDs
+			this.preview.bind( 'active', function() {
+				self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
+				self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
 			} );
 		},
 
@@ -26,25 +33,27 @@ var WidgetCustomizerPreview = (function ($) {
 		 * Calculate the selector for the sidebar's widgets based on the registered sidebar's info
 		 */
 		buildWidgetSelectors: function () {
-			$.each( self.registered_sidebars, function ( i, sidebar ) {
-				var widget_tpl = [
+			var self = this;
+
+			$.each( this.registeredSidebars, function ( i, sidebar ) {
+				var widgetTpl = [
 						sidebar.before_widget.replace('%1$s', '').replace('%2$s', ''),
 						sidebar.before_title,
 						sidebar.after_title,
 						sidebar.after_widget
 					].join(''),
-					empty_widget,
-					widget_selector,
-					widget_classes;
+					emptyWidget,
+					widgetSelector,
+					widgetClasses;
 
-				empty_widget = $(widget_tpl);
-				widget_selector = empty_widget.prop('tagName');
-				widget_classes = empty_widget.prop('className').replace(/^\s+|\s+$/g, '');
+				emptyWidget = $(widgetTpl);
+				widgetSelector = emptyWidget.prop('tagName');
+				widgetClasses = emptyWidget.prop('className').replace(/^\s+|\s+$/g, '');
 
-				if ( widget_classes ) {
-					widget_selector += '.' + widget_classes.split(/\s+/).join('.');
+				if ( widgetClasses ) {
+					widgetSelector += '.' + widgetClasses.split(/\s+/).join('.');
 				}
-				self.widget_selectors.push(widget_selector);
+				self.widgetSelectors.push(widgetSelector);
 			});
 		},
 
@@ -65,10 +74,9 @@ var WidgetCustomizerPreview = (function ($) {
 		 *
 		 */
 		highlightControls: function() {
+			var selector = this.widgetSelectors.join(',');
 
-			var selector = this.widget_selectors.join(',');
-
-			$(selector).attr( 'title', self.i18n.widget_tooltip );
+			$(selector).attr( 'title', this.l10n.widgetTooltip );
 
 			$(document).on( 'mouseenter', selector, function () {
 				var control = parent.WidgetCustomizer.getWidgetFormControlForWidget( $(this).prop('id') );
@@ -89,26 +97,28 @@ var WidgetCustomizerPreview = (function ($) {
 				}
 			});
 		}
-
 	};
 
-	$.extend(self, WidgetCustomizerPreview_exports);
-
 	/**
 	 * Capture the instance of the Preview since it is private
 	 */
-	OldPreview = wp.customize.Preview;
-	wp.customize.Preview = OldPreview.extend( {
+	OldPreview = api.Preview;
+	api.Preview = OldPreview.extend( {
 		initialize: function( params, options ) {
-			self.preview = this;
+			api.WidgetCustomizerPreview.preview = this;
 			OldPreview.prototype.initialize.call( this, params, options );
 		}
 	} );
 
-	// @todo on customize ready?
 	$(function () {
-		self.init();
+		var settings = window._wpWidgetCustomizerPreviewSettings;
+		if ( ! settings ) {
+			return;
+		}
+
+		$.extend( api.WidgetCustomizerPreview, settings );
+
+		api.WidgetCustomizerPreview.init();
 	});
 
-	return self;
-}( jQuery ));
+})( jQuery, window.wp );

wp-includes/js/customize-preview-widgets.min.js

@@ -1 +1 @@
-var WidgetCustomizerPreview=function(a){"use strict";var b,c={rendered_sidebars:{},rendered_widgets:{},registered_sidebars:[],registered_widgets:{},widget_selectors:[],preview:null,i18n:{},init:function(){this.buildWidgetSelectors(),this.highlightControls(),c.preview.bind("active",function(){c.preview.send("rendered-sidebars",c.rendered_sidebars),c.preview.send("rendered-widgets",c.rendered_widgets)})},buildWidgetSelectors:function(){a.each(c.registered_sidebars,function(b,d){var e,f,g,h=[d.before_widget.replace("%1$s","").replace("%2$s",""),d.before_title,d.after_title,d.after_widget].join("");e=a(h),f=e.prop("tagName"),g=e.prop("className").replace(/^\s+|\s+$/g,""),g&&(f+="."+g.split(/\s+/).join(".")),c.widget_selectors.push(f)})},getWidgetElement:function(b){return a("#"+b)},highlightControls:function(){var b=this.widget_selectors.join(",");a(b).attr("title",c.i18n.widget_tooltip),a(document).on("mouseenter",b,function(){var b=parent.WidgetCustomizer.getWidgetFormControlForWidget(a(this).prop("id"));b&&b.highlightSectionAndControl()}),a(document).on("click",b,function(b){if(b.shiftKey){b.preventDefault();var c=parent.WidgetCustomizer.getWidgetFormControlForWidget(a(this).prop("id"));c&&c.focus()}})}};return a.extend(c,WidgetCustomizerPreview_exports),b=wp.customize.Preview,wp.customize.Preview=b.extend({initialize:function(a,d){c.preview=this,b.prototype.initialize.call(this,a,d)}}),a(function(){c.init()}),c}(jQuery);
+!function(a,b){if(b&&b.customize){var c,d=b.customize;d.WidgetCustomizerPreview={renderedSidebars:{},renderedWidgets:{},registeredSidebars:[],registeredWidgets:{},widgetSelectors:[],preview:null,l10n:{},init:function(){var a=this;this.buildWidgetSelectors(),this.highlightControls(),this.preview.bind("active",function(){a.preview.send("rendered-sidebars",a.renderedSidebars),a.preview.send("rendered-widgets",a.renderedWidgets)})},buildWidgetSelectors:function(){var b=this;a.each(this.registeredSidebars,function(c,d){var e,f,g,h=[d.before_widget.replace("%1$s","").replace("%2$s",""),d.before_title,d.after_title,d.after_widget].join("");e=a(h),f=e.prop("tagName"),g=e.prop("className").replace(/^\s+|\s+$/g,""),g&&(f+="."+g.split(/\s+/).join(".")),b.widgetSelectors.push(f)})},getWidgetElement:function(b){return a("#"+b)},highlightControls:function(){var b=this.widgetSelectors.join(",");a(b).attr("title",this.l10n.widgetTooltip),a(document).on("mouseenter",b,function(){var b=parent.WidgetCustomizer.getWidgetFormControlForWidget(a(this).prop("id"));b&&b.highlightSectionAndControl()}),a(document).on("click",b,function(b){if(b.shiftKey){b.preventDefault();var c=parent.WidgetCustomizer.getWidgetFormControlForWidget(a(this).prop("id"));c&&c.focus()}})}},c=d.Preview,d.Preview=c.extend({initialize:function(a,b){d.WidgetCustomizerPreview.preview=this,c.prototype.initialize.call(this,a,b)}}),a(function(){var b=window._wpWidgetCustomizerPreviewSettings;b&&(a.extend(d.WidgetCustomizerPreview,b),d.WidgetCustomizerPreview.init())})}}(jQuery,window.wp);