turbo_boost-elements 0.0.7 → 0.0.9

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,128 @@
+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.currentTriggerElement.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.currentTriggerElement.collapseSelector ||
+      this.getAttribute('collapse-selector')
+    )
+  }
+
+  focus () {
+    clearTimeout(this.focusTimeout)
+    this.focusTimeout = setTimeout(() => {
+      if (this.focusElement) this.focusElement.focus()
+    }, 50)
+  }
+
+  get focusSelector () {
+    if (this.currentTriggerElement && this.currentTriggerElement.focusSelector)
+      return this.currentTriggerElement.focusSelector
+    return this.getAttribute('focus-selector')
+  }
+
+  get focusElement () {
+    return this.querySelector(this.focusSelector)
+  }
+
+  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.currentTriggerElement.expanded
+  }
+
+  set expanded (value) {
+    return (this.currentTriggerElement.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,16 @@
+// Icons courtesy of https://feathericons.com/
 import {
   appendHTML,
   addHighlight,
   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 +26,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
@@ -51,7 +52,7 @@ export default class ToggleDevtool {
     let hideTimeout
     const debouncedHide = () => {
       clearTimeout(hideTimeout)
-      hideTimeout = setTimeout(this.hide(true), 25)
+      hideTimeout = setTimeout(this.hide({ active: false }), 25)
     }
 
     addEventListener('click', event => {
@@ -59,6 +60,13 @@ export default class ToggleDevtool {
       debouncedHide()
     })
 
+    addEventListener('resize', () => {
+      if (this.active) {
+        this.hide({ active: false })
+        this.show()
+      }
+    })
+
     addEventListener('turbo:load', debouncedHide)
     addEventListener('turbo-frame:load', debouncedHide)
     addEventListener(TurboBoost.Commands.events.success, debouncedHide)
@@ -69,11 +77,20 @@ export default class ToggleDevtool {
     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',
@@ -115,14 +132,14 @@ 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) {
+  hide ({ active: active = false }) {
     document.querySelectorAll('.leader-line').forEach(el => el.remove())
     document
       .querySelectorAll('turbo-boost-devtool-tooltip')
@@ -132,7 +149,7 @@ export default class ToggleDevtool {
       if (!el.tagName.match(/turbo-boost-toggle-trigger/i)) removeHighlight(el)
     })
 
-    if (clearActiveToggle) activeToggle = null
+    this.active = active
   }
 
   createMorphTooltip () {
@@ -141,12 +158,19 @@ export default class ToggleDevtool {
         `Unable to create the morph tooltip! 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 +199,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',
@@ -212,20 +247,33 @@ export default class ToggleDevtool {
 
   createTriggerTooltip (targetTooltip, morphTooltip) {
     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'
@@ -261,7 +309,7 @@ export default class ToggleDevtool {
       tooltip.lineToRendering = new LeaderLine(tooltip, morphTooltip, {
         ...this.leaderLineOptions,
         color: 'blueviolet',
-        middleLabel: 'renders and morphs',
+        middleLabel: 'renders & morphs',
         size: 2.1
       })
 

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

@@ -0,0 +1,172 @@
+import ToggleElement, { busyDuration } from '../toggle_element'
+import Devtool from './devtool'
+
+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)
+
+    const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
+    this.beforeInvokeHandler = this.onBeforeInvoke.bind(this)
+    addEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
+
+    // fires after receiving the toggle morph Turbo Stream but before it is executed
+    // this.addEventListener(TurboBoost.Commands.events.success, event => {
+    //   // TODO: imlement cache, this.targetElement.cacheHTML()
+    // })
+
+    this.initializeDevtool()
+  }
+
+  disconnectedCallback () {
+    const { start: commandStartEvent } = TurboBoost.Commands.events
+    this.removeEventListener(commandStartEvent, this.commandStartHandler)
+
+    const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
+    removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
+
+    this.devtool.hide({ active: false })
+    delete this.devtool
+  }
+
+  initializeDevtool () {
+    const mouseenter = () => this.devtool.show()
+
+    addEventListener('turbo-boost:devtools-start', () => {
+      this.devtool = new Devtool(this)
+      this.addEventListener('mouseenter', mouseenter)
+    })
+
+    addEventListener('turbo-boost:devtools-stop', () => {
+      this.removeEventListener('mouseenter', mouseenter)
+      delete this.devtool
+    })
+
+    this.dispatchEvent(
+      new CustomEvent('turbo-boost:devtools-connect', { bubbles: true })
+    )
+  }
+
+  hideDevtool () {
+    if (this.devtool) this.devtool.hide({ active: false })
+  }
+
+  onCommandStart (event) {
+    this.targetElement.currentTriggerElement = this
+    this.targetElement.setAttribute('aria-labeledby', this.id)
+    this.targetElement.collapseMatches()
+    this.targetElement.busy = true
+    this.busy = true
+    // TODO: implement cache - this.targetElement.renderCachedHTML()
+  }
+
+  onBeforeInvoke (event) {
+    if (event.detail.method !== 'morph') return
+    if (event.target.id !== this.morphs) 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 }
+    // SEE: the TurboBoost Streams library for details on how this works
+    const duration = Date.now() - this.busyStartedAt
+    let delay = busyDuration - duration
+    if (delay < 10) delay = 10
+    event.detail.invoke = { delay }
+
+    // runs before the morph is executed
+    setTimeout(() => {
+      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)
+  }
+
+  // a list of views shared between the trigger and target
+  get sharedViews () {
+    if (!this.targetElement) return []
+    if (!this.targetElement.viewStack) return []
+    const reducer = (memo, view) => {
+      if (this.targetElement.viewStack.includes(view)) memo.push(view)
+      return memo
+    }
+    return this.viewStack.reduce(reducer.bind(this), [])
+  }
+
+  // the partial to render
+  get renders () {
+    return this.getAttribute('renders')
+  }
+
+  // the renderered partial's top wrapping dom_id
+  get morphs () {
+    return this.getAttribute('morphs')
+  }
+
+  // the morph element
+  get morphElement () {
+    if (!this.morphs) return null
+    return document.getElementById(this.morphs)
+  }
+
+  // all toggle elements contained by the `morphElement`
+  get morphToggleElements () {
+    return Array.from(
+      this.morphElement.querySelectorAll(
+        'turbo-boost-toggle-trigger,turbo-boost-toggle-target'
+      )
+    )
+  }
+
+  // the target's dom_id
+  get controls () {
+    return this.getAttribute('aria-controls')
+  }
+
+  // the target element
+  get targetElement () {
+    if (!this.controls) return null
+    return document.getElementById(this.controls)
+  }
+
+  get collapseSelector () {
+    return this.getAttribute('collapse-selector')
+  }
+
+  get focusSelector () {
+    return this.getAttribute('focus-selector')
+  }
+
+  // indicates if the toggle state should be remembered across requests
+  get remember () {
+    return this.getAttribute('remember') === 'true'
+  }
+
+  set remember (value) {
+    return this.setAttribute('remember', !!value)
+  }
+
+  // indicates if the target is expanded
+  get expanded () {
+    return this.getAttribute('aria-expanded') === 'true'
+  }
+
+  set expanded (value) {
+    this.setAttribute('aria-expanded', !!value)
+  }
+
+  // indicates if the target is expanded
+  get collapsed () {
+    return !this.expanded
+  }
+}

data/app/javascript/elements/{turbo_boost_element.js → turbo_boost_element/index.js}

@@ -1,9 +1,9 @@
 export default class TurboBoostElement extends HTMLElement {
-  constructor () {
+  constructor (html) {
     super()
     this.devtool = 'unknown'
     this.attachShadow({ mode: 'open' })
-    this.shadowRoot.innerHTML = '<slot></slot>'
+    this.shadowRoot.innerHTML = html || '<slot></slot>'
   }
 
   connectedCallback () {