turbo_boost-elements 0.0.9 → 0.0.11

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

@@ -44,10 +44,9 @@ function focusTrixEditorElement (element) {
 }
 
 function shouldEnhanceFocus (element) {
-  return (
-    element.closest('turbo-boost-toggle-target') &&
-    element.tagName.match(/^input|textarea|trix-editor$/i)
-  )
+  if (!element.tagName.match(/^input|textarea|trix-editor$/i)) return false
+  const toggleTargetElement = element.closest('turbo-boost-toggle-target')
+  return toggleTargetElement && toggleTargetElement.focusSelector
 }
 
 function enhanceFocus (element) {

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

@@ -68,7 +68,7 @@ export default class ToggleTargetElement extends ToggleElement {
     this.innerHTML = ''
     try {
       this.expanded = false
-      this.currentTriggerElement.hideDevtool()
+      this.triggerElement.hideDevtool()
     } catch {}
   }
 
@@ -86,28 +86,30 @@ export default class ToggleTargetElement extends ToggleElement {
 
   get collapseSelector () {
     return (
-      this.currentTriggerElement.collapseSelector ||
+      this.triggerElement.collapseSelector ||
       this.getAttribute('collapse-selector')
     )
   }
 
-  focus () {
-    clearTimeout(this.focusTimeout)
-    this.focusTimeout = setTimeout(() => {
-      if (this.focusElement) this.focusElement.focus()
-    }, 50)
+  applyFocus () {
+    if (this.focusElement) this.focusElement.focus()
   }
 
   get focusSelector () {
-    if (this.currentTriggerElement && this.currentTriggerElement.focusSelector)
-      return this.currentTriggerElement.focusSelector
-    return this.getAttribute('focus-selector')
+    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)
   }
 
+  get triggerElement () {
+    return document.getElementById(this.labeledBy)
+  }
+
   get labeledBy () {
     return this.getAttribute('aria-labeledby')
   }
@@ -119,10 +121,10 @@ export default class ToggleTargetElement extends ToggleElement {
   }
 
   get expanded () {
-    return this.currentTriggerElement.expanded
+    return this.triggerElement.expanded
   }
 
   set expanded (value) {
-    return (this.currentTriggerElement.expanded = value)
+    return (this.triggerElement.expanded = value)
   }
 }

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

@@ -2,6 +2,7 @@
 import {
   appendHTML,
   addHighlight,
+  attempt,
   coordinates,
   removeHighlight
 } from '../../../utils/dom'
@@ -34,43 +35,57 @@ export default class Devtool {
     this.targetElement = triggerElement.targetElement // SEE: app/javascript/elements/toggle_target_element.js
     this.morphElement = triggerElement.morphElement
 
-    document.addEventListener('turbo-boost:devtool-enable', event => {
-      const { name } = event.detail
-      if (name === this.name) {
-        addHighlight(this.triggerElement, {
-          outline: '3px dashed blueviolet',
-          outlineOffset: '2px'
-        })
-      }
-    })
-
-    document.addEventListener('turbo-boost:devtool-disable', event => {
-      const { name } = event.detail
-      if (name === this.name) removeHighlight(this.triggerElement)
-    })
-
     let hideTimeout
     const debouncedHide = () => {
       clearTimeout(hideTimeout)
       hideTimeout = setTimeout(this.hide({ active: false }), 25)
     }
 
-    addEventListener('click', event => {
+    this.eventListeners['turbo-boost:devtool-enable'] = event => {
+      // LeaderLine.positionByWindowResize = false
+      const { name } = event.detail
+      if (name !== this.name) return
+
+      addHighlight(this.triggerElement, {
+        outline: '3px dashed blueviolet',
+        outlineOffset: '2px'
+      })
+
+      this.hide({ active: false })
+      if (this.active) this.show()
+    }
+
+    this.eventListeners['turbo-boost:devtool-disable'] = event => {
+      const { name } = event.detail
+      if (name === this.name) removeHighlight(this.triggerElement)
+    }
+
+    this.eventListeners['click'] = event => {
       if (event.target.closest('turbo-boost-devtool-tooltip')) return
       debouncedHide()
+    }
+
+    this.eventListeners['turbo:load'] = debouncedHide
+    this.eventListeners['turbo-frame:load'] = debouncedHide
+    this.eventListeners[TurboBoost.Commands.events.finish] = debouncedHide
+
+    this.registerEventListeners()
+  }
+
+  registerEventListeners () {
+    Object.entries(this.eventListeners).forEach(([type, listener]) => {
+      addEventListener(type, listener)
     })
+  }
 
-    addEventListener('resize', () => {
-      if (this.active) {
-        this.hide({ active: false })
-        this.show()
-      }
+  unregisterEventListeners () {
+    Object.entries(this.eventListeners).forEach(([type, listener]) => {
+      removeEventListener(type, listener)
     })
+  }
 
-    addEventListener('turbo:load', debouncedHide)
-    addEventListener('turbo-frame:load', debouncedHide)
-    addEventListener(TurboBoost.Commands.events.success, debouncedHide)
-    addEventListener(TurboBoost.Commands.events.finish, debouncedHide)
+  get eventListeners () {
+    return this._eventListeners || (this._eventListeners = {})
   }
 
   get enabled () {
@@ -88,8 +103,10 @@ export default class Devtool {
 
   show () {
     if (!this.enabled) return
+
     if (this.active) return
     this.active = true
+
     this.hide({ active: true })
 
     addHighlight(this.targetElement, {
@@ -102,9 +119,12 @@ export default class Devtool {
       outlineOffset: '3px'
     })
 
-    const morphTooltip = this.createMorphTooltip()
-    const targetTooltip = this.createTargetTooltip()
-    this.createTriggerTooltip(targetTooltip, morphTooltip)
+    this.renderingTooltip = this.createRenderingTooltip()
+    this.targetTooltip = this.createTargetTooltip()
+    this.triggerTooltip = this.createTriggerTooltip(
+      this.targetTooltip,
+      this.renderingTooltip
+    )
 
     document
       .querySelectorAll('.leader-line')
@@ -140,10 +160,15 @@ export default class Devtool {
   }
 
   hide ({ active: active = false }) {
-    document.querySelectorAll('.leader-line').forEach(el => el.remove())
     document
       .querySelectorAll('turbo-boost-devtool-tooltip')
-      .forEach(el => el.remove())
+      .forEach(tooltip => {
+        attempt(() => tooltip.line.remove())
+        attempt(() => tooltip.drag.remove())
+        attempt(() => tooltip.lineToRendering.remove())
+        attempt(() => tooltip.lineToTarget.remove())
+        attempt(() => tooltip.remove())
+      })
 
     document.querySelectorAll('[data-turbo-boost-highlight]').forEach(el => {
       if (!el.tagName.match(/turbo-boost-toggle-trigger/i)) removeHighlight(el)
@@ -152,10 +177,15 @@ export default class Devtool {
     this.active = active
   }
 
-  createMorphTooltip () {
+  createRenderingTooltip () {
+    if (!this.triggerElement.renders)
+      return console.debug(
+        `Unable to create the rendering tooltip! The trigger element must set the 'renders' attribute.`
+      )
+
     if (!this.triggerElement.morphs)
       return console.debug(
-        `Unable to create the morph tooltip! No element matches the DOM id: '${this.triggerElement.morphs}'`
+        `Unable to create the rendering tooltip! The trigger element specified the 'morphs' attrbiute but no element matches the DOM id: '${this.triggerElement.morphs}'`
       )
 
     const title = `
@@ -245,7 +275,7 @@ export default class Devtool {
     return tooltip
   }
 
-  createTriggerTooltip (targetTooltip, morphTooltip) {
+  createTriggerTooltip (targetTooltip, renderingTooltip) {
     if (!this.triggerElement) return
     const title = `
       <svg xmlns="http://www.w3.org/2000/svg" style="display:inline;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
@@ -305,16 +335,16 @@ export default class Devtool {
       }
     }
 
-    if (morphTooltip) {
-      tooltip.lineToRendering = new LeaderLine(tooltip, morphTooltip, {
+    if (renderingTooltip) {
+      tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
         ...this.leaderLineOptions,
         color: 'blueviolet',
         middleLabel: 'renders & morphs',
         size: 2.1
       })
 
-      morphTooltip.drag.onMove = () => {
-        morphTooltip.line.position()
+      renderingTooltip.drag.onMove = () => {
+        renderingTooltip.line.position()
         if (tooltip.lineToTarget) tooltip.lineToTarget.position()
         tooltip.lineToRendering.position()
       }

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

@@ -32,6 +32,7 @@ export default class ToggleTriggerElement extends ToggleElement {
     removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
 
     this.devtool.hide({ active: false })
+    this.devtool.unregisterEventListeners()
     delete this.devtool
   }
 
@@ -45,6 +46,8 @@ export default class ToggleTriggerElement extends ToggleElement {
 
     addEventListener('turbo-boost:devtools-stop', () => {
       this.removeEventListener('mouseenter', mouseenter)
+      this.devtool.hide({ active: false })
+      this.devtool.unregisterEventListeners()
       delete this.devtool
     })
 
@@ -58,7 +61,6 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   onCommandStart (event) {
-    this.targetElement.currentTriggerElement = this
     this.targetElement.setAttribute('aria-labeledby', this.id)
     this.targetElement.collapseMatches()
     this.targetElement.busy = true
@@ -83,13 +85,13 @@ export default class ToggleTriggerElement extends ToggleElement {
       this.busy = false
       this.targetElement.busy = false
       this.morphToggleElements.forEach(el => (el.busy = false))
-      this.expanded = !this.expanded
     }, delay - 10)
 
     // runs after the morph is executed
     setTimeout(() => {
-      if (this.expanded) this.targetElement.focus()
-    }, delay + 10)
+      this.targetElement.setAttribute('aria-labeledby', this.id)
+      this.targetElement.applyFocus()
+    }, delay + 100)
   }
 
   // a list of views shared between the trigger and target
@@ -144,7 +146,10 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   get focusSelector () {
-    return this.getAttribute('focus-selector')
+    return (
+      this.getAttribute('focus-selector') ||
+      this.targetElement.getAttribute('focus-selector')
+    )
   }
 
   // indicates if the toggle state should be remembered across requests

data/app/javascript/utils/dom.js

@@ -62,3 +62,9 @@ export function coordinates (element) {
   const bottom = top + height
   return { top, left, right, bottom, width, height }
 }
+
+export function attempt (callback) {
+  try {
+    callback()
+  } catch {}
+}

data/lib/turbo_boost/elements/tag_builders/toggle_tags_builder.rb

@@ -22,12 +22,13 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     focus_selector: nil, # CSS selector for the element to focus when the target is expanded
     method: :toggle, # method to inovke (:show, :hide, :toggle)
     disabled: false, # disable the trigger
+    expanded: false, # override to force expansion
     remember: false, # remember ephemeral UI state between requests
     **kwargs, # generic support for additional element attributes like `class` etc.
     &block # a Ruby block that emits this trigger's content
   )
     kwargs = kwargs.with_indifferent_access
-    kwargs[:id] ||= "#{controls}-toggle-trigger-#{SecureRandom.hex(6)}"
+    kwargs[:id] ||= "#{controls}-toggle-trigger"
 
     # command
     kwargs[:data] ||= {}
@@ -36,7 +37,7 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     # aria
     kwargs[:aria] ||= {}
     kwargs[:aria][:controls] = controls # toggle target
-    kwargs[:aria][:expanded] = target_expanded?(controls)
+    kwargs[:aria][:expanded] = expanded || target_expanded?(controls)
     kwargs[:aria][:atomic] ||= true
     kwargs[:aria][:relevant] ||= "all"
 
@@ -57,8 +58,8 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     id, # REQUIRED, the `dom_id` for the element
     collapse_on: [], # list of events that will collapse this target
     collapse_selector: nil, # CSS selector for other matching targets to collapse when this target is expanded
-    expanded: false, # override to force expansion
     focus_selector: nil, # CSS selector for the element to focus when this target is expanded
+    expanded: false, # override to force expansion
     **kwargs, # generic support for additional element attributes like `class` etc.
     &block # a Ruby block that emits this target's content
   )

data/lib/turbo_boost/elements/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.11
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-28 00:00:00.000000000 Z
+date: 2023-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails