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

[noreply]

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

Commit: Fix offcanvas menu open bug (#1116) · php/web-php@8413b22 · GitHub
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);

     /*}}}*/