Changeset 33345

Timestamp:

07/21/2015 04:13:36 PM (11 years ago)

Author:

wonderboymusic

Message:

Customizer: Nav Menus JS cleanup, first round

• In init, settings should be fresh and set to default values before extending
• When looping via _.each, pass this as 3rd arg to bind context
• Settings should be encapsulated in the module, instead of being exposed as static class props
• currentRefreshMenuInstanceDebouncedCalls should be encapsulated and renamed, instead of being the longest symbol in the entire codebase

See #32911.

File:

• trunk/src/wp-includes/js/customize-preview-nav-menus.js (modified) (10 diffs)

trunk/src/wp-includes/js/customize-preview-nav-menus.js

@@ -3 +3 @@
 wp.customize.menusPreview = ( function( $, api ) {
         'use strict';
-        var self;
-
-        self = {
-                renderQueryVar: null,
-                renderNonceValue: null,
-                renderNoncePostKey: null,
-                previewCustomizeNonce: null,
-                requestUri: '/',
-                theme: {
-                        active: false,
-                        stylesheet: ''
+        var currentRefreshDebounced = {},
+                refreshDebounceDelay = 200,
+                settings = {},
+                defaultSettings = {
+                        renderQueryVar: null,
+                        renderNonceValue: null,
+                        renderNoncePostKey: null,
+                        previewCustomizeNonce: null,
+                        requestUri: '/',
+                        theme: {
+                                active: false,
+                                stylesheet: ''
+                        },
+                        navMenuInstanceArgs: {}
                 },
-                navMenuInstanceArgs: {},
-                refreshDebounceDelay: 200
-        };
+                self = {};
 
         api.bind( 'preview-ready', function() {
@@ -31 +32 @@
                 var self = this, initializedSettings = {};
 
+                settings = _.extend( {}, defaultSettings );
                 if ( 'undefined' !== typeof _wpCustomizePreviewNavMenusExports ) {
-                        $.extend( self, _wpCustomizePreviewNavMenusExports );
+                        _.extend( settings, _wpCustomizePreviewNavMenusExports );
                 }
 
@@ -135 +137 @@
          */
         self.refreshMenu = function( menuId ) {
-                var self = this, assignedLocations = [];
+                var assignedLocations = [];
 
                 api.each(function( setting, id ) {
@@ -144 +146 @@
                 });
 
-                _.each( self.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
+                _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
                         if ( menuId === navMenuArgs.menu || -1 !== _.indexOf( assignedLocations, navMenuArgs.theme_location ) ) {
-                                self.refreshMenuInstanceDebounced( instanceNumber );
-                        }
-                } );
+                                this.refreshMenuInstanceDebounced( instanceNumber );
+                        }
+                }, this );
         };
 
@@ -158 +160 @@
         self.refreshMenuLocation = function( location ) {
                 var foundInstance = false;
-                _.each( self.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
+                _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
                         if ( location === navMenuArgs.theme_location ) {
-                                self.refreshMenuInstanceDebounced( instanceNumber );
+                                this.refreshMenuInstanceDebounced( instanceNumber );
                                 foundInstance = true;
                         }
-                } );
+                }, this );
                 if ( ! foundInstance ) {
                         api.preview.send( 'refresh' );
@@ -177 +179 @@
                 var self = this, data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
 
-                if ( ! self.navMenuInstanceArgs[ instanceNumber ] ) {
+                if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) {
                         throw new Error( 'unknown_instance_number' );
                 }
-                instance = self.navMenuInstanceArgs[ instanceNumber ];
+                instance = settings.navMenuInstanceArgs[ instanceNumber ];
 
                 containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber );
@@ -198 +200 @@
 
                 data = {
-                        nonce: self.previewCustomizeNonce, // for Customize Preview
+                        nonce: settings.previewCustomizeNonce, // for Customize Preview
                         wp_customize: 'on'
                 };
-                if ( ! self.theme.active ) {
-                        data.theme = self.theme.stylesheet;
-                }
-                data[ self.renderQueryVar ] = '1';
+                if ( ! settings.theme.active ) {
+                        data.theme = settings.theme.stylesheet;
+                }
+                data[ settings.renderQueryVar ] = '1';
 
                 // Gather settings to send in partial refresh request.
@@ -226 +228 @@
                 } );
                 data.customized = JSON.stringify( customized );
-                data[ self.renderNoncePostKey ] = self.renderNonceValue;
+                data[ settings.renderNoncePostKey ] = settings.renderNonceValue;
 
                 wpNavArgs = $.extend( {}, instance );
@@ -237 +239 @@
                 request = wp.ajax.send( null, {
                         data: data,
-                        url: self.requestUri
+                        url: settings.requestUri
                 } );
                 request.done( function( data ) {
@@ -262 +264 @@
         };
 
-        self.currentRefreshMenuInstanceDebouncedCalls = {};
-
         self.refreshMenuInstanceDebounced = function( instanceNumber ) {
-                if ( self.currentRefreshMenuInstanceDebouncedCalls[ instanceNumber ] ) {
-                        clearTimeout( self.currentRefreshMenuInstanceDebouncedCalls[ instanceNumber ] );
-                }
-                self.currentRefreshMenuInstanceDebouncedCalls[ instanceNumber ] = setTimeout(
+                if ( currentRefreshDebounced[ instanceNumber ] ) {
+                        clearTimeout( currentRefreshDebounced[ instanceNumber ] );
+                }
+                currentRefreshDebounced[ instanceNumber ] = setTimeout(
                         function() {
                                 self.refreshMenuInstance( instanceNumber );
                         },
-                        self.refreshDebounceDelay
+                        refreshDebounceDelay
                 );
         };