Merge pull request #8447 from imperial-chief/8380/refactor/remove-inl…

…ine-js-breadcrumb

Removed inline js from breadcrumb_select.html.

openlibrary/plugins/openlibrary/js/breadcrumb_select/index.js

@@ -0,0 +1,29 @@
+/**
+ * Initialize the breadcrumb select elements.
+ *
+ * @param {NodeList<HTMLElement>} crumbs - NodeList of breadcrumb select elements.
+ */
+export function initBreadcrumbSelect(crumbs) {
+    const allowedKeys = new Set(['Tab', 'Enter', ' ']);
+    const preventedKeys = new Set(['ArrowUp', 'ArrowDown']);
+    // watch crumbs for changes,
+    // ensures it's a full value change, not a user exploring options via keyboard
+    function handleNavEvents(nav) {
+        let ignoreChange = false;
+
+        nav.addEventListener('change', () => {
+            if (ignoreChange) return;
+            window.location = nav.value;
+        });
+
+        nav.addEventListener('keydown', ({ key }) => {
+            if (preventedKeys.has(key)) {
+                ignoreChange = true;
+            } else if (allowedKeys.has(key)) {
+                ignoreChange = false;
+            }
+        });
+    }
+
+    crumbs.forEach(handleNavEvents);
+}

openlibrary/plugins/openlibrary/js/index.js

@@ -540,4 +540,11 @@ jQuery(function () {
         import(/* webpackChunkName: "return-form" */ './return-form')
             .then(module => module.initReturnForms(returnForms))
     }
+
+    const crumbs = document.querySelectorAll('.crumb select');
+    if (crumbs.length) {
+        import(/* webpackChunkName: "breadcrumb-select" */ './breadcrumb_select')
+            .then(module => module.initBreadcrumbSelect(crumbs));
+    }
+
 });

openlibrary/templates/books/breadcrumb_select.html

@@ -41,28 +41,3 @@ <h2 class="breadcrumb-title">$breadcrumb_title</h2>
                 </select>
             </span>
         </span>
-
-        <script>
-            const crumbs = document.querySelectorAll('.crumb select')
-            const allowedKeys = new Set(['Tab', 'Enter', ' '])
-            const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])
-
-            // watch crumbs for changes,
-            // ensures it's a full value change, not a user exploring options via keyboard
-            crumbs.forEach(nav => {
-                let ignoreChange = false
-
-                nav.addEventListener('change', e => {
-                    if (ignoreChange) return
-                    // it's actually changed!
-                    window.location = nav.value;
-                })
-
-            nav.addEventListener('keydown', ({ key }) => {
-                if (preventedKeys.has(key))
-                ignoreChange = true
-                else if (allowedKeys.has(key))
-                ignoreChange = false
-            })
-            })
-        </script>