turbo_boost-elements 0.0.12 → 0.0.14

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 () {
@@ -60,6 +59,7 @@ export default class ToggleTargetElement extends ToggleElement {
 
   collapse (delay = 250) {
     clearTimeout(this.collapseTimeout)
+    if (this.busy) return
     if (typeof delay !== 'number') delay = 250
 
     if (delay > 0)
@@ -79,7 +79,7 @@ export default class ToggleTargetElement extends ToggleElement {
 
   collapseMatches () {
     document.querySelectorAll(this.collapseSelector).forEach(el => {
-      if (el === this) return
+      if (el.id === this.id) return
       if (el.collapse) el.collapse(0)
     })
   }
@@ -91,29 +91,29 @@ 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')
   }
 
+  // the active trigger
   get triggerElement () {
     return document.getElementById(this.labeledBy)
   }
 
+  // all triggers
+  get triggerElements () {
+    return document.querySelectorAll(`[aria-controls="${this.id}"]`)
+  }
+
+  // the dom id of the active trigger
   get labeledBy () {
     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 []
@@ -121,10 +121,14 @@ export default class ToggleTargetElement extends ToggleElement {
   }
 
   get expanded () {
-    return this.triggerElement.expanded
+    return this.triggerElement ? this.triggerElement.expanded : false
   }
 
   set expanded (value) {
-    return (this.triggerElement.expanded = value)
+    this.triggerElements.forEach(el => (el.expanded = value))
+  }
+
+  get busy () {
+    return this.triggerElement && this.triggerElement.busy
   }
 }

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.focusElement
-}
+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,9 +65,9 @@ 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()
   }
@@ -87,15 +91,14 @@ export default class ToggleTriggerElement extends ToggleElement {
     // runs before the morph is executed
     setTimeout(() => {
       this.busy = false
-      this.targetElement.busy = false
-      this.morphToggleElements.forEach(el => (el.busy = false))
+      this.morphToggleTriggerElements.forEach(el => (el.busy = false))
     }, 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
@@ -126,11 +129,9 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   // all toggle elements contained by the `morphElement`
-  get morphToggleElements () {
+  get morphToggleTriggerElements () {
     return Array.from(
-      this.morphElement.querySelectorAll(
-        'turbo-boost-toggle-trigger,turbo-boost-toggle-target'
-      )
+      this.morphElement.querySelectorAll('turbo-boost-toggle-trigger')
     )
   }
 
@@ -151,8 +152,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.12"
+    VERSION = "0.0.14"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.12
+  version: 0.0.14
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-07 00:00:00.000000000 Z
+date: 2023-02-09 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