Refactor submenu JS to remove jquery dep and move to wagtail-client (#5254)

client/src/includes/initSubmenus.js

@@ -0,0 +1,50 @@
+/**
+ * Initialises the Submenus within the primary Wagtail menu (excluding the Explorer menu)
+ */
+
+const initSubmenus = () => {
+  const primaryNavContainer = document.querySelector('[data-nav-primary]');
+
+  if (!primaryNavContainer) {
+    return;
+  }
+
+  const subMenuTriggers = document.querySelectorAll(
+    '[data-nav-primary-submenu-trigger]'
+  );
+  const activeClass = 'submenu-active';
+
+  [...subMenuTriggers].forEach(subMenuTrigger => {
+    subMenuTrigger.addEventListener('click', clickEvent => {
+      const submenuContainer = subMenuTrigger.parentNode;
+
+      primaryNavContainer.classList.remove(activeClass);
+      [...subMenuTriggers].forEach(sm => sm.classList.remove(activeClass));
+
+      primaryNavContainer.classList.toggle(activeClass);
+      submenuContainer.classList.toggle(activeClass);
+
+      document.addEventListener('mousedown', e => {
+        if (
+          !submenuContainer.contains(e.target) &&
+          subMenuTrigger !== e.target
+        ) {
+          primaryNavContainer.classList.remove(activeClass);
+          submenuContainer.classList.remove(activeClass);
+        }
+      });
+
+      document.addEventListener('keydown', e => {
+        // IE11 uses "Esc" instead of "Escape"
+        if (e.key === 'Escape' || e.key === 'Esc') {
+          primaryNavContainer.classList.remove(activeClass);
+          submenuContainer.classList.remove(activeClass);
+        }
+      });
+
+      clickEvent.preventDefault();
+    });
+  });
+};
+
+export { initSubmenus };

client/src/index.js

@@ -9,11 +9,9 @@ import PublicationStatus from './components/PublicationStatus/PublicationStatus'
 import LoadingSpinner from './components/LoadingSpinner/LoadingSpinner';
 import Portal from './components/Portal/Portal';
 import Transition from './components/Transition/Transition';
-import Explorer, {
-  ExplorerToggle,
-  initExplorer,
-} from './components/Explorer';
+import Explorer, { ExplorerToggle, initExplorer } from './components/Explorer';
 import { initFocusOutline } from './utils/focus';
+import { initSubmenus } from './includes/initSubmenus';
 
 export {
   Button,
@@ -26,4 +24,5 @@ export {
   ExplorerToggle,
   initExplorer,
   initFocusOutline,
+  initSubmenus,
 };

wagtail/admin/menu.py

@@ -1,7 +1,6 @@
 from django.forms import Media, MediaDefiningClass
 from django.forms.utils import flatatt
 from django.template.loader import render_to_string
-from django.templatetags.static import static
 from django.utils.safestring import mark_safe
 from django.utils.text import slugify
 
@@ -101,10 +100,6 @@ class SubmenuMenuItem(MenuItem):
         self.menu = menu
         super().__init__(label, '#', **kwargs)
 
-    @property
-    def media(self):
-        return Media(js=[static('wagtailadmin/js/submenu.js')]) + self.menu.media
-
     def is_shown(self, request):
         # show the submenu if one or more of its children is shown
         return bool(self.menu.menu_items_for_request(request))

wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { initExplorer, Icon, Portal, initFocusOutline } from 'wagtail-client';
+import {
+  initExplorer,
+  Icon,
+  Portal,
+  initFocusOutline,
+  initSubmenus
+} from 'wagtail-client';
 
 if (process.env.NODE_ENV === 'development') {
   // Run react-axe in development only, so it does not affect performance
@@ -28,4 +34,5 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   initFocusOutline();
+  initSubmenus();
 });

wagtail/admin/static_src/wagtailadmin/js/submenu.js

@@ -1,21 +0,0 @@
-$(function() {
-    $('.nav-main .submenu-trigger').on('click', function() {
-        if ($(this).closest('li').find('.nav-submenu').length) {
-
-            // Close other active submenus first, if any
-            if ($('.nav-wrapper.submenu-active').length && !$(this).closest('li').hasClass('submenu-active')) {
-                $('.nav-main .submenu-active, .nav-wrapper').removeClass('submenu-active');
-            }
-
-            $(this).closest('li').toggleClass('submenu-active');
-            $('.nav-wrapper').toggleClass('submenu-active');
-            return false;
-        }
-    });
-
-    $(document).on('keydown click', function(e) {
-        if ($('.nav-wrapper.submenu-active').length && (e.keyCode == 27 || !e.keyCode)) {
-            $('.nav-main .submenu-active, .nav-wrapper').removeClass('submenu-active');
-        }
-    });
-});

wagtail/admin/templates/wagtailadmin/base.html

@@ -2,7 +2,7 @@
 {% load wagtailadmin_tags wagtailcore_tags static i18n %}
 
 {% block furniture %}
-    <aside class="nav-wrapper">
+    <aside class="nav-wrapper" data-nav-primary>
         <div class="inner">
             <a href="{% url 'wagtailadmin_home' %}" class="logo" aria-label="{% trans 'Dashboard' %}">
                 {% block branding_logo %}

wagtail/admin/templates/wagtailadmin/shared/menu_submenu_item.html

@@ -1,5 +1,5 @@
 <li class="menu-item{% if active %} menu-active{% endif %}">
-    <a href="#" class="submenu-trigger {{ classnames }}"{{ attr_string }}>{{ label }}</a>
+    <a href="#" data-nav-primary-submenu-trigger class="submenu-trigger {{ classnames }}"{{ attr_string }}>{{ label }}</a>
     <div class="nav-submenu">
         <h2 id="nav-submenu-{{ name }}-title" class="{{ classnames }}">{{ label }}</h2>
         <ul aria-labelledby="nav-submenu-{{ name }}-title">{{ menu_html }}