turbo_boost-elements 0.0.11 → 0.0.13

data/app/javascript/elements/toggle_elements/target_element/index.js

@@ -1,5 +1,4 @@
 import ToggleElement from '../toggle_element'
-import './focus'
 
 export default class ToggleTargetElement extends ToggleElement {
   connectedCallback () {
@@ -91,19 +90,8 @@ export default class ToggleTargetElement extends ToggleElement {
     )
   }
 
-  applyFocus () {
-    if (this.focusElement) this.focusElement.focus()
-  }
-
   get focusSelector () {
-    let value = this.getAttribute('focus-selector')
-    if (this.triggerElement)
-      value = this.triggerElement.getAttribute('focus-selector') || value
-    return value
-  }
-
-  get focusElement () {
-    return this.querySelector(this.focusSelector)
+    return this.getAttribute('focus-selector')
   }
 
   get triggerElement () {
@@ -114,6 +102,10 @@ export default class ToggleTargetElement extends ToggleElement {
     return this.getAttribute('aria-labeledby')
   }
 
+  set labeledBy (value) {
+    return this.setAttribute('aria-labeledby', value)
+  }
+
   get collapseOn () {
     const value = this.getAttribute('collapse-on')
     if (!value) return []

data/app/javascript/elements/toggle_elements/{target_element → trigger_element}/focus.js

@@ -1,3 +1,5 @@
+let focusTimeout
+
 function deactivateTrixAttributes (editor) {
   const attributes = [
     'bold',
@@ -43,35 +45,26 @@ function focusTrixEditorElement (element) {
   ])
 }
 
-function shouldEnhanceFocus (element) {
-  if (!element.tagName.match(/^input|textarea|trix-editor$/i)) return false
-  const toggleTargetElement = element.closest('turbo-boost-toggle-target')
-  return toggleTargetElement && toggleTargetElement.focusSelector
-}
+function debouncedFocus (element) {
+  clearTimeout(focusTimeout)
 
-function enhanceFocus (element) {
-  const trixEditorElement = element.closest('trix-editor')
+  focusTimeout = setTimeout(() => {
+    if (!element) return
 
-  try {
-    if (trixEditorElement) {
-      focusTrixEditorElement(trixEditorElement)
-    } else {
-      element.selectionStart = element.selectionEnd = element.value.length
+    element.focus()
+    const trixEditorElement = element.closest('trix-editor')
+
+    try {
+      if (trixEditorElement) {
+        focusTrixEditorElement(trixEditorElement)
+      } else {
+        element.selectionStart = element.selectionEnd = element.value.length
+      }
+    } catch (_) {
+    } finally {
+      element.scrollIntoView({ block: 'center', behavior: 'smooth' })
     }
-  } catch (_) {
-  } finally {
-    setTimeout(
-      () => element.scrollIntoView({ block: 'center', behavior: 'smooth' }),
-      100
-    )
-  }
+  }, 100)
 }
 
-addEventListener(
-  'focus',
-  event => {
-    if (shouldEnhanceFocus(document.activeElement))
-      enhanceFocus(document.activeElement)
-  },
-  true
-)
+export default element => debouncedFocus(element)

data/app/javascript/elements/toggle_elements/trigger_element/index.js

@@ -1,13 +1,13 @@
 import ToggleElement, { busyDuration } from '../toggle_element'
 import Devtool from './devtool'
+import focus from './focus'
+
+let currentFocusSelector
 
 export default class ToggleTriggerElement extends ToggleElement {
   connectedCallback () {
     super.connectedCallback()
 
-    if (this.targetElement)
-      this.targetElement.setAttribute('aria-labeledby', this.id)
-
     const { start: commandStartEvent } = TurboBoost.Commands.events
     this.commandStartHandler = this.onCommandStart.bind(this)
     this.addEventListener(commandStartEvent, this.commandStartHandler)
@@ -25,15 +25,19 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   disconnectedCallback () {
-    const { start: commandStartEvent } = TurboBoost.Commands.events
-    this.removeEventListener(commandStartEvent, this.commandStartHandler)
+    // delay cleanup because the trigger may have been morphed out of the DOM,
+    // but it's needed to apply behavior like focus etc...
+    setTimeout(() => {
+      const { start: commandStartEvent } = TurboBoost.Commands.events
+      this.removeEventListener(commandStartEvent, this.commandStartHandler)
 
-    const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
-    removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
+      const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
+      removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
 
-    this.devtool.hide({ active: false })
-    this.devtool.unregisterEventListeners()
-    delete this.devtool
+      this.devtool.hide({ active: false })
+      this.devtool.unregisterEventListeners()
+      delete this.devtool
+    }, 1000)
   }
 
   initializeDevtool () {
@@ -61,16 +65,21 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   onCommandStart (event) {
-    this.targetElement.setAttribute('aria-labeledby', this.id)
+    currentFocusSelector = this.focusSelector
+    this.targetElement.labeledBy = this.id
     this.targetElement.collapseMatches()
     this.targetElement.busy = true
     this.busy = true
     // TODO: implement cache - this.targetElement.renderCachedHTML()
   }
 
+  // runs before an invoke turbo stream is executed
   onBeforeInvoke (event) {
+    // return early if we're not the element responsible for this invoke
     if (event.detail.method !== 'morph') return
     if (event.target.id !== this.morphs) return
+    const selector = `turbo-boost-toggle-target[aria-labeledby="${this.id}"]`
+    if (!event.target.querySelector(selector)) return
 
     // ensure the busy element is shown long enough for a good user experience
     // we accomplish this by modifying the event.detail with invoke instructions i.e. { delay }
@@ -88,10 +97,10 @@ export default class ToggleTriggerElement extends ToggleElement {
     }, delay - 10)
 
     // runs after the morph is executed
-    setTimeout(() => {
-      this.targetElement.setAttribute('aria-labeledby', this.id)
-      this.targetElement.applyFocus()
-    }, delay + 100)
+    setTimeout(
+      () => focus(this.targetElement.querySelector(currentFocusSelector)),
+      delay + 100
+    )
   }
 
   // a list of views shared between the trigger and target
@@ -147,8 +156,7 @@ export default class ToggleTriggerElement extends ToggleElement {
 
   get focusSelector () {
     return (
-      this.getAttribute('focus-selector') ||
-      this.targetElement.getAttribute('focus-selector')
+      this.getAttribute('focus-selector') || this.targetElement.focusSelector
     )
   }
 

data/lib/turbo_boost/elements/version.rb

@@ -2,6 +2,6 @@
 
 module TurboBoost
   module Elements
-    VERSION = "0.0.11"
+    VERSION = "0.0.13"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.11
+  version: 0.0.13
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-07 00:00:00.000000000 Z
+date: 2023-02-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -144,10 +144,10 @@ files:
 - app/javascript/devtools/index.js
 - app/javascript/devtools/supervisor.js
 - app/javascript/elements/index.js
-- app/javascript/elements/toggle_elements/target_element/focus.js
 - app/javascript/elements/toggle_elements/target_element/index.js
 - app/javascript/elements/toggle_elements/toggle_element/index.js
 - app/javascript/elements/toggle_elements/trigger_element/devtool.js
+- app/javascript/elements/toggle_elements/trigger_element/focus.js
 - app/javascript/elements/toggle_elements/trigger_element/index.js
 - app/javascript/elements/turbo_boost_element/index.js
 - app/javascript/index.js