Changeset 33345

Timestamp:

07/21/2015 04:13:36 PM (10 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
         );
     };