Update navbar functionality and configuration, Fixes #19

blackfyre · Oct 12, 2023 · 28e56f6 · 28e56f6
1 parent 5f36926
commit 28e56f6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/assets/public/js/site.js b/assets/public/js/site.js
@@ -1,29 +1,39 @@
-htmx.onLoad(function (content) {
+
+document.body.addEventListener('htmx:load', function (evt) {
+    console.log("on load fired", evt)
     initNavbar();
     initViewer();
     initJumpToTop();
     removeNotification();
 });
 
 htmx.config.globalViewTransitions = true;
+htmx.config.selfRequestsOnly = true;
+htmx.config.allowScriptTags = false;
+
+function classToggler (event) {
+
+    //find nearest `a` parent of event target
+    const target = event.target.closest('a') || event.target;
+
+    // Get the target from the "data-target" attribute
+    const dataTarget = target.dataset.target;
+    const $target = document.getElementById(dataTarget);
+
+    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+    target.classList.toggle('is-active');
+    $target.classList.toggle('is-active');
+
+};
 
 function initNavbar () {
     // Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    const $navbarBurgers = document.querySelectorAll('.navbar-burger');
 
     // Add a click event on each of them
     $navbarBurgers.forEach(el => {
-        el.addEventListener('click', () => {
-
-            // Get the target from the "data-target" attribute
-            const target = el.dataset.target;
-            const $target = document.getElementById(target);
-
-            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-            el.classList.toggle('is-active');
-            $target.classList.toggle('is-active');
-
-        });
+        el.removeEventListener('click', classToggler);
+        el.addEventListener("click", classToggler);
     });
 }
 

diff --git a/assets/views/partials/nav.html b/assets/views/partials/nav.html
@@ -5,23 +5,23 @@
             <img src="/assets/images/logo.png" width="318" height="45" alt="Web Gallery of Art" title="Go to Home">
         </a>
 
-        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="top-navbar">
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
         </a>
     </div>
 
-    <div id="navbarBasicExample" class="navbar-menu">
+    <div id="top-navbar" class="navbar-menu">
         <div class="navbar-start">
-            <a class="navbar-item is-active" href="/" hx-get="/" hx-target="#mc-area">
+            <a class="navbar-item" href="/" hx-get="/" hx-target="#mc-area">
                 Home
             </a>
 
             <a class="navbar-item" href="/artists" hx-get="/artists" hx-target="#mc-area">
                 Artists
             </a>
-            <a class="navbar-item" href="/search">
+            <!-- <a class="navbar-item" href="/search">
                 Search
             </a>
             <a class="navbar-item">
@@ -62,7 +62,7 @@
                         Report an issue
                     </a>
                 </div>
-            </div>
+            </div> -->
         </div>
     </div>
 </nav>