Support all filters except versions

Author: GuillaumeGomez

util/gh-pages/index_template.html

@@ -61,31 +61,31 @@ <h1>Clippy Lints</h1>
 <divid="upper-filters" class="col-12 col-md-5">
 <divclass="btn-group" id="lint-levels" tabindex="-1">
 <buttontype="button" class="btn btn-default dropdown-toggle">
- Lint levels <spanclass="badge"id="selected-levels">4</span><spanclass="caret"></span>
+ Lint levels <spanclass="badge">4</span><spanclass="caret"></span>
 </button>
 <ulclass="dropdown-menu" id="lint-levels-selector">
 <liclass="checkbox">
-<buttononclick="toggleElements(this, true)">All</button>
+<buttononclick="toggleElements('levels_filter', true)">All</button>
 </li>
 <liclass="checkbox">
-<buttononclick="toggleElements(this, false)">None</button>
+<buttononclick="toggleElements('levels_filter', false)">None</button>
 </li>
 <lirole="separator" class="divider"></li>
 </ul>
 </div>
 <divclass="btn-group" id="lint-groups" tabindex="-1">
 <buttontype="button" class="btn btn-default dropdown-toggle">
- Lint groups <spanclass="badge"id="selected-groups"></span><spanclass="caret"></span>
+ Lint groups <spanclass="badge"></span><spanclass="caret"></span>
 </button>
 <ulclass="dropdown-menu" id="lint-groups-selector">
 <liclass="checkbox">
-<buttononclick="toggleElements(this, true)">All</button>
+<buttononclick="toggleElements('groups_filter', true)">All</button>
 </li>
 <liclass="checkbox">
 <buttononclick="resetGroupsToDefault()">Default</button>
 </li>
 <liclass="checkbox">
-<buttononclick="toggleElements(this, false)">None</button>
+<buttononclick="toggleElements('groups_filter', false)">None</button>
 </li>
 <lirole="separator" class="divider"></li>
 </ul>
@@ -111,10 +111,10 @@ <h1>Clippy Lints</h1>
 </button>
 <ulclass="dropdown-menu" id="lint-applicabilities-selector">
 <liclass="checkbox">
-<buttononclick="toggleElements(this, true)">All</button>
+<buttononclick="toggleElements('applicabilities_filter', true)">All</button>
 </li>
 <liclass="checkbox">
-<buttononclick="toggleElements(this, false)">None</button>
+<buttononclick="toggleElements('applicabilities_filter', false)">None</button>
 </li>
 <lirole="separator" class="divider"></li>
 </ul>
@@ -158,7 +158,6 @@ <h2 class="panel-title">
 
 <spanclass="label label-lint-level label-lint-level-{(lint.level)}">{(lint.level)}</span>
 
-
 <spanclass="label label-doc-folding">&plus;</span>
 </div>
 </h2>

util/gh-pages/script.js

@@ -76,6 +76,29 @@ window.searchState = {
 setTimeout(searchState.filterLints,50);
 },
 filterLints: ()=>{
+functionmatchesSearch(lint,terms,searchStr){
+// Search by id
+if(lint.elem.id.indexOf(searchStr)!==-1){
+returntrue;
+}
+// Search the description
+// The use of `for`-loops instead of `foreach` enables us to return early
+constdocsLowerCase=lint.elem.textContent.toLowerCase();
+for(consttermofterms){
+// This is more likely and will therefore be checked first
+if(docsLowerCase.indexOf(term)!==-1){
+returntrue;
+}
+
+if(lint.elem.id.indexOf(term)!==-1){
+returntrue;
+}
+
+returnfalse;
+}
+returntrue;
+}
+
 searchState.clearInputTimeout();
 
 letsearchStr=searchState.inputElem.value.trim().toLowerCase();
@@ -87,29 +110,19 @@ window.searchState = {
 }
 searchState.lastSearch=searchStr;
 constterms=searchStr.split(" ");
+constcleanedSearchStr=searchStr.replaceAll("-","_");
 
-onEachLazy(document.querySelectorAll("article"),lint=>{
-// Search by id
-if(lint.id.indexOf(searchStr.replaceAll("-","_"))!==-1){
-lint.style.display="";
-return;
+for(constlintoffilters.getAllLints()){
+lint.searchFilteredOut=!matchesSearch(lint,terms,cleanedSearchStr);
+if(lint.filteredOut){
+continue;
 }
-// Search the description
-// The use of `for`-loops instead of `foreach` enables us to return early
-constdocsLowerCase=lint.textContent.toLowerCase();
-for(index=0;index<terms.length;index++){
-// This is more likely and will therefore be checked first
-if(docsLowerCase.indexOf(terms[index])!==-1){
-return;
-}
-
-if(lint.id.indexOf(terms[index])!==-1){
-return;
-}
-
-lint.style.display="none";
+if(lint.searchFilteredOut){
+lint.elem.style.display="none";
+}else{
+lint.elem.style.display="";
 }
-});
+}
 if(searchStr.length>0){
 window.location.hash=`/${searchStr}`;
 }else{
@@ -151,12 +164,26 @@ function handleShortcut(ev) {
 document.addEventListener("keypress",handleShortcut);
 document.addEventListener("keydown",handleShortcut);
 
-functiontoggleElements(element,value){
-// `element` is always a button in a `li` in a `ul`. We want the `input` in the `ul`.
+functiontoggleElements(filter,value){
+letneedsUpdate=false;
+letcount=0;
+
+constelement=document.getElementById(filters[filter].id);
 onEachLazy(
-element.parentElement.parentElement.getElementsByTagName("input"),
-el=>el.checked=value,
+element.querySelectorAll("ul input"),
+el=>{
+if(el.checked!==value){
+el.checked=value;
+filters[filter][el.getAttribute("data-value")]=value;
+needsUpdate=true;
+}
+count+=1;
+}
 );
+element.querySelector(".badge").innerText=value ? count : 0;
+if(needsUpdate){
+filters.filterLints();
+}
 }
 
 functionchangeSetting(elem){
@@ -251,23 +278,99 @@ const GROUPS_FILTER_DEFAULT = {
 style: true,
 suspicious: true,
 };
+constLEVEL_FILTERS_DEFAULT={
+allow: true,
+warn: true,
+deny: true,
+none: true,
+};
+constAPPLICABILITIES_FILTER_DEFAULT={
+Unspecified: true,
+Unresolved: true,
+MachineApplicable: true,
+MaybeIncorrect: true,
+HasPlaceholders: true,
+};
+
+window.filters={
+groups_filter: {id: "lint-groups", ...GROUPS_FILTER_DEFAULT},
+levels_filter: {id: "lint-levels", ...LEVEL_FILTERS_DEFAULT},
+applicabilities_filter: {id: "lint-applicabilities", ...APPLICABILITIES_FILTER_DEFAULT},
+version_filter: {
+"≥": null,
+"≤": null,
+"=": null,
+},
+allLints: null,
+getAllLints: ()=>{
+if(filters.allLints===null){
+filters.allLints=Array.prototype.slice.call(
+document.getElementsByTagName("article"),
+).map(elem=>{
+return{
+elem: elem,
+group: elem.querySelector(".label-lint-group").innerText,
+level: elem.querySelector(".label-lint-level").innerText,
+version: elem.querySelector(".label-version").innerText,
+applicability: elem.querySelector(".label-applicability").innerText,
+filteredOut: false,
+searchFilteredOut: false,
+};
+});
+}
+returnfilters.allLints;
+},
+filterLints: ()=>{
+for(constlintoffilters.getAllLints()){
+lint.filteredOut=(!filters.groups_filter[lint.group]
+||!filters.levels_filter[lint.level]
+||!filters.applicabilities_filter[lint.applicability]);
+if(lint.filteredOut||lint.searchFilteredOut){
+lint.elem.style.display="none";
+}else{
+lint.elem.style.display="";
+}
+}
+},
+};
+
+functionupdateFilter(elem,filter){
+constvalue=elem.getAttribute("data-value");
+if(filters[filter][value]!==elem.checked){
+filters[filter][value]=elem.checked;
+constcounter=document.querySelector(`#${filters[filter].id} .badge`);
+counter.innerText=parseInt(counter.innerText)+(elem.checked ? 1 : -1);
+filters.filterLints();
+}
+}
 
 functionresetGroupsToDefault(){
+letneedsUpdate=false;
+
 onEachLazy(document.querySelectorAll("#lint-groups-selector input"),el=>{
 constkey=el.getAttribute("data-value");
-el.checked=GROUPS_FILTER_DEFAULT[key];
+constvalue=GROUPS_FILTER_DEFAULT[key];
+if(filters.groups_filter[key]!==value){
+filters.groups_filter[key]=value;
+el.checked=value;
+needsUpdate=true;
+}
 });
+if(needsUpdate){
+filters.filterLints();
+}
 }
 
-functiongenerateListOfOptions(list,elementId){
+functiongenerateListOfOptions(list,elementId,filter){
 lethtml='';
 letnbEnabled=0;
 for(const[key,value]ofObject.entries(list)){
 constattr=value ? " checked" : "";
 html+=`\
 <li class="checkbox">\
  <label class="text-capitalize">\
- <input type="checkbox" data-value="${key}"${attr}/>${key}\
+ <input type="checkbox" data-value="${key}" \
+ onchange="updateFilter(this, '${filter}')"${attr}/>${key}\
  </label>\
 </li>`;
 if(value){
@@ -298,20 +401,10 @@ function setupDropdown(elementId) {
 functiongenerateSettings(){
 setupDropdown("settings-dropdown");
 
-constLEVEL_FILTERS_DEFAULT={allow: true,warn: true,deny: true,none: true};
-generateListOfOptions(LEVEL_FILTERS_DEFAULT,"lint-levels");
-
-// Generate lint groups.
-generateListOfOptions(GROUPS_FILTER_DEFAULT,"lint-groups");
-
-constAPPLICABILITIES_FILTER_DEFAULT={
-Unspecified: true,
-Unresolved: true,
-MachineApplicable: true,
-MaybeIncorrect: true,
-HasPlaceholders: true
-};
-generateListOfOptions(APPLICABILITIES_FILTER_DEFAULT,"lint-applicabilities");
+generateListOfOptions(LEVEL_FILTERS_DEFAULT,"lint-levels","levels_filter");
+generateListOfOptions(GROUPS_FILTER_DEFAULT,"lint-groups","groups_filter");
+generateListOfOptions(
+APPLICABILITIES_FILTER_DEFAULT,"lint-applicabilities","applicabilities_filter");
 
 lethtml='';
 for(constkindof["≥","≤","="]){
@@ -361,5 +454,5 @@ function scrollToLintByURL() {
 }
 
 scrollToLintByURL();
-
+filters.filterLints();
 onEachLazy(document.querySelectorAll("pre > code.language-rust"),el=>hljs.highlightElement(el));