turbo_boost-elements 0.0.8 → 0.0.10

data/app/commands/turbo_boost/elements/toggle_command.rb

@@ -22,7 +22,6 @@ class TurboBoost::Elements::ToggleCommand < TurboBoost::Elements::ApplicationCom
   end
 
   def toggle
-    validate_element!
     element.aria.expanded? ? hide : show
   end
 

data/app/javascript/devtools/elements/tooltip_element.js

@@ -84,29 +84,37 @@ export default class TooltipElement extends HTMLElement {
         display: block;
         font-size: 0.8rem;
         font-weight: lighter;
-        margin-bottom: 8px;
-        margin-top: 4px;
+        margin-bottom: 12px;
+        margin-top: 8px;
         padding-bottom: 4px;
         padding-top: 4px;
         width: 100%;
       }
 
+      slot[name="content-top"],
+      slot[name="content"],
+      slot[name="content-bottom"] {
+        display: block;
+        font-weight: normal;
+      }
+
       slot[name="content-top"] {
         color: ${this.color};
-        font-weight: normal;
+        margin-bottom: 8px;
+      }
+
+      slot[name="content"],
+      slot[name="content-bottom"] {
         opacity: 0.7;
+        padding-left: 12px;
       }
 
       slot[name="content"] {
         color: ${this.color};
-        font-weight: normal;
-        opacity: 0.7;
       }
 
       slot[name="content-bottom"] {
         color: red;
-        font-weight: normal;
-        opacity: 0.7;
       }
     `
   }

data/app/javascript/devtools/supervisor.js

@@ -81,6 +81,7 @@ addEventListener('turbo:load', autoRestart)
 addEventListener('turbo-frame:load', autoRestart)
 addEventListener(TurboBoost.Commands.events.success, autoRestart)
 addEventListener(TurboBoost.Commands.events.finish, autoRestart)
+addEventListener('turbo-boost:devtools-connect', autoRestart)
 addEventListener('turbo-boost:devtools-close', stop)
 
 function register (name, label) {

data/app/javascript/elements/index.js

@@ -1,5 +1,9 @@
-import ToggleTargetElement from './toggle_target_element'
-import ToggleTriggerElement from './toggle_trigger_element'
+import TurboBoostElement from './turbo_boost_element'
+import ToggleTargetElement from './toggle_elements/target_element'
+import ToggleTriggerElement from './toggle_elements/trigger_element'
 
+// Valid custom element names: https://html.spec.whatwg.org/#valid-custom-element-name
+
+customElements.define('turbo-boost', TurboBoostElement)
 customElements.define('turbo-boost-toggle-target', ToggleTargetElement)
 customElements.define('turbo-boost-toggle-trigger', ToggleTriggerElement)

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

@@ -0,0 +1,138 @@
+import ToggleElement from '../toggle_element'
+import './focus'
+
+export default class ToggleTargetElement extends ToggleElement {
+  connectedCallback () {
+    super.connectedCallback()
+
+    this.mouseenterHandler = this.onMouseenter.bind(this)
+    this.addEventListener('mouseenter', this.mouseenterHandler)
+
+    this.collapseHandler = this.collapse.bind(this)
+    this.collapseNowHandler = this.collapseNow.bind(this)
+
+    this.collapseOn.forEach(entry => {
+      const parts = entry.split('@')
+      const name = parts[0]
+
+      if (parts.length > 1) {
+        const target = parts[1].match(/^self|window$/) ? self : self[parts[1]]
+        target.addEventListener(name, this.collapseNowHandler)
+      } else {
+        this.addEventListener(name, this.collapseHandler)
+      }
+    })
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('mouseenter', this.mouseenterHandler)
+
+    this.collapseOn.forEach(entry => {
+      const parts = entry.split('@')
+      const name = parts[0]
+
+      if (parts.length > 1) {
+        const target = parts[1].match(/^self|window$/) ? self : self[parts[1]]
+        target.removeEventListener(name, this.collapseNowHandler)
+      } else {
+        this.removeEventListener(name, this.collapseHandler)
+      }
+    })
+  }
+
+  // TODO: get cached content working properly
+  //       perhaps use a mechanic other than morph
+
+  // TODO: implement cache (similar to Turbo Drive restoration visit)
+  cacheHTML () {
+    // this.cachedHTML = this.innerHTML
+  }
+
+  // TODO: implement cache (similar to Turbo Drive restoration visit)
+  renderCachedHTML () {
+    // if (!this.cachedHTML) return
+    // this.innerHTML = this.cachedHTML
+  }
+
+  onMouseenter () {
+    clearTimeout(this.collapseTimeout)
+  }
+
+  collapse (delay = 250) {
+    clearTimeout(this.collapseTimeout)
+    if (typeof delay !== 'number') delay = 250
+
+    if (delay > 0)
+      return (this.collapseTimeout = setTimeout(() => this.collapse(0), delay))
+
+    this.innerHTML = ''
+    try {
+      this.expanded = false
+      this.triggerElement.hideDevtool()
+    } catch {}
+  }
+
+  collapseNow (event) {
+    if (event.target.closest('turbo-boost-devtool-tooltip')) return
+    this.collapse(0)
+  }
+
+  collapseMatches () {
+    document.querySelectorAll(this.collapseSelector).forEach(el => {
+      if (el === this) return
+      if (el.collapse) el.collapse(0)
+    })
+  }
+
+  get collapseSelector () {
+    return (
+      this.triggerElement.collapseSelector ||
+      this.getAttribute('collapse-selector')
+    )
+  }
+
+  focus () {
+    clearTimeout(this.focusTimeout)
+    this.focusTimeout = setTimeout(() => {
+      if (this.focusElement) this.focusElement.focus()
+    }, 50)
+  }
+
+  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)
+  }
+
+  get triggerElement () {
+    return (
+      document.getElementById(this.labeledBy) ||
+      document.querySelector(
+        `turbo-boost-toggle-trigger[aria-controls="${this.id}"]`
+      )
+    )
+  }
+
+  get labeledBy () {
+    return this.getAttribute('aria-labeledby')
+  }
+
+  get collapseOn () {
+    const value = this.getAttribute('collapse-on')
+    if (!value) return []
+    return JSON.parse(value)
+  }
+
+  get expanded () {
+    return this.triggerElement.expanded
+  }
+
+  set expanded (value) {
+    return (this.triggerElement.expanded = value)
+  }
+}

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

@@ -0,0 +1,83 @@
+import TurboBoostElement from '../../turbo_boost_element'
+
+const html = `
+  <turbo-boost>
+    <slot name="busy" hidden></slot>
+    <slot></slot>
+  </turbo-boost>
+`
+
+export const busyDelay = 100 // milliseconds - time to wait before showing busy element
+export const busyDuration = 400 // milliseconds - minimum time that busy element is shown
+
+export default class ToggleElement extends TurboBoostElement {
+  constructor () {
+    super(html)
+  }
+
+  // TODO: Should we timeout after a theoretical max wait time?
+  //       The idea being that a server error occurred and the toggle failed.
+  showBusyElement () {
+    clearTimeout(this.showBusyElementTimeout)
+    clearTimeout(this.hideBusyElementTimeout)
+
+    if (!this.busyElement) return
+
+    this.busyStartedAt = Date.now() + busyDelay
+    this.showBusyElementTimeout = setTimeout(() => {
+      this.busySlotElement.hidden = false
+      this.defaultSlotElement.hidden = true
+    }, busyDelay)
+  }
+
+  hideBusyElement () {
+    clearTimeout(this.showBusyElementTimeout)
+    clearTimeout(this.hideBusyElementTimeout)
+
+    if (!this.busyElement) return
+
+    let delay = busyDuration - (Date.now() - this.busyStartedAt)
+    if (delay < 0) delay = 0
+
+    delete this.busyStartedAt
+    this.hideBusyElementTimeout = setTimeout(() => {
+      this.busySlotElement.hidden = true
+      this.defaultSlotElement.hidden = false
+    }, delay)
+  }
+
+  get busyElement () {
+    return this.querySelector(':scope > [slot="busy"]')
+  }
+
+  get busySlotElement () {
+    return this.shadowRoot.querySelector('slot[name="busy"]')
+  }
+
+  get defaultSlotElement () {
+    return this.shadowRoot.querySelector('slot:not([name])')
+  }
+
+  // indicates if an rpc call is active/busy
+  get busy () {
+    return this.getAttribute('busy') === 'true'
+  }
+
+  // indicates if an rpc call is active/busy
+  set busy (value) {
+    value = !!value
+    if (this.busy === value) return
+    this.setAttribute('busy', value)
+    if (value) this.showBusyElement()
+    else this.hideBusyElement()
+  }
+
+  get busyStartedAt () {
+    if (!this.dataset.busyStartedAt) return 0
+    return Number(this.dataset.busyStartedAt)
+  }
+
+  set busyStartedAt (value) {
+    this.dataset.busyStartedAt = value
+  }
+}

data/app/javascript/{devtools/toggle.js → elements/toggle_elements/trigger_element/devtool.js}

@@ -1,15 +1,17 @@
+// Icons courtesy of https://feathericons.com/
 import {
   appendHTML,
   addHighlight,
+  attempt,
   coordinates,
   removeHighlight
-} from '../utils/dom'
-import supervisor from './supervisor'
+} from '../../../utils/dom'
+import supervisor from '../../../devtools/supervisor'
 
 let activeToggle
 
 document.addEventListener('turbo-boost:devtools-start', () =>
-  supervisor.register('toggle', 'toggles<small>(trigger/target)</small>')
+  supervisor.register('toggle', 'toggles')
 )
 
 function appendTooltip (title, subtitle, content, options = {}) {
@@ -25,7 +27,7 @@ function appendTooltip (title, subtitle, content, options = {}) {
   `)
 }
 
-export default class ToggleDevtool {
+export default class Devtool {
   constructor (triggerElement) {
     this.name = 'toggle'
     this.command = triggerElement.dataset.turboCommand
@@ -33,47 +35,79 @@ export default class ToggleDevtool {
     this.targetElement = triggerElement.targetElement // SEE: app/javascript/elements/toggle_target_element.js
     this.morphElement = triggerElement.morphElement
 
-    document.addEventListener('turbo-boost:devtool-enable', event => {
+    let hideTimeout
+    const debouncedHide = () => {
+      clearTimeout(hideTimeout)
+      hideTimeout = setTimeout(this.hide({ active: false }), 25)
+    }
+
+    this.eventListeners['turbo-boost:devtool-enable'] = event => {
+      // LeaderLine.positionByWindowResize = false
       const { name } = event.detail
-      if (name === this.name) {
-        addHighlight(this.triggerElement, {
-          outline: '3px dashed blueviolet',
-          outlineOffset: '2px'
-        })
-      }
-    })
+      if (name !== this.name) return
+
+      addHighlight(this.triggerElement, {
+        outline: '3px dashed blueviolet',
+        outlineOffset: '2px'
+      })
 
-    document.addEventListener('turbo-boost:devtool-disable', event => {
+      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)
-    })
-
-    let hideTimeout
-    const debouncedHide = () => {
-      clearTimeout(hideTimeout)
-      hideTimeout = setTimeout(this.hide(true), 25)
     }
 
-    addEventListener('click', event => {
+    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)
+    })
+  }
+
+  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 () {
     return supervisor.enabled(this.name)
   }
 
+  get active () {
+    return activeToggle === this
+  }
+
+  set active (value) {
+    if (value) activeToggle = this
+    else activeToggle = null
+  }
+
   show () {
     if (!this.enabled) return
-    if (activeToggle === this) return
-    activeToggle = this
-    this.hide()
+
+    if (this.active) return
+    this.active = true
+
+    this.hide({ active: true })
 
     addHighlight(this.targetElement, {
       outline: '3px dashed darkcyan',
@@ -85,9 +119,12 @@ export default class ToggleDevtool {
       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')
@@ -115,38 +152,55 @@ export default class ToggleDevtool {
     if (this.targetElement)
       data.target = {
         partial: this.targetElement.partial,
-        id: this.targetElement.id,
+        dom_id: this.targetElement.id,
         status: 'OK'
       }
 
     console.table(data)
   }
 
-  hide (clearActiveToggle) {
-    document.querySelectorAll('.leader-line').forEach(el => el.remove())
+  hide ({ active: active = false }) {
     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)
     })
 
-    if (clearActiveToggle) activeToggle = null
+    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 = 'PARTIAL'
+    const title = `
+      <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
+      RENDERING
+    `
     const subtitle = `
-      id: ${this.triggerElement.morphs || 'unknown'}<br>
-      partial: ${this.triggerElement.renders || 'unknown'}
+      <b>partial</b>: ${this.triggerElement.renders || 'unknown'}<br>
+      <b>morphs</b>: ${this.triggerElement.morphs || 'unknown'}<br>
+    `
+    const content = `
+      <div slot="content-top" style="font-size:85%; font-style:italic; font-weight:100;">
+        The <b>TRIGGER</b> toggles the <b>TARGET</b> then renders the partial &amp; morphs the element.<br>
+      </div>
     `
-    const content = '<div slot="content"></div>'
     const tooltip = appendTooltip(title, subtitle, content, {
       backgroundColor: 'lightyellow',
       color: 'chocolate'
@@ -175,20 +229,31 @@ export default class ToggleDevtool {
         `Unable to create the target tooltip! No element matches the DOM id: '${this.triggerElement.controls}'`
       )
 
-    const title = 'TARGET'
+    const title = `
+      <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
+      TARGET
+    `
     const subtitle = `
-      id: ${this.targetElement.id}<br>
-      labeled by: ${this.targetElement.labeledBy}
+      <b>id</b>: ${this.targetElement.id}<br>
+      <b>aria-labeled-by</b>: ${this.targetElement.labeledBy}<br>
     `
-    const content = this.targetElement.viewStack
+    let content = this.targetElement.viewStack
       .reverse()
       .map((view, index) => {
         return this.triggerElement.sharedViews.includes(view)
-          ? `<div slot="content-top">${index + 1}. ${view}</div>`
+          ? `<div slot="content">${index + 1}. ${view}</div>`
           : `<div slot="content-bottom">${index + 1}. ${view}</div>`
       }, this)
       .join('')
 
+    content = `
+      <div slot="content-top">
+        <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" 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="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+        <b>View Stack</b>
+      </div>
+      ${content}
+    `
+
     const tooltip = appendTooltip(title, subtitle, content, {
       backgroundColor: 'lightcyan',
       color: 'darkcyan',
@@ -210,22 +275,35 @@ export default class ToggleDevtool {
     return tooltip
   }
 
-  createTriggerTooltip (targetTooltip, morphTooltip) {
+  createTriggerTooltip (targetTooltip, renderingTooltip) {
     if (!this.triggerElement) return
-    const title = 'TRIGGER'
+    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>
+      TRIGGER
+    `
     const subtitle = `
-      id: ${this.triggerElement.id}<br>
-      controls: ${this.triggerElement.controls}
+      <b>id</b>: ${this.triggerElement.id}<br>
+      <b>aria-controls</b>: ${this.triggerElement.controls}<br>
+      <b>aria-expanded</b>: ${this.triggerElement.expanded}<br>
+      <b>remember</b>: ${this.triggerElement.remember}<br>
     `
-    const content = this.triggerElement.viewStack
+    let content = this.triggerElement.viewStack
       .reverse()
       .map((view, index) => {
         return this.triggerElement.sharedViews.includes(view)
-          ? `<div slot="content-top">${index + 1}. ${view}</div>`
+          ? `<div slot="content">${index + 1}. ${view}</div>`
           : `<div slot="content-bottom">${index + 1}. ${view}</div>`
       }, this)
       .join('')
 
+    content = `
+      <div slot="content-top">
+        <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" 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="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+        <b>View Stack</b>
+      </div>
+      ${content}
+    `
+
     const tooltip = appendTooltip(title, subtitle, content, {
       backgroundColor: 'lavender',
       color: 'blueviolet'
@@ -257,16 +335,16 @@ export default class ToggleDevtool {
       }
     }
 
-    if (morphTooltip) {
-      tooltip.lineToRendering = new LeaderLine(tooltip, morphTooltip, {
+    if (renderingTooltip) {
+      tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
         ...this.leaderLineOptions,
         color: 'blueviolet',
-        middleLabel: 'renders and morphs',
+        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()
       }