Skip to content

Commit aeb548a

Browse files
GuillaumeGomezGuillaumeGomez
committed
Put back interactions with settings menus
1 parent f2193c6 commit aeb548a

3 files changed

Lines changed: 91 additions & 86 deletions

File tree

‎util/gh-pages/index_template.html‎

Lines changed: 26 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</head>
2828
<body>
2929
<divid="settings-dropdown">
30-
<divclass="settings-icon" tabindex="-1"></div>
30+
<buttonclass="settings-icon" tabindex="-1"></button>
3131
<divclass="settings-menu" tabindex="-1">
3232
<divclass="setting-radio-name">Theme</div>
3333
<selectid="theme-choice" onchange="setTheme(this.value, true)">
@@ -59,88 +59,62 @@ <h1>Clippy Lints</h1>
5959
<divclass="panel panel-default">
6060
<divclass="panel-body row">
6161
<divid="upper-filters" class="col-12 col-md-5">
62-
<divclass="btn-group">
62+
<divclass="btn-group"id="lint-levels" tabindex="-1">
6363
<buttontype="button" class="btn btn-default dropdown-toggle">
6464
Lint levels <spanclass="badge" id="selected-levels">4</span><spanclass="caret"></span>
6565
</button>
66-
<ulclass="dropdown-menu" id="lint-levels">
66+
<ulclass="dropdown-menu" id="lint-levels-selector">
6767
<liclass="checkbox">
68-
<labelonclick="toggleLevels(true)">
69-
<inputtype="checkbox" class="invisible" />
70-
All
71-
</label>
68+
<buttononclick="toggleElements(this, true)">All</button>
7269
</li>
7370
<liclass="checkbox">
74-
<labelonclick="toggleLevels(false)">
75-
<inputtype="checkbox" class="invisible" />
76-
None
77-
</label>
71+
<buttononclick="toggleElements(this, false)">None</button>
7872
</li>
7973
<lirole="separator" class="divider"></li>
8074
</ul>
8175
</div>
82-
<divclass="btn-group">
76+
<divclass="btn-group"id="lint-groups" tabindex="-1">
8377
<buttontype="button" class="btn btn-default dropdown-toggle">
8478
Lint groups <spanclass="badge" id="selected-groups"></span><spanclass="caret"></span>
8579
</button>
86-
<ulclass="dropdown-menu" id="lint-groups">
80+
<ulclass="dropdown-menu" id="lint-groups-selector">
8781
<liclass="checkbox">
88-
<labelonclick="toggleGroups(true)">
89-
<inputtype="checkbox" class="invisible" />
90-
All
91-
</label>
82+
<buttononclick="toggleElements(this, true)">All</button>
9283
</li>
9384
<liclass="checkbox">
94-
<labelonclick="resetGroupsToDefault()">
95-
<inputtype="checkbox" class="invisible" />
96-
Default
97-
</label>
85+
<buttononclick="resetGroupsToDefault()">Default</button>
9886
</li>
9987
<liclass="checkbox">
100-
<labelonclick="toggleGroups(false)">
101-
<inputtype="checkbox" class="invisible" />
102-
None
103-
</label>
88+
<buttononclick="toggleElements(this, false)">None</button>
10489
</li>
10590
<lirole="separator" class="divider"></li>
10691
</ul>
10792
</div>
108-
<divid="version-filter">
109-
<divclass="btn-group">
110-
<buttontype="button" class="btn btn-default dropdown-toggle">
111-
Version
112-
<spanid="version-filter-count" class="badge">0</span>
113-
<spanclass="caret"></span>
114-
</button>
115-
<ulid="version-filter-selector" class="dropdown-menu">
116-
<liclass="checkbox">
117-
<labelonclick="clearVersionFilters()">
118-
<inputtype="checkbox" class="invisible" />
119-
Clear filters
120-
</label>
121-
</li>
122-
<lirole="separator" class="divider"></li>
123-
</ul>
124-
</div>
93+
<divclass="btn-group" id="version-filter" tabindex="-1">
94+
<buttontype="button" class="btn btn-default dropdown-toggle">
95+
Version
96+
<spanid="version-filter-count" class="badge">0</span>
97+
<spanclass="caret"></span>
98+
</button>
99+
<ulid="version-filter-selector" class="dropdown-menu">
100+
<liclass="checkbox">
101+
<buttononclick="clearVersionFilters()">Clear filters</button>
102+
</li>
103+
<lirole="separator" class="divider"></li>
104+
</ul>
125105
</div>
126-
<divclass="btn-group">
106+
<divclass="btn-group",id="lint-applicabilities" tabindex="-1">
127107
<buttontype="button" class="btn btn-default dropdown-toggle">
128108
Applicability
129109
<spanclass="badge"></span>
130110
<spanclass="caret"></span>
131111
</button>
132-
<ulclass="dropdown-menu" id="lint-applicabilities">
112+
<ulclass="dropdown-menu" id="lint-applicabilities-selector">
133113
<liclass="checkbox">
134-
<labelonclick="toggleApplicabilities(true)">
135-
<inputtype="checkbox" class="invisible" />
136-
All
137-
</label>
114+
<buttononclick="toggleElements(this, true)">All</button>
138115
</li>
139116
<liclass="checkbox">
140-
<labelonclick="toggleApplicabilities(false)">
141-
<inputtype="checkbox" class="invisible" />
142-
None
143-
</label>
117+
<buttononclick="toggleElements(this, false)">None</button>
144118
</li>
145119
<lirole="separator" class="divider"></li>
146120
</ul>

‎util/gh-pages/script.js‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,14 @@ function handleShortcut(ev) {
151151
document.addEventListener("keypress",handleShortcut);
152152
document.addEventListener("keydown",handleShortcut);
153153

154+
functiontoggleElements(element,value){
155+
// `element` is always a button in a `li` in a `ul`. We want the `input` in the `ul`.
156+
onEachLazy(
157+
element.parentElement.parentElement.getElementsByTagName("input"),
158+
el=>el.checked=value,
159+
);
160+
}
161+
154162
functionchangeSetting(elem){
155163
if(elem.id==="disable-shortcuts"){
156164
disableShortcuts=elem.checked;
@@ -211,8 +219,8 @@ function copyToClipboard(event) {
211219
resetClipboardTimeout=setTimeout(resetClipboard,1000);
212220
}
213221

214-
functionhandleBlur(event){
215-
constparent=document.getElementById("settings-dropdown");
222+
functionhandleBlur(event,elementId){
223+
constparent=document.getElementById(elementId);
216224
if(!parent.contains(document.activeElement)&&
217225
!parent.contains(event.relatedTarget)
218226
){
@@ -227,6 +235,30 @@ function toggleExpansion(expand) {
227235
);
228236
}
229237

238+
functionclearVersionFilters(){
239+
onEachLazy(document.querySelectorAll("#version-filter-count input"),el=>el.value="");
240+
}
241+
242+
constGROUPS_FILTER_DEFAULT={
243+
cargo: true,
244+
complexity: true,
245+
correctness: true,
246+
deprecated: false,
247+
nursery: true,
248+
pedantic: true,
249+
perf: true,
250+
restriction: true,
251+
style: true,
252+
suspicious: true,
253+
};
254+
255+
functionresetGroupsToDefault(){
256+
onEachLazy(document.querySelectorAll("#lint-groups-selector input"),el=>{
257+
constkey=el.getAttribute("data-value");
258+
el.checked=GROUPS_FILTER_DEFAULT[key];
259+
});
260+
}
261+
230262
functiongenerateListOfOptions(list,elementId){
231263
lethtml='';
232264
letnbEnabled=0;
@@ -235,47 +267,41 @@ function generateListOfOptions(list, elementId) {
235267
html+=`\
236268
<li class="checkbox">\
237269
<label class="text-capitalize">\
238-
<input type="checkbox"${attr}/>${key}\
270+
<input type="checkbox" data-value="${key}"${attr}/>${key}\
239271
</label>\
240272
</li>`;
241273
if(value){
242274
nbEnabled+=1;
243275
}
244276
}
245277

246-
constelem=document.getElementById(elementId);
278+
constelem=document.getElementById(`${elementId}-selector`);
247279
elem.previousElementSibling.querySelector(".badge").innerText=`${nbEnabled}`;
248280
elem.innerHTML+=html;
281+
282+
setupDropdown(elementId);
283+
}
284+
285+
functionsetupDropdown(elementId){
286+
constelem=document.getElementById(elementId);
287+
constbutton=document.querySelector(`#${elementId} > button`);
288+
button.onclick=()=>elem.classList.toggle("open");
289+
290+
constsetBlur=child=>{
291+
child.onblur=event=>handleBlur(event,elementId);
292+
};
293+
onEachLazy(elem.children,setBlur);
294+
onEachLazy(elem.querySelectorAll("input"),setBlur);
295+
onEachLazy(elem.querySelectorAll("ul button"),setBlur);
249296
}
250297

251298
functiongenerateSettings(){
252-
constsettings=document.getElementById("settings-dropdown");
253-
constsettingsButton=settings.querySelector(".settings-icon")
254-
settingsButton.onclick=()=>settings.classList.toggle("open");
255-
settingsButton.onblur=handleBlur;
256-
constsettingsMenu=settings.querySelector(".settings-menu");
257-
settingsMenu.onblur=handleBlur;
258-
onEachLazy(
259-
settingsMenu.querySelectorAll("input"),
260-
el=>el.onblur=handleBlur,
261-
);
299+
setupDropdown("settings-dropdown");
262300

263301
constLEVEL_FILTERS_DEFAULT={allow: true,warn: true,deny: true,none: true};
264302
generateListOfOptions(LEVEL_FILTERS_DEFAULT,"lint-levels");
265303

266304
// Generate lint groups.
267-
constGROUPS_FILTER_DEFAULT={
268-
cargo: true,
269-
complexity: true,
270-
correctness: true,
271-
deprecated: false,
272-
nursery: true,
273-
pedantic: true,
274-
perf: true,
275-
restriction: true,
276-
style: true,
277-
suspicious: true,
278-
};
279305
generateListOfOptions(GROUPS_FILTER_DEFAULT,"lint-groups");
280306

281307
constAPPLICABILITIES_FILTER_DEFAULT={
@@ -287,12 +313,6 @@ function generateSettings() {
287313
};
288314
generateListOfOptions(APPLICABILITIES_FILTER_DEFAULT,"lint-applicabilities");
289315

290-
constVERSIONS_FILTERS={
291-
"≥": {enabled: false,minorVersion: null},
292-
"≤": {enabled: false,minorVersion: null},
293-
"=": {enabled: false,minorVersion: null},
294-
};
295-
296316
lethtml='';
297317
for(constkindof["≥","≤","="]){
298318
html+=`\
@@ -309,6 +329,7 @@ function generateSettings() {
309329
</li>`;
310330
}
311331
document.getElementById("version-filter-selector").innerHTML+=html;
332+
setupDropdown("version-filter");
312333
}
313334

314335
functiongenerateSearch(){

‎util/gh-pages/style.css‎

Lines changed: 12 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* {
@@ -329,6 +327,18 @@ L4.75,12h2.5l0.5393066-2.1572876 c0.2276001-0.1062012,0.4459839-0.2269287,0.649
329327
display: flex;
330328
}
331329

330+
ul.dropdown-menuli.checkbox>button {
331+
border:0;
332+
width:100%;
333+
background:var(--theme-popup-bg);
334+
color:var(--fg);
335+
}
336+
337+
ul.dropdown-menuli.checkbox>button:hover {
338+
background:var(--theme-hover);
339+
box-shadow: none;
340+
}
341+
332342
#version-filter {
333343
min-width: available;
334344
}

0 commit comments

Comments
 (0)