home/wwgoat/public_html/blog/wp-admin/js/customize-nav-menus.js 0000644 00000333311 14720663270 0020663 0 ustar 00 /**
* @output wp-admin/js/customize-nav-menus.js
*/
/* global menus, _wpCustomizeNavMenusSettings, wpNavMenu, console */
( function( api, wp, $ ) {
'use strict';
/**
* Set up wpNavMenu for drag and drop.
*/
wpNavMenu.originalInit = wpNavMenu.init;
wpNavMenu.options.menuItemDepthPerLevel = 20;
wpNavMenu.options.sortableItems = '> .customize-control-nav_menu_item';
wpNavMenu.options.targetTolerance = 10;
wpNavMenu.init = function() {
this.jQueryExtensions();
};
/**
* @namespace wp.customize.Menus
*/
api.Menus = api.Menus || {};
// Link settings.
api.Menus.data = {
itemTypes: [],
l10n: {},
settingTransport: 'refresh',
phpIntMax: 0,
defaultSettingValues: {
nav_menu: {},
nav_menu_item: {}
},
locationSlugMappedToName: {}
};
if ( 'undefined' !== typeof _wpCustomizeNavMenusSettings ) {
$.extend( api.Menus.data, _wpCustomizeNavMenusSettings );
}
/**
* Newly-created Nav Menus and Nav Menu Items have negative integer IDs which
* serve as placeholders until Save & Publish happens.
*
* @alias wp.customize.Menus.generatePlaceholderAutoIncrementId
*
* @return {number}
*/
api.Menus.generatePlaceholderAutoIncrementId = function() {
return -Math.ceil( api.Menus.data.phpIntMax * Math.random() );
};
/**
* wp.customize.Menus.AvailableItemModel
*
* A single available menu item model. See PHP's WP_Customize_Nav_Menu_Item_Setting class.
*
* @class wp.customize.Menus.AvailableItemModel
* @augments Backbone.Model
*/
api.Menus.AvailableItemModel = Backbone.Model.extend( $.extend(
{
id: null // This is only used by Backbone.
},
api.Menus.data.defaultSettingValues.nav_menu_item
) );
/**
* wp.customize.Menus.AvailableItemCollection
*
* Collection for available menu item models.
*
* @class wp.customize.Menus.AvailableItemCollection
* @augments Backbone.Collection
*/
api.Menus.AvailableItemCollection = Backbone.Collection.extend(/** @lends wp.customize.Menus.AvailableItemCollection.prototype */{
model: api.Menus.AvailableItemModel,
sort_key: 'order',
comparator: function( item ) {
return -item.get( this.sort_key );
},
sortByField: function( fieldName ) {
this.sort_key = fieldName;
this.sort();
}
});
api.Menus.availableMenuItems = new api.Menus.AvailableItemCollection( api.Menus.data.availableMenuItems );
/**
* Insert a new `auto-draft` post.
*
* @since 4.7.0
* @alias wp.customize.Menus.insertAutoDraftPost
*
* @param {Object} params - Parameters for the draft post to create.
* @param {string} params.post_type - Post type to add.
* @param {string} params.post_title - Post title to use.
* @return {jQuery.promise} Promise resolved with the added post.
*/
api.Menus.insertAutoDraftPost = function insertAutoDraftPost( params ) {
var request, deferred = $.Deferred();
request = wp.ajax.post( 'customize-nav-menus-insert-auto-draft', {
'customize-menus-nonce': api.settings.nonce['customize-menus'],
'wp_customize': 'on',
'customize_changeset_uuid': api.settings.changeset.uuid,
'params': params
} );
request.done( function( response ) {
if ( response.post_id ) {
api( 'nav_menus_created_posts' ).set(
api( 'nav_menus_created_posts' ).get().concat( [ response.post_id ] )
);
if ( 'page' === params.post_type ) {
// Activate static front page controls as this could be the first page created.
if ( api.section.has( 'static_front_page' ) ) {
api.section( 'static_front_page' ).activate();
}
// Add new page to dropdown-pages controls.
api.control.each( function( control ) {
var select;
if ( 'dropdown-pages' === control.params.type ) {
select = control.container.find( 'select[name^="_customize-dropdown-pages-"]' );
select.append( new Option( params.post_title, response.post_id ) );
}
} );
}
deferred.resolve( response );
}
} );
request.fail( function( response ) {
var error = response || '';
if ( 'undefined' !== typeof response.message ) {
error = response.message;
}
console.error( error );
deferred.rejectWith( error );
} );
return deferred.promise();
};
api.Menus.AvailableMenuItemsPanelView = wp.Backbone.View.extend(/** @lends wp.customize.Menus.AvailableMenuItemsPanelView.prototype */{
el: '#available-menu-items',
events: {
'input #menu-items-search': 'debounceSearch',
'focus .menu-item-tpl': 'focus',
'click .menu-item-tpl': '_submit',
'click #custom-menu-item-submit': '_submitLink',
'keypress #custom-menu-item-name': '_submitLink',
'click .new-content-item .add-content': '_submitNew',
'keypress .create-item-input': '_submitNew',
'keydown': 'keyboardAccessible'
},
// Cache current selected menu item.
selected: null,
// Cache menu control that opened the panel.
currentMenuControl: null,
debounceSearch: null,
$search: null,
$clearResults: null,
searchTerm: '',
rendered: false,
pages: {},
sectionContent: '',
loading: false,
addingNew: false,
/**
* wp.customize.Menus.AvailableMenuItemsPanelView
*
* View class for the available menu items panel.
*
* @constructs wp.customize.Menus.AvailableMenuItemsPanelView
* @augments wp.Backbone.View
*/
initialize: function() {
var self = this;
if ( ! api.panel.has( 'nav_menus' ) ) {
return;
}
this.$search = $( '#menu-items-search' );
this.$clearResults = this.$el.find( '.clear-results' );
this.sectionContent = this.$el.find( '.available-menu-items-list' );
this.debounceSearch = _.debounce( self.search, 500 );
_.bindAll( this, 'close' );
/*
* If the available menu items panel is open and the customize controls
* are interacted with (other than an item being deleted), then close
* the available menu items panel. Also close on back button click.
*/
$( '#customize-controls, .customize-section-back' ).on( 'click keydown', function( e ) {
var isDeleteBtn = $( e.target ).is( '.item-delete, .item-delete *' ),
isAddNewBtn = $( e.target ).is( '.add-new-menu-item, .add-new-menu-item *' );
if ( $( 'body' ).hasClass( 'adding-menu-items' ) && ! isDeleteBtn && ! isAddNewBtn ) {
self.close();
}
} );
// Clear the search results and trigger an `input` event to fire a new search.
this.$clearResults.on( 'click', function() {
self.$search.val( '' ).trigger( 'focus' ).trigger( 'input' );
} );
this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {
$( this ).removeClass( 'invalid' );
});
// Load available items if it looks like we'll need them.
api.panel( 'nav_menus' ).container.on( 'expanded', function() {
if ( ! self.rendered ) {
self.initList();
self.rendered = true;
}
});
// Load more items.
this.sectionContent.on( 'scroll', function() {
var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ),
visibleHeight = self.$el.find( '.accordion-section.open' ).height();
if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) {
var type = $( this ).data( 'type' ),
object = $( this ).data( 'object' );
if ( 'search' === type ) {
if ( self.searchTerm ) {
self.doSearch( self.pages.search );
}
} else {
self.loadItems( [
{ type: type, object: object }
] );
}
}
});
// Close the panel if the URL in the preview changes.
api.previewer.bind( 'url', this.close );
self.delegateEvents();
},
// Search input change handler.
search: function( event ) {
var $searchSection = $( '#available-menu-items-search' ),
$otherSections = $( '#available-menu-items .accordion-section' ).not( $searchSection );
if ( ! event ) {
return;
}
if ( this.searchTerm === event.target.value ) {
return;
}
if ( '' !== event.target.value && ! $searchSection.hasClass( 'open' ) ) {
$otherSections.fadeOut( 100 );
$searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
$searchSection.addClass( 'open' );
this.$clearResults.addClass( 'is-visible' );
} else if ( '' === event.target.value ) {
$searchSection.removeClass( 'open' );
$otherSections.show();
this.$clearResults.removeClass( 'is-visible' );
}
this.searchTerm = event.target.value;
this.pages.search = 1;
this.doSearch( 1 );
},
// Get search results.
doSearch: function( page ) {
var self = this, params,
$section = $( '#available-menu-items-search' ),
$content = $section.find( '.accordion-section-content' ),
itemTemplate = wp.template( 'available-menu-item' );
if ( self.currentRequest ) {
self.currentRequest.abort();
}
if ( page < 0 ) {
return;
} else if ( page > 1 ) {
$section.addClass( 'loading-more' );
$content.attr( 'aria-busy', 'true' );
wp.a11y.speak( api.Menus.data.l10n.itemsLoadingMore );
} else if ( '' === self.searchTerm ) {
$content.html( '' );
wp.a11y.speak( '' );
return;
}
$section.addClass( 'loading' );
self.loading = true;
params = api.previewer.query( { excludeCustomizedSaved: true } );
_.extend( params, {
'customize-menus-nonce': api.settings.nonce['customize-menus'],
'wp_customize': 'on',
'search': self.searchTerm,
'page': page
} );
self.currentRequest = wp.ajax.post( 'search-available-menu-items-customizer', params );
self.currentRequest.done(function( data ) {
var items;
if ( 1 === page ) {
// Clear previous results as it's a new search.
$content.empty();
}
$section.removeClass( 'loading loading-more' );
$content.attr( 'aria-busy', 'false' );
$section.addClass( 'open' );
self.loading = false;
items = new api.Menus.AvailableItemCollection( data.items );
self.collection.add( items.models );
items.each( function( menuItem ) {
$content.append( itemTemplate( menuItem.attributes ) );
} );
if ( 20 > items.length ) {
self.pages.search = -1; // Up to 20 posts and 20 terms in results, if <20, no more results for either.
} else {
self.pages.search = self.pages.search + 1;
}
if ( items && page > 1 ) {
wp.a11y.speak( api.Menus.data.l10n.itemsFoundMore.replace( '%d', items.length ) );
} else if ( items && page === 1 ) {
wp.a11y.speak( api.Menus.data.l10n.itemsFound.replace( '%d', items.length ) );
}
});
self.currentRequest.fail(function( data ) {
// data.message may be undefined, for example when typing slow and the request is aborted.
if ( data.message ) {
$content.empty().append( $( '' ).text( data.message ) );
wp.a11y.speak( data.message );
}
self.pages.search = -1;
});
self.currentRequest.always(function() {
$section.removeClass( 'loading loading-more' );
$content.attr( 'aria-busy', 'false' );
self.loading = false;
self.currentRequest = null;
});
},
// Render the individual items.
initList: function() {
var self = this;
// Render the template for each item by type.
_.each( api.Menus.data.itemTypes, function( itemType ) {
self.pages[ itemType.type + ':' + itemType.object ] = 0;
} );
self.loadItems( api.Menus.data.itemTypes );
},
/**
* Load available nav menu items.
*
* @since 4.3.0
* @since 4.7.0 Changed function signature to take list of item types instead of single type/object.
* @access private
*
* @param {Array.