diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/js/nav-menu.js --- a/wp/wp-admin/js/nav-menu.js Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/js/nav-menu.js Mon Oct 14 17:39:30 2019 +0200 @@ -20,7 +20,9 @@ options : { menuItemDepthPerLevel : 30, // Do not use directly. Use depthToPx and pxToDepth instead. - globalMaxDepth : 11 + globalMaxDepth: 11, + sortableItems: '> *', + targetTolerance: 0 }, menuList : undefined, // Set in init. @@ -28,6 +30,7 @@ menusChanged : false, isRTL: !! ( 'undefined' != typeof isRtl && isRtl ), negateIfRTL: ( 'undefined' != typeof isRtl && isRtl ) ? -1 : 1, + lastSearch: '', // Functions that run on init. init : function() { @@ -38,9 +41,9 @@ this.attachMenuEditListeners(); - this.setupInputWithDefaultTitle(); this.attachQuickSearchListeners(); this.attachThemeLocationsListeners(); + this.attachMenuSaveSubmitListeners(); this.attachTabsPanelListeners(); @@ -79,18 +82,24 @@ shiftDepthClass : function(change) { return this.each(function(){ var t = $(this), - depth = t.menuItemDepth(); - $(this).removeClass('menu-item-depth-'+ depth ) - .addClass('menu-item-depth-'+ (depth + change) ); + 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(); + var t = $(this), depth = t.menuItemDepth(), next = t.next( '.menu-item' ); while( next.length && next.menuItemDepth() > depth ) { result = result.add( next ); - next = next.next(); + next = next.next( '.menu-item' ); } }); return result; @@ -177,7 +186,7 @@ return false; // Show the ajax spinner - t.find( '.spinner' ).addClass( 'is-active' ); + t.find( '.button-controls .spinner' ).addClass( 'is-active' ); // Retrieve menu item data $(checkboxes).each(function(){ @@ -194,7 +203,7 @@ api.addItemToMenu(menuItems, processMethod, function(){ // Deselect the items and hide the ajax spinner checkboxes.removeAttr('checked'); - t.find( '.spinner' ).removeClass( 'is-active' ); + t.find( '.button-controls .spinner' ).removeClass( 'is-active' ); }); }); }, @@ -388,23 +397,22 @@ // 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( '.item-edit' ) ); + 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', '.item-edit', function() { + menu.on( 'click', 'a.item-edit', function() { api.refreshAdvancedAccessibilityOfItem( $( this ) ); } ); // Links for moving items - menu.on( 'click', '.menus-move', function ( e ) { + 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 ); } - e.preventDefault(); }); }, @@ -437,40 +445,40 @@ totalMenuItems = $('#menu-to-edit li').length, hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length; - menuItem.find( '.field-move' ).toggle( totalMenuItems > 1 ); + menuItem.find( '.field-move' ).toggle( totalMenuItems > 1 ); // Where can they move this menu item? if ( 0 !== position ) { thisLink = menuItem.find( '.menus-move-up' ); - thisLink.prop( 'title', menus.moveUp ).css( 'display', 'inline' ); + thisLink.attr( 'aria-label', menus.moveUp ).css( 'display', 'inline' ); } if ( 0 !== position && isPrimaryMenuItem ) { thisLink = menuItem.find( '.menus-move-top' ); - thisLink.prop( 'title', menus.moveToTop ).css( 'display', 'inline' ); + thisLink.attr( 'aria-label', menus.moveToTop ).css( 'display', 'inline' ); } if ( position + 1 !== totalMenuItems && 0 !== position ) { thisLink = menuItem.find( '.menus-move-down' ); - thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' ); + thisLink.attr( 'aria-label', menus.moveDown ).css( 'display', 'inline' ); } if ( 0 === position && 0 !== hasSameDepthSibling ) { thisLink = menuItem.find( '.menus-move-down' ); - thisLink.prop( 'title', menus.moveDown ).css( 'display', 'inline' ); + thisLink.attr( 'aria-label', menus.moveDown ).css( 'display', 'inline' ); } if ( ! isPrimaryMenuItem ) { thisLink = menuItem.find( '.menus-move-left' ), thisLinkText = menus.outFrom.replace( '%s', prevItemNameLeft ); - thisLink.prop( 'title', menus.moveOutFrom.replace( '%s', prevItemNameLeft ) ).text( thisLinkText ).css( 'display', 'inline' ); + 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.prop( 'title', menus.moveUnder.replace( '%s', prevItemNameRight ) ).text( thisLinkText ).css( 'display', 'inline' ); + thisLink.attr( 'aria-label', menus.moveUnder.replace( '%s', prevItemNameRight ) ).text( thisLinkText ).css( 'display', 'inline' ); } } @@ -492,7 +500,7 @@ title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName ); } - $this.prop('title', title).html( title ); + $this.attr( 'aria-label', title ); // Mark this item's accessibility as refreshed $this.data( 'needs_accessibility_refresh', false ); @@ -505,20 +513,20 @@ */ refreshAdvancedAccessibility : function() { - // Hide all links by default - $( '.menu-item-settings .field-move a' ).hide(); + // Hide all the move buttons by default. + $( '.menu-item-settings .field-move .menus-move' ).hide(); // Mark all menu items as unprocessed - $( '.item-edit' ).data( 'needs_accessibility_refresh', true ); + $( '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 .item-edit' ).each( function() { + $( '.menu-item-edit-active a.item-edit' ).each( function() { api.refreshAdvancedAccessibilityOfItem( this ); } ); }, refreshKeyboardAccessibility : function() { - $( '.item-edit' ).off( 'focus' ).on( 'focus', function(){ + $( 'a.item-edit' ).off( 'focus' ).on( 'focus', function(){ $(this).off( 'keydown' ).on( 'keydown', function(e){ var arrows, @@ -620,6 +628,7 @@ api.menuList.sortable({ handle: '.menu-item-handle', placeholder: 'sortable-placeholder', + items: api.options.sortableItems, start: function(e, ui) { var height, width, parent, children, tempHolder; @@ -660,7 +669,7 @@ ui.placeholder.width(width); // Update the list of menu items. - tempHolder = ui.placeholder.next(); + 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 jQ UI know. @@ -719,11 +728,15 @@ 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 ) depth = maxDepth; - else if ( depth < minDepth ) depth = minDepth; + if ( depth > maxDepth || offset.top < ( prevBottom - api.options.targetTolerance ) ) { + depth = maxDepth; + } else if ( depth < minDepth ) { + depth = minDepth; + } if( depth != currentDepth ) updateCurrentDepth(ui, depth); @@ -740,12 +753,12 @@ function updateSharedVars(ui) { var depth; - prev = ui.placeholder.prev(); - next = ui.placeholder.next(); + 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(); - if( next[0] == ui.item[0] ) next = next.next(); + 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; @@ -817,6 +830,8 @@ } }); $('#add-custom-links input[type="text"]').keypress(function(e){ + $('#customlinkdiv').removeClass('form-invalid'); + if ( e.keyCode === 13 ) { e.preventDefault(); $( '#submit-customlinkdiv' ).click(); @@ -824,34 +839,15 @@ }); }, - /** - * An interface for managing default values for input elements - * that is both JS and accessibility-friendly. - * - * Input elements that add the class 'input-with-default-title' - * will have their values set to the provided HTML title when empty. - */ - setupInputWithDefaultTitle : function() { - var name = 'input-with-default-title'; - - $('.' + name).each( function(){ - var $t = $(this), title = $t.attr('title'), val = $t.val(); - $t.data( name, title ); - - if( '' === val ) $t.val( title ); - else if ( title == val ) return; - else $t.removeClass( name ); - }).focus( function(){ - var $t = $(this); - if( $t.val() == $t.data(name) ) - $t.val('').removeClass( name ); - }).blur( function(){ - var $t = $(this); - if( '' === $t.val() ) - $t.addClass( name ).val( $t.data(name) ); + attachMenuSaveSubmitListeners : function() { + /* + * When a navigation menu is saved, store a JSON representation of all form data + * in a single input to avoid PHP `max_input_vars` limitations. See #14134. + */ + $( '#update-nav-menu' ).submit( function() { + var navMenuData = $( '#update-nav-menu' ).serializeArray(); + $( '[name="nav-menu-data"]' ).val( JSON.stringify( navMenuData ) ); }); - - $( '.blank-slate .input-with-default-title' ).focus(); }, attachThemeLocationsListeners : function() { @@ -871,30 +867,56 @@ }, attachQuickSearchListeners : function() { - var searchTimer; + var searchTimer, + inputEvent; + + // Prevent form submission. + $( '#nav-menu-meta' ).on( 'submit', function( event ) { + event.preventDefault(); + }); - $('.quick-search').keypress(function(e){ - var t = $(this); + /* + * Use feature detection to determine whether inputs should use + * the `keyup` or `input` event. Input is preferred but lacks support + * in legacy browsers. See changeset 34078, see also ticket #26600#comment:59 + */ + if ( 'oninput' in document.createElement( 'input' ) ) { + inputEvent = 'input'; + } else { + inputEvent = 'keyup'; + } - if( 13 == e.which ) { - api.updateQuickSearchResults( t ); - return false; + $( '#nav-menu-meta' ).on( inputEvent, '.quick-search', function() { + var $this = $( this ); + + $this.attr( 'autocomplete', 'off' ); + + if ( searchTimer ) { + clearTimeout( searchTimer ); } - if( searchTimer ) clearTimeout(searchTimer); - - searchTimer = setTimeout(function(){ - api.updateQuickSearchResults( t ); - }, 400); - }).attr('autocomplete','off'); + searchTimer = setTimeout( function() { + api.updateQuickSearchResults( $this ); + }, 500 ); + }).on( 'blur', '.quick-search', function() { + api.lastSearch = ''; + }); }, updateQuickSearchResults : function(input) { var panel, params, - minSearchLength = 2, - q = input.val(); + minSearchLength = 2, + q = input.val(); - if( q.length < minSearchLength ) return; + /* + * Minimum characters for a search. Also avoid a new AJAX search when + * the pressed key (e.g. arrows) doesn't change the searched term. + */ + if ( q.length < minSearchLength || api.lastSearch == q ) { + return; + } + + api.lastSearch = q; panel = input.parents('.tabs-panel'); params = { @@ -919,8 +941,10 @@ processMethod = processMethod || api.addMenuItemToBottom; - if ( '' === url || 'http://' == url ) + if ( '' === url || 'http://' == url ) { + $('#customlinkdiv').addClass('form-invalid'); return false; + } // Show the ajax spinner $( '.customlinkdiv .spinner' ).addClass( 'is-active' ); @@ -978,21 +1002,33 @@ }, /** - * Process the add menu item request response into menu list item. + * Process the add menu item request response into menu list item. Appends to menu. * - * @param string menuMarkup The text server response of menu item markup. - * @param object req The request arguments. + * @param {string} menuMarkup The text server response of menu item markup. + * + * @fires document#menu-item-added Passes menuMarkup as a jQuery object. */ addMenuItemToBottom : function( menuMarkup ) { - $(menuMarkup).hideAdvancedMenuItemFields().appendTo( api.targetList ); + var $menuMarkup = $( menuMarkup ); + $menuMarkup.hideAdvancedMenuItemFields().appendTo( api.targetList ); api.refreshKeyboardAccessibility(); api.refreshAdvancedAccessibility(); + $( document ).trigger( 'menu-item-added', [ $menuMarkup ] ); }, + /** + * Process the add menu item request response into menu list item. Prepends to menu. + * + * @param {string} menuMarkup The text server response of menu item markup. + * + * @fires document#menu-item-added Passes menuMarkup as a jQuery object. + */ addMenuItemToTop : function( menuMarkup ) { - $(menuMarkup).hideAdvancedMenuItemFields().prependTo( api.targetList ); + var $menuMarkup = $( menuMarkup ); + $menuMarkup.hideAdvancedMenuItemFields().prependTo( api.targetList ); api.refreshKeyboardAccessibility(); api.refreshAdvancedAccessibility(); + $( document ).trigger( 'menu-item-added', [ $menuMarkup ] ); }, attachUnsavedChangesListener : function() { @@ -1038,6 +1074,13 @@ // select the search bar $('.quick-search', wrapper).focus(); + // Hide controls in the search tab if no items found. + if ( ! wrapper.find( '.tabs-panel-active .menu-item-title' ).length ) { + wrapper.addClass( 'has-no-menu-item' ); + } else { + wrapper.removeClass( 'has-no-menu-item' ); + } + e.preventDefault(); } else if ( target.hasClass('select-all') ) { selectAreaMatch = /#(.*)$/.exec(e.target.href); @@ -1057,34 +1100,38 @@ else if ( e.target.id && -1 != e.target.id.indexOf('submit-') ) $('#' + e.target.id.replace(/submit-/, '')).addSelectedToMenu( api.addMenuItemToBottom ); return false; - } else if ( target.hasClass('page-numbers') ) { - $.post( ajaxurl, e.target.href.replace(/.*\?/, '').replace(/action=([^&]*)/, '') + '&action=menu-get-metabox', - function( resp ) { - if ( -1 == resp.indexOf('replace-id') ) - return; + } + }); - var metaBoxData = $.parseJSON(resp), - toReplace = document.getElementById(metaBoxData['replace-id']), - placeholder = document.createElement('div'), - wrap = document.createElement('div'); + /* + * Delegate the `click` event and attach it just to the pagination + * links thus excluding the current page ``. See ticket #35577. + */ + $( '#nav-menu-meta' ).on( 'click', 'a.page-numbers', function() { + var $container = $( this ).closest( '.inside' ); - if ( ! metaBoxData.markup || ! toReplace ) - return; + $.post( ajaxurl, this.href.replace( /.*\?/, '' ).replace( /action=([^&]*)/, '' ) + '&action=menu-get-metabox', + function( resp ) { + var metaBoxData = $.parseJSON( resp ), + toReplace; - wrap.innerHTML = metaBoxData.markup ? metaBoxData.markup : ''; + if ( -1 === resp.indexOf( 'replace-id' ) ) { + return; + } - toReplace.parentNode.insertBefore( placeholder, toReplace ); - placeholder.parentNode.removeChild( toReplace ); - - placeholder.parentNode.insertBefore( wrap, placeholder ); + // Get the post type menu meta box to update. + toReplace = document.getElementById( metaBoxData['replace-id'] ); - placeholder.parentNode.removeChild( placeholder ); - + if ( ! metaBoxData.markup || ! toReplace ) { + return; } - ); - return false; - } + // Update the post type menu meta box with new content from the response. + $container.html( metaBoxData.markup ); + } + ); + + return false; }); }, @@ -1170,11 +1217,13 @@ form = document.getElementById('nav-menu-meta'), pattern = /menu-item[(\[^]\]*/, $items = $('
').html(resp).find('li'), + wrapper = panel.closest( '.accordion-section-content' ), $item; if( ! $items.length ) { $('.categorychecklist', panel).html( '

  • ' + navMenuL10n.noResultsFound + '

    • ' ); $( '.spinner', panel ).removeClass( 'is-active' ); + wrapper.addClass( 'has-no-menu-item' ); return; } @@ -1202,11 +1251,19 @@ $('.categorychecklist', panel).html( $items ); $( '.spinner', panel ).removeClass( 'is-active' ); + wrapper.removeClass( 'has-no-menu-item' ); }, + /** + * Remove a menu item. + * @param {object} el The element to be removed as a jQuery object. + * + * @fires document#menu-removing-item Passes the element to be removed. + */ removeMenuItem : function(el) { var children = el.childMenuItems(); + $( document ).trigger( 'menu-removing-item', [ el ] ); el.addClass('deleting').animate({ opacity : 0, height: 0