Add hot keys feature

app/javascript/application.js

@@ -6,4 +6,3 @@ import * as bootstrap from "bootstrap"
 import "trix"
 import "@rails/actiontext"
 
-Trix.config.blockAttributes.default.tagName = 'p';

app/javascript/controllers/hotkey_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+import { install } from '@github/hotkey'
+
+// Connects to data-controller="hotkey"
+export default class extends Controller {
+  connect() {
+    // Install all the hotkeys on the page
+    console.log("hotkey connect", this.element)
+    this.element.addEventListener("turbo:load", this.handleTurboLoad)
+    for (const el of this.element.parentNode.querySelectorAll('[data-hotkey]')) {
+      console.log(el)
+      install(el)
+    }
+  }
+
+  handleTurboLoad(event) {
+    for (const el of event.getTarget().querySelectorAll('[data-hotkey]')) {
+      console.log(el)
+      install(el)
+    }
+  }
+}

app/javascript/controllers/index.js

@@ -22,6 +22,9 @@ application.register("drag", DragController)
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)
 
+import HotkeyController from "./hotkey_controller"
+application.register("hotkey", HotkeyController)
+
 import RichTextLinkTargetsController from "./rich_text_link_targets_controller"
 application.register("rich-text-link-targets", RichTextLinkTargetsController)
 

app/views/layouts/application.html.slim

@@ -8,6 +8,7 @@ html data-bs-theme="#{cookies[:"modeTheme"] || "light"}" data-controller="set-th
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
   body
+    a.visually-hidden href="#main-content" data={ hotkey: "t", controller: "hotkey" } Direkt zum Inhalt
     = render partial: "layouts/navigation"
     .container-fluid
       .row

app/views/pages/_page.html.erb

@@ -10,4 +10,6 @@
       <%= render partial: "pages/new_element_button", locals: { page: page } %>
     <% end %>
   </div>
+
+  <%= link_to("Zum ersten Element", "##{dom_id(page.elements.first)}", class: "visually-hidden", data: {controller: :hotkey, hotkey: "a"}) if page.elements.first %>
 </div>

app/views/reports/_page_nav.html.slim

@@ -1,10 +1,10 @@
 / div id=dom_id(report, :page_nav)
-= turbo_frame_tag(dom_id(report, :page_nav))
-  ul.nav.nav-underline 
+= turbo_frame_tag(dom_id(report, :page_nav)) do
+  ul.nav.nav-underline
     li.nav-item 
-      = link_to("Baum", url_for(pnm: :n), class: "nav-link #{@page_nav_mode == :nav_tree ? "active david" : nil}")
+      = link_to("Baum", report_path(report, page_id: @current_page.id, pnm: :n), class: "nav-link #{@page_nav_mode == :nav_tree ? "active" : nil}", data: { hotkey: "b", controller: :hotkey })
     li.nav-item 
-      = link_to("Notizen", url_for(pnm: :c), class: "nav-link #{@page_nav_mode == :comment ? "active" : nil}")
+      = link_to("Notizen", report_path(report, page_id: @current_page.id, pnm: :c), class: "nav-link #{@page_nav_mode == :comment ? "active" : nil}", data: { hotkey: "n", controller: :hotkey })
   - if @page_nav_mode == :nav_tree
     - if report.pages.any?
       nav.mt-3 id=dom_id(report, :page_nav_spy)

app/views/success_criteria/_body.html.slim

@@ -28,7 +28,9 @@
       .col-md-4.col-lg-3
         .text-end.fw-bold WCAG/ID
       .col-md-8.col-lg-9
-        = link_to("#{success_criterion.check.external_number}/#{success_criterion.check.id}", success_criterion.check, data: { turbo_frame: "_top"}, target: :_blank)
+        => link_to("#{success_criterion.check.external_number}", success_criterion.check.external_url, target: :_blank)
+        '/
+        = link_to("#{Check.model_name.human} ##{success_criterion.check.id}", success_criterion.check, target: :_blank)
     .row.mb-4
       .col-md-4.col-lg-3
         .text-end.fw-bold = SuccessCriterion.human_attribute_name(:quick_criterion)

package.json

@@ -2,6 +2,7 @@
   "name": "app",
   "private": true,
   "dependencies": {
+    "@github/hotkey": "^3.1.1",
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.4",
     "@popperjs/core": "^2.11.8",

yarn.lock

@@ -122,6 +122,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.23.0.tgz#db44a6a08520b5f25bbe409f34a59f2d4bcc7ced"
   integrity sha512-Arm+WgUFLUATuoxCJcahGuk6Yj9Pzxd6l11Zb/2aAuv5kWWvvfhLFo2fni4uSK5vzlUdCGZ/BdV5tH8klj8p8g==
 
+"@github/hotkey@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@github/hotkey/-/hotkey-3.1.1.tgz#61fdf9993378b402bd9cdd494ee8149fe3172b0c"
+  integrity sha512-H30I6XDO3gFSgLuEuHoMBRZG9c3uCKNdAcYklL1FaZDPdU1bXfgjnpzGDPcUr0U6eGQ+T3XLY9slatwZYWL1dA==
+
 "@hotwired/stimulus@^3.2.2":
   version "3.2.2"
   resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz"