/** * WordPress Administration Navigation Menu * Interface JS functions * * @version 2.0.0 * * @package WordPress * @subpackage Administration * @output wp-admin/js/nav-menu.js */ /* global menus, postboxes, columns, isRtl, ajaxurl, wpNavMenu */ (function($) { var api; /** * Contains all the functions to handle WordPress navigation menus administration. * * @namespace wpNavMenu */ api = window.wpNavMenu = { options : { menuItemDepthPerLevel : 30, // Do not use directly. Use depthToPx and pxToDepth instead. globalMaxDepth: 11, sortableItems: '> *', targetTolerance: 0 }, menuList : undefined, // Set in init. targetList : undefined, // Set in init. menusChanged : false, isRTL: !! ( 'undefined' != typeof isRtl && isRtl ), negateIfRTL: ( 'undefined' != typeof isRtl && isRtl ) ? -1 : 1, lastSearch: '', // Functions that run on init. init : function() { api.menuList = $('#menu-to-edit'); api.targetList = api.menuList; this.jQueryExtensions(); this.attachMenuEditListeners(); this.attachBulkSelectButtonListeners(); this.attachMenuCheckBoxListeners(); this.attachMenuItemDeleteButton(); this.attachPendingMenuItemsListForDeletion(); this.attachQuickSearchListeners(); this.attachThemeLocationsListeners(); this.attachMenuSaveSubmitListeners(); this.attachTabsPanelListeners(); this.attachUnsavedChangesListener(); if ( api.menuList.length ) this.initSortables(); if ( menus.oneThemeLocationNoMenus ) $( '#posttype-page' ).addSelectedToMenu( api.addMenuItemToBottom ); this.initManageLocations(); this.initAccessibility(); this.initToggles(); this.initPreviewing(); }, jQueryExtensions : function() { // jQuery extensions. $.fn.extend({ menuItemDepth : function() { var margin = api.isRTL ? this.eq(0).css('margin-right') : this.eq(0).css('margin-left'); return api.pxToDepth( margin && -1 != margin.indexOf('px') ? margin.slice(0, -2) : 0 ); }, updateDepthClass : function(current, prev) { return this.each(function(){ var t = $(this); prev = prev || t.menuItemDepth(); $(this).removeClass('menu-item-depth-'+ prev ) .addClass('menu-item-depth-'+ current ); }); }, shiftDepthClass : function(change) { return this.each(function(){ var t = $(this), depth = t.menuItemDepth(), newDepth = depth + change; t.removeClass( 'menu-item-depth-'+ depth ) .addClass( 'menu-item-depth-'+ ( newDepth ) ); if ( 0 === newDepth ) { t.find( '.is-submenu' ).hide(); } }); }, childMenuItems : function() { var result = $(); this.each(function(){ var t = $(this), depth = t.menuItemDepth(), next = t.next( '.menu-item' ); while( next.length && next.menuItemDepth() > depth ) { result = result.add( next ); next = next.next( '.menu-item' ); } }); return result; }, shiftHorizontally : function( dir ) { return this.each(function(){ var t = $(this), depth = t.menuItemDepth(), newDepth = depth + dir; // Change .menu-item-depth-n class. t.moveHorizontally( newDepth, depth ); }); }, moveHorizontally : function( newDepth, depth ) { return this.each(function(){ var t = $(this), children = t.childMenuItems(), diff = newDepth - depth, subItemText = t.find('.is-submenu'); // Change .menu-item-depth-n class. t.updateDepthClass( newDepth, depth ).updateParentMenuItemDBId(); // If it has children, move those too. if ( children ) { children.each(function() { var t = $(this), thisDepth = t.menuItemDepth(), newDepth = thisDepth + diff; t.updateDepthClass(newDepth, thisDepth).updateParentMenuItemDBId(); }); } // Show "Sub item" helper text. if (0 === newDepth) subItemText.hide(); else subItemText.show(); }); }, updateParentMenuItemDBId : function() { return this.each(function(){ var item = $(this), input = item.find( '.menu-item-data-parent-id' ), depth = parseInt( item.menuItemDepth(), 10 ), parentDepth = depth - 1, parent = item.prevAll( '.menu-item-depth-' + parentDepth ).first(); if ( 0 === depth ) { // Item is on the top level, has no parent. input.val(0); } else { // Find the parent item, and retrieve its object id. input.val( parent.find( '.menu-item-data-db-id' ).val() ); } }); }, hideAdvancedMenuItemFields : function() { return this.each(function(){ var that = $(this); $('.hide-column-tog').not(':checked').each(function(){ that.find('.field-' + $(this).val() ).addClass('hidden-field'); }); }); }, /** * Adds selected menu items to the menu. * * @ignore * * @param jQuery metabox The metabox jQuery object. */ addSelectedToMenu : function(processMethod) { if ( 0 === $('#menu-to-edit').length ) { return false; } return this.each(function() { var t = $(this), menuItems = {}, checkboxes = ( menus.oneThemeLocationNoMenus && 0 === t.find( '.tabs-panel-active .categorychecklist li input:checked' ).length ) ? t.find( '#page-all li input[type="checkbox"]' ) : t.find( '.tabs-panel-active .categorychecklist li input:checked' ), re = /menu-item\[([^\]]*)/; processMethod = processMethod || api.addMenuItemToBottom; // If no items are checked, bail. if ( !checkboxes.length ) return false; // Show the Ajax spinner. t.find( '.button-controls .spinner' ).addClass( 'is-active' ); // Retrieve menu item data. $(checkboxes).each(function(){ var t = $(this), listItemDBIDMatch = re.exec( t.attr('name') ), listItemDBID = 'undefined' == typeof listItemDBIDMatch[1] ? 0 : parseInt(listItemDBIDMatch[1], 10); if ( this.className && -1 != this.className.indexOf('add-to-top') ) processMethod = api.addMenuItemToTop; menuItems[listItemDBID] = t.closest('li').getItemData( 'add-menu-item', listItemDBID ); }); // Add the items. api.addItemToMenu(menuItems, processMethod, function(){ // Deselect the items and hide the Ajax spinner. checkboxes.prop( 'checked', false ); t.find( '.button-controls .select-all' ).prop( 'checked', false ); t.find( '.button-controls .spinner' ).removeClass( 'is-active' ); }); }); }, getItemData : function( itemType, id ) { itemType = itemType || 'menu-item'; var itemData = {}, i, fields = [ 'menu-item-db-id', 'menu-item-object-id', 'menu-item-object', 'menu-item-parent-id', 'menu-item-position', 'menu-item-type', 'menu-item-title', 'menu-item-url', 'menu-item-description', 'menu-item-attr-title', 'menu-item-target', 'menu-item-classes', 'menu-item-xfn' ]; if( !id && itemType == 'menu-item' ) { id = this.find('.menu-item-data-db-id').val(); } if( !id ) return itemData; this.find('input').each(function() { var field; i = fields.length; while ( i-- ) { if( itemType == 'menu-item' ) field = fields[i] + '[' + id + ']'; else if( itemType == 'add-menu-item' ) field = 'menu-item[' + id + '][' + fields[i] + ']'; if ( this.name && field == this.name ) { itemData[fields[i]] = this.value; } } }); return itemData; }, setItemData : function( itemData, itemType, id ) { // Can take a type, such as 'menu-item', or an id. itemType = itemType || 'menu-item'; if( !id && itemType == 'menu-item' ) { id = $('.menu-item-data-db-id', this).val(); } if( !id ) return this; this.find('input').each(function() { var t = $(this), field; $.each( itemData, function( attr, val ) { if( itemType == 'menu-item' ) field = attr + '[' + id + ']'; else if( itemType == 'add-menu-item' ) field = 'menu-item[' + id + '][' + attr + ']'; if ( field == t.attr('name') ) { t.val( val ); } }); }); return this; } }); }, countMenuItems : function( depth ) { return $( '.menu-item-depth-' + depth ).length; }, moveMenuItem : function( $this, dir ) { var items, newItemPosition, newDepth, menuItems = $( '#menu-to-edit li' ), menuItemsCount = menuItems.length, thisItem = $this.parents( 'li.menu-item' ), thisItemChildren = thisItem.childMenuItems(), thisItemData = thisItem.getItemData(), thisItemDepth = parseInt( thisItem.menuItemDepth(), 10 ), thisItemPosition = parseInt( thisItem.index(), 10 ), nextItem = thisItem.next(), nextItemChildren = nextItem.childMenuItems(), nextItemDepth = parseInt( nextItem.menuItemDepth(), 10 ) + 1, prevItem = thisItem.prev(), prevItemDepth = parseInt( prevItem.menuItemDepth(), 10 ), prevItemId = prevItem.getItemData()['menu-item-db-id'], a11ySpeech = menus[ 'moved' + dir.charAt(0).toUpperCase() + dir.slice(1) ]; switch ( dir ) { case 'up': newItemPosition = thisItemPosition - 1; // Already at top. if ( 0 === thisItemPosition ) break; // If a sub item is moved to top, shift it to 0 depth. if ( 0 === newItemPosition && 0 !== thisItemDepth ) thisItem.moveHorizontally( 0, thisItemDepth ); // If prev item is sub item, shift to match depth. if ( 0 !== prevItemDepth ) thisItem.moveHorizontally( prevItemDepth, thisItemDepth ); // Does this item have sub items? if ( thisItemChildren ) { items = thisItem.add( thisItemChildren ); // Move the entire block. items.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); } else { thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); } break; case 'down': // Does this item have sub items? if ( thisItemChildren ) { items = thisItem.add( thisItemChildren ), nextItem = menuItems.eq( items.length + thisItemPosition ), nextItemChildren = 0 !== nextItem.childMenuItems().length; if ( nextItemChildren ) { newDepth = parseInt( nextItem.menuItemDepth(), 10 ) + 1; thisItem.moveHorizontally( newDepth, thisItemDepth ); } // Have we reached the bottom? if ( menuItemsCount === thisItemPosition + items.length ) break; items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId(); } else { // If next item has sub items, shift depth. if ( 0 !== nextItemChildren.length ) thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); // Have we reached the bottom? if ( menuItemsCount === thisItemPosition + 1 ) break; thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId(); } break; case 'top': // Already at top. if ( 0 === thisItemPosition ) break; // Does this item have sub items? if ( thisItemChildren ) { items = thisItem.add( thisItemChildren ); // Move the entire block. items.detach().insertBefore( menuItems.eq( 0 ) ).updateParentMenuItemDBId(); } else { thisItem.detach().insertBefore( menuItems.eq( 0 ) ).updateParentMenuItemDBId(); } break; case 'left': // As far left as possible. if ( 0 === thisItemDepth ) break; thisItem.shiftHorizontally( -1 ); break; case 'right': // Can't be sub item at top. if ( 0 === thisItemPosition ) break; // Already sub item of prevItem. if ( thisItemData['menu-item-parent-id'] === prevItemId ) break; thisItem.shiftHorizontally( 1 ); break; } $this.trigger( 'focus' ); api.registerChange(); api.refreshKeyboardAccessibility(); api.refreshAdvancedAccessibility(); if ( a11ySpeech ) { wp.a11y.speak( a11ySpeech ); } }, initAccessibility : function() { var menu = $( '#menu-to-edit' ); api.refreshKeyboardAccessibility(); api.refreshAdvancedAccessibility(); // Refresh the accessibility when the user comes close to the item in any way. menu.on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility' , '.menu-item' , function(){ api.refreshAdvancedAccessibilityOfItem( $( this ).find( 'a.item-edit' ) ); } ); // We have to update on click as well because we might hover first, change the item, and then click. menu.on( 'click', 'a.item-edit', function() { api.refreshAdvancedAccessibilityOfItem( $( this ) ); } ); // Links for moving items. menu.on( 'click', '.menus-move', function () { var $this = $( this ), dir = $this.data( 'dir' ); if ( 'undefined' !== typeof dir ) { api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), dir ); } }); }, /** * refreshAdvancedAccessibilityOfItem( [itemToRefresh] ) * * Refreshes advanced accessibility buttons for one menu item. * Shows or hides buttons based on the location of the menu item. * * @param {Object} itemToRefresh The menu item that might need its advanced accessibility buttons refreshed */ refreshAdvancedAccessibilityOfItem : function( itemToRefresh ) { // Only refresh accessibility when necessary. if ( true !== $( itemToRefresh ).data( 'needs_accessibility_refresh' ) ) { return; } var thisLink, thisLinkText, primaryItems, itemPosition, title, parentItem, parentItemId, parentItemName, subItems, totalSubItems, $this = $( itemToRefresh ), menuItem = $this.closest( 'li.menu-item' ).first(), depth = menuItem.menuItemDepth(), isPrimaryMenuItem = ( 0 === depth ), itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(), menuItemType = $this.closest( '.menu-item-handle' ).find( '.item-controls' ).find( '.item-type' ).text(), position = parseInt( menuItem.index(), 10 ), prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ), prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(), prevItemNameRight = menuItem.prevAll('.menu-item-depth-' + depth).first().find( '.menu-item-title' ).text(), totalMenuItems = $('#menu-to-edit li').length, hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length; menuItem.find( '.field-move' ).toggle( totalMenuItems > 1 ); // Where can they move this menu item? if ( 0 !== position ) { thisLink = menuItem.find( '.menus-move-up' ); thisLink.attr( 'aria-label', menus.moveUp ).css( 'display', 'inline' ); } if ( 0 !== position && isPrimaryMenuItem ) { thisLink = menuItem.find( '.menus-move-top' ); thisLink.attr( 'aria-label', menus.moveToTop ).css( 'display', 'inline' ); } if ( position + 1 !== totalMenuItems && 0 !== position ) { thisLink = menuItem.find( '.menus-move-down' ); thisLink.attr( 'aria-label', menus.moveDown ).css( 'display', 'inline' ); } if ( 0 === position && 0 !== hasSameDepthSibling ) { thisLink = menuItem.find( '.menus-move-down' ); thisLink.attr( 'aria-label', menus.moveDown ).css( 'display', 'inline' ); } if ( ! isPrimaryMenuItem ) { thisLink = menuItem.find( '.menus-move-left' ), thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft ); thisLink.attr( 'aria-label', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).text( thisLinkText ).css( 'display', 'inline' ); } if ( 0 !== position ) { if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) { thisLink = menuItem.find( '.menus-move-right' ), thisLinkText = menus.under.replace( '%s', prevItemNameRight ); thisLink.attr( 'aria-label', menus.moveUnder.replace( '%s', prevItemNameRight ) ).text( thisLinkText ).css( 'display', 'inline' ); } } if ( isPrimaryMenuItem ) { primaryItems = $( '.menu-item-depth-0' ), itemPosition = primaryItems.index( menuItem ) + 1, totalMenuItems = primaryItems.length, // String together help text for primary menu items. title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalMenuItems ); } else { parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(), parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(), parentItemName = parentItem.find( '.menu-item-title' ).text(), subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ), totalSubItems = subItems.length, itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1; // String together help text for sub menu items. if ( depth < 2 ) { title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName ); } else { title = menus.subMenuMoreDepthFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName ).replace( '%6$d', depth ); } } $this.attr( 'aria-label', title ); // Mark this item's accessibility as refreshed. $this.data( 'needs_accessibility_refresh', false ); }, /** * refreshAdvancedAccessibility * * Hides all advanced accessibility buttons and marks them for refreshing. */ refreshAdvancedAccessibility : function() { // Hide all the move buttons by default. $( '.menu-item-settings .field-move .menus-move' ).hide(); // Mark all menu items as unprocessed. $( 'a.item-edit' ).data( 'needs_accessibility_refresh', true ); // All open items have to be refreshed or they will show no links. $( '.menu-item-edit-active a.item-edit' ).each( function() { api.refreshAdvancedAccessibilityOfItem( this ); } ); }, refreshKeyboardAccessibility : function() { $( 'a.item-edit' ).off( 'focus' ).on( 'focus', function(){ $(this).off( 'keydown' ).on( 'keydown', function(e){ var arrows, $this = $( this ), thisItem = $this.parents( 'li.menu-item' ), thisItemData = thisItem.getItemData(); // Bail if it's not an arrow key. if ( 37 != e.which && 38 != e.which && 39 != e.which && 40 != e.which ) return; // Avoid multiple keydown events. $this.off('keydown'); // Bail if there is only one menu item. if ( 1 === $('#menu-to-edit li').length ) return; // If RTL, swap left/right arrows. arrows = { '38': 'up', '40': 'down', '37': 'left', '39': 'right' }; if ( $('body').hasClass('rtl') ) arrows = { '38' : 'up', '40' : 'down', '39' : 'left', '37' : 'right' }; switch ( arrows[e.which] ) { case 'up': api.moveMenuItem( $this, 'up' ); break; case 'down': api.moveMenuItem( $this, 'down' ); break; case 'left': api.moveMenuItem( $this, 'left' ); break; case 'right': api.moveMenuItem( $this, 'right' ); break; } // Put focus back on same menu item. $( '#edit-' + thisItemData['menu-item-db-id'] ).trigger( 'focus' ); return false; }); }); }, initPreviewing : function() { // Update the item handle title when the navigation label is changed. $( '#menu-to-edit' ).on( 'change input', '.edit-menu-item-title', function(e) { var input = $( e.currentTarget ), title, titleEl; title = input.val(); titleEl = input.closest( '.menu-item' ).find( '.menu-item-title' ); // Don't update to empty title. if ( title ) { titleEl.text( title ).removeClass( 'no-title' ); } else { titleEl.text( wp.i18n._x( '(no label)', 'missing menu item navigation label' ) ).addClass( 'no-title' ); } } ); }, initToggles : function() { // Init postboxes. postboxes.add_postbox_toggles('nav-menus'); // Adjust columns functions for menus UI. columns.useCheckboxesForHidden(); columns.checked = function(field) { $('.field-' + field).removeClass('hidden-field'); }; columns.unchecked = function(field) { $('.field-' + field).addClass('hidden-field'); }; // Hide fields. api.menuList.hideAdvancedMenuItemFields(); $('.hide-postbox-tog').on( 'click', function () { var hidden = $( '.accordion-container li.accordion-section' ).filter(':hidden').map(function() { return this.id; }).get().join(','); $.post(ajaxurl, { action: 'closed-postboxes', hidden: hidden, closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(), page: 'nav-menus' }); }); }, initSortables : function() { var currentDepth = 0, originalDepth, minDepth, maxDepth, prev, next, prevBottom, nextThreshold, helperHeight, transport, menuEdge = api.menuList.offset().left, body = $('body'), maxChildDepth, menuMaxDepth = initialMenuMaxDepth(); if( 0 !== $( '#menu-to-edit li' ).length ) $( '.drag-instructions' ).show(); // Use the right edge if RTL. menuEdge += api.isRTL ? api.menuList.width() : 0; api.menuList.sortable({ handle: '.menu-item-handle', placeholder: 'sortable-placeholder', items: api.options.sortableItems, start: function(e, ui) { var height, width, parent, children, tempHolder; // Handle placement for RTL orientation. if ( api.isRTL ) ui.item[0].style.right = 'auto'; transport = ui.item.children('.menu-item-transport'); // Set depths. currentDepth must be set before children are located. originalDepth = ui.item.menuItemDepth(); updateCurrentDepth(ui, originalDepth); // Attach child elements to parent. // Skip the placeholder. parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item; children = parent.childMenuItems(); transport.append( children ); // Update the height of the placeholder to match the moving item. height = transport.outerHeight(); // If there are children, account for distance between top of children and parent. height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0; height += ui.helper.outerHeight(); helperHeight = height; height -= 2; // Subtract 2 for borders. ui.placeholder.height(height); // Update the width of the placeholder to match the moving item. maxChildDepth = originalDepth; children.each(function(){ var depth = $(this).menuItemDepth(); maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth; }); width = ui.helper.find('.menu-item-handle').outerWidth(); // Get original width. width += api.depthToPx(maxChildDepth - originalDepth); // Account for children. width -= 2; // Subtract 2 for borders. ui.placeholder.width(width); // Update the list of menu items. tempHolder = ui.placeholder.next( '.menu-item' ); tempHolder.css( 'margin-top', helperHeight + 'px' ); // Set the margin to absorb the placeholder. ui.placeholder.detach(); // Detach or jQuery UI will think the placeholder is a menu item. $(this).sortable( 'refresh' ); // The children aren't sortable. We should let jQuery UI know. ui.item.after( ui.placeholder ); // Reattach the placeholder. tempHolder.css('margin-top', 0); // Reset the margin. // Now that the element is complete, we can update... updateSharedVars(ui); }, stop: function(e, ui) { var children, subMenuTitle, depthChange = currentDepth - originalDepth; // Return child elements to the list. children = transport.children().insertAfter(ui.item); // Add "sub menu" description. subMenuTitle = ui.item.find( '.item-title .is-submenu' ); if ( 0 < currentDepth ) subMenuTitle.show(); else subMenuTitle.hide(); // Update depth classes. if ( 0 !== depthChange ) { ui.item.updateDepthClass( currentDepth ); children.shiftDepthClass( depthChange ); updateMenuMaxDepth( depthChange ); } // Register a change. api.registerChange(); // Update the item data. ui.item.updateParentMenuItemDBId(); // Address sortable's incorrectly-calculated top in Opera. ui.item[0].style.top = 0; // Handle drop placement for rtl orientation. if ( api.isRTL ) { ui.item[0].style.left = 'auto'; ui.item[0].style.right = 0; } api.refreshKeyboardAccessibility(); api.refreshAdvancedAccessibility(); api.refreshAdvancedAccessibilityOfItem( ui.item.find( 'a.item-edit' ) ); }, change: function(e, ui) { // Make sure the placeholder is inside the menu. // Otherwise fix it, or we're in trouble. if( ! ui.placeholder.parent().hasClass('menu') ) (prev.length) ? prev.after( ui.placeholder ) : api.menuList.prepend( ui.placeholder ); updateSharedVars(ui); }, sort: function(e, ui) { var offset = ui.helper.offset(), edge = api.isRTL ? offset.left + ui.helper.width() : offset.left, depth = api.negateIfRTL * api.pxToDepth( edge - menuEdge ); /* * Check and correct if depth is not within range. * Also, if the dragged element is dragged upwards over an item, * shift the placeholder to a child position. */ if ( depth > maxDepth || offset.top < ( prevBottom - api.options.targetTolerance ) ) { depth = maxDepth; } else if ( depth < minDepth ) { depth = minDepth; } if( depth != currentDepth ) updateCurrentDepth(ui, depth); // If we overlap the next element, manually shift downwards. if( nextThreshold && offset.top + helperHeight > nextThreshold ) { next.after( ui.placeholder ); updateSharedVars( ui ); $( this ).sortable( 'refreshPositions' ); } } }); function updateSharedVars(ui) { var depth; prev = ui.placeholder.prev( '.menu-item' ); next = ui.placeholder.next( '.menu-item' ); // Make sure we don't select the moving item. if( prev[0] == ui.item[0] ) prev = prev.prev( '.menu-item' ); if( next[0] == ui.item[0] ) next = next.next( '.menu-item' ); prevBottom = (prev.length) ? prev.offset().top + prev.height() : 0; nextThreshold = (next.length) ? next.offset().top + next.height() / 3 : 0; minDepth = (next.length) ? next.menuItemDepth() : 0; if( prev.length ) maxDepth = ( (depth = prev.menuItemDepth() + 1) > api.options.globalMaxDepth ) ? api.options.globalMaxDepth : depth; else maxDepth = 0; } function updateCurrentDepth(ui, depth) { ui.placeholder.updateDepthClass( depth, currentDepth ); currentDepth = depth; } function initialMenuMaxDepth() { if( ! body[0].className ) return 0; var match = body[0].className.match(/menu-max-depth-(\d+)/); return match && match[1] ? parseInt( match[1], 10 ) : 0; } function updateMenuMaxDepth( depthChange ) { var depth, newDepth = menuMaxDepth; if ( depthChange === 0 ) { return; } else if ( depthChange > 0 ) { depth = maxChildDepth + depthChange; if( depth > menuMaxDepth ) newDepth = depth; } else if ( depthChange < 0 && maxChildDepth == menuMaxDepth ) { while( ! $('.menu-item-depth-' + newDepth, api.menuList).length && newDepth > 0 ) newDepth--; } // Update the depth class. body.removeClass( 'menu-max-depth-' + menuMaxDepth ).addClass( 'menu-max-depth-' + newDepth ); menuMaxDepth = newDepth; } }, initManageLocations : function () { $('#menu-locations-wrap form').on( 'submit', function(){ window.onbeforeunload = null; }); $('.menu-location-menus select').on('change', function () { var editLink = $(this).closest('tr').find('.locations-edit-menu-link'); if ($(this).find('option:selected').data('orig')) editLink.show(); else editLink.hide(); }); }, attachMenuEditListeners : function() { var that = this; $('#update-nav-menu').on('click', function(e) { if ( e.target && e.target.className ) { if ( -1 != e.target.className.indexOf('item-edit') ) { return that.eventOnClickEditLink(e.target); } else if ( -1 != e.target.className.indexOf('menu-save') ) { return that.eventOnClickMenuSave(e.target); } else if ( -1 != e.target.className.indexOf('menu-delete') ) { return that.eventOnClickMenuDelete(e.target); } else if ( -1 != e.target.className.indexOf('item-delete') ) { return that.eventOnClickMenuItemDelete(e.target); } else if ( -1 != e.target.className.indexOf('item-cancel') ) { return that.eventOnClickCancelLink(e.target); } } }); $( '#menu-name' ).on( 'input', _.debounce( function () { var menuName = $( document.getElementById( 'menu-name' ) ), menuNameVal = menuName.val(); if ( ! menuNameVal || ! menuNameVal.replace( /\s+/, '' ) ) { // Add warning for invalid menu name. menuName.parent().addClass( 'form-invalid' ); } else { // Remove warning for valid menu name. menuName.parent().removeClass( 'form-invalid' ); } }, 500 ) ); $('#add-custom-links input[type="text"]').on( 'keypress', function(e){ $('#customlinkdiv').removeClass('form-invalid'); if ( e.keyCode === 13 ) { e.preventDefault(); $( '#submit-customlinkdiv' ).trigger( 'click' ); } }); }, /** * Handle toggling bulk selection checkboxes for menu items. * * @since 5.8.0 */ attachBulkSelectButtonListeners : function() { var that = this; $( '.bulk-select-switcher' ).on( 'change', function() { if ( this.checked ) { $( '.bulk-select-switcher' ).prop( 'checked', true ); that.enableBulkSelection(); } else { $( '.bulk-select-switcher' ).prop( 'checked', false ); that.disableBulkSelection(); } }); }, /** * Enable bulk selection checkboxes for menu items. * * @since 5.8.0 */ enableBulkSelection : function() { var checkbox = $( '#menu-to-edit .menu-item-checkbox' ); $( '#menu-to-edit' ).addClass( 'bulk-selection' ); $( '#nav-menu-bulk-actions-top' ).addClass( 'bulk-selection' ); $( '#nav-menu-bulk-actions-bottom' ).addClass( 'bulk-selection' ); $.each( checkbox, function() { $(this).prop( 'disabled', false ); }); }, /** * Disable bulk selection checkboxes for menu items. * * @since 5.8.0 */ disableBulkSelection : function() { var checkbox = $( '#menu-to-edit .menu-item-checkbox' ); $( '#menu-to-edit' ).removeClass( 'bulk-selection' ); $( '#nav-menu-bulk-actions-top' ).removeClass( 'bulk-selection' ); $( '#nav-menu-bulk-actions-bottom' ).removeClass( 'bulk-selection' ); if ( $( '.menu-items-delete' ).is( '[aria-describedby="pending-menu-items-to-delete"]' ) ) { $( '.menu-items-delete' ).removeAttr( 'aria-describedby' ); } $.each( checkbox, function() { $(this).prop( 'disabled', true ).prop( 'checked', false ); }); $( '.menu-items-delete' ).addClass( 'disabled' ); $( '#pending-menu-items-to-delete ul' ).empty(); }, /** * Listen for state changes on bulk action checkboxes. * * @since 5.8.0 */ attachMenuCheckBoxListeners : function() { var that = this; $( '#menu-to-edit' ).on( 'change', '.menu-item-checkbox', function() { that.setRemoveSelectedButtonStatus(); }); }, /** * Create delete button to remove menu items from collection. * * @since 5.8.0 */ attachMenuItemDeleteButton : function() { var that = this; $( document ).on( 'click', '.menu-items-delete', function( e ) { var itemsPendingDeletion, itemsPendingDeletionList, deletionSpeech; e.preventDefault(); if ( ! $(this).hasClass( 'disabled' ) ) { $.each( $( '.menu-item-checkbox:checked' ), function( index, element ) { $( element ).parents( 'li' ).find( 'a.item-delete' ).trigger( 'click' ); }); $( '.menu-items-delete' ).addClass( 'disabled' ); $( '.bulk-select-switcher' ).prop( 'checked', false ); itemsPendingDeletion = ''; itemsPendingDeletionList = $( '#pending-menu-items-to-delete ul li' ); $.each( itemsPendingDeletionList, function( index, element ) { var itemName = $( element ).find( '.pending-menu-item-name' ).text(); var itemSpeech = menus.menuItemDeletion.replace( '%s', itemName ); itemsPendingDeletion += itemSpeech; if ( ( index + 1 ) < itemsPendingDeletionList.length ) { itemsPendingDeletion += ', '; } }); deletionSpeech = menus.itemsDeleted.replace( '%s', itemsPendingDeletion ); wp.a11y.speak( deletionSpeech, 'polite' ); that.disableBulkSelection(); } }); }, /** * List menu items awaiting deletion. * * @since 5.8.0 */ attachPendingMenuItemsListForDeletion : function() { $( '#post-body-content' ).on( 'change', '.menu-item-checkbox', function() { var menuItemName, menuItemType, menuItemID, listedMenuItem; if ( ! $( '.menu-items-delete' ).is( '[aria-describedby="pending-menu-items-to-delete"]' ) ) { $( '.menu-items-delete' ).attr( 'aria-describedby', 'pending-menu-items-to-delete' ); } menuItemName = $(this).next().text(); menuItemType = $(this).parent().next( '.item-controls' ).find( '.item-type' ).text(); menuItemID = $(this).attr( 'data-menu-item-id' ); listedMenuItem = $( '#pending-menu-items-to-delete ul' ).find( '[data-menu-item-id=' + menuItemID + ']' ); if ( listedMenuItem.length > 0 ) { listedMenuItem.remove(); } if ( this.checked === true ) { $( '#pending-menu-items-to-delete ul' ).append( '
' + wp.i18n.__( 'No results found.' ) + '