feat: add keyboard navigation

src/main.rs

@@ -259,6 +259,9 @@ async fn main() {
 		.at("/check_update.js")
 		.get(|_| resource(include_str!("../static/check_update.js"), "text/javascript", false).boxed());
 	app.at("/copy.js").get(|_| resource(include_str!("../static/copy.js"), "text/javascript", false).boxed());
+	app
+		.at("/static/keyboardcommands.js")
+		.get(|_| resource(include_str!("../static/keyboardcommands.js"), "text/javascript", false).boxed());
 
 	app.at("/commits.atom").get(|_| async move { proxy_commit_info().await }.boxed());
 	app.at("/instances.json").get(|_| async move { proxy_instances().await }.boxed());

static/keyboardcommands.js

@@ -0,0 +1,56 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+allComments = [];
+topmostCommentsInThreads = [];
+let parentCommentIndex = 0;
+let topmostCommentIndex = 0;
+
+const COMMENT_INDEX_INCREMENT = 1;
+const COMMENT_INDEX_DECREMENT = -1;
+
+document.querySelectorAll('.thread .comment').forEach(element => {
+    allComments.push(element.getAttribute('data-comment-id'));
+
+});
+
+document.querySelectorAll('.thread').forEach((thread) => {
+    const allCommentsInThread = thread.querySelectorAll('.comment');
+    allCommentsInThread.forEach((comment) => {
+      if (!comment.closest('blockquote')) {
+        topmostCommentsInThreads.push(comment);
+      }
+    });
+  });
+
+
+  document.addEventListener('keypress', (event) => {
+    if (event.key === 'Enter' && event.shiftKey) {
+      window.open(post_url.href, "_blank").focus();//open link in new tab, though in Edge it seems to be new window
+    } else if (event.key === 'Enter') {
+      window.location.href = post_url.href;
+    } else if (event.key === 'j') {//next comment
+      const nextComment = document.getElementById(allComments[parentCommentIndex + COMMENT_INDEX_INCREMENT]);
+      parentCommentIndex += COMMENT_INDEX_INCREMENT;
+      nextComment.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else if (event.key === 'k') {//previous comment
+      const previousComment = document.getElementById(allComments[parentCommentIndex + COMMENT_INDEX_DECREMENT]);
+      parentCommentIndex += COMMENT_INDEX_DECREMENT;
+      if (parentCommentIndex < 0) {
+        parentCommentIndex = 0;
+      }
+      previousComment.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else if (event.key=== 't') { //top of next thread
+      const nextTopmostComment = topmostCommentsInThreads[topmostCommentIndex + COMMENT_INDEX_INCREMENT];
+      topmostCommentIndex += COMMENT_INDEX_INCREMENT;
+      nextTopmostComment.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else if (event.key === 'p') {//top of previous thread
+      const previousTopmostComment = topmostCommentsInThreads[topmostCommentIndex + COMMENT_INDEX_DECREMENT];
+      topmostCommentIndex += COMMENT_INDEX_DECREMENT;
+      if (topmostCommentIndex < 0) {
+        topmostCommentIndex = 0;
+      }
+      previousTopmostComment.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  });
+});
+

templates/base.html

@@ -27,6 +27,7 @@
 		<link rel="manifest" type="application/json" href="/manifest.json">
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
 		<link rel="stylesheet" type="text/css" href="/style.css?v={{ env!("CARGO_PKG_VERSION") }}">
+		<script src="/static/keyboardcommands.js"></script>		
 		<!-- Video quality -->
 		<div id="video_quality" data-value="{{ prefs.video_quality }}"></div>
 		{% endblock %}

templates/comment.html

@@ -3,7 +3,7 @@
 {% if kind == "more" && parent_kind == "t1" %}
 <a class="deeper_replies" href="{{ post_link }}{{ parent_id }}">&rarr; More replies ({{ more_count }})</a>
 {% else if kind == "t1" %}
-<div id="{{ id }}" class="comment">
+<div id="{{ id }}" class="comment" data-comment-id="{{ id }}">
 	<div class="comment_left">
     <p class="comment_score" title="{{ score.1 }}">
          {% if prefs.hide_score != "on" %}