]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-admin/js/customize-nav-menus.js
WordPress 4.5
[autoinstalls/wordpress.git] / wp-admin / js / customize-nav-menus.js
index 9db1664b009c763bd6ebd3fcae61a832a9d4c404..7f0925336b694b7f35743c598cdc232029ef8e97 100644 (file)
 
        // Link settings.
        api.Menus.data = {
-               nonce: '',
                itemTypes: [],
                l10n: {},
-               menuItemTransport: 'postMessage',
+               settingTransport: 'refresh',
                phpIntMax: 0,
                defaultSettingValues: {
                        nav_menu: {},
                        nav_menu_item: {}
-               }
+               },
+               locationSlugMappedToName: {}
        };
        if ( 'undefined' !== typeof _wpCustomizeNavMenusSettings ) {
                $.extend( api.Menus.data, _wpCustomizeNavMenusSettings );
 
                        // Close the panel if the URL in the preview changes
                        api.previewer.bind( 'url', this.close );
+
+                       self.delegateEvents();
                },
 
                // Search input change handler.
                                        .prop( 'tabIndex', -1 )
                                        .removeClass( 'is-visible' );
                        }
-                       
+
                        this.searchTerm = event.target.value;
                        this.pages.search = 1;
                        this.doSearch( 1 );
                        $section.addClass( 'loading' );
                        self.loading = true;
                        params = {
-                               'customize-menus-nonce': api.Menus.data.nonce,
+                               'customize-menus-nonce': api.settings.nonce['customize-menus'],
                                'wp_customize': 'on',
                                'search': self.searchTerm,
                                'page': page
                        availableMenuItemContainer.find( '.accordion-section-title' ).addClass( 'loading' );
                        self.loading = true;
                        params = {
-                               'customize-menus-nonce': api.Menus.data.nonce,
+                               'customize-menus-nonce': api.settings.nonce['customize-menus'],
                                'wp_customize': 'on',
                                'type': type,
                                'object': object,
                        });
                },
 
-               saveManageColumnsState: function() {
-                       var hidden = this.hidden();
-                       $.post( wp.ajax.settings.url, {
-                               action: 'hidden-columns',
-                               hidden: hidden,
+               saveManageColumnsState: _.debounce( function() {
+                       var panel = this;
+                       if ( panel._updateHiddenColumnsRequest ) {
+                               panel._updateHiddenColumnsRequest.abort();
+                       }
+
+                       panel._updateHiddenColumnsRequest = wp.ajax.post( 'hidden-columns', {
+                               hidden: panel.hidden(),
                                screenoptionnonce: $( '#screenoptionnonce' ).val(),
                                page: 'nav-menus'
-                       });
-               },
+                       } );
+                       panel._updateHiddenColumnsRequest.always( function() {
+                               panel._updateHiddenColumnsRequest = null;
+                       } );
+               }, 2000 ),
 
                checked: function( column ) {
                        this.container.addClass( 'field-' + column + '-active' );
                },
 
                hidden: function() {
-                       this.hidden = function() {
-                               return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
-                                       var id = this.id;
-                                       return id.substring( id, id.length - 5 );
-                               }).get().join( ',' );
-                       };
+                       return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
+                               var id = this.id;
+                               return id.substring( 0, id.length - 5 );
+                       }).get().join( ',' );
                }
        } );
 
                /**
                 * @param {array} themeLocations
                 */
-               updateAssignedLocationsInSectionTitle: function( themeLocations ) {
+               updateAssignedLocationsInSectionTitle: function( themeLocationSlugs ) {
                        var section = this,
                                $title;
 
                        $title = section.container.find( '.accordion-section-title:first' );
                        $title.find( '.menu-in-location' ).remove();
-                       _.each( themeLocations, function( themeLocation ) {
-                               var $label = $( '<span class="menu-in-location"></span>' );
-                               $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', themeLocation ) );
+                       _.each( themeLocationSlugs, function( themeLocationSlug ) {
+                               var $label, locationName;
+                               $label = $( '<span class="menu-in-location"></span>' );
+                               locationName = api.Menus.data.locationSlugMappedToName[ themeLocationSlug ];
+                               $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', locationName ) );
                                $title.append( $label );
                        });
 
-                       section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocations.length );
+                       section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocationSlugs.length );
 
                },
 
 
                /**
                 * Expand the menu item form control.
+                *
+                * @since 4.5.0 Added params.completeCallback.
+                *
+                * @param {Object}   [params] - Optional params.
+                * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
                 */
-               expandForm: function() {
-                       this.toggleForm( true );
+               expandForm: function( params ) {
+                       this.toggleForm( true, params );
                },
 
                /**
                 * Collapse the menu item form control.
+                *
+                * @since 4.5.0 Added params.completeCallback.
+                *
+                * @param {Object}   [params] - Optional params.
+                * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
                 */
-               collapseForm: function() {
-                       this.toggleForm( false );
+               collapseForm: function( params ) {
+                       this.toggleForm( false, params );
                },
 
                /**
                 * Expand or collapse the menu item control.
                 *
-                * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
+                * @since 4.5.0 Added params.completeCallback.
+                *
+                * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
+                * @param {Object}   [params] - Optional params.
+                * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
                 */
-               toggleForm: function( showOrHide ) {
+               toggleForm: function( showOrHide, params ) {
                        var self = this, $menuitem, $inside, complete;
 
                        $menuitem = this.container;
 
                        // Already expanded or collapsed.
                        if ( $inside.is( ':visible' ) === showOrHide ) {
+                               if ( params && params.completeCallback ) {
+                                       params.completeCallback();
+                               }
                                return;
                        }
 
                                                .removeClass( 'menu-item-edit-inactive' )
                                                .addClass( 'menu-item-edit-active' );
                                        self.container.trigger( 'expanded' );
+
+                                       if ( params && params.completeCallback ) {
+                                               params.completeCallback();
+                                       }
                                };
 
                                $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
                                                .addClass( 'menu-item-edit-inactive' )
                                                .removeClass( 'menu-item-edit-active' );
                                        self.container.trigger( 'collapsed' );
+
+                                       if ( params && params.completeCallback ) {
+                                               params.completeCallback();
+                                       }
                                };
 
                                self.container.trigger( 'collapse' );
                /**
                 * Expand the containing menu section, expand the form, and focus on
                 * the first input in the control.
+                *
+                * @since 4.5.0 Added params.completeCallback.
+                *
+                * @param {Object}   [params] - Params object.
+                * @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
                 */
-               focus: function() {
-                       var control = this, focusable;
+               focus: function( params ) {
+                       params = params || {};
+                       var control = this, originalCompleteCallback = params.completeCallback;
+
                        control.expandControlSection();
-                       control.expandForm();
-                       // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
-                       focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
-                       focusable.first().focus();
+
+                       params.completeCallback = function() {
+                               var focusable;
+
+                               // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
+                               focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
+                               focusable.first().focus();
+
+                               if ( originalCompleteCallback ) {
+                                       originalCompleteCallback();
+                               }
+                       };
+
+                       control.expandForm( params );
                },
 
                /**
                        customizeId = 'nav_menu_item[' + String( placeholderId ) + ']';
                        settingArgs = {
                                type: 'nav_menu_item',
-                               transport: 'postMessage',
+                               transport: api.Menus.data.settingTransport,
                                previewer: api.previewer
                        };
                        setting = api.create( customizeId, customizeId, {}, settingArgs );
                        // Register the menu control setting.
                        api.create( customizeId, customizeId, {}, {
                                type: 'nav_menu',
-                               transport: 'postMessage',
+                               transport: api.Menus.data.settingTransport,
                                previewer: api.previewer
                        } );
                        api( customizeId ).set( $.extend(
                        }
                } );
 
-               api.previewer.bind( 'refresh', function() {
-                       api.previewer.refresh();
-               });
+               // Open and focus menu control.
+               api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
        } );
 
        /**
                                newCustomizeId = 'nav_menu[' + String( update.term_id ) + ']';
                                newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
                                        type: 'nav_menu',
-                                       transport: 'postMessage',
+                                       transport: api.Menus.data.settingTransport,
                                        previewer: api.previewer
                                } );
 
                                newCustomizeId = 'nav_menu_item[' + String( update.post_id ) + ']';
                                newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
                                        type: 'nav_menu_item',
-                                       transport: 'postMessage',
+                                       transport: api.Menus.data.settingTransport,
                                        previewer: api.previewer
                                } );