atomic_view 0.1.17 → 0.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 60e24ea14905c39463895bf65986134967d2d43ca813e0bf2694ac2624675bb7
-  data.tar.gz: 4776e9b26a08dcc0ef789bc94e1a1ee7067226bce0a02674516b1bfb9f3e8a73
+  metadata.gz: bf51382f0171a3bef2e79ae3229c2de7838e4b69d01fa8ea7ec8cc3ba0d0cde6
+  data.tar.gz: 0a990c04df1c8cfc688b66c0c4d2805c54e5af984ca4e81942f1225952c15841
 SHA512:
-  metadata.gz: a8c0c0b283c93b31c668e5c5354940031caf143e017486cb4634b4d7dc458dfec76cd3721ecf1ba8dd389f3dbad7dde6f8c557acd5f879b5a254bfc130f8bf06
-  data.tar.gz: dfefa8a1cda45ae904771d27c02cb9d106323cdd5a9db8aab3876e8d4fd684d070f473fe39a27a2aa9c9238cd663298cf46af2bbe47d23b23b41c028e1e78331
+  metadata.gz: d5f777b44351f97e414c6f157389fd3fc00e360e08dbb40dff71e3f4251d60341e4ed0c6ad5479d38a207bc861261572ba0e53460239393ce707b238e5f762a2
+  data.tar.gz: 791368e6d9ee177cd2ee840697158a876062af1e44881ae505606c51c0b09286b04e627c980c5b7ef047ed9f76af7226c6b5636cc86c7c41a5358af08a608b23

data/app/assets/javascripts/atomic_view/controllers/hotkey_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// A key (or chord) bound elsewhere via Stimulus's keyboard event filters,
+// e.g. `data-action="keydown.n@window->hotkey#click"`, activates this
+// element instead of every shortcut needing its own handler. Ignored while
+// the user is typing (an input/textarea/Trix editor has focus) or when the
+// element itself isn't interactable right now (hidden, disabled via
+// pointer-events: none, ...).
+export default class extends Controller {
+  click(event) {
+    if (this.isClickable && !this.shouldIgnore(event)) {
+      event.preventDefault()
+      this.element.click()
+    }
+  }
+
+  focus(event) {
+    if (this.isClickable && !this.shouldIgnore(event)) {
+      event.preventDefault()
+      this.element.focus()
+    }
+  }
+
+  shouldIgnore(event) {
+    const target = event.target
+    return event.defaultPrevented || !!target?.closest("input, textarea, trix-editor, [contenteditable]")
+  }
+
+  get isClickable() {
+    return getComputedStyle(this.element).pointerEvents !== "none"
+  }
+}

data/lib/atomic_view/components/link_component.rb

@@ -9,14 +9,27 @@ module AtomicView
     # the same ButtonVariants concern, so a navigational action (e.g. "New
     # record") can sit next to real buttons without looking out of place.
     #
-    # `keybinds:`, when given (a single key, or an array for a chord --
-    # same convention as `CommandPaletteComponent::RowComponent#hint`),
-    # renders a KbdComponent per key after the content, as a visual hint.
-    # Wiring the actual keydown-to-click behavior is left to the host app
-    # (e.g. a Stimulus controller on the anchor).
+    # `keybinds:`, when given (a single key, or an array for a simultaneous
+    # chord, e.g. `["⌘", "K"]` -- same `Array(...)`-of-keys convention as
+    # `CommandPaletteComponent::RowComponent#hint`), renders a KbdComponent
+    # per key after the content as a visual hint, and wires the anchor to
+    # `atomic-view--hotkey` (see
+    # `app/assets/javascripts/atomic_view/controllers/hotkey_controller.js`)
+    # so pressing the combo anywhere on the page actually clicks it.
+    # Modifier symbols/names (⌘/cmd/command, ⇧, ⌃/control, ⌥/option) are
+    # normalized to Stimulus's own modifier names (meta/shift/ctrl/alt) for
+    # the underlying `keydown.<filter>@window->atomic-view--hotkey#click`
+    # action; any other key is lowercased as-is (e.g. "N" -> "n").
     class LinkComponent < AtomicView::Component
       include AtomicView::Components::Concerns::ButtonVariants
 
+      MODIFIER_ALIASES = {
+        "⌘" => "meta", "cmd" => "meta", "command" => "meta",
+        "⇧" => "shift",
+        "⌃" => "ctrl", "control" => "ctrl",
+        "⌥" => "alt", "option" => "alt"
+      }.freeze
+
       attr_reader :href, :variant, :keybinds
 
       def initialize(href, variant: :primary, keybinds: nil, **options)
@@ -28,12 +41,27 @@ module AtomicView
       end
 
       def html_options
-        @options.except(:class).merge(class: html_class)
+        @options.except(:class, :data).merge(class: html_class, data: data_attributes)
       end
 
       def html_class
         class_names(base_classes, variant_classes, @options[:class])
       end
+
+      def data_attributes
+        attributes = (@options[:data] || {}).dup
+        return attributes unless keybinds.present?
+
+        attributes[:controller] = [attributes[:controller], "atomic-view--hotkey"].compact.join(" ")
+        attributes[:action] = [attributes[:action], "keydown.#{keydown_filter}@window->atomic-view--hotkey#click"].compact.join(" ")
+        attributes
+      end
+
+      private
+
+      def keydown_filter
+        keybinds.map { |key| MODIFIER_ALIASES[key.to_s.downcase] || key.to_s.downcase }.join("+")
+      end
     end
   end
 end

data/lib/atomic_view/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AtomicView
-  VERSION = "0.1.17"
+  VERSION = "0.1.18"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: atomic_view
 version: !ruby/object:Gem::Version
-  version: 0.1.17
+  version: 0.1.18
 platform: ruby
 authors:
 - Joel Warrington
@@ -143,6 +143,7 @@ files:
 - app/assets/javascripts/atomic_view/controllers/chip_controller.js
 - app/assets/javascripts/atomic_view/controllers/command_palette_controller.js
 - app/assets/javascripts/atomic_view/controllers/dropdown_controller.js
+- app/assets/javascripts/atomic_view/controllers/hotkey_controller.js
 - app/assets/javascripts/atomic_view/controllers/modal_controller.js
 - app/assets/javascripts/atomic_view/controllers/theme_toggle_controller.js
 - app/assets/javascripts/atomic_view/controllers/toast_controller.js