Finish porting lint functionalities to vanilla JS

util/gh-pages/index_template.html

@@ -199,14 +199,13 @@ Otherwise, have a great day =^.^=
                 </div>
             </div>
             {% for lint in lints %}
-                <article class="panel panel-default" id="{(lint.id)}">
-                    <header class="panel-heading" ng-click="open[lint.id] = !open[lint.id]">
+                <article class="panel panel-default collapsed" id="{(lint.id)}">
+                    <header class="panel-heading" onclick="expandLint('{(lint.id)}')">
                         <h2 class="panel-title">
-                            <div class="panel-title-name">
+                            <div class="panel-title-name" id="lint-{(lint.id)}">
                                 <span>{(lint.id)}</span>
-                                <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="#{(lint.id)}" class="anchor label label-default" onclick="openLint(event)">&para;</a>
+                                <a href="" class="anchor label label-default" onclick="copyToClipboard(event)">
                                     &#128203;
                                 </a>
                             </div>
@@ -217,8 +216,7 @@ Otherwise, have a great day =^.^=
                                 <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>
-                                <span class="label label-doc-folding" ng-hide="open[lint.id]">&plus;</span>
+                                <span class="label label-doc-folding">&plus;</span>
                             </div>
                         </h2>
                     </header>
@@ -239,13 +237,13 @@ Otherwise, have a great day =^.^=
                             </div>
                             {# 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>
+                                <a href="https://github.com/rust-lang/rust-clippy/issues?q=is%3Aissue+{(lint.id)}">Related Issues</a>
                             </div>
 
                             {# 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>
+                                    <a href="https://github.com/rust-lang/rust-clippy/blob/master/clippy_lints/{(id_location)}">View Source</a>
                             {% endif %}
                             </div>
                         </div>
@@ -315,7 +313,6 @@ Otherwise, have a great day =^.^=
         </style>
     </a>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/rust.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>

util/gh-pages/script.js

@@ -1,19 +1,4 @@
 (function () {
-    function scrollToLint(lintId) {
-        const target = document.getElementById(lintId);
-        if (!target) {
-            return;
-        }
-        target.scrollIntoView();
-    }
-
-    function scrollToLintByURL($scope, $location) {
-        const removeListener = $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
-            scrollToLint($location.path().substring(1));
-            removeListener();
-        });
-    }
-
     function selectGroup($scope, selectedGroup) {
         const groups = $scope.groups;
         for (const group in groups) {
@@ -365,39 +350,12 @@
                 return $scope.applicabilities[lint.applicability];
             };
 
-            // Show details for one lint
-            $scope.openLint = function (lint) {
-                $scope.open[lint.id] = true;
-                $location.path(lint.id);
-            };
-
             $scope.toggleExpansion = function(lints, isExpanded) {
                 lints.forEach(lint => {
                     $scope.open[lint.id] = isExpanded;
                 });
             }
 
-            $scope.copyToClipboard = function (lint) {
-                const clipboard = document.getElementById("clipboard-" + lint.id);
-                if (clipboard) {
-                    let resetClipboardTimeout = null;
-                    const resetClipboardIcon = clipboard.innerHTML;
-
-                    function resetClipboard() {
-                        resetClipboardTimeout = null;
-                        clipboard.innerHTML = resetClipboardIcon;
-                    }
-
-                    navigator.clipboard.writeText("clippy::" + lint.id);
-
-                    clipboard.innerHTML = "✓";
-                    if (resetClipboardTimeout !== null) {
-                        clearTimeout(resetClipboardTimeout);
-                    }
-                    resetClipboardTimeout = setTimeout(resetClipboard, 1000);
-                }
-            }
-
             // Get data
             $scope.open = {};
             $scope.loading = true;
@@ -413,8 +371,6 @@
                 selectGroup($scope, selectedGroup.toLowerCase());
             }
 
-            scrollToLintByURL($scope, $location);
-
             setTimeout(function () {
                 const el = document.getElementById('filter-input');
                 if (el) { el.focus() }
@@ -433,6 +389,65 @@ function getQueryVariable(variable) {
     }
 }
 
+function storeValue(settingName, value) {
+    try {
+        localStorage.setItem(`clippy-lint-list-${settingName}`, value);
+    } catch (e) { }
+}
+
+function loadValue(settingName) {
+    return localStorage.getItem(`clippy-lint-list-${settingName}`);
+}
+
+function setTheme(theme, store) {
+    let enableHighlight = false;
+    let enableNight = false;
+    let enableAyu = false;
+
+    switch(theme) {
+        case "ayu":
+            enableAyu = true;
+            break;
+        case "coal":
+        case "navy":
+            enableNight = true;
+            break;
+        case "rust":
+            enableHighlight = true;
+            break;
+        default:
+            enableHighlight = true;
+            theme = "light";
+            break;
+    }
+
+    document.getElementsByTagName("body")[0].className = theme;
+
+    document.getElementById("githubLightHighlight").disabled = enableNight || !enableHighlight;
+    document.getElementById("githubDarkHighlight").disabled = !enableNight && !enableAyu;
+
+    document.getElementById("styleHighlight").disabled = !enableHighlight;
+    document.getElementById("styleNight").disabled = !enableNight;
+    document.getElementById("styleAyu").disabled = !enableAyu;
+
+    if (store) {
+        storeValue("theme", theme);
+    } else {
+        document.getElementById(`theme-choice`).value = theme;
+    }
+}
+
+// loading the theme after the initial load
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+const theme = loadValue('theme');
+if (prefersDark.matches && !theme) {
+    setTheme("coal", false);
+} else {
+    setTheme(theme, false);
+}
+let disableShortcuts = loadValue('disable-shortcuts') === "true";
+document.getElementById("disable-shortcuts").checked = disableShortcuts;
+
 window.searchState = {
     timeout: null,
     inputElem: document.getElementById("search-input"),
@@ -486,6 +501,11 @@ window.searchState = {
                 lint.style.display = "none";
             }
         });
+        if (searchStr.length > 0) {
+            window.location.hash = `/${searchStr}`;
+        } else {
+            window.location.hash = '';
+        }
     },
 };
 
@@ -496,54 +516,6 @@ function handleInputChanged(event) {
     searchState.resetInputTimeout();
 }
 
-function storeValue(settingName, value) {
-    try {
-        localStorage.setItem(`clippy-lint-list-${settingName}`, value);
-    } catch (e) { }
-}
-
-function loadValue(settingName) {
-    return localStorage.getItem(`clippy-lint-list-${settingName}`);
-}
-
-function setTheme(theme, store) {
-    let enableHighlight = false;
-    let enableNight = false;
-    let enableAyu = false;
-
-    switch(theme) {
-        case "ayu":
-            enableAyu = true;
-            break;
-        case "coal":
-        case "navy":
-            enableNight = true;
-            break;
-        case "rust":
-            enableHighlight = true;
-            break;
-        default:
-            enableHighlight = true;
-            theme = "light";
-            break;
-    }
-
-    document.getElementsByTagName("body")[0].className = theme;
-
-    document.getElementById("githubLightHighlight").disabled = enableNight || !enableHighlight;
-    document.getElementById("githubDarkHighlight").disabled = !enableNight && !enableAyu;
-
-    document.getElementById("styleHighlight").disabled = !enableHighlight;
-    document.getElementById("styleNight").disabled = !enableNight;
-    document.getElementById("styleAyu").disabled = !enableAyu;
-
-    if (store) {
-        storeValue("theme", theme);
-    } else {
-        document.getElementById(`theme-choice`).value = theme;
-    }
-}
-
 function handleShortcut(ev) {
     if (ev.ctrlKey || ev.altKey || ev.metaKey || disableShortcuts) {
         return;
@@ -584,6 +556,52 @@ function onEachLazy(lazyArray, func) {
     }
 }
 
+function expandLintId(lintId) {
+    searchState.inputElem.value = lintId;
+    searchState.filterLints();
+
+    // Expand the lint.
+    const lintElem = document.getElementById(lintId);
+    const isCollapsed = lintElem.classList.remove("collapsed");
+    lintElem.querySelector(".label-doc-folding").innerText = "-";
+}
+
+// Show details for one lint
+function openLint(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    expandLintId(event.target.getAttribute("href").slice(1));
+}
+
+function expandLint(lintId) {
+    const lintElem = document.getElementById(lintId);
+    const isCollapsed = lintElem.classList.toggle("collapsed");
+    lintElem.querySelector(".label-doc-folding").innerText = isCollapsed ? "+" : "-";
+}
+
+function copyToClipboard(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const clipboard = event.target;
+
+    let resetClipboardTimeout = null;
+    const resetClipboardIcon = clipboard.innerHTML;
+
+    function resetClipboard() {
+        resetClipboardTimeout = null;
+        clipboard.innerHTML = resetClipboardIcon;
+    }
+
+    navigator.clipboard.writeText("clippy::" + clipboard.parentElement.id.slice(5));
+
+    clipboard.innerHTML = "✓";
+    if (resetClipboardTimeout !== null) {
+        clearTimeout(resetClipboardTimeout);
+    }
+    resetClipboardTimeout = setTimeout(resetClipboard, 1000);
+}
+
 function handleBlur(event) {
     const parent = document.getElementById("settings-dropdown");
     if (!parent.contains(document.activeElement) &&
@@ -617,15 +635,23 @@ function generateSearch() {
 generateSettings();
 generateSearch();
 
-// loading the theme after the initial load
-const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-const theme = loadValue('theme');
-if (prefersDark.matches && !theme) {
-    setTheme("coal", false);
-} else {
-    setTheme(theme, false);
+function scrollToLint(lintId) {
+    const target = document.getElementById(lintId);
+    if (!target) {
+        return;
+    }
+    target.scrollIntoView();
+    expandLintId(lintId);
 }
-let disableShortcuts = loadValue('disable-shortcuts') === "true";
-document.getElementById("disable-shortcuts").checked = disableShortcuts;
 
-hljs.highlightAll();
+// If the page we arrive on has link to a given lint, we scroll to it.
+function scrollToLintByURL() {
+    const lintId = window.location.hash.substring(2);
+    if (lintId.length > 0) {
+        scrollToLint(lintId);
+    }
+}
+
+scrollToLintByURL();
+
+onEachLazy(document.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));

util/gh-pages/style.css

@@ -396,3 +396,7 @@ body {
     background: var(--bg);
     color: var(--fg);
 }
+
+article.collapsed .lint-docs {
+    display: none;
+}