Move legacy sidebar JS into a separate module

client/src/entrypoints/admin/sidebar-legacy.js

@@ -0,0 +1,15 @@
+import { initExplorer } from '../../components/Explorer';
+import { initSubmenus } from '../../includes/initSubmenus';
+import { initSkipLink } from '../../includes/initSkipLink';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const explorerNode = document.querySelector('[data-explorer-menu]');
+  const toggleNode = document.querySelector('[data-explorer-start-page]');
+
+  if (explorerNode && toggleNode) {
+    initExplorer(explorerNode, toggleNode);
+  }
+
+  initSubmenus();
+  initSkipLink();
+});

client/src/entrypoints/admin/sidebar-legacy.test.js

@@ -0,0 +1,26 @@
+jest.mock('../../components/Explorer');
+
+const Explorer = require('../../components/Explorer');
+
+document.addEventListener = jest.fn();
+
+require('./sidebar-legacy');
+
+describe('sidebar-legacy', () => {
+  const [event, listener] = document.addEventListener.mock.calls[0];
+
+  it('DOMContentLoaded', () => {
+    expect(event).toBe('DOMContentLoaded');
+  });
+
+  it('init', () => {
+    listener();
+    expect(Explorer.initExplorer).not.toHaveBeenCalled();
+  });
+
+  it('init with DOM', () => {
+    document.body.innerHTML = '<div data-explorer-menu></div><div data-explorer-start-page></div>';
+    listener();
+    expect(Explorer.initExplorer).toHaveBeenCalled();
+  });
+});

client/src/entrypoints/admin/wagtailadmin.js

@@ -3,10 +3,7 @@ import ReactDOM from 'react-dom';
 import {
   Icon,
   Portal,
-  initExplorer,
   initFocusOutline,
-  initSubmenus,
-  initSkipLink,
   initIE11Warning,
   initUpgradeNotification,
 } from '../..';
@@ -29,16 +26,7 @@ window.wagtail.components = {
  * Add in here code to run once the page is loaded.
  */
 document.addEventListener('DOMContentLoaded', () => {
-  const explorerNode = document.querySelector('[data-explorer-menu]');
-  const toggleNode = document.querySelector('[data-explorer-start-page]');
-
-  if (explorerNode && toggleNode) {
-    initExplorer(explorerNode, toggleNode);
-  }
-
   initFocusOutline();
-  initSubmenus();
   initIE11Warning();
   initUpgradeNotification();
-  initSkipLink();
 });

client/src/entrypoints/admin/wagtailadmin.test.js

@@ -7,7 +7,7 @@ document.addEventListener = jest.fn();
 require('./wagtailadmin');
 
 describe('wagtailadmin', () => {
-  const [event, listener] = document.addEventListener.mock.calls[0];
+  const [event] = document.addEventListener.mock.calls[0];
 
   it('exposes components for reuse', () => {
     expect(Object.keys(window.wagtail.components)).toEqual(['Icon', 'Portal']);
@@ -16,15 +16,4 @@ describe('wagtailadmin', () => {
   it('DOMContentLoaded', () => {
     expect(event).toBe('DOMContentLoaded');
   });
-
-  it('init', () => {
-    listener();
-    expect(wagtail.initExplorer).not.toHaveBeenCalled();
-  });
-
-  it('init with DOM', () => {
-    document.body.innerHTML = '<div data-explorer-menu></div><div data-explorer-start-page></div>';
-    listener();
-    expect(wagtail.initExplorer).toHaveBeenCalled();
-  });
 });

client/src/index.test.js

@@ -5,9 +5,6 @@ import {
   LoadingSpinner,
   Portal,
   Transition,
-  Explorer,
-  ExplorerToggle,
-  initExplorer,
 } from './index';
 
 describe('wagtail package API', () => {
@@ -34,16 +31,4 @@ describe('wagtail package API', () => {
   it('has Transition', () => {
     expect(Transition).toBeDefined();
   });
-
-  it('has Explorer', () => {
-    expect(Explorer).toBeDefined();
-  });
-
-  it('has ExplorerToggle', () => {
-    expect(ExplorerToggle).toBeDefined();
-  });
-
-  it('has initExplorer', () => {
-    expect(initExplorer).toBeDefined();
-  });
 });

client/src/index.ts

@@ -4,31 +4,23 @@
  */
 
 import Button from './components/Button/Button';
-import Explorer, { ExplorerToggle, initExplorer } from './components/Explorer';
 import Icon from './components/Icon/Icon';
 import LoadingSpinner from './components/LoadingSpinner/LoadingSpinner';
 import Portal from './components/Portal/Portal';
 import PublicationStatus from './components/PublicationStatus/PublicationStatus';
 import Transition from './components/Transition/Transition';
 import { initFocusOutline } from './utils/focus';
-import { initSubmenus } from './includes/initSubmenus';
-import { initSkipLink } from './includes/initSkipLink';
 import { initIE11Warning } from './includes/initIE11Warning';
 import { initUpgradeNotification } from './components/UpgradeNotification';
 
 export {
   Button,
-  Explorer,
-  ExplorerToggle,
   Icon,
   LoadingSpinner,
   Portal,
   PublicationStatus,
   Transition,
-  initExplorer,
   initFocusOutline,
-  initSubmenus,
-  initSkipLink,
   initIE11Warning,
   initUpgradeNotification,
 };

client/webpack.config.js

@@ -42,6 +42,7 @@ module.exports = function exports() {
       'page-chooser',
       'page-editor',
       'privacy-switch',
+      'sidebar-legacy',
       'task-chooser-modal',
       'task-chooser',
       'telepath/blocks',

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -10,6 +10,7 @@ from django.contrib.humanize.templatetags.humanize import intcomma
 from django.contrib.messages.constants import DEFAULT_TAGS as MESSAGE_TAGS
 from django.core.serializers.json import DjangoJSONEncoder
 from django.db.models import Min, QuerySet
+from django.forms import Media
 from django.template.defaultfilters import stringfilter
 from django.template.loader import render_to_string
 from django.templatetags.static import static
@@ -95,7 +96,11 @@ def search_other(context, current=None):
 
 @register.simple_tag
 def main_nav_js():
-    return admin_menu.media['js']
+    return Media(
+        js=[
+            versioned_static('wagtailadmin/js/sidebar-legacy.js')
+        ]
+    ) + admin_menu.media['js']
 
 
 @register.filter("ellipsistrim")