(skywalking-website) branch fix/dropdown-outside-click created (now cc0aac8d7d79)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wu-sheng pushed a change to branch fix/dropdown-outside-click
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git


      at cc0aac8d7d79 Close floating dropdowns when clicking outside them

This branch includes the following new commits:

     new cc0aac8d7d79 Close floating dropdowns when clicking outside them

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(skywalking-website) 01/01: Close floating dropdowns when clicking outside them

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wu-sheng pushed a commit to branch fix/dropdown-outside-click
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git

commit cc0aac8d7d79392933adccac0edf7d5c9bb170d7
Author: Wu Sheng <wu...@foxmail.com>
AuthorDate: Mon Aug 31 08:00:41 2026 +0800

    Close floating dropdowns when clicking outside them
    
    A native <details> stays open until its own summary is clicked again, so the
    docs "versions" picker — and the downloads "+N more" and blog topic filter,
    which share the pattern — hung over the page after the reader moved on. The
    only way to dismiss one was to find its summary again.
    
    Close them on an outside click and on Escape, and let opening one close the
    others so only a single panel is ever up. Clicking inside an open panel keeps
    it open, so the version links stay reachable.
    
    Scoped by class to the three floating dropdowns. .dl-archived is deliberately
    excluded: it is an inline accordion rather than a floating panel, and should
    stay where the reader put it.
    
    Wired through a new layouts/partials/hooks/body-end.html, which overrides the
    theme's own hook — called from its scripts.html, which every one of our baseof
    templates already loads. That covers docs, downloads, blog and zh from one
    file and leaves the theme unforked, the same way hooks/head-end.html carries
    the SEO partials. The theme's body-end only holds an Algolia docsearch
    placeholder, kept verbatim so the override loses nothing.
    
    Verified by driving a real browser against a local build: opening works,
    an outside click closes, opening a second closes the first, Escape closes
    all, and a click inside the panel leaves it open. Confirmed on all three
    dropdown kinds, and confirmed .dl-archived still stays open.
---
 layouts/partials/hooks/body-end.html | 40 ++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html
new file mode 100644
index 000000000000..7ba3c5621678
--- /dev/null
+++ b/layouts/partials/hooks/body-end.html
@@ -0,0 +1,40 @@
+{{- /* Overrides themes/docsy/layouts/partials/hooks/body-end.html, called at the end
+       of the theme's scripts.html — which every one of our baseof templates loads.
+       The theme's own body-end only carries the Algolia docsearch placeholder, kept
+       verbatim below so overriding it loses nothing. */ -}}
+{{ with .Site.Params.algolia_docsearch }}
+<!-- scripts for algolia docsearch -->
+{{ end }}
+
+{{- /* Dismiss floating <details> dropdowns.
+
+       A native <details> stays open until its own summary is clicked again, so
+       clicking anywhere else left the panel hanging over the page. Close them on an
+       outside click and on Escape, and let opening one close the others so only a
+       single panel is ever up.
+
+       Scoped to the floating dropdowns by class. .dl-archived is deliberately not in
+       the list: it is an inline accordion rather than a floating panel, and should
+       stay where the reader put it. */ -}}
+<script>
+  (function () {
+    var SEL = 'details.docs-ver, details.dl-more, details.topic-filter';
+
+    function closeAll(except) {
+      document.querySelectorAll(SEL).forEach(function (d) {
+        if (d !== except && d.open) { d.open = false; }
+      });
+    }
+
+    // Click: a click inside a dropdown keeps that one open and closes the rest;
+    // a click anywhere else closes all of them.
+    document.addEventListener('click', function (e) {
+      var target = e.target instanceof Element ? e.target.closest(SEL) : null;
+      closeAll(target);
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' || e.key === 'Esc') { closeAll(null); }
+    });
+  })();
+</script>