Button disabling/enabling

Closes #10

app/assets/stylesheets/application.css

@@ -421,6 +421,13 @@ table.items select:focus-visible {
 .centered {
   margin: 0 auto;
 }
+[disabled] {
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  cursor: not-allowed;
+  fill: var(--color-border-gray) !important;
+  pointer-events: none;
+}
 .unwrappable {
   white-space: nowrap;
 }

app/javascript/application.js

@@ -2,6 +2,24 @@
 import "@hotwired/turbo-rails"
 
 function showPage(event) {
-  document.documentElement.style.visibility="visible";
+  document.documentElement.style.visibility="visible"
+}
+document.addEventListener('turbo:load', showPage)
+
+
+Turbo.StreamActions.disable = function() {
+  this.targetElements.forEach((e) => {
+    e.setAttribute("disabled", "disabled")
+    e.setAttribute("aria-disabled", "true")
+    e.setAttribute("tabindex", "-1")
+  })
+}
+
+Turbo.StreamActions.enable = function() {
+  this.targetElements.forEach((e) => {
+    e.removeAttribute("disabled")
+    e.removeAttribute("aria-disabled")
+    // 'tabindex' is not used explicitly, so removing it is safe
+    e.removeAttribute("tabindex")
+  })
 }
-document.addEventListener('turbo:load', showPage);

config/initializers/turbo_stream_actions.rb

@@ -0,0 +1,9 @@
+ActiveSupport.on_load :turbo_streams_tag_builder do
+  def disable(target)
+    action :disable, target
+  end
+
+  def disable_all(targets)
+    action_all :disable, targets
+  end
+end