Make WordPress Core

Changeset 33347


Ignore:
Timestamp:
07/21/2015 05:39:24 PM (9 years ago)
Author:
wonderboymusic
Message:

Customizer: Nav Menus JS cleanup, second round

  • Follow the same pattern of namespace instantiation that WidgetCustomizerPreview uses
  • Remove use of self for global delegation
  • Use api for wp.customize and import only top-level globals
  • Bind this where appropriate and disambiguate scope

See #32911.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/customize-preview-nav-menus.js

    r33345 r33347  
    11/* global JSON, _wpCustomizePreviewNavMenusExports */
    22
    3 wp.customize.menusPreview = ( function( $, api ) {
     3( function( $, _, wp ) {
    44    'use strict';
    5     var currentRefreshDebounced = {},
     5
     6    if ( ! wp || ! wp.customize ) { return; }
     7
     8    var api = wp.customize,
     9        currentRefreshDebounced = {},
    610        refreshDebounceDelay = 200,
    711        settings = {},
     
    1721            },
    1822            navMenuInstanceArgs: {}
    19         },
    20         self = {};
     23        };
     24
     25    api.MenusCustomizerPreview = {
     26        /**
     27         * Bootstrap functionality.
     28         */
     29        init : function() {
     30            var self = this, initializedSettings = {};
     31
     32            settings = _.extend( {}, defaultSettings );
     33            if ( 'undefined' !== typeof _wpCustomizePreviewNavMenusExports ) {
     34                _.extend( settings, _wpCustomizePreviewNavMenusExports );
     35            }
     36
     37            api.each( function( setting, id ) {
     38                setting.id = id;
     39                initializedSettings[ setting.id ] = true;
     40                self.bindListener( setting );
     41            } );
     42
     43            api.preview.bind( 'setting', function( args ) {
     44                var id, value, setting;
     45                args = args.slice();
     46                id = args.shift();
     47                value = args.shift();
     48
     49                setting = api( id );
     50                if ( ! setting ) {
     51                    // Currently customize-preview.js is not creating settings for dynamically-created settings in the pane, so we have to do it.
     52                    setting = api.create( id, value ); // @todo This should be in core
     53                }
     54                if ( ! setting.id ) {
     55                    // Currently customize-preview.js doesn't set the id property for each setting, like customize-controls.js does.
     56                    setting.id = id;
     57                }
     58
     59                if ( ! initializedSettings[ setting.id ] ) {
     60                    initializedSettings[ setting.id ] = true;
     61                    if ( self.bindListener( setting ) ) {
     62                        setting.callbacks.fireWith( setting, [ setting(), null ] );
     63                    }
     64                }
     65            } );
     66        },
     67
     68        /**
     69         *
     70         * @param {wp.customize.Value} setting
     71         * @returns {boolean} Whether the setting was bound.
     72         */
     73        bindListener : function( setting ) {
     74            var matches, themeLocation;
     75
     76            matches = setting.id.match( /^nav_menu\[(-?\d+)]$/ );
     77            if ( matches ) {
     78                setting.navMenuId = parseInt( matches[1], 10 );
     79                setting.bind( this.onChangeNavMenuSetting );
     80                return true;
     81            }
     82
     83            matches = setting.id.match( /^nav_menu_item\[(-?\d+)]$/ );
     84            if ( matches ) {
     85                setting.navMenuItemId = parseInt( matches[1], 10 );
     86                setting.bind( this.onChangeNavMenuItemSetting );
     87                return true;
     88            }
     89
     90            matches = setting.id.match( /^nav_menu_locations\[(.+?)]/ );
     91            if ( matches ) {
     92                themeLocation = matches[1];
     93                setting.bind( _.bind( function() {
     94                    this.refreshMenuLocation( themeLocation );
     95                }, this ) );
     96                return true;
     97            }
     98
     99            return false;
     100        },
     101
     102        /**
     103         * Handle changing of a nav_menu setting.
     104         *
     105         * @this {wp.customize.Setting}
     106         */
     107        onChangeNavMenuSetting : function() {
     108            var setting = this;
     109            if ( ! setting.navMenuId ) {
     110                throw new Error( 'Expected navMenuId property to be set.' );
     111            }
     112            api.MenusCustomizerPreview.refreshMenu( setting.navMenuId );
     113        },
     114
     115        /**
     116         * Handle changing of a nav_menu_item setting.
     117         *
     118         * @this {wp.customize.Setting}
     119         * @param {object} to
     120         * @param {object} from
     121         */
     122        onChangeNavMenuItemSetting : function( to, from ) {
     123            if ( from && from.nav_menu_term_id && ( ! to || from.nav_menu_term_id !== to.nav_menu_term_id ) ) {
     124                api.MenusCustomizerPreview.refreshMenu( from.nav_menu_term_id );
     125            }
     126            if ( to && to.nav_menu_term_id ) {
     127                api.MenusCustomizerPreview.refreshMenu( to.nav_menu_term_id );
     128            }
     129        },
     130
     131        /**
     132         * Update a given menu rendered in the preview.
     133         *
     134         * @param {int} menuId
     135         */
     136        refreshMenu : function( menuId ) {
     137            var assignedLocations = [];
     138
     139            api.each(function( setting, id ) {
     140                var matches = id.match( /^nav_menu_locations\[(.+?)]/ );
     141                if ( matches && menuId === setting() ) {
     142                    assignedLocations.push( matches[1] );
     143                }
     144            });
     145
     146            _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
     147                if ( menuId === navMenuArgs.menu || -1 !== _.indexOf( assignedLocations, navMenuArgs.theme_location ) ) {
     148                    this.refreshMenuInstanceDebounced( instanceNumber );
     149                }
     150            }, this );
     151        },
     152
     153        /**
     154         * Refresh the menu(s) associated with a given nav menu location.
     155         *
     156         * @param {string} location
     157         */
     158        refreshMenuLocation : function( location ) {
     159            var foundInstance = false;
     160            _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
     161                if ( location === navMenuArgs.theme_location ) {
     162                    this.refreshMenuInstanceDebounced( instanceNumber );
     163                    foundInstance = true;
     164                }
     165            }, this );
     166            if ( ! foundInstance ) {
     167                api.preview.send( 'refresh' );
     168            }
     169        },
     170
     171        /**
     172         * Update a specific instance of a given menu on the page.
     173         *
     174         * @param {int} instanceNumber
     175         */
     176        refreshMenuInstance : function( instanceNumber ) {
     177            var data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
     178
     179            if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) {
     180                throw new Error( 'unknown_instance_number' );
     181            }
     182            instance = settings.navMenuInstanceArgs[ instanceNumber ];
     183
     184            containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber );
     185            container = $( '.' + containerInstanceClassName );
     186
     187            if ( _.isNumber( instance.menu ) ) {
     188                menuId = instance.menu;
     189            } else if ( instance.theme_location && api.has( 'nav_menu_locations[' + instance.theme_location + ']' ) ) {
     190                menuId = api( 'nav_menu_locations[' + instance.theme_location + ']' ).get();
     191            }
     192
     193            if ( ! menuId || ! instance.can_partial_refresh || 0 === container.length ) {
     194                api.preview.send( 'refresh' );
     195                return;
     196            }
     197            menuId = parseInt( menuId, 10 );
     198
     199            data = {
     200                nonce: settings.previewCustomizeNonce, // for Customize Preview
     201                wp_customize: 'on'
     202            };
     203            if ( ! settings.theme.active ) {
     204                data.theme = settings.theme.stylesheet;
     205            }
     206            data[ settings.renderQueryVar ] = '1';
     207
     208            // Gather settings to send in partial refresh request.
     209            customized = {};
     210            api.each( function( setting, id ) {
     211                var value = setting.get(), shouldSend = false;
     212                // @todo Core should propagate the dirty state into the Preview as well so we can use that here.
     213
     214                // Send setting if it is a nav_menu_locations[] setting.
     215                shouldSend = shouldSend || /^nav_menu_locations\[/.test( id );
     216
     217                // Send setting if it is the setting for this menu.
     218                shouldSend = shouldSend || id === 'nav_menu[' + String( menuId ) + ']';
     219
     220                // Send setting if it is one that is associated with this menu, or it is deleted.
     221                shouldSend = shouldSend || ( /^nav_menu_item\[/.test( id ) && ( false === value || menuId === value.nav_menu_term_id ) );
     222
     223                if ( shouldSend ) {
     224                    customized[ id ] = value;
     225                }
     226            } );
     227            data.customized = JSON.stringify( customized );
     228            data[ settings.renderNoncePostKey ] = settings.renderNonceValue;
     229
     230            wpNavArgs = $.extend( {}, instance );
     231            data.wp_nav_menu_args_hash = wpNavArgs.args_hash;
     232            delete wpNavArgs.args_hash;
     233            data.wp_nav_menu_args = JSON.stringify( wpNavArgs );
     234
     235            container.addClass( 'customize-partial-refreshing' );
     236
     237            request = wp.ajax.send( null, {
     238                data: data,
     239                url: settings.requestUri
     240            } );
     241            request.done( function( data ) {
     242                // If the menu is now not visible, refresh since the page layout may have changed.
     243                if ( false === data ) {
     244                    api.preview.send( 'refresh' );
     245                    return;
     246                }
     247
     248                var eventParam, previousContainer = container;
     249                container = $( data );
     250                container.addClass( containerInstanceClassName );
     251                container.addClass( 'partial-refreshable-nav-menu customize-partial-refreshing' );
     252                previousContainer.replaceWith( container );
     253                eventParam = {
     254                    instanceNumber: instanceNumber,
     255                    wpNavArgs: wpNavArgs,
     256                    oldContainer: previousContainer,
     257                    newContainer: container
     258                };
     259                container.removeClass( 'customize-partial-refreshing' );
     260                $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
     261            } );
     262        },
     263
     264        refreshMenuInstanceDebounced : function( instanceNumber ) {
     265            if ( currentRefreshDebounced[ instanceNumber ] ) {
     266                clearTimeout( currentRefreshDebounced[ instanceNumber ] );
     267            }
     268            currentRefreshDebounced[ instanceNumber ] = setTimeout(
     269                _.bind( function() {
     270                    this.refreshMenuInstance( instanceNumber );
     271                }, this ),
     272                refreshDebounceDelay
     273            );
     274        }
     275    };
    21276
    22277    api.bind( 'preview-ready', function() {
    23278        api.preview.bind( 'active', function() {
    24             self.init();
     279            api.MenusCustomizerPreview.init();
    25280        } );
    26281    } );
    27282
    28     /**
    29      * Bootstrap functionality.
    30      */
    31     self.init = function() {
    32         var self = this, initializedSettings = {};
    33 
    34         settings = _.extend( {}, defaultSettings );
    35         if ( 'undefined' !== typeof _wpCustomizePreviewNavMenusExports ) {
    36             _.extend( settings, _wpCustomizePreviewNavMenusExports );
    37         }
    38 
    39         api.each( function( setting, id ) {
    40             setting.id = id;
    41             initializedSettings[ setting.id ] = true;
    42             self.bindListener( setting );
    43         } );
    44 
    45         api.preview.bind( 'setting', function( args ) {
    46             var id, value, setting;
    47             args = args.slice();
    48             id = args.shift();
    49             value = args.shift();
    50 
    51             setting = api( id );
    52             if ( ! setting ) {
    53                 // Currently customize-preview.js is not creating settings for dynamically-created settings in the pane, so we have to do it.
    54                 setting = api.create( id, value ); // @todo This should be in core
    55             }
    56             if ( ! setting.id ) {
    57                 // Currently customize-preview.js doesn't set the id property for each setting, like customize-controls.js does.
    58                 setting.id = id;
    59             }
    60 
    61             if ( ! initializedSettings[ setting.id ] ) {
    62                 initializedSettings[ setting.id ] = true;
    63                 if ( self.bindListener( setting ) ) {
    64                     setting.callbacks.fireWith( setting, [ setting(), null ] );
    65                 }
    66             }
    67         } );
    68     };
    69 
    70     /**
    71      *
    72      * @param {wp.customize.Value} setting
    73      * @returns {boolean} Whether the setting was bound.
    74      */
    75     self.bindListener = function( setting ) {
    76         var matches, themeLocation;
    77 
    78         matches = setting.id.match( /^nav_menu\[(-?\d+)]$/ );
    79         if ( matches ) {
    80             setting.navMenuId = parseInt( matches[1], 10 );
    81             setting.bind( self.onChangeNavMenuSetting );
    82             return true;
    83         }
    84 
    85         matches = setting.id.match( /^nav_menu_item\[(-?\d+)]$/ );
    86         if ( matches ) {
    87             setting.navMenuItemId = parseInt( matches[1], 10 );
    88             setting.bind( self.onChangeNavMenuItemSetting );
    89             return true;
    90         }
    91 
    92         matches = setting.id.match( /^nav_menu_locations\[(.+?)]/ );
    93         if ( matches ) {
    94             themeLocation = matches[1];
    95             setting.bind( function() {
    96                 self.refreshMenuLocation( themeLocation );
    97             } );
    98             return true;
    99         }
    100 
    101         return false;
    102     };
    103 
    104     /**
    105      * Handle changing of a nav_menu setting.
    106      *
    107      * @this {wp.customize.Setting}
    108      */
    109     self.onChangeNavMenuSetting = function() {
    110         var setting = this;
    111         if ( ! setting.navMenuId ) {
    112             throw new Error( 'Expected navMenuId property to be set.' );
    113         }
    114         self.refreshMenu( setting.navMenuId );
    115     };
    116 
    117     /**
    118      * Handle changing of a nav_menu_item setting.
    119      *
    120      * @this {wp.customize.Setting}
    121      * @param {object} to
    122      * @param {object} from
    123      */
    124     self.onChangeNavMenuItemSetting = function( to, from ) {
    125         if ( from && from.nav_menu_term_id && ( ! to || from.nav_menu_term_id !== to.nav_menu_term_id ) ) {
    126             self.refreshMenu( from.nav_menu_term_id );
    127         }
    128         if ( to && to.nav_menu_term_id ) {
    129             self.refreshMenu( to.nav_menu_term_id );
    130         }
    131     };
    132 
    133     /**
    134      * Update a given menu rendered in the preview.
    135      *
    136      * @param {int} menuId
    137      */
    138     self.refreshMenu = function( menuId ) {
    139         var assignedLocations = [];
    140 
    141         api.each(function( setting, id ) {
    142             var matches = id.match( /^nav_menu_locations\[(.+?)]/ );
    143             if ( matches && menuId === setting() ) {
    144                 assignedLocations.push( matches[1] );
    145             }
    146         });
    147 
    148         _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
    149             if ( menuId === navMenuArgs.menu || -1 !== _.indexOf( assignedLocations, navMenuArgs.theme_location ) ) {
    150                 this.refreshMenuInstanceDebounced( instanceNumber );
    151             }
    152         }, this );
    153     };
    154 
    155     /**
    156      * Refresh the menu(s) associated with a given nav menu location.
    157      *
    158      * @param {string} location
    159      */
    160     self.refreshMenuLocation = function( location ) {
    161         var foundInstance = false;
    162         _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) {
    163             if ( location === navMenuArgs.theme_location ) {
    164                 this.refreshMenuInstanceDebounced( instanceNumber );
    165                 foundInstance = true;
    166             }
    167         }, this );
    168         if ( ! foundInstance ) {
    169             api.preview.send( 'refresh' );
    170         }
    171     };
    172 
    173     /**
    174      * Update a specific instance of a given menu on the page.
    175      *
    176      * @param {int} instanceNumber
    177      */
    178     self.refreshMenuInstance = function( instanceNumber ) {
    179         var self = this, data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
    180 
    181         if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) {
    182             throw new Error( 'unknown_instance_number' );
    183         }
    184         instance = settings.navMenuInstanceArgs[ instanceNumber ];
    185 
    186         containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber );
    187         container = $( '.' + containerInstanceClassName );
    188 
    189         if ( _.isNumber( instance.menu ) ) {
    190             menuId = instance.menu;
    191         } else if ( instance.theme_location && api.has( 'nav_menu_locations[' + instance.theme_location + ']' ) ) {
    192             menuId = api( 'nav_menu_locations[' + instance.theme_location + ']' ).get();
    193         }
    194 
    195         if ( ! menuId || ! instance.can_partial_refresh || 0 === container.length ) {
    196             api.preview.send( 'refresh' );
    197             return;
    198         }
    199         menuId = parseInt( menuId, 10 );
    200 
    201         data = {
    202             nonce: settings.previewCustomizeNonce, // for Customize Preview
    203             wp_customize: 'on'
    204         };
    205         if ( ! settings.theme.active ) {
    206             data.theme = settings.theme.stylesheet;
    207         }
    208         data[ settings.renderQueryVar ] = '1';
    209 
    210         // Gather settings to send in partial refresh request.
    211         customized = {};
    212         api.each( function( setting, id ) {
    213             var value = setting.get(), shouldSend = false;
    214             // @todo Core should propagate the dirty state into the Preview as well so we can use that here.
    215 
    216             // Send setting if it is a nav_menu_locations[] setting.
    217             shouldSend = shouldSend || /^nav_menu_locations\[/.test( id );
    218 
    219             // Send setting if it is the setting for this menu.
    220             shouldSend = shouldSend || id === 'nav_menu[' + String( menuId ) + ']';
    221 
    222             // Send setting if it is one that is associated with this menu, or it is deleted.
    223             shouldSend = shouldSend || ( /^nav_menu_item\[/.test( id ) && ( false === value || menuId === value.nav_menu_term_id ) );
    224 
    225             if ( shouldSend ) {
    226                 customized[ id ] = value;
    227             }
    228         } );
    229         data.customized = JSON.stringify( customized );
    230         data[ settings.renderNoncePostKey ] = settings.renderNonceValue;
    231 
    232         wpNavArgs = $.extend( {}, instance );
    233         data.wp_nav_menu_args_hash = wpNavArgs.args_hash;
    234         delete wpNavArgs.args_hash;
    235         data.wp_nav_menu_args = JSON.stringify( wpNavArgs );
    236 
    237         container.addClass( 'customize-partial-refreshing' );
    238 
    239         request = wp.ajax.send( null, {
    240             data: data,
    241             url: settings.requestUri
    242         } );
    243         request.done( function( data ) {
    244             // If the menu is now not visible, refresh since the page layout may have changed.
    245             if ( false === data ) {
    246                 api.preview.send( 'refresh' );
    247                 return;
    248             }
    249 
    250             var eventParam, previousContainer = container;
    251             container = $( data );
    252             container.addClass( containerInstanceClassName );
    253             container.addClass( 'partial-refreshable-nav-menu customize-partial-refreshing' );
    254             previousContainer.replaceWith( container );
    255             eventParam = {
    256                 instanceNumber: instanceNumber,
    257                 wpNavArgs: wpNavArgs,
    258                 oldContainer: previousContainer,
    259                 newContainer: container
    260             };
    261             container.removeClass( 'customize-partial-refreshing' );
    262             $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] );
    263         } );
    264     };
    265 
    266     self.refreshMenuInstanceDebounced = function( instanceNumber ) {
    267         if ( currentRefreshDebounced[ instanceNumber ] ) {
    268             clearTimeout( currentRefreshDebounced[ instanceNumber ] );
    269         }
    270         currentRefreshDebounced[ instanceNumber ] = setTimeout(
    271             function() {
    272                 self.refreshMenuInstance( instanceNumber );
    273             },
    274             refreshDebounceDelay
    275         );
    276     };
    277 
    278     return self;
    279 
    280 }( jQuery, wp.customize ) );
     283}( jQuery, _, wp ) );
Note: See TracChangeset for help on using the changeset viewer.