turbo_boost-elements 0.0.13 → 0.0.15

data/app/assets/builds/@turbo-boost/elements.metafile.json

@@ -0,0 +1 @@
+{"inputs":{"node_modules/@turbo-boost/commands/app/assets/builds/@turbo-boost/commands.js":{"bytes":11151,"imports":[],"format":"esm"},"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js":{"bytes":19326,"imports":[],"format":"esm"},"app/javascript/elements/turbo_boost_element/index.js":{"bytes":844,"imports":[],"format":"esm"},"app/javascript/elements/toggle_elements/toggle_element/index.js":{"bytes":2193,"imports":[{"path":"app/javascript/elements/turbo_boost_element/index.js","kind":"import-statement","original":"../../turbo_boost_element"}],"format":"esm"},"app/javascript/elements/toggle_elements/target_element/index.js":{"bytes":3370,"imports":[{"path":"app/javascript/elements/toggle_elements/toggle_element/index.js","kind":"import-statement","original":"../toggle_element"}],"format":"esm"},"app/javascript/elements/toggle_elements/trigger_element/focus.js":{"bytes":1585,"imports":[],"format":"esm"},"app/javascript/elements/toggle_elements/trigger_element/index.js":{"bytes":7168,"imports":[{"path":"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js","kind":"import-statement","original":"@turbo-boost/devtools"},{"path":"app/javascript/elements/toggle_elements/toggle_element/index.js","kind":"import-statement","original":"../toggle_element"},{"path":"app/javascript/elements/toggle_elements/trigger_element/focus.js","kind":"import-statement","original":"./focus"}],"format":"esm"},"app/javascript/elements/index.js":{"bytes":481,"imports":[{"path":"app/javascript/elements/turbo_boost_element/index.js","kind":"import-statement","original":"./turbo_boost_element"},{"path":"app/javascript/elements/toggle_elements/target_element/index.js","kind":"import-statement","original":"./toggle_elements/target_element"},{"path":"app/javascript/elements/toggle_elements/trigger_element/index.js","kind":"import-statement","original":"./toggle_elements/trigger_element"}],"format":"esm"},"app/javascript/index.js":{"bytes":244,"imports":[{"path":"node_modules/@turbo-boost/commands/app/assets/builds/@turbo-boost/commands.js","kind":"import-statement","original":"@turbo-boost/commands"},{"path":"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js","kind":"import-statement","original":"@turbo-boost/devtools"},{"path":"app/javascript/elements/index.js","kind":"import-statement","original":"./elements"}],"format":"esm"}},"outputs":{"app/assets/builds/@turbo-boost/elements.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":92571},"app/assets/builds/@turbo-boost/elements.js":{"imports":[],"exports":["default"],"entryPoint":"app/javascript/index.js","inputs":{"node_modules/@turbo-boost/commands/app/assets/builds/@turbo-boost/commands.js":{"bytesInOutput":11085},"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js":{"bytesInOutput":19262},"app/javascript/elements/turbo_boost_element/index.js":{"bytesInOutput":541},"app/javascript/elements/toggle_elements/toggle_element/index.js":{"bytesInOutput":1284},"app/javascript/elements/toggle_elements/target_element/index.js":{"bytesInOutput":2040},"app/javascript/elements/toggle_elements/trigger_element/focus.js":{"bytesInOutput":768},"app/javascript/elements/toggle_elements/trigger_element/index.js":{"bytesInOutput":4299},"app/javascript/elements/index.js":{"bytesInOutput":146},"app/javascript/index.js":{"bytesInOutput":124}},"bytes":39609}}}

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

@@ -1,7 +1,7 @@
 import ToggleElement from '../toggle_element'
 
 export default class ToggleTargetElement extends ToggleElement {
-  connectedCallback () {
+  connectedCallback() {
     super.connectedCallback()
 
     this.mouseenterHandler = this.onMouseenter.bind(this)
@@ -23,7 +23,7 @@ export default class ToggleTargetElement extends ToggleElement {
     })
   }
 
-  disconnectedCallback () {
+  disconnectedCallback() {
     this.removeEventListener('mouseenter', this.mouseenterHandler)
 
     this.collapseOn.forEach(entry => {
@@ -43,26 +43,26 @@ export default class ToggleTargetElement extends ToggleElement {
   //       perhaps use a mechanic other than morph
 
   // TODO: implement cache (similar to Turbo Drive restoration visit)
-  cacheHTML () {
+  cacheHTML() {
     // this.cachedHTML = this.innerHTML
   }
 
   // TODO: implement cache (similar to Turbo Drive restoration visit)
-  renderCachedHTML () {
+  renderCachedHTML() {
     // if (!this.cachedHTML) return
     // this.innerHTML = this.cachedHTML
   }
 
-  onMouseenter () {
+  onMouseenter() {
     clearTimeout(this.collapseTimeout)
   }
 
-  collapse (delay = 250) {
+  collapse(delay = 250) {
     clearTimeout(this.collapseTimeout)
+    if (this.busy) return
     if (typeof delay !== 'number') delay = 250
 
-    if (delay > 0)
-      return (this.collapseTimeout = setTimeout(() => this.collapse(0), delay))
+    if (delay > 0) return (this.collapseTimeout = setTimeout(() => this.collapse(0), delay))
 
     this.innerHTML = ''
     try {
@@ -71,52 +71,60 @@ export default class ToggleTargetElement extends ToggleElement {
     } catch {}
   }
 
-  collapseNow (event) {
+  collapseNow(event) {
     if (event.target.closest('turbo-boost-devtool-tooltip')) return
     this.collapse(0)
   }
 
-  collapseMatches () {
+  collapseMatches() {
     document.querySelectorAll(this.collapseSelector).forEach(el => {
-      if (el === this) return
+      if (el.id === this.id) return
       if (el.collapse) el.collapse(0)
     })
   }
 
-  get collapseSelector () {
-    return (
-      this.triggerElement.collapseSelector ||
-      this.getAttribute('collapse-selector')
-    )
+  get collapseSelector() {
+    return this.triggerElement.collapseSelector || this.getAttribute('collapse-selector')
   }
 
-  get focusSelector () {
+  get focusSelector() {
     return this.getAttribute('focus-selector')
   }
 
-  get triggerElement () {
+  // the active trigger
+  get triggerElement() {
     return document.getElementById(this.labeledBy)
   }
 
-  get 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) {
+  set labeledBy(value) {
     return this.setAttribute('aria-labeledby', value)
   }
 
-  get collapseOn () {
+  get collapseOn() {
     const value = this.getAttribute('collapse-on')
     if (!value) return []
     return JSON.parse(value)
   }
 
-  get expanded () {
-    return this.triggerElement.expanded
+  get expanded() {
+    return this.triggerElement ? this.triggerElement.expanded : false
+  }
+
+  set expanded(value) {
+    this.triggerElements.forEach(el => (el.expanded = value))
   }
 
-  set expanded (value) {
-    return (this.triggerElement.expanded = value)
+  get busy() {
+    return this.triggerElement && this.triggerElement.busy
   }
 }

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

@@ -11,13 +11,13 @@ export const busyDelay = 100 // milliseconds - time to wait before showing busy
 export const busyDuration = 400 // milliseconds - minimum time that busy element is shown
 
 export default class ToggleElement extends TurboBoostElement {
-  constructor () {
+  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 () {
+  showBusyElement() {
     clearTimeout(this.showBusyElementTimeout)
     clearTimeout(this.hideBusyElementTimeout)
 
@@ -30,7 +30,7 @@ export default class ToggleElement extends TurboBoostElement {
     }, busyDelay)
   }
 
-  hideBusyElement () {
+  hideBusyElement() {
     clearTimeout(this.showBusyElementTimeout)
     clearTimeout(this.hideBusyElementTimeout)
 
@@ -46,25 +46,25 @@ export default class ToggleElement extends TurboBoostElement {
     }, delay)
   }
 
-  get busyElement () {
+  get busyElement() {
     return this.querySelector(':scope > [slot="busy"]')
   }
 
-  get busySlotElement () {
+  get busySlotElement() {
     return this.shadowRoot.querySelector('slot[name="busy"]')
   }
 
-  get defaultSlotElement () {
+  get defaultSlotElement() {
     return this.shadowRoot.querySelector('slot:not([name])')
   }
 
   // indicates if an rpc call is active/busy
-  get busy () {
+  get busy() {
     return this.getAttribute('busy') === 'true'
   }
 
   // indicates if an rpc call is active/busy
-  set busy (value) {
+  set busy(value) {
     value = !!value
     if (this.busy === value) return
     this.setAttribute('busy', value)
@@ -72,12 +72,12 @@ export default class ToggleElement extends TurboBoostElement {
     else this.hideBusyElement()
   }
 
-  get busyStartedAt () {
+  get busyStartedAt() {
     if (!this.dataset.busyStartedAt) return 0
     return Number(this.dataset.busyStartedAt)
   }
 
-  set busyStartedAt (value) {
+  set busyStartedAt(value) {
     this.dataset.busyStartedAt = value
   }
 }

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

@@ -1,31 +1,18 @@
 let focusTimeout
 
-function deactivateTrixAttributes (editor) {
-  const attributes = [
-    'bold',
-    'bullet',
-    'code',
-    'heading1',
-    'href',
-    'italic',
-    'number',
-    'quote',
-    'strike'
-  ]
+function deactivateTrixAttributes(editor) {
+  const attributes = ['bold', 'bullet', 'code', 'heading1', 'href', 'italic', 'number', 'quote', 'strike']
   attributes.forEach(name => editor.deactivateAttribute(name))
 }
 
-function focusTrixEditorElement (element) {
+function focusTrixEditorElement(element) {
   if (element.value.length === 0) return
 
   const editor = element.editor
 
   // move cursor to the end
   let lastRange = []
-  while (
-    lastRange[0] !== editor.getSelectedRange()[0] &&
-    lastRange[1] !== editor.getSelectedRange()[1]
-  ) {
+  while (lastRange[0] !== editor.getSelectedRange()[0] && lastRange[1] !== editor.getSelectedRange()[1]) {
     lastRange = editor.getSelectedRange()
     editor.moveCursorInDirection('forward')
   }
@@ -39,13 +26,10 @@ function focusTrixEditorElement (element) {
   deactivateTrixAttributes(editor)
 
   // move cursor to end and collapse the selection
-  editor.setSelectedRange([
-    editor.getSelectedRange()[1],
-    editor.getSelectedRange()[1]
-  ])
+  editor.setSelectedRange([editor.getSelectedRange()[1], editor.getSelectedRange()[1]])
 }
 
-function debouncedFocus (element) {
+function debouncedFocus(element) {
   clearTimeout(focusTimeout)
 
   focusTimeout = setTimeout(() => {

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

@@ -1,11 +1,20 @@
+import { Devtool, decorateElementWithDevtool } from '@turbo-boost/devtools'
+
 import ToggleElement, { busyDuration } from '../toggle_element'
-import Devtool from './devtool'
 import focus from './focus'
 
+document.addEventListener('turbo-boost:devtools-start', () => Devtool.register('toggle', 'toggles'))
+
 let currentFocusSelector
 
 export default class ToggleTriggerElement extends ToggleElement {
-  connectedCallback () {
+  constructor() {
+    super()
+
+    decorateElementWithDevtool(this, 'toggle', 'toggles')
+  }
+
+  connectedCallback() {
     super.connectedCallback()
 
     const { start: commandStartEvent } = TurboBoost.Commands.events
@@ -24,7 +33,7 @@ export default class ToggleTriggerElement extends ToggleElement {
     this.initializeDevtool()
   }
 
-  disconnectedCallback () {
+  disconnectedCallback() {
     // delay cleanup because the trigger may have been morphed out of the DOM,
     // but it's needed to apply behavior like focus etc...
     setTimeout(() => {
@@ -34,47 +43,20 @@ export default class ToggleTriggerElement extends ToggleElement {
       const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
       removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
 
-      this.devtool.hide({ active: false })
-      this.devtool.unregisterEventListeners()
-      delete this.devtool
+      this.removeDevtool()
     }, 1000)
   }
 
-  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)
-      this.devtool.hide({ active: false })
-      this.devtool.unregisterEventListeners()
-      delete this.devtool
-    })
-
-    this.dispatchEvent(
-      new CustomEvent('turbo-boost:devtools-connect', { bubbles: true })
-    )
-  }
-
-  hideDevtool () {
-    if (this.devtool) this.devtool.hide({ active: false })
-  }
-
-  onCommandStart (event) {
+  onCommandStart(event) {
     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) {
+  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
@@ -92,19 +74,15 @@ 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(
-      () => focus(this.targetElement.querySelector(currentFocusSelector)),
-      delay + 100
-    )
+    setTimeout(() => focus(this.targetElement.querySelector(currentFocusSelector)), delay + 100)
   }
 
   // a list of views shared between the trigger and target
-  get sharedViews () {
+  get sharedViews() {
     if (!this.targetElement) return []
     if (!this.targetElement.viewStack) return []
     const reducer = (memo, view) => {
@@ -115,71 +93,125 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   // the partial to render
-  get renders () {
+  get renders() {
     return this.getAttribute('renders')
   }
 
   // the renderered partial's top wrapping dom_id
-  get morphs () {
+  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'
-      )
-    )
+  get morphToggleTriggerElements() {
+    return Array.from(this.morphElement.querySelectorAll('turbo-boost-toggle-trigger'))
   }
 
   // the target's dom_id
-  get controls () {
+  get controls() {
     return this.getAttribute('aria-controls')
   }
 
-  // the target element
-  get targetElement () {
-    if (!this.controls) return null
-    return document.getElementById(this.controls)
-  }
-
-  get collapseSelector () {
+  get collapseSelector() {
     return this.getAttribute('collapse-selector')
   }
 
-  get focusSelector () {
-    return (
-      this.getAttribute('focus-selector') || this.targetElement.focusSelector
-    )
+  get focusSelector() {
+    return this.getAttribute('focus-selector') || this.targetElement.focusSelector
   }
 
   // indicates if the toggle state should be remembered across requests
-  get remember () {
+  get remember() {
     return this.getAttribute('remember') === 'true'
   }
 
-  set remember (value) {
+  set remember(value) {
     return this.setAttribute('remember', !!value)
   }
 
   // indicates if the target is expanded
-  get expanded () {
+  get expanded() {
     return this.getAttribute('aria-expanded') === 'true'
   }
 
-  set expanded (value) {
+  set expanded(value) {
     this.setAttribute('aria-expanded', !!value)
   }
 
   // indicates if the target is expanded
-  get collapsed () {
+  get collapsed() {
     return !this.expanded
   }
+
+  // ------ DevToolDelegate ------
+  get command() {
+    return this.dataset.turboCommand
+  }
+
+  get renderingLineLabel() {
+    return 'renders & morphs'
+  }
+
+  // the morph element
+  get morphElement() {
+    if (!this.morphs) return null
+    return document.getElementById(this.morphs)
+  }
+
+  // the target element
+  get targetElement() {
+    if (!this.controls) return null
+    return document.getElementById(this.controls)
+  }
+
+  get triggerTooltipData() {
+    let content = this.triggerElement.viewStack
+      .reverse()
+      .map((view, index) => {
+        return this.triggerElement.sharedViews.includes(view)
+          ? `<div slot="content">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
+      }, this)
+      .join('')
+
+    return {
+      subtitle: `
+      <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>
+    `,
+      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}
+    `
+    }
+  }
+
+  get targetTooltipData() {
+    let content = this.targetElement.viewStack
+      .reverse()
+      .map((view, index) => {
+        return this.triggerElement.sharedViews.includes(view)
+          ? `<div slot="content">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
+      }, this)
+      .join('')
+
+    return {
+      subtitle: `<b>id</b>: ${this.targetElement.id}<br>
+      <b>aria-labeled-by</b>: ${this.targetElement.labeledBy}<br>
+`,
+      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}
+    `
+    }
+  }
 }

data/app/javascript/elements/turbo_boost_element/index.js

@@ -1,37 +1,34 @@
 export default class TurboBoostElement extends HTMLElement {
-  constructor (html) {
+  constructor(html) {
     super()
     this.devtool = 'unknown'
     this.attachShadow({ mode: 'open' })
     this.shadowRoot.innerHTML = html || '<slot></slot>'
   }
 
-  connectedCallback () {
+  connectedCallback() {
     this.ensureId()
   }
 
-  ensureId () {
+  ensureId() {
     if (this.id.trim().length) return
     this.id = `${this.tagName}-${this.uuidv4()}`.toLowerCase()
   }
 
   // SEE: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
-  uuidv4 () {
+  uuidv4() {
     return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-      (
-        c ^
-        (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
-      ).toString(16)
+      (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
     )
   }
 
-  get viewStack () {
+  get viewStack() {
     const value = this.getAttribute('view-stack')
     if (!value) return []
     return JSON.parse(value)
   }
 
-  get partial () {
+  get partial() {
     return this.viewStack[0]
   }
 }

data/app/javascript/index.js

@@ -1,6 +1,6 @@
 import '@turbo-boost/commands'
+import devtools from '@turbo-boost/devtools'
 import './elements'
-import devtools from './devtools'
 
 self.TurboBoost = self.TurboBoost || {}
 self.TurboBoost.devtools = devtools

data/lib/turbo_boost/elements/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.15
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-08 00:00:00.000000000 Z
+date: 2023-08-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -132,26 +132,20 @@ extra_rdoc_files: []
 files:
 - MIT-LICENSE
 - README.md
+- app/assets/builds/@turbo-boost/commands.metafile.json
 - app/assets/builds/@turbo-boost/elements.js
 - app/assets/builds/@turbo-boost/elements.js.map
+- app/assets/builds/@turbo-boost/elements.metafile.json
 - app/commands/turbo_boost/elements/application_command.rb
 - app/commands/turbo_boost/elements/toggle_command.rb
 - app/helpers/turbo_boost/elements/application_helper.rb
-- app/javascript/devtools/dependencies.js
-- app/javascript/devtools/elements/devtool_element.js
-- app/javascript/devtools/elements/supervisor_element.js
-- app/javascript/devtools/elements/tooltip_element.js
-- app/javascript/devtools/index.js
-- app/javascript/devtools/supervisor.js
 - app/javascript/elements/index.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
-- app/javascript/utils/dom.js
 - lib/turbo_boost/elements.rb
 - lib/turbo_boost/elements/engine.rb
 - lib/turbo_boost/elements/tag_builders.rb
@@ -180,7 +174,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.4.10
 signing_key:
 specification_version: 4
 summary: Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.