[PHP-WEBMASTER] [web-php] master: Fix offcanvas menu open bug (#1116)

[Lucas Azevedo via GitHub]

Author: Lucas Azevedo (lhsazevedo)
Committer: GitHub (web-flow)
Pusher: saundefined
Date: 2024-11-09T20:07:10+03:00

Commit: 
https://github.com/php/web-php/commit/8413b22090865ce86f2546d5fc4f07d2c8dbc7f3
Raw diff: 
https://github.com/php/web-php/commit/8413b22090865ce86f2546d5fc4f07d2c8dbc7f3.diff

Fix offcanvas menu open bug (#1116)

Changed paths:
  M  js/common.js


Diff:

diff --git a/js/common.js b/js/common.js
index 972710987c..cea565982e 100644
--- a/js/common.js
+++ b/js/common.js
@@ -465,8 +465,8 @@ $(document).ready(function () {
         offcanvasElement.querySelectorAll("input, button, a");
     const backdropElement = document.getElementById("navbar__backdrop");
 
-    const documentWidth = document.documentElement.clientWidth
-    const scrollbarWidth = Math.abs(window.innerWidth - documentWidth)
+    const documentWidth = document.documentElement.clientWidth;
+    const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
 
     const offcanvasFocusTrapHandler = (event) => {
         if (event.key != "Tab") {
@@ -499,8 +499,8 @@ $(document).ready(function () {
         // nav from being pushed off screen when the page has horizontal 
scroll,
         // like downloads.php has.
         document.documentElement.style.overflow = "hidden";
-        document.body.style.paddingRight = `${scrollbarWidth}px`
-        offcanvasSelectables[0].focus();
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+        offcanvasElement.querySelector(".navbar__link").focus();
         document.addEventListener("keydown", offcanvasFocusTrapHandler);
     };
 
@@ -515,7 +515,7 @@ $(document).ready(function () {
             () => {
                 document.body.style.overflow = "auto";
                 document.documentElement.style.overflow = "auto";
-                document.body.style.paddingRight = '0px'
+                document.body.style.paddingRight = "0px";
                 offcanvasElement.style.removeProperty("visibility");
             },
             { once: true },
@@ -523,19 +523,14 @@ $(document).ready(function () {
     };
 
     const closeOffCanvasByClickOutside = (event) => {
-        if (
-            !offcanvasElement.contains(event.target) &&
-            !menuButton.contains(event.target)
-        ) {
-            closeOffcanvasNav()
+        if (event.target === backdropElement) {
+            closeOffcanvasNav();
         }
     };
 
-    document
-        .getElementById("navbar__menu-link")
-        .setAttribute("hidden", "true");
+    document.getElementById("navbar__menu-link").setAttribute("hidden", 
"true");
 
-    const menuButton = document.getElementById("navbar__menu-button")
+    const menuButton = document.getElementById("navbar__menu-button");
     menuButton.removeAttribute("hidden");
     menuButton.addEventListener("click", openOffcanvasNav);
 
@@ -543,7 +538,7 @@ $(document).ready(function () {
         .getElementById("navbar__close-button")
         .addEventListener("click", closeOffcanvasNav);
 
-    document.addEventListener('click', closeOffCanvasByClickOutside);
+    backdropElement.addEventListener("click", closeOffCanvasByClickOutside);
 
     /*}}}*/