turbo_boost-elements 0.0.8 → 0.0.10

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

@@ -0,0 +1,177 @@
+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 })
+    this.devtool.unregisterEventListeners()
+    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)
+      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) {
+    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') ||
+      this.targetElement.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 () {

data/app/javascript/utils/dom.js

@@ -54,10 +54,17 @@ export function removeHighlight (element) {
 export function coordinates (element) {
   if (!element) return {}
   const rect = element.getBoundingClientRect()
-  return {
-    left: rect.left + window.scrollX,
-    top: rect.top + window.scrollY,
-    width: element.offsetWidth,
-    height: element.offsetHeight
-  }
+  const width = element.offsetWidth
+  const height = element.offsetHeight
+  const top = rect.top + window.scrollY
+  const left = rect.left + window.scrollX
+  const right = left + width
+  const bottom = top + height
+  return { top, left, right, bottom, width, height }
+}
+
+export function attempt (callback) {
+  try {
+    callback()
+  } catch {}
 }

data/lib/turbo_boost/elements/engine.rb

@@ -10,6 +10,7 @@ module TurboBoost::Elements
   end
 
   class Engine < ::Rails::Engine
+    isolate_namespace TurboBoost::Elements
     config.turbo_boost_elements = ActiveSupport::OrderedOptions.new
 
     ActiveSupport.on_load(:action_controller_base) do

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

@@ -1,11 +1,23 @@
 # frozen_string_literal: true
 
 class TurboBoost::Elements::TagBuilders::BaseTagBuilder
-  attr_reader :view_context
-  delegate :content_tag, :turbo_boost, to: :view_context
+  attr_reader :controller_pack
 
   def initialize(view_context)
     @view_context = view_context
+    @controller_pack = view_context.turbo_boost # TurboBoost::Commands::ControllerPack
+  end
+
+  def render_tag(name, loading: :eager, **kwargs, &block)
+    options = kwargs.select { |_, value| value.present? }
+    options.transform_keys! { |key| key.to_s.dasherize }
+
+    loading = :eager unless loading == :lazy
+    if loading == :eager
+      view_context.tag.public_send(name.to_sym, **options, &block)
+    else
+      view_context.tag.public_send(name.to_sym, **options) {}
+    end
   end
 
   def view_stack
@@ -15,4 +27,8 @@ class TurboBoost::Elements::TagBuilders::BaseTagBuilder
       memo << location.path[(location.path.index(prefix) + prefix.length)..]
     end
   end
+
+  protected
+
+  attr_reader :view_context
 end

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

@@ -3,6 +3,17 @@
 require_relative "base_tag_builder"
 
 class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Elements::TagBuilders::BaseTagBuilder
+  def busy_tag(**kwargs, &block)
+    kwargs[:slot] = "busy"
+    render_tag("turbo-boost", loading: :eager, **kwargs, &block)
+  end
+
+  # def content_tag(loading: :eager, **kwargs, &block)
+  #   kwargs[:slot] = "content"
+  #   kwargs[:hidden] = true
+  #   render_tag("turbo-boost", loading: loading, **kwargs, &block)
+  # end
+
   def trigger_tag(
     renders:, # REQUIRED, the partial path to render
     morphs:, # REQUIRED, `dom_id` of the partial's outermost containing element
@@ -16,7 +27,7 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     &block # a Ruby block that emits this trigger's content
   )
     kwargs = kwargs.with_indifferent_access
-    kwargs[:id] ||= "#{controls}-toggle-trigger"
+    kwargs[:id] ||= "#{controls}-toggle-trigger-#{SecureRandom.hex(6)}"
 
     # command
     kwargs[:data] ||= {}
@@ -39,10 +50,7 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     kwargs[:focus_selector] = focus_selector
     kwargs[:remember] = !!remember
 
-    args = kwargs.select { |_, value| value.present? }
-    args = args.transform_keys(&:dasherize)
-
-    content_tag("turbo-boost-toggle-trigger", nil, args, &block)
+    render_tag("turbo-boost-toggle-trigger", loading: :eager, **kwargs, &block)
   end
 
   def target_tag(
@@ -68,16 +76,12 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     # rendering
     kwargs[:view_stack] = view_stack.to_json if Rails.env.development?
 
-    args = kwargs.select { |_, value| value.present? }
-    if expanded || target_expanded?(id)
-      content_tag("turbo-boost-toggle-target", nil, args.transform_keys!(&:dasherize), &block)
-    else
-      content_tag("turbo-boost-toggle-target", nil, args.transform_keys!(&:dasherize))
-    end
+    loading = (expanded || target_expanded?(id)) ? :eager : :lazy
+    render_tag("turbo-boost-toggle-target", loading: loading, **kwargs, &block)
   end
 
   def target_expanded?(dom_id)
-    !!turbo_boost.state[dom_id]
+    !!controller_pack.state[dom_id]
   end
 
   def target_collapsed?(dom_id)

data/lib/turbo_boost/elements/version.rb

@@ -2,6 +2,6 @@
 
 module TurboBoost
   module Elements
-    VERSION = "0.0.8"
+    VERSION = "0.0.10"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.10
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-19 00:00:00.000000000 Z
+date: 2023-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.0.9
+        version: 0.0.11
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.0.9
+        version: 0.0.11
 - !ruby/object:Gem::Dependency
   name: magic_frozen_string_literal
   requirement: !ruby/object:Gem::Requirement
@@ -143,12 +143,13 @@ files:
 - app/javascript/devtools/elements/tooltip_element.js
 - app/javascript/devtools/index.js
 - app/javascript/devtools/supervisor.js
-- app/javascript/devtools/toggle.js
 - app/javascript/elements/index.js
-- app/javascript/elements/toggle_target_element.js
-- app/javascript/elements/toggle_target_focus.js
-- app/javascript/elements/toggle_trigger_element.js
-- app/javascript/elements/turbo_boost_element.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/index.js
+- app/javascript/elements/turbo_boost_element/index.js
 - app/javascript/index.js
 - app/javascript/utils/dom.js
 - lib/turbo_boost/elements.rb

data/app/javascript/elements/toggle_target_element.js

@@ -1,84 +0,0 @@
-import TurboBoostElement from './turbo_boost_element'
-import './toggle_target_focus'
-
-export default class ToggleTargetElement extends TurboBoostElement {
-  connectedCallback () {
-    super.connectedCallback()
-
-    this.addEventListener('mouseenter', () =>
-      clearTimeout(this.collapseTimeout)
-    )
-
-    this.collapseOn.forEach(name =>
-      this.addEventListener(name, () => this.collapse())
-    )
-  }
-
-  // TODO: get cached content working properly
-  //       perhaps use a mechanic other than morph
-
-  cacheHTML () {
-    // this.cachedHTML = this.innerHTML
-  }
-
-  renderCachedHTML () {
-    // if (!this.cachedHTML) return
-    // this.innerHTML = this.cachedHTML
-  }
-
-  collapse (delay = 250) {
-    if (delay > 0) {
-      clearTimeout(this.collapseTimeout)
-      return (this.collapseTimeout = setTimeout(() => this.collapse(0), delay))
-    }
-
-    this.innerHTML = ''
-    try {
-      this.currentTriggerElement.expanded = false
-      this.currentTriggerElement.hideDevtool()
-    } catch {}
-  }
-
-  collapseMatches () {
-    document.querySelectorAll(this.collapseSelector).forEach(el => {
-      if (el === this) return
-      if (el.collapse) el.collapse(0)
-    })
-  }
-
-  get collapseSelector () {
-    if (
-      this.currentTriggerElement &&
-      this.currentTriggerElement.collapseSelector
-    )
-      return this.currentTriggerElement.collapseSelector
-    return 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)
-  }
-}

data/app/javascript/elements/toggle_trigger_element.js

@@ -1,122 +0,0 @@
-import TurboBoostElement from './turbo_boost_element'
-import DevtoolSupervisor from '../devtools/supervisor'
-import ToggleDevtool from '../devtools/toggle'
-
-export default class ToggleTriggerElement extends TurboBoostElement {
-  connectedCallback () {
-    super.connectedCallback()
-
-    if (this.targetElement) {
-      this.targetElement.setAttribute('aria-labeledby', this.id)
-    }
-
-    this.addEventListener(TurboBoost.Commands.events.start, () => {
-      this.busy = true
-      this.targetElement.currentTriggerElement = this
-      this.targetElement.renderCachedHTML()
-    })
-
-    this.addEventListener(TurboBoost.Commands.events.success, () => {
-      this.busy = false
-      this.targetElement.focus()
-      this.targetElement.collapseMatches()
-      this.targetElement.cacheHTML()
-    })
-
-    this.addEventListener(
-      TurboBoost.Commands.events.finish,
-      () => (this.busy = false)
-    )
-
-    this.initializeDevtool()
-  }
-
-  initializeDevtool () {
-    const mouseenter = () => this.devtool.show()
-
-    addEventListener('turbo-boost:devtools-start', () => {
-      this.devtool = new ToggleDevtool(this)
-      this.addEventListener('mouseenter', mouseenter)
-    })
-
-    addEventListener('turbo-boost:devtools-stop', () => {
-      this.removeEventListener('mouseenter', mouseenter)
-      delete this.devtool
-    })
-
-    if (DevtoolSupervisor.started) DevtoolSupervisor.restart()
-  }
-
-  hideDevtool () {
-    if (this.devtool) this.devtool.hide(true)
-  }
-
-  // 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)
-  }
-
-  // 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 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
-  }
-
-  // indicates if an rpc call is active/busy
-  get busy () {
-    return this.getAttribute('busy') === 'true'
-  }
-
-  set busy (value) {
-    this.setAttribute('busy', !!value)
-  }
-}