Turbo + Stimulus for fast page loads

lib/controllers/base_controller.rb

@@ -50,5 +50,20 @@ def prevent_unauthorized_modifications
         redirect back
       end
     end
+
+    def javascript_imports
+      imports =
+        {
+          imports: {
+            "@hotwired/turbo": "https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/+esm",
+            "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/+esm",
+            "controllers/page_navigation_controller": "/javascripts/controllers/page_navigation_controller.js",
+            "controllers/search_navigation_controller": "/javascripts/controllers/search_navigation_controller.js",
+            "application": "/javascripts/application.js"
+          }
+        }
+
+      JSON.pretty_generate(imports)
+    end
   end
 end

lib/controllers/page_controller.rb

@@ -54,10 +54,10 @@ def restrict_concealed(page)
     case @pages.count
     when 0
       flash[:notice] = "Din sökning gav inga träffar"
-      redirect request.referrer
+      redirect request.referrer, 303
     when 1
       flash[:confirm] = "Din sökning gav bara denna sida som träff"
-      redirect @pages.first.slug
+      redirect @pages.first.slug, 303
     else
       flash.now[:confirm] = "Din sökning gav #{@pages.count} träffar"
       haml :search

public/javascripts/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+import "@hotwired/turbo"
+
+import PageNavigationController from "controllers/page_navigation_controller"
+import SearchNavigationController from "controllers/search_navigation_controller"
+
+window.Stimulus = Application.start()
+Stimulus.register("page-navigation", PageNavigationController)
+Stimulus.register("search-navigation", SearchNavigationController)

public/javascripts/controllers/page_navigation_controller.js

@@ -0,0 +1,59 @@
+import {Controller} from "@hotwired/stimulus"
+import * as Turbo from "@hotwired/turbo"
+
+export default class extends Controller {
+  home(event) {
+    if (this.#isInputField(event.target)) {
+      Turbo.visit("/")
+    }
+  }
+
+  list(event) {
+    if (this.#isInputField(event.target)) {
+      Turbo.visit("/list")
+    }
+  }
+
+  latest(event) {
+    if (this.#isInputField(event.target)) {
+      Turbo.visit("/latest")
+    }
+  }
+
+  new(event) {
+    if (this.#isInputField(event.target)) {
+      Turbo.visit("/new")
+    }
+  }
+
+  edit(event) {
+    if (this.#isInputField(event.target)) {
+      let editPageLink = document.querySelector("#edit_page")
+      if (editPageLink) {
+        Turbo.visit(editPageLink.href)
+      }
+    }
+  }
+
+  focusSearch(event) {
+    if (this.#isInputField(event.target)) {
+      let searchInput = document.getElementById('q')
+      searchInput.focus()
+      searchInput.select()
+      event.preventDefault()
+    }
+  }
+
+  blurSearch(event) {
+    let searchInput = document.getElementById('q');
+    if (event.target === searchInput) {
+      searchInput.blur();
+    }
+    event.preventDefault()
+  }
+
+  #isInputField(target) {
+    let targetTag = target.tagName.toLowerCase()
+    return targetTag !== 'input' && targetTag !== 'textarea' && targetTag !== 'select'
+  }
+}

public/javascripts/controllers/search_navigation_controller.js

@@ -0,0 +1,75 @@
+import {Controller} from "@hotwired/stimulus"
+import * as Turbo from "@hotwired/turbo"
+
+export default class extends Controller {
+  connect() {
+    let selectedLink = this.#getSelectedElement();
+    if (!selectedLink) {
+      let pageLinks = document.getElementsByClassName('page-link');
+      if (pageLinks && pageLinks.length > 0) {
+        this.#selectElement(pageLinks[0]);
+      }
+    }
+  }
+
+  down() {
+    let selectedLink = this.#getSelectedElement();
+    if (selectedLink) {
+      let pageLinks = document.getElementsByClassName('page-link');
+
+      for (let i = 0; i < pageLinks.length; i++) {
+        let page = pageLinks[i];
+        if (page === selectedLink && i < (pageLinks.length - 1)) {
+          this.#selectElement(pageLinks[i + 1])
+          this.#deselectElement(pageLinks[i]);
+          break;
+        }
+      }
+      return false;
+    }
+  }
+
+  up() {
+    let selectedLink = this.#getSelectedElement();
+    if (selectedLink) {
+      let pageLinks = document.getElementsByClassName('page-link');
+
+      for (let i = 0; i < pageLinks.length; i++) {
+        let page = pageLinks[i];
+        if (page === selectedLink && i > 0) {
+          this.#selectElement(pageLinks[i - 1])
+          this.#deselectElement(pageLinks[i]);
+          break;
+        }
+      }
+      return false;
+    }
+  }
+
+  open() {
+    let selectedLink = this.#getSelectedElement();
+    if (selectedLink) {
+      selectedLink.click()
+      return false;
+    }
+  }
+
+  #getSelectedElement() {
+    return document.getElementById('navigation-selected');
+  }
+
+  #selectElement(element) {
+    element.id = "navigation-selected";
+    return true;
+  }
+
+  #deselectElement(element) {
+    element.id = "";
+    return true;
+  }
+
+  #isInputField(target) {
+    let targetTag = target.tagName.toLowerCase()
+    return targetTag !== 'input' && targetTag !== 'textarea' && targetTag !== 'select'
+  }
+}

views/layout.haml

@@ -8,11 +8,28 @@
       Starkast Wiki
     %link{ href: '/favicon.ico', rel: 'shortcut icon', type: 'image/ico' }
     %link{ href: "/stylesheets/default.css?#{App.cache_bust}", rel: 'stylesheet', type: 'text/css' }
-    %script{ src: '/javascripts/mousetrap.min.js' }
-    %script{ src: '/javascripts/mousetrap-global-bind.min.js' }
     - settings.js.each do |js|
       %script{ src: js.fetch(:url), integrity: js.fetch(:sha), crossorigin: :anonymous }
-  %body
+    %script{type: "importmap"}
+      != javascript_imports
+    %script{type: "module"}
+      import "application"
+  %body{data: {
+          controller: "page-navigation search-navigation",
+          action: "keydown.h->page-navigation#home |
+                   keydown.i->page-navigation#list |
+                   keydown.l->page-navigation#latest |
+                   keydown.n->page-navigation#new |
+                   keydown.e->page-navigation#edit |
+                   keydown.s->page-navigation#focusSearch |
+                   keydown.esc->page-navigation#blurSearch |
+                   keydown.down->search-navigation#down |
+                   keydown.j->search-navigation#down |
+                   keydown.up->search-navigation#up |
+                   keydown.k->search-navigation#up |
+                   keydown.o->search-navigation#open |
+                   keydown.enter->search-navigation#open"
+        }}
     %div{ id: @edit_mode ? 'container-lg' : 'container' }
       #header
         #login
@@ -33,39 +50,3 @@
         !=yield
     #footer
       != haml :'../layouts/_footer', layout: false
-
-    :javascript
-      Mousetrap.bind(['/', 's'], function() {
-        var searchInput = document.getElementById('q');
-        searchInput.focus();
-        searchInput.select();
-        return false;
-      });
-
-      Mousetrap.bind('h', function() {
-        window.location = "/";
-        return false;
-      });
-
-      Mousetrap.bind('i', function() {
-        window.location = "/list";
-        return false;
-      });
-
-      Mousetrap.bind('l', function() {
-        window.location = "/latest";
-        return false;
-      });
-
-      Mousetrap.bind('n', function() {
-        window.location = "/new";
-        return false;
-      });
-
-      Mousetrap.bindGlobal('escape', function() {
-        var searchInput = document.getElementById('q');
-        if (document.activeElement == searchInput) {
-          searchInput.blur();
-        }
-        return false;
-      });

views/page/_actions.haml

@@ -2,7 +2,7 @@
   %ul
     - if logged_in?
       %li
-        %a{ href: "/#{@page.slug}/edit" } Ändra
+        %a{ href: "/#{@page.slug}/edit", id: "edit_page" } Ändra
         - if starkast?
           %form{ action: "/#{@page.slug}/conceal", method: :post }
             %button

views/page/search.haml

@@ -6,53 +6,3 @@
       - if page.concealed
         🔐
       %span.description= page.description
-
-:javascript
-  (function(){
-    function getSelectedElement() {
-      return document.getElementById('navigation-selected');
-    }
-    function selectElement(element) {
-      element.id = "navigation-selected";
-      return true;
-    }
-    function deselectElement(element) {
-      element.id = "";
-      return true;
-    }
-
-    var pageLinks = document.getElementsByClassName('page-link');
-    selectElement(pageLinks[0]);
-
-    Mousetrap.bind(['o', 'enter'], function() {
-      getSelectedElement().click();
-      return false;
-    });
-
-    Mousetrap.bind(['j', 'down'], function() {
-      var selectedLink = getSelectedElement();
-      for (var i = 0; i < pageLinks.length; i++) {
-        var page = pageLinks[i];
-        if (page == selectedLink && i < (pageLinks.length - 1)) {
-          selectElement(pageLinks[i + 1])
-          deselectElement(pageLinks[i]);
-          break;
-        }
-      }
-      return false;
-    });
-
-    Mousetrap.bind(['k', 'up'], function() {
-      var selectedLink = getSelectedElement();
-      for (var i = 0; i < pageLinks.length; i++) {
-        var page = pageLinks[i];
-        if (page == selectedLink && i > 0) {
-          selectElement(pageLinks[i - 1])
-          deselectElement(pageLinks[i]);
-          break;
-        }
-      }
-      return false;
-    });
-  })();
-

views/page/show.haml

@@ -1,9 +1,3 @@
 %h1.title= @page.title
 
 !~ @page.compiled_content
-
-:javascript
-  Mousetrap.bind('e', function() {
-    window.location = "#{@page.slug}/edit";
-    return false;
-  });