Changeset 39928

Timestamp:

01/20/2017 04:14:23 PM (8 years ago)

Author:

adamsilverstein

Message:

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

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.

Location:

trunk

Files:

• src/wp-admin/js/nav-menu.js (modified) (2 diffs)
• tests/qunit/index.html (modified) (1 diff)
• tests/qunit/wp-admin/js/nav-menu.js (added)

trunk/src/wp-admin/js/nav-menu.js

@@ -1004 +1004 @@
 
         /**
-         * 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 ] );
         },
 
@@ -1244 +1256 @@
         },
 
+        /**
+         * 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,

trunk/tests/qunit/index.html

@@ -67 +67 @@
         <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 -->