From 2a1899e3194f898eae3a7ba57c56fdd0895aeb5e Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Sat, 22 Mar 2014 21:03:18 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@27653 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-widgets.js          |  2 +-
 .../class-wp-customize-widgets.php            | 50 +++++------
 .../js/customize-preview-widgets.js           | 86 +++++++++++--------
 3 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index 95cc6aa754..012784eaca 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/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 );
 		},
 
diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php
index fc62838f07..4a00078d25 100644
--- a/src/wp-includes/class-wp-customize-widgets.php
+++ b/src/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
 	}
diff --git a/src/wp-includes/js/customize-preview-widgets.js b/src/wp-includes/js/customize-preview-widgets.js
index 004785174e..0706ef3e46 100644
--- a/src/wp-includes/js/customize-preview-widgets.js
+++ b/src/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 );