X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/7f1521bf193b382565eb753043c161f4cb3fcda7..refs/tags/wordpress-4.5.3:/wp-admin/js/nav-menu.js diff --git a/wp-admin/js/nav-menu.js b/wp-admin/js/nav-menu.js index 80578a75..5a685a31 100644 --- a/wp-admin/js/nav-menu.js +++ b/wp-admin/js/nav-menu.js @@ -20,7 +20,9 @@ var wpNavMenu; 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 @@ var wpNavMenu; 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 @@ var wpNavMenu; this.attachMenuEditListeners(); - this.setupInputWithDefaultTitle(); this.attachQuickSearchListeners(); this.attachThemeLocationsListeners(); + this.attachMenuSaveSubmitListeners(); this.attachTabsPanelListeners(); @@ -87,10 +90,10 @@ var wpNavMenu; 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 +180,7 @@ var wpNavMenu; 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 +197,7 @@ var wpNavMenu; 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,11 +391,11 @@ var wpNavMenu; // 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 ) ); } ); @@ -437,40 +440,40 @@ var wpNavMenu; 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 +495,8 @@ var wpNavMenu; title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName ); } - $this.prop('title', title).html( title ); + // @todo Consider to update just the `aria-label` attribute. + $this.attr( 'aria-label', title ).text( title ); // Mark this item's accessibility as refreshed $this.data( 'needs_accessibility_refresh', false ); @@ -509,16 +513,16 @@ var wpNavMenu; $( '.menu-item-settings .field-move a' ).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 +624,7 @@ var wpNavMenu; 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 +665,7 @@ var wpNavMenu; 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 +724,15 @@ var wpNavMenu; 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 +749,12 @@ var wpNavMenu; 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 +826,8 @@ var wpNavMenu; } }); $('#add-custom-links input[type="text"]').keypress(function(e){ + $('#customlinkdiv').removeClass('form-invalid'); + if ( e.keyCode === 13 ) { e.preventDefault(); $( '#submit-customlinkdiv' ).click(); @@ -824,34 +835,15 @@ var wpNavMenu; }); }, - /** - * 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 +863,52 @@ var wpNavMenu; }, attachQuickSearchListeners : function() { - var searchTimer; + var searchTimer, + inputEvent; - $('.quick-search').keypress(function(e){ - var t = $(this); + // Prevent form submission. + $( '#nav-menu-meta' ).on( 'submit', function( event ) { + event.preventDefault(); + }); - if( 13 == e.which ) { - api.updateQuickSearchResults( t ); - return false; - } + /* + * 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'; + } + + $( '.quick-search' ).on( inputEvent, function() { + var t = $(this); if( searchTimer ) clearTimeout(searchTimer); searchTimer = setTimeout(function(){ api.updateQuickSearchResults( t ); - }, 400); + }, 500 ); + }).on( 'blur', function() { + api.lastSearch = ''; }).attr('autocomplete','off'); }, updateQuickSearchResults : function(input) { var panel, params, - minSearchLength = 2, - q = input.val(); + minSearchLength = 2, + q = input.val(); + + /* + * 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; + } - if( q.length < minSearchLength ) return; + api.lastSearch = q; panel = input.parents('.tabs-panel'); params = { @@ -919,8 +933,10 @@ var wpNavMenu; 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' );