Merge pull request #1448 from GuillaumeGomez/move-keyboard-js

Move keyboard interactions handling out of the template inside a JS file

Author: GuillaumeGomez

src/web/metrics.rs

@@ -120,6 +120,7 @@ mod tests {
             ("/crate/rcc/0.0.0", "/crate/:name/:version"),
             ("/-/static/index.js", "static resource"),
             ("/-/static/menu.js", "static resource"),
+            ("/-/static/keyboard.js", "static resource"),
             ("/-/static/opensearch.xml", "static resource"),
             ("/releases", "/releases"),
             ("/releases/feed", "static resource"),

src/web/statics.rs

@@ -210,6 +210,24 @@ mod tests {
         });
     }
 
+    #[test]
+    fn keyboard_js() {
+        wrapper(|env| {
+            let web = env.frontend();
+
+            let resp = web.get("/-/static/keyboard.js").send()?;
+            assert!(resp.status().is_success());
+            assert_eq!(
+                resp.headers().get("Content-Type"),
+                Some(&"application/javascript".parse().unwrap()),
+            );
+            assert!(resp.content_length().unwrap() > 10);
+            assert!(resp.text()?.contains("handleKey"));
+
+            Ok(())
+        });
+    }
+
     #[test]
     fn static_files() {
         wrapper(|env| {

static/keyboard.js

@@ -0,0 +1,63 @@
+(function() {
+    function getKey(ev) {
+        if ("key" in ev && typeof ev.key != "undefined") {
+            return ev.key;
+        }
+        return String.fromCharCode(ev.charCode || ev.keyCode);
+    }
+
+    var active = null;
+    function handleKey(ev) {
+        if (ev.ctrlKey || ev.altKey || ev.metaKey || document.activeElement.tagName === "INPUT") {
+            return;
+        }
+
+        if (ev.which === 40) { // Down arrow
+            ev.preventDefault();
+            if (active === null) {
+                active = document.getElementsByClassName("recent-releases-container")[0].getElementsByTagName("li")[0];
+            } else if (active.nextElementSibling) {
+                active.classList.remove("selected");
+                active = active.nextElementSibling;
+            }
+            active.classList.add("selected");
+        } else if (ev.which === 38) { // Up arrow
+            ev.preventDefault();
+            if (active === null) {
+                active = document.getElementsByClassName("recent-releases-container")[0].getElementsByTagName("li")[0];
+            } else if (active.previousElementSibling) {
+                active.classList.remove("selected");
+                active = active.previousElementSibling;
+            }
+            active.classList.add("selected");
+            active.focus();
+        } else if (ev.which === 13) { // Return
+            if (active !== null) {
+                document.location.href = active.getElementsByTagName("a")[0].href;
+            }
+        } else {
+            switch (getKey(ev)) {
+                case "s":
+                case "S":
+                    ev.preventDefault();
+                    document.getElementsByClassName("search-input-nav")[0].focus();
+                    break;
+            }
+        }
+    }
+
+    document.onkeypress = handleKey;
+    document.onkeydown = handleKey;
+
+    var crates = Array.prototype.slice.call(document.getElementsByClassName("recent-releases-container")[0].getElementsByTagName("li"));
+    for (var i = 0; i < crates.length; ++i) {
+        crates[i].addEventListener("mouseover", function (event) {
+            this.classList.remove("selected");
+            active = null;
+        });
+        crates[i].addEventListener("mouseout", function (event) {
+            this.classList.remove("selected");
+            active = null;
+        });
+    }
+})();

templates/releases/releases.html

@@ -83,67 +83,5 @@
 {%- endblock body -%}
 
 {%- block javascript -%}
-    <script nonce="{{ csp_nonce }}" type="text/javascript" charset="utf-8">
-        function getKey(ev) {
-            if ("key" in ev && typeof ev.key != "undefined") {
-                return ev.key;
-            }
-            return String.fromCharCode(ev.charCode || ev.keyCode);
-        }
-
-        var active = null;
-        function handleKey(ev) {
-            if (ev.ctrlKey || ev.altKey || ev.metaKey || document.activeElement.tagName === "INPUT") {
-                return;
-            }
-
-            if (ev.which === 40) { // Down arrow
-                ev.preventDefault();
-                if (active === null) {
-                    active = document.getElementsByClassName("recent-releases-container")[0].getElementsByTagName("li")[0];
-                } else if (active.nextElementSibling) {
-                    active.classList.remove("selected");
-                    active = active.nextElementSibling;
-                }
-                active.classList.add("selected");
-            } else if (ev.which === 38) { // Up arrow
-                ev.preventDefault();
-                if (active === null) {
-                    active = document.getElementsByClassName("recent-releases-container")[0].getElementsByTagName("li")[0];
-                } else if (active.previousElementSibling) {
-                    active.classList.remove("selected");
-                    active = active.previousElementSibling;
-                }
-                active.classList.add("selected");
-                active.focus();
-            } else if (ev.which === 13) { // Return
-                if (active !== null) {
-                    document.location.href = active.getElementsByTagName("a")[0].href;
-                }
-            } else {
-                switch (getKey(ev)) {
-                    case "s":
-                    case "S":
-                        ev.preventDefault();
-                        document.getElementsByClassName("search-input-nav")[0].focus();
-                        break;
-                }
-            }
-        }
-
-        document.onkeypress = handleKey;
-        document.onkeydown = handleKey;
-
-        var crates = Array.prototype.slice.call(document.getElementsByClassName("recent-releases-container")[0].getElementsByTagName("li"));
-        for (var i = 0; i < crates.length; ++i) {
-            crates[i].addEventListener("mouseover", function (event) {
-                this.classList.remove("selected");
-                active = null;
-            });
-            crates[i].addEventListener("mouseout", function (event) {
-                this.classList.remove("selected");
-                active = null;
-            });
-        }
-    </script>
+    <script nonce="{{ csp_nonce }}" type="text/javascript" src="/-/static/keyboard.js?{{ docsrs_version() | slugify }}"></script>
 {%- endblock javascript -%}