Add selecting next/previous tunit and highlight it

assets/css/article.css

@@ -15,6 +15,14 @@
   @apply hover:bg-gray-700;
 }
 
+.article .tunit[current="yes"] {
+  @apply bg-amber-300 text-stone-700 hover:bg-amber-200 hover:text-red-900;
+}
+
+.dark .article .tunit[current="yes"] {
+  @apply bg-amber-500/70 text-white hover:bg-amber-500/70 hover:text-red-900;
+}
+
 .article a.hide-link {
   display: none;
 }

assets/js/app.js

@@ -23,11 +23,14 @@ import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 import {DarkModeHook} from './dark-mode-widget'
+import {TranslationFormHook} from "./translation-form"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   params: {_csrf_token: csrfToken},
-  hooks: {dark_mode_widget: DarkModeHook},
+  hooks: {translation_form: TranslationFormHook,
+          // tunit_editor: TunitEditorHook,
+          dark_mode_widget: DarkModeHook},
 })
 
 // Show progress bar on live navigation and form submits

assets/js/translation-form.js

@@ -0,0 +1,38 @@
+let TranslationFormHook = {
+
+  mounted() {
+    this.el.addEventListener("keyup", this.keyupHandler.bind(this))
+    this.title_input = this.el.querySelector("#translation-form_title")
+    this.tunit_editor = this.el.querySelector("#tunit-editor-content")
+  },
+  keyupHandler(e) {
+    var preaction = () => { }
+    var postaction = () => { }
+    var payload = {}
+    if (e.altKey){
+      if (e.key == "ArrowDown"){
+        preaction = () => { this.title_input.focus() }
+        postaction = () => { this.tunit_editor.focus() }
+        var handler = "select_next_tunit"
+      } else if (e.key == "ArrowUp"){
+        preaction = () => { this.title_input.focus() }
+        postaction = () => { this.tunit_editor.focus() }
+        var handler = "select_previous_tunit"
+      } else if (e.key == "u") {
+        var handler = "tunit_status"
+        payload = {status: "untranslated"}
+      } else if (e.key == "p") {
+        var handler = "tunit_status"
+        payload = {status: "passable"}
+      } else if (e.key == "o") {
+        var handler = "tunit_status"
+        payload = {status: "done"}
+      }
+      preaction.call()
+      this.pushEventTo(this.el, handler, payload, postaction)
+    }
+    // console.info(["keyupHandler", e, this])
+  },
+}
+
+export {TranslationFormHook}