Add keyboard support for core navigation, refactor toolbar and escape JS

dist/js/core_navigation.js

+((Drupal, drupalSettings, once) => {
+  Drupal.behaviors.ginCoreNavigation = {
+    attach: context => {
+      Drupal.ginCoreNavigation.initKeyboardShortcut(context);
+    }
+  }, Drupal.ginCoreNavigation = {
+    initKeyboardShortcut: function(context) {
+      once("ginToolbarKeyboardShortcutInit", ".toolbar-menu__trigger, .admin-toolbar__expand-button", context).forEach((() => {
+        document.addEventListener("keydown", (e => {
+          !0 === e.altKey && "KeyT" === e.code && this.toggleToolbar();
+        }));
+      }));
+    },
+    toggleToolbar: function() {
+      let toolbarTrigger = document.querySelector(".admin-toolbar__expand-button");
+      toolbarTrigger && toolbarTrigger.click();
+    }
+  };
+})(Drupal, drupalSettings, once);
\ No newline at end of file

dist/js/escape_admin.js

+((Drupal, drupalSettings, once) => {
+  Drupal.behaviors.ginEscapeAdmin = {
+    attach: context => {
+      once("ginEscapeAdmin", "[data-gin-toolbar-escape-admin]", context).forEach((el => {
+        const escapeAdminPath = sessionStorage.getItem("escapeAdminPath");
+        drupalSettings.path.currentPathIsAdmin && null !== escapeAdminPath && el.setAttribute("href", escapeAdminPath);
+      }));
+    }
+  };
+})(Drupal, drupalSettings, once);
\ No newline at end of file

dist/js/toolbar.js

@@ -2,14 +2,7 @@
   const toolbarVariant = drupalSettings.gin.toolbar_variant;
   Drupal.behaviors.ginToolbar = {
     attach: context => {
-      Drupal.ginToolbar.init(context);
-    }
-  }, Drupal.behaviors.ginEscapeAdmin = {
-    attach: context => {
-      once("ginEscapeAdmin", "[data-gin-toolbar-escape-admin]", context).forEach((el => {
-        const escapeAdminPath = sessionStorage.getItem("escapeAdminPath");
-        drupalSettings.path.currentPathIsAdmin && null !== escapeAdminPath && el.setAttribute("href", escapeAdminPath);
-      }));
+      Drupal.ginToolbar.init(context), Drupal.ginToolbar.initKeyboardShortcut(context);
     }
   }, Drupal.ginToolbar = {
     init: function(context) {
@@ -18,13 +11,18 @@
         "classic" != toolbarVariant && localStorage.getItem("Drupal.toolbar.trayVerticalLocked") && localStorage.removeItem("Drupal.toolbar.trayVerticalLocked"), 
         "true" === localStorage.getItem("Drupal.gin.toolbarExpanded") ? (document.body.setAttribute("data-toolbar-menu", "open"), 
         toolbarTrigger.classList.add("is-active")) : (document.body.setAttribute("data-toolbar-menu", ""), 
-        toolbarTrigger.classList.remove("is-active")), document.addEventListener("keydown", (e => {
-          !0 === e.altKey && "KeyT" === e.code && this.toggleToolbar();
-        })), this.initDisplace();
+        toolbarTrigger.classList.remove("is-active")), this.initDisplace();
       })), once("ginToolbarToggle", ".toolbar-menu__trigger", context).forEach((el => el.addEventListener("click", (e => {
         e.preventDefault(), this.toggleToolbar();
       }))));
     },
+    initKeyboardShortcut: function(context) {
+      once("ginToolbarKeyboardShortcutInit", ".toolbar-menu__trigger, .admin-toolbar__expand-button", context).forEach((() => {
+        document.addEventListener("keydown", (e => {
+          !0 === e.altKey && "KeyT" === e.code && this.toggleToolbar();
+        }));
+      }));
+    },
     initDisplace: () => {
       const toolbar = document.querySelector("#gin-toolbar-bar .toolbar-menu-administration");
       toolbar && ("vertical" === toolbarVariant ? toolbar.setAttribute("data-offset-left", "") : toolbar.setAttribute("data-offset-top", ""));

gin.libraries.yml

@@ -39,6 +39,7 @@ navigation:
     js/navigation/vendor/floating-ui/floating-ui.dom.umd.js: { minified: true }
     js/navigation/sidebar.js: { minified: false }
   dependencies:
+  - gin/escape_admin
   - gin/coffee
   - gin/node_preview
   - gin/responsive_preview
@@ -57,7 +58,10 @@ core_navigation:
       dist/css/components/toolbar_secondary.css: { minified: false }
     theme:
       dist/css/layout/core_navigation.css: { minified: false }
+  js:
+    dist/js/core_navigation.js: { minified: false }
   dependencies:
+  - gin/escape_admin
   - gin/coffee
   - gin/node_preview
   - gin/responsive_preview
@@ -76,6 +80,7 @@ gin_toolbar:
   js:
     dist/js/toolbar.js: { minified: false }
   dependencies:
+    - gin/escape_admin
     - gin/coffee
     - gin/node_preview
     - gin/responsive_preview
@@ -97,6 +102,7 @@ gin_horizontal_toolbar:
   js:
     dist/js/toolbar.js: { minified: false }
   dependencies:
+    - gin/escape_admin
     - gin/coffee
     - gin/node_preview
     - gin/responsive_preview
@@ -115,6 +121,7 @@ gin_classic_toolbar:
   js:
     dist/js/toolbar.js: { minified: false }
   dependencies:
+    - gin/escape_admin
     - gin/coffee
     - gin/node_preview
     - gin/contextual_links
@@ -148,6 +155,12 @@ gin_description_toggle:
   js:
     dist/js/description_toggle.js: { minified: false }
 
+escape_admin:
+  js:
+    dist/js/escape_admin.js: { minified: false }
+  dependencies:
+    - core/once
+
 messages:
   js:
     dist/js/messages.js: { minified: false }

js/core_navigation.js

+/* eslint-disable func-names, no-mutable-exports, comma-dangle, strict */
+
+((Drupal, drupalSettings, once) => {
+  Drupal.behaviors.ginCoreNavigation = {
+    attach: (context) => {
+      Drupal.ginCoreNavigation.initKeyboardShortcut(context);
+    },
+  };
+
+  Drupal.ginCoreNavigation = {
+    initKeyboardShortcut: function (context) {
+      once('ginToolbarKeyboardShortcutInit', '.toolbar-menu__trigger, .admin-toolbar__expand-button', context).forEach(() => {
+        // Show toolbar navigation with shortcut:
+        // OPTION + T (Mac) / ALT + T (Windows)
+        document.addEventListener('keydown', e => {
+          if (e.altKey === true && e.code === 'KeyT') {
+            this.toggleToolbar();
+          }
+        });
+      });
+    },
+
+    toggleToolbar: function () {
+      let toolbarTrigger = document.querySelector('.admin-toolbar__expand-button');
+
+      // Core navigation.
+      if (toolbarTrigger) {
+        toolbarTrigger.click();
+        return;
+      }
+    },
+  };
+
+})(Drupal, drupalSettings, once);

js/escape_admin.js

+/* eslint-disable func-names, no-mutable-exports, comma-dangle, strict */
+
+((Drupal, drupalSettings, once) => {
+  /**
+   * Replaces the "Home" link with "Back to site" link.
+   *
+   * Back to site link points to the last non-administrative page the user
+   * visited within the same browser tab.
+   */
+  Drupal.behaviors.ginEscapeAdmin = {
+    attach: (context) => {
+      once('ginEscapeAdmin', '[data-gin-toolbar-escape-admin]', context).forEach(el => {
+        const escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
+
+        if (drupalSettings.path.currentPathIsAdmin && escapeAdminPath !== null) {
+          el.setAttribute('href', escapeAdminPath);
+        }
+      });
+    },
+  };
+
+})(Drupal, drupalSettings, once);

js/toolbar.js

@@ -7,25 +7,7 @@
   Drupal.behaviors.ginToolbar = {
     attach: (context) => {
       Drupal.ginToolbar.init(context);
-    },
-
-  };
-
-  /**
-   * Replaces the "Home" link with "Back to site" link.
-   *
-   * Back to site link points to the last non-administrative page the user
-   * visited within the same browser tab.
-   */
-  Drupal.behaviors.ginEscapeAdmin = {
-    attach: (context) => {
-      once('ginEscapeAdmin', '[data-gin-toolbar-escape-admin]', context).forEach(el => {
-        const escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
-
-        if (drupalSettings.path.currentPathIsAdmin && escapeAdminPath !== null) {
-          el.setAttribute('href', escapeAdminPath);
-        }
-      });
+      Drupal.ginToolbar.initKeyboardShortcut(context);
     },
   };
 
@@ -49,14 +31,7 @@
           toolbarTrigger.classList.remove('is-active');
         }
 
-        // Show toolbar navigation with shortcut:
-        // OPTION + T (Mac) / ALT + T (Windows)
-        document.addEventListener('keydown', e => {
-          if (e.altKey === true && e.code === 'KeyT') {
-            this.toggleToolbar();
-          }
-        });
-
+        // this.initKeyboardShortcut();
         this.initDisplace();
       });
 
@@ -67,6 +42,18 @@
       }));
     },
 
+    initKeyboardShortcut: function (context) {
+      once('ginToolbarKeyboardShortcutInit', '.toolbar-menu__trigger, .admin-toolbar__expand-button', context).forEach(() => {
+        // Show toolbar navigation with shortcut:
+        // OPTION + T (Mac) / ALT + T (Windows)
+        document.addEventListener('keydown', e => {
+          if (e.altKey === true && e.code === 'KeyT') {
+            this.toggleToolbar();
+          }
+        });
+      });
+    },
+
     initDisplace: () => {
       const toolbar = document.querySelector('#gin-toolbar-bar .toolbar-menu-administration');
 

webpack.config.js

@@ -22,6 +22,8 @@ module.exports = {
     'sidebar': ['./js/sidebar.js'],
     'sticky': ['./js/sticky.js'],
     'toolbar': ['./js/toolbar.js'],
+    'core_navigation': ['./js/core_navigation.js'],
+    'escape_admin': ['./js/escape_admin.js'],
     'tableheader': ['./js/tableheader.js'],
     // ################################################
     // CSS