Replace search with vanilla JS

This commit is contained in:
Guillaume Gomez 2024-08-13 20:47:54 +02:00
parent 9661ba0740
commit 0055cebaa3
3 changed files with 43 additions and 56 deletions

View file

@ -10,7 +10,7 @@ use clippy_lints::declared_lints::LINTS;
use clippy_lints::deprecated_lints::{DEPRECATED, DEPRECATED_VERSION, RENAMED};
use pulldown_cmark::{Options, Parser, html};
use rinja::{Template, filters::Safe};
use serde::{Deserialize, Serialize};
use serde::Deserialize;
use test_utils::IS_RUSTC_TEST_SUITE;
use ui_test::custom_flags::Flag;
use ui_test::custom_flags::rustfix::RustfixMode;

View file

@ -180,9 +180,9 @@ Otherwise, have a great day =^.^=
<div class="col-12 col-md-5 search-control">
<div class="input-group">
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label>
<input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" onblur="updatePath()" onchange="handleInputChanged()" />
<input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" />
<span class="input-group-btn">
<button class="filter-clear btn" type="button" ng-click="search = ''; updatePath();">
<button class="filter-clear btn" type="button" onclick="searchState.clearInput(event)">
Clear
</button>
</span>
@ -199,22 +199,22 @@ Otherwise, have a great day =^.^=
</div>
</div>
{% for lint in lints %}
<article class="panel panel-default" id="{{lint.id}}">
<article class="panel panel-default" id="{(lint.id)}">
<header class="panel-heading" ng-click="open[lint.id] = !open[lint.id]">
<h2 class="panel-title">
<div class="panel-title-name">
<span>{(lint.id)}</span>
<a href="#{{lint.id}}" class="anchor label label-default"
<a href="#{(lint.id)}" class="anchor label label-default"
ng-click="openLint(lint); $event.preventDefault(); $event.stopPropagation()">&para;</a>
<a href="" id="clipboard-{{lint.id}}" class="anchor label label-default" ng-click="copyToClipboard(lint); $event.stopPropagation()">
<a href="" id="clipboard-{(lint.id)}" class="anchor label label-default" ng-click="copyToClipboard(lint); $event.stopPropagation()">
&#128203;
</a>
</div>
<div class="panel-title-addons">
<span class="label label-lint-group label-default label-group-{{lint.group}}">{(lint.group)}</span>
<span class="label label-lint-group label-default label-group-{(lint.group)}">{(lint.group)}</span>
<span class="label label-lint-level label-lint-level-{{lint.level}}">{(lint.level)}</span>
<span class="label label-lint-level label-lint-level-{(lint.level)}">{(lint.level)}</span>
<span class="label label-doc-folding" ng-show="open[lint.id]">&minus;</span>
@ -223,7 +223,7 @@ Otherwise, have a great day =^.^=
</h2>
</header>
<div class="list-group lint-docs" ng-class="{collapse: true, in: open[lint.id]}">
<div class="list-group lint-docs">
<div class="list-group-item lint-doc-md">{(markdown(lint.docs))}</div>
<div class="lint-additional-info-container">
{# Applicability #}
@ -232,18 +232,21 @@ Otherwise, have a great day =^.^=
<span class="label label-default label-applicability">{( lint.applicability_str() )}</span>
<a href="https://doc.rust-lang.org/nightly/nightly-rustc/rustc_lint_defs/enum.Applicability.html#variants">(?)</a>
</div>
<!-- Clippy version -->
{# Clippy version #}
<div class="lint-additional-info-item">
<span>{% if lint.group == "deprecated" %}Deprecated{% else %} Added{% endif %} in: </span>
<span class="label label-default label-version">{(lint.version)}</span>
</div>
<!-- Open related issues -->
{# Open related issues #}
<div class="lint-additional-info-item">
<a href="https://github.com/rust-lang/rust-clippy/issues?q=is%3Aissue+{{lint.id}}">Related Issues</a>
</div>
<!-- Jump to source -->
<div class="lint-additional-info-item" ng-if="lint.id_location">
<a href="https://github.com/rust-lang/rust-clippy/blob/{{docVersion}}/clippy_lints/{{lint.id_location.path}}">View Source</a>
{# Jump to source #}
{% if let Some(id_location) = lint.id_location %}
<div class="lint-additional-info-item">
<a href="https://github.com/rust-lang/rust-clippy/blob/{{docVersion}}/clippy_lints/{{id_location}}">View Source</a>
{% endif %}
</div>
</div>
</div>

View file

@ -361,42 +361,6 @@
return $scope.groups[lint.group];
};
$scope.bySearch = function (lint, index, array) {
let searchStr = $scope.search;
// It can be `null` I haven't missed this value
if (searchStr == null) {
return true;
}
searchStr = searchStr.toLowerCase();
if (searchStr.startsWith("clippy::")) {
searchStr = searchStr.slice(8);
}
// Search by id
if (lint.id.indexOf(searchStr.replaceAll("-", "_")) !== -1) {
return true;
}
// Search the description
// The use of `for`-loops instead of `foreach` enables us to return early
const terms = searchStr.split(" ");
const docsLowerCase = lint.docs.toLowerCase();
for (index = 0; index < terms.length; index++) {
// This is more likely and will therefore be checked first
if (docsLowerCase.indexOf(terms[index]) !== -1) {
continue;
}
if (lint.id.indexOf(terms[index]) !== -1) {
continue;
}
return false;
}
return true;
}
$scope.byApplicabilities = function (lint) {
return $scope.applicabilities[lint.applicability];
};
@ -472,6 +436,11 @@ function getQueryVariable(variable) {
window.searchState = {
timeout: null,
inputElem: document.getElementById("search-input"),
lastSearch: '',
clearInput: () => {
searchState.inputElem.value = "";
searchState.filterLints();
},
clearInputTimeout: () => {
if (searchState.timeout !== null) {
clearTimeout(searchState.timeout);
@ -483,32 +452,38 @@ window.searchState = {
setTimeout(searchState.filterLints, 50);
},
filterLints: () => {
let searchStr = searchState.value.trim().toLowerCase();
searchState.clearInputTimeout();
let searchStr = searchState.inputElem.value.trim().toLowerCase();
if (searchStr.startsWith("clippy::")) {
searchStr = searchStr.slice(8);
}
if (searchState.lastSearch === searchStr) {
return;
}
searchState.lastSearch = searchStr;
const terms = searchStr.split(" ");
onEachLazy(document.querySelectorAll("article"), lint => {
// Search by id
if (lint.id.indexOf(searchStr.replaceAll("-", "_")) !== -1) {
el.style.display = "";
lint.style.display = "";
return;
}
// Search the description
// The use of `for`-loops instead of `foreach` enables us to return early
const docsLowerCase = lint.docs.toLowerCase();
const docsLowerCase = 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) {
continue;
return;
}
if (lint.id.indexOf(terms[index]) !== -1) {
continue;
return;
}
return false;
lint.style.display = "none";
}
});
},
@ -631,7 +606,16 @@ function generateSettings() {
);
}
function generateSearch() {
searchState.inputElem.addEventListener("change", handleInputChanged);
searchState.inputElem.addEventListener("input", handleInputChanged);
searchState.inputElem.addEventListener("keydown", handleInputChanged);
searchState.inputElem.addEventListener("keyup", handleInputChanged);
searchState.inputElem.addEventListener("paste", handleInputChanged);
}
generateSettings();
generateSearch();
// loading the theme after the initial load
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");