Changeset 27653

Timestamp:

03/22/2014 09:03:18 PM (11 years ago)

Author:

ocean90

Message:

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.

Location:

trunk/src

Files:

• wp-admin/js/customize-widgets.js (modified) (1 diff)
• wp-includes/class-wp-customize-widgets.php (modified) (3 diffs)
• wp-includes/js/customize-preview-widgets.js (modified) (5 diffs)

trunk/src/wp-admin/js/customize-widgets.js

@@ -1511 +1511 @@
         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 );
         },

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

@@ -697 +697 @@
     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 );
     }
 
@@ -720 +721 @@
      * @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 ) )
-        );
-    }
+        }
 
     /**
@@ -768 +749 @@
      */
     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

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

@@ -1 @@
-/*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
             } );
         },
@@ -27 +34 @@
          */
         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,
@@ -34 +43 @@
                         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);
             });
         },
@@ -66 +75 @@
          */
         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 () {
@@ -90 +98 @@
             });
         }
-
     };
-
-    $.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 );