sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Menus: trigger an event when menu items are added or removed.

Browse Source 
Fire a `menu-item-added` event after a menu item is added to the DOM. Fire a `menu-removing-item` event before a menu item is removed from the DOM. Enables hooking into and responding to menu changes.

Props welcher, adamsilverstein.
Fixes #31218.


git-svn-id: https://develop.svn.wordpress.org/trunk@39928 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein 2017-01-20 16:14:23 +00:00
parent 83e7606f76
commit 3a449139db
3 changed files with 105 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/wp-admin/js/nav-menu.js
View File

@ -1003,21 +1003,33 @@ var wpNavMenu;
},
/**
* 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() {
@ -1243,9 +1255,16 @@ var wpNavMenu;
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

1
tests/qunit/index.html
View File

@ -66,6 +66,7 @@
<script src="wp-admin/js/customize-nav-menus.js"></script>
<script src="wp-admin/js/customize-widgets.js"></script>
<script src="wp-admin/js/word-count.js"></script>
<script src="wp-admin/js/nav-menu.js"></script>
<!-- Customizer templates for sections -->
<script type="text/html" id="tmpl-customize-section-default">

80
tests/qunit/wp-admin/js/nav-menu.js Normal file
View File

@ -0,0 +1,80 @@
/*global wpNavMenu */
( function( QUnit, $ ) {
QUnit.module( 'nav-menu' );
var assert,
eventsExpected = 3,
eventsFired = 0;
// Fail if we don't see the expected number of events triggered in 1500 ms.
setTimeout( function() {
assert.equal(
eventsFired,
eventsExpected,
eventsExpected + ' wpNavMenu events should fire.'
);
}, 1500 );
QUnit.test( 'Testing wpNavMenu event triggers.', function( assertPassed ) {
assert = assertPassed;
assert.expect( 3 );
var testString = '<div>Hello World</div>';
// Mock the internal function calls so the don't fail.
$.fn.hideAdvancedMenuItemFields = function() {
return {
'appendTo': function() { return true; },
'prependTo': function() { return true; }
};
};
$.fn.extend( {
'childMenuItems': function() { return $(); },
'shiftDepthClass': function() { return $(); }
} );
// Set up the events we should test.
var eventsToTest = [
{
'event': 'addMenuItemToBottom',
'data': testString,
'expect': $( testString ),
'shouldTrigger': 'menu-item-added'
},
{
'event': 'addMenuItemToTop',
'data': testString,
'expect': $( testString ),
'shouldTrigger': 'menu-item-added'
},
{
'event': 'removeMenuItem',
'data': $( testString ),
'expect': $( testString ),
'shouldTrigger': 'menu-removing-item'
}
];
// Test each of the events.
_.each( eventsToTest, function( theEvent ) {
var done = assert.async();
$( document ).on( theEvent.shouldTrigger, function( evt, passed ) {
assert.equal(
passed.html(),
theEvent.expect.html(),
'The ' + theEvent.event + ' should trigger ' + theEvent.shouldTrigger + '.'
);
eventsFired++;
done();
} );
wpNavMenu[ theEvent.event ]( theEvent.data );
$( document ).off( theEvent.shouldTrigger );
} );
} );
} )( window.QUnit, jQuery );