turbo_boost-elements 0.0.8 → 0.0.9

data/app/javascript/utils/dom.js

@@ -54,10 +54,11 @@ 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 }
 }

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.9"
   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.9
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-19 00:00:00.000000000 Z
+date: 2023-01-28 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)
-  }
-}