From aeb548a4f76c742608c2b7154461814440048506 Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Wed, 14 Aug 2024 16:40:00 +0200
Subject: [PATCH] Put back interactions with settings menus

---
 util/gh-pages/index_template.html | 78 ++++++++++------------------
 util/gh-pages/script.js           | 85 +++++++++++++++++++------------
 util/gh-pages/style.css           | 14 ++++-
 3 files changed, 91 insertions(+), 86 deletions(-)
diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html
index 5a7af7d562ed8..a18948a206042 100644
--- a/util/gh-pages/index_template.html
+++ b/util/gh-pages/index_template.html
@@ -27,7 +27,7 @@
 </head>
 <body>
     <div id="settings-dropdown">
-        <div class="settings-icon" tabindex="-1"></div>
+        <button class="settings-icon" tabindex="-1"></button>
         <div class="settings-menu" tabindex="-1">
             <div class="setting-radio-name">Theme</div>
             <select id="theme-choice" onchange="setTheme(this.value, true)">
@@ -59,88 +59,62 @@ <h1>Clippy Lints</h1>
             <div class="panel panel-default">
                 <div class="panel-body row">
                     <div id="upper-filters" class="col-12 col-md-5">
-                        <div class="btn-group">
+                        <div class="btn-group" id="lint-levels" tabindex="-1">
                             <button type="button" class="btn btn-default dropdown-toggle">
                                 Lint levels <span class="badge" id="selected-levels">4</span> <span class="caret"></span>
                             </button>
-                            <ul class="dropdown-menu" id="lint-levels">
+                            <ul class="dropdown-menu" id="lint-levels-selector">
                                 <li class="checkbox">
-                                    <label onclick="toggleLevels(true)">
-                                        <input type="checkbox" class="invisible" />
-                                        All
-                                    </label>
+                                    <button onclick="toggleElements(this, true)">All</button>
                                 </li>
                                 <li class="checkbox">
-                                    <label onclick="toggleLevels(false)">
-                                        <input type="checkbox" class="invisible" />
-                                        None
-                                    </label>
+                                    <button onclick="toggleElements(this, false)">None</button>
                                 </li>
                                 <li role="separator" class="divider"></li>
                             </ul>
                         </div>
-                        <div class="btn-group">
+                        <div class="btn-group" id="lint-groups" tabindex="-1">
                             <button type="button" class="btn btn-default dropdown-toggle">
                                 Lint groups <span class="badge" id="selected-groups"></span> <span class="caret"></span>
                             </button>
-                            <ul class="dropdown-menu" id="lint-groups">
+                            <ul class="dropdown-menu" id="lint-groups-selector">
                                 <li class="checkbox">
-                                    <label onclick="toggleGroups(true)">
-                                        <input type="checkbox" class="invisible" />
-                                        All
-                                    </label>
+                                    <button onclick="toggleElements(this, true)">All</button>
                                 </li>
                                 <li class="checkbox">
-                                    <label onclick="resetGroupsToDefault()">
-                                        <input type="checkbox" class="invisible" />
-                                        Default
-                                    </label>
+                                    <button onclick="resetGroupsToDefault()">Default</button>
                                 </li>
                                 <li class="checkbox">
-                                    <label onclick="toggleGroups(false)">
-                                        <input type="checkbox" class="invisible" />
-                                        None
-                                    </label>
+                                    <button onclick="toggleElements(this, false)">None</button>
                                 </li>
                                 <li role="separator" class="divider"></li>
                             </ul>
                         </div>
-                        <div id="version-filter">
-                            <div class="btn-group">
-                                <button type="button" class="btn btn-default dropdown-toggle">
-                                    Version
-                                    <span id="version-filter-count" class="badge">0</span>
-                                    <span class="caret"></span>
-                                </button>
-                                <ul id="version-filter-selector" class="dropdown-menu">
-                                    <li class="checkbox">
-                                        <label onclick="clearVersionFilters()">
-                                            <input type="checkbox" class="invisible" />
-                                            Clear filters
-                                        </label>
-                                    </li>
-                                    <li role="separator" class="divider"></li>
-                                </ul>
-                            </div>
+                        <div class="btn-group" id="version-filter" tabindex="-1">
+                            <button type="button" class="btn btn-default dropdown-toggle">
+                                Version
+                                <span id="version-filter-count" class="badge">0</span>
+                                <span class="caret"></span>
+                            </button>
+                            <ul id="version-filter-selector" class="dropdown-menu">
+                                <li class="checkbox">
+                                    <button onclick="clearVersionFilters()">Clear filters</button>
+                                </li>
+                                <li role="separator" class="divider"></li>
+                            </ul>
                         </div>
-                        <div class="btn-group">
+                        <div class="btn-group", id="lint-applicabilities" tabindex="-1">
                             <button type="button" class="btn btn-default dropdown-toggle">
                                 Applicability
                                 <span class="badge"></span>
                                 <span class="caret"></span>
                             </button>
-                            <ul class="dropdown-menu" id="lint-applicabilities">
+                            <ul class="dropdown-menu" id="lint-applicabilities-selector">
                                 <li class="checkbox">
-                                    <label onclick="toggleApplicabilities(true)">
-                                        <input type="checkbox" class="invisible" />
-                                        All
-                                    </label>
+                                    <button onclick="toggleElements(this, true)">All</button>
                                 </li>
                                 <li class="checkbox">
-                                    <label onclick="toggleApplicabilities(false)">
-                                        <input type="checkbox" class="invisible" />
-                                        None
-                                    </label>
+                                    <button onclick="toggleElements(this, false)">None</button>
                                 </li>
                                 <li role="separator" class="divider"></li>
                             </ul>
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index 6f506956e7c92..7dce72c18590c 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -151,6 +151,14 @@ function handleShortcut(ev) {
 document.addEventListener("keypress", handleShortcut);
 document.addEventListener("keydown", handleShortcut);
 
+function toggleElements(element, value) {
+    // `element` is always a button in a `li` in a `ul`. We want the `input` in the `ul`.
+    onEachLazy(
+        element.parentElement.parentElement.getElementsByTagName("input"),
+        el => el.checked = value,
+    );
+}
+
 function changeSetting(elem) {
     if (elem.id === "disable-shortcuts") {
         disableShortcuts = elem.checked;
@@ -211,8 +219,8 @@ function copyToClipboard(event) {
     resetClipboardTimeout = setTimeout(resetClipboard, 1000);
 }
 
-function handleBlur(event) {
-    const parent = document.getElementById("settings-dropdown");
+function handleBlur(event, elementId) {
+    const parent = document.getElementById(elementId);
     if (!parent.contains(document.activeElement) &&
         !parent.contains(event.relatedTarget)
     ) {
@@ -227,6 +235,30 @@ function toggleExpansion(expand) {
     );
 }
 
+function clearVersionFilters() {
+    onEachLazy(document.querySelectorAll("#version-filter-count input"), el => el.value = "");
+}
+
+const GROUPS_FILTER_DEFAULT = {
+    cargo: true,
+    complexity: true,
+    correctness: true,
+    deprecated: false,
+    nursery: true,
+    pedantic: true,
+    perf: true,
+    restriction: true,
+    style: true,
+    suspicious: true,
+};
+
+function resetGroupsToDefault() {
+    onEachLazy(document.querySelectorAll("#lint-groups-selector input"), el => {
+        const key = el.getAttribute("data-value");
+        el.checked = GROUPS_FILTER_DEFAULT[key];
+    });
+}
+
 function generateListOfOptions(list, elementId) {
     let html = '';
     let nbEnabled = 0;
@@ -235,7 +267,7 @@ function generateListOfOptions(list, elementId) {
         html += `\
 <li class="checkbox">\
     <label class="text-capitalize">\
-        <input type="checkbox"${attr}/>${key}\
+        <input type="checkbox" data-value="${key}"${attr}/>${key}\
     </label>\
 </li>`;
         if (value) {
@@ -243,39 +275,33 @@ function generateListOfOptions(list, elementId) {
         }
     }
 
-    const elem = document.getElementById(elementId);
+    const elem = document.getElementById(`${elementId}-selector`);
     elem.previousElementSibling.querySelector(".badge").innerText = `${nbEnabled}`;
     elem.innerHTML += html;
+
+    setupDropdown(elementId);
+}
+
+function setupDropdown(elementId) {
+    const elem = document.getElementById(elementId);
+    const button = document.querySelector(`#${elementId} > button`);
+    button.onclick = () => elem.classList.toggle("open");
+
+    const setBlur = child => {
+        child.onblur = event => handleBlur(event, elementId);
+    };
+    onEachLazy(elem.children, setBlur);
+    onEachLazy(elem.querySelectorAll("input"), setBlur);
+    onEachLazy(elem.querySelectorAll("ul button"), setBlur);
 }
 
 function generateSettings() {
-    const settings = document.getElementById("settings-dropdown");
-    const settingsButton = settings.querySelector(".settings-icon")
-    settingsButton.onclick = () => settings.classList.toggle("open");
-    settingsButton.onblur = handleBlur;
-    const settingsMenu = settings.querySelector(".settings-menu");
-    settingsMenu.onblur = handleBlur;
-    onEachLazy(
-        settingsMenu.querySelectorAll("input"),
-        el => el.onblur = handleBlur,
-    );
+    setupDropdown("settings-dropdown");
 
     const LEVEL_FILTERS_DEFAULT = {allow: true, warn: true, deny: true, none: true};
     generateListOfOptions(LEVEL_FILTERS_DEFAULT, "lint-levels");
 
     // Generate lint groups.
-    const GROUPS_FILTER_DEFAULT = {
-        cargo: true,
-        complexity: true,
-        correctness: true,
-        deprecated: false,
-        nursery: true,
-        pedantic: true,
-        perf: true,
-        restriction: true,
-        style: true,
-        suspicious: true,
-    };
     generateListOfOptions(GROUPS_FILTER_DEFAULT, "lint-groups");
 
     const APPLICABILITIES_FILTER_DEFAULT = {
@@ -287,12 +313,6 @@ function generateSettings() {
     };
     generateListOfOptions(APPLICABILITIES_FILTER_DEFAULT, "lint-applicabilities");
 
-    const VERSIONS_FILTERS = {
-        "≥": {enabled: false, minorVersion: null },
-        "≤": {enabled: false, minorVersion: null },
-        "=": {enabled: false, minorVersion: null },
-    };
-
     let html = '';
     for (const kind of ["≥", "≤", "="]) {
         html += `\
@@ -309,6 +329,7 @@ function generateSettings() {
 </li>`;
     }
     document.getElementById("version-filter-selector").innerHTML += html;
+    setupDropdown("version-filter");
 }
 
 function generateSearch() {
diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
index 9af566b5aa9e7..d6f0f7eb162c2 100644
--- a/util/gh-pages/style.css
+++ b/util/gh-pages/style.css
@@ -272,8 +272,6 @@ L4.75,12h2.5l0.5393066-2.1572876  c0.2276001-0.1062012,0.4459839-0.2269287,0.649
   height: 18px;
   display: block;
   filter: invert(0.7);
-  padding-left: 4px;
-  padding-top: 3px;
 }
 
 .settings-menu * {
@@ -329,6 +327,18 @@ L4.75,12h2.5l0.5393066-2.1572876  c0.2276001-0.1062012,0.4459839-0.2269287,0.649
     display: flex;
 }
 
+ul.dropdown-menu li.checkbox > button {
+    border: 0;
+    width: 100%;
+    background: var(--theme-popup-bg);
+    color: var(--fg);
+}
+
+ul.dropdown-menu li.checkbox > button:hover {
+    background: var(--theme-hover);
+    box-shadow: none;
+}
+
 #version-filter {
     min-width: available;
 }
