Skip to content

Commit e5b4416

Browse files
GuillaumeGomezGuillaumeGomez
committed
Bring back dropdown settings menus
1 parent a3ddb57 commit e5b4416

File tree

3 files changed

+42
-45
lines changed

3 files changed

+42
-45
lines changed

‎util/gh-pages/index_template.html‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</head>
2828
<body>
2929
<div id="settings-dropdown">
30-
<div class="settings-icon" tabindex="-1"></div>
30+
<button class="settings-icon" tabindex="-1"></button>
3131
<div class="settings-menu" tabindex="-1">
3232
<div class="setting-radio-name">Theme</div>
3333
<select id="theme-choice" onchange="setTheme(this.value, true)">
@@ -59,11 +59,11 @@ <h1>Clippy Lints</h1>
5959
<div class="panel panel-default">
6060
<div class="panel-body row">
6161
<div id="upper-filters" class="col-12 col-md-5">
62-
<div class="btn-group">
62+
<div class="btn-group" id="lint-levels">
6363
<button type="button" class="btn btn-default dropdown-toggle">
6464
Lint levels <span class="badge" id="selected-levels">4</span> <span class="caret"></span>
6565
</button>
66-
<ul class="dropdown-menu" id="lint-levels">
66+
<ul class="dropdown-menu" id="lint-levels-selector">
6767
<li class="checkbox">
6868
<label onclick="toggleLevels(true)">
6969
<input type="checkbox" class="invisible" />
@@ -79,11 +79,11 @@ <h1>Clippy Lints</h1>
7979
<li role="separator" class="divider"></li>
8080
</ul>
8181
</div>
82-
<div class="btn-group">
82+
<div class="btn-group" id="lint-groups">
8383
<button type="button" class="btn btn-default dropdown-toggle">
8484
Lint groups <span class="badge" id="selected-groups"></span> <span class="caret"></span>
8585
</button>
86-
<ul class="dropdown-menu" id="lint-groups">
86+
<ul class="dropdown-menu" id="lint-groups-selector">
8787
<li class="checkbox">
8888
<label onclick="toggleGroups(true)">
8989
<input type="checkbox" class="invisible" />
@@ -105,31 +105,29 @@ <h1>Clippy Lints</h1>
105105
<li role="separator" class="divider"></li>
106106
</ul>
107107
</div>
108-
<div id="version-filter">
109-
<div class="btn-group">
110-
<button type="button" class="btn btn-default dropdown-toggle">
111-
Version
112-
<span id="version-filter-count" class="badge">0</span>
113-
<span class="caret"></span>
114-
</button>
115-
<ul id="version-filter-selector" class="dropdown-menu">
116-
<li class="checkbox">
117-
<label onclick="clearVersionFilters()">
118-
<input type="checkbox" class="invisible" />
119-
Clear filters
120-
</label>
121-
</li>
122-
<li role="separator" class="divider"></li>
123-
</ul>
124-
</div>
108+
<div class="btn-group" id="version-filter">
109+
<button type="button" class="btn btn-default dropdown-toggle">
110+
Version
111+
<span id="version-filter-count" class="badge">0</span>
112+
<span class="caret"></span>
113+
</button>
114+
<ul id="version-filter-selector" class="dropdown-menu">
115+
<li class="checkbox">
116+
<label onclick="clearVersionFilters()">
117+
<input type="checkbox" class="invisible" />
118+
Clear filters
119+
</label>
120+
</li>
121+
<li role="separator" class="divider"></li>
122+
</ul>
125123
</div>
126-
<div class="btn-group">
124+
<div class="btn-group", id="lint-applicabilities">
127125
<button type="button" class="btn btn-default dropdown-toggle">
128126
Applicability
129127
<span class="badge"></span>
130128
<span class="caret"></span>
131129
</button>
132-
<ul class="dropdown-menu" id="lint-applicabilities">
130+
<ul class="dropdown-menu" id="lint-applicabilities-selector">
133131
<li class="checkbox">
134132
<label onclick="toggleApplicabilities(true)">
135133
<input type="checkbox" class="invisible" />

‎util/gh-pages/script.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,8 @@ function copyToClipboard(event) {
211211
resetClipboardTimeout = setTimeout(resetClipboard, 1000);
212212
}
213213

214-
function handleBlur(event) {
215-
const parent = document.getElementById("settings-dropdown");
214+
function handleBlur(event, elementId) {
215+
const parent = document.getElementById(elementId);
216216
if (!parent.contains(document.activeElement) &&
217217
!parent.contains(event.relatedTarget)
218218
) {
@@ -243,22 +243,28 @@ function generateListOfOptions(list, elementId) {
243243
}
244244
}
245245

246-
const elem = document.getElementById(elementId);
246+
const elem = document.getElementById(`${elementId}-selector`);
247247
elem.previousElementSibling.querySelector(".badge").innerText = `${nbEnabled}`;
248248
elem.innerHTML += html;
249+
250+
setupDropdown(elementId);
251+
}
252+
253+
function setupDropdown(elementId) {
254+
const elem = document.getElementById(elementId);
255+
const button = document.querySelector(`#${elementId} > button`);
256+
button.onclick = () => elem.classList.toggle("open");
257+
258+
onEachLazy(elem.children, child => {
259+
child.onblur = event => handleBlur(event, elementId);
260+
});
261+
onEachLazy(elem.querySelectorAll("input"), child => {
262+
child.onblur = event => handleBlur(event, elementId);
263+
});
249264
}
250265

251266
function generateSettings() {
252-
const settings = document.getElementById("settings-dropdown");
253-
const settingsButton = settings.querySelector(".settings-icon")
254-
settingsButton.onclick = () => settings.classList.toggle("open");
255-
settingsButton.onblur = handleBlur;
256-
const settingsMenu = settings.querySelector(".settings-menu");
257-
settingsMenu.onblur = handleBlur;
258-
onEachLazy(
259-
settingsMenu.querySelectorAll("input"),
260-
el => el.onblur = handleBlur,
261-
);
267+
setupDropdown("settings-dropdown");
262268

263269
const LEVEL_FILTERS_DEFAULT = {allow: true, warn: true, deny: true, none: true};
264270
generateListOfOptions(LEVEL_FILTERS_DEFAULT, "lint-levels");
@@ -287,12 +293,6 @@ function generateSettings() {
287293
};
288294
generateListOfOptions(APPLICABILITIES_FILTER_DEFAULT, "lint-applicabilities");
289295

290-
const VERSIONS_FILTERS = {
291-
"≥": {enabled: false, minorVersion: null },
292-
"≤": {enabled: false, minorVersion: null },
293-
"=": {enabled: false, minorVersion: null },
294-
};
295-
296296
let html = '';
297297
for (const kind of ["≥", "≤", "="]) {
298298
html += `\
@@ -309,6 +309,7 @@ function generateSettings() {
309309
</li>`;
310310
}
311311
document.getElementById("version-filter-selector").innerHTML += html;
312+
setupDropdown("version-filter");
312313
}
313314

314315
function generateSearch() {

‎util/gh-pages/style.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,8 +272,6 @@ L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.649
272272
height: 18px;
273273
display: block;
274274
filter: invert(0.7);
275-
padding-left: 4px;
276-
padding-top: 3px;
277275
}
278276

279277
.settings-menu * {

0 commit comments

Comments
 (0)