reflex_behaviors 0.0.9 → 0.0.10

data/app/helpers/reflex_behaviors/application_helper.rb

@@ -1,12 +1,8 @@
 # frozen_string_literal: true
 
-require ReflexBehaviors::Engine.root.join("lib/reflex_behaviors/tag_builders")
+require_relative "../../../lib/reflex_behaviors/tag_builders"
 
 module ReflexBehaviors::ApplicationHelper
-  def idomatic_partial_path(partial_path)
-    partial_path.to_s.gsub("/_", "/").split(".").first
-  end
-
   def current_partial_path
     path = nil
     prefix = "app/views/"
@@ -20,15 +16,6 @@ module ReflexBehaviors::ApplicationHelper
     path[(path.index(prefix) + prefix.length), path.rindex("/")]
   end
 
-  def reflex_render(**kwargs)
-    kwargs[:partial] = idomatic_partial_path(kwargs[:partial])
-    kwargs[:assigns] ||= {}
-    kwargs[:assigns].each { |key, val| kwargs[:assigns][key] = transportable_value(val) }
-    kwargs[:locals] ||= {}
-    kwargs[:locals].each { |key, val| kwargs[:locals][key] = transportable_value(val) }
-    kwargs.to_json
-  end
-
   def method_missing(name, ...)
     prefixes = %w[toggle_]
     prefixes.each do |prefix|
@@ -52,9 +39,4 @@ module ReflexBehaviors::ApplicationHelper
   def toggle_tag_builder
     @toggle_tag_builder ||= ReflexBehaviors::TagBuilders::ToggleTagsBuilder.new(self)
   end
-
-  def transportable_value(value)
-    return value.to_s unless value.respond_to?(:to_sgid_param)
-    value.try(:persisted?) ? value.to_sgid_param : nil
-  end
 end

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

@@ -22,6 +22,7 @@ export default class TooltipElement extends HTMLElement {
       <style>${this.stylesheet}</style>
       <div>
         <slot name="title"></slot>
+        <slot name="subtitle"></slot>
         <slot name="content-top"></slot>
         <slot name="content"></slot>
         <slot name="content-bottom"></slot>
@@ -52,18 +53,29 @@ export default class TooltipElement extends HTMLElement {
         opacity: 0.9;
         outline-offset: 1px;
         outline: dashed 3px ${this.color};
-        padding: 8px 12px 8px 12px;
+        padding: 12px;
         position: relative;
         white-space: nowrap;
       }
 
       slot[name="title"] {
-        border-bottom: dotted 1px ${this.color};
         color: ${this.color};
-        display: inline-block;
+        display: block;
         font-weight: bold;
+        width: 100%;
+      }
+
+      slot[name="subtitle"] {
+        border-bottom: dotted 1px ${this.color};
+        border-top: dotted 1px ${this.color};
+        color: ${this.color};
+        display: block;
+        font-size: 0.8rem;
+        font-weight: lighter;
         margin-bottom: 8px;
-        padding-bottom: 8px;
+        margin-top: 4px;
+        padding-bottom: 4px;
+        padding-top: 4px;
         width: 100%;
       }
 

data/app/javascript/devtools/toggle.js

@@ -12,29 +12,31 @@ document.addEventListener('reflex-behaviors:devtools-start', () =>
   supervisor.register('toggle', 'toggles<small>(trigger/target)</small>')
 )
 
-function appendTooltip (title, content, options = {}) {
+function appendTooltip (title, subtitle, content, options = {}) {
   let { backgroundColor, color, position } = options
   color = color || 'white'
   position = position || 'top'
   return appendHTML(`
     <reflex-behaviors-devools-tooltip position="${position}" background-color="${backgroundColor}" color="${color}">
       <div slot='title'>${title}</div>
+      <div slot='subtitle'>${subtitle}</div>
       ${content}
     </reflex-behaviors-devools-tooltip>
   `)
 }
 
 export default class ToggleDevtool {
-  constructor (trigger) {
+  constructor (triggerElement) {
     this.name = 'toggle'
-    this.reflex = trigger.dataset.turboReflex
-    this.trigger = trigger
-    this.target = trigger.target
+    this.reflex = triggerElement.dataset.turboReflex
+    this.triggerElement = triggerElement // SEE: app/javascript/elements/toggle_trigger_element.js
+    this.targetElement = triggerElement.targetElement // SEE: app/javascript/elements/toggle_target_element.js
+    this.morphElement = triggerElement.morphElement
 
     document.addEventListener('reflex-behaviors:devtool-enable', event => {
       const { name } = event.detail
       if (name === this.name) {
-        addHighlight(this.trigger, {
+        addHighlight(this.triggerElement, {
           outline: '3px dashed blueviolet',
           outlineOffset: '2px'
         })
@@ -43,7 +45,7 @@ export default class ToggleDevtool {
 
     document.addEventListener('reflex-behaviors:devtool-disable', event => {
       const { name } = event.detail
-      if (name === this.name) removeHighlight(this.trigger)
+      if (name === this.name) removeHighlight(this.triggerElement)
     })
 
     let hideTimeout
@@ -73,45 +75,47 @@ export default class ToggleDevtool {
     activeToggle = this
     this.hide()
 
-    addHighlight(this.target, {
+    addHighlight(this.targetElement, {
       outline: '3px dashed darkcyan',
       outlineOffset: '-2px'
     })
 
-    addHighlight(this.trigger.renderingElement, {
+    addHighlight(this.triggerElement.morphElement, {
       outline: '3px dashed chocolate',
       outlineOffset: '3px'
     })
 
-    const renderingTooltip = this.createRenderingTooltip()
+    const morphTooltip = this.createMorphTooltip()
     const targetTooltip = this.createTargetTooltip()
-    this.createTriggerTooltip(targetTooltip, renderingTooltip)
+    this.createTriggerTooltip(targetTooltip, morphTooltip)
 
     document
       .querySelectorAll('.leader-line')
       .forEach(el => (el.style.zIndex = 100000))
 
     const data = {
-      rendering: {
-        partial: this.trigger.renderingPartial,
-        id: this.trigger.renderingInfo.id,
-        status: this.trigger.renderingElement ? 'OK' : 'Not Found'
+      morph: {
+        partial: this.triggerElement.renders,
+        id: this.triggerElement.morphs,
+        status: this.morphElement ? 'OK' : 'Not Found'
       },
       trigger: { partial: null, id: null, status: 'Not Found' },
       target: { partial: null, id: null, status: 'Not Found' }
     }
 
-    if (this.trigger)
+    if (this.triggerElement) {
       data.trigger = {
-        partial: this.trigger.partial,
-        id: this.trigger.id,
+        partial: this.triggerElement.partial,
+        id: this.triggerElement.id,
         status: 'OK'
       }
+      data.target.id = this.triggerElement.controls
+    }
 
-    if (this.target)
+    if (this.targetElement)
       data.target = {
-        partial: this.target.partial,
-        id: this.target.id,
+        partial: this.targetElement.partial,
+        id: this.targetElement.id,
         status: 'OK'
       }
 
@@ -133,21 +137,24 @@ export default class ToggleDevtool {
     if (clearActiveToggle) activeToggle = null
   }
 
-  createRenderingTooltip () {
-    if (!this.trigger.renderingElement)
+  createMorphTooltip () {
+    if (!this.triggerElement.morphs)
       return console.debug(
-        `Unable to create the rendering tooltip! No element matches the DOM id: '${this.trigger.renderingInfo.id}'`
+        `Unable to create the morph tooltip! No element matches the DOM id: '${this.triggerElement.morphs}'`
       )
 
-    const title = `RENDERING (id: ${this.trigger.renderingElement.id ||
-      'unknown'})`
-    const content = `<div slot="content">partial: ${this.trigger.renderingPartial}</div>`
-    const tooltip = appendTooltip(title, content, {
+    const title = 'PARTIAL'
+    const subtitle = `
+      id: ${this.triggerElement.morphs || 'unknown'}<br>
+      partial: ${this.triggerElement.renders || 'unknown'}
+    `
+    const content = '<div slot="content"></div>'
+    const tooltip = appendTooltip(title, subtitle, content, {
       backgroundColor: 'lightyellow',
       color: 'chocolate'
     })
 
-    const coords = coordinates(this.trigger.renderingElement)
+    const coords = coordinates(this.morphElement)
     const top = Math.ceil(
       coords.top + coords.height / 2 - tooltip.offsetHeight / 2
     )
@@ -155,7 +162,7 @@ export default class ToggleDevtool {
     tooltip.style.top = `${top}px`
     tooltip.style.left = `${left}px`
 
-    tooltip.line = new LeaderLine(tooltip, this.trigger.renderingElement, {
+    tooltip.line = new LeaderLine(tooltip, this.morphElement, {
       ...this.leaderLineOptions,
       color: 'chocolate'
     })
@@ -165,34 +172,38 @@ export default class ToggleDevtool {
   }
 
   createTargetTooltip () {
-    if (!this.target)
+    if (!this.targetElement)
       return console.debug(
-        `Unable to create the target tooltip! No element matches the DOM id: '${this.trigger.controls}'`
+        `Unable to create the target tooltip! No element matches the DOM id: '${this.triggerElement.controls}'`
       )
 
-    const title = `TARGET (id: ${this.target.id})`
-    const content = this.target.viewStack
+    const title = 'TARGET'
+    const subtitle = `
+      id: ${this.targetElement.id}<br>
+      labeled by: ${this.targetElement.labeledBy}
+    `
+    const content = this.targetElement.viewStack
       .reverse()
       .map((view, index) => {
-        return this.trigger.sharedViews.includes(view)
+        return this.triggerElement.sharedViews.includes(view)
           ? `<div slot="content-top">${index + 1}. ${view}</div>`
           : `<div slot="content-bottom">${index + 1}. ${view}</div>`
       }, this)
       .join('')
 
-    const tooltip = appendTooltip(title, content, {
+    const tooltip = appendTooltip(title, subtitle, content, {
       backgroundColor: 'lightcyan',
       color: 'darkcyan',
       position: 'bottom'
     })
 
-    const coords = coordinates(this.target)
+    const coords = coordinates(this.targetElement)
     const top = Math.ceil(coords.top + tooltip.offsetHeight)
     const left = Math.ceil(coords.left + coords.width + tooltip.offsetWidth / 3)
     tooltip.style.top = `${top}px`
     tooltip.style.left = `${left}px`
 
-    tooltip.line = new LeaderLine(tooltip, this.target, {
+    tooltip.line = new LeaderLine(tooltip, this.targetElement, {
       ...this.leaderLineOptions,
       color: 'darkcyan'
     })
@@ -201,30 +212,34 @@ export default class ToggleDevtool {
     return tooltip
   }
 
-  createTriggerTooltip (targetTooltip, renderingTooltip) {
-    if (!this.trigger) return
-    const title = `TRIGGER (controls: ${this.trigger.controls})`
-    const content = this.trigger.viewStack
+  createTriggerTooltip (targetTooltip, morphTooltip) {
+    if (!this.triggerElement) return
+    const title = 'TRIGGER'
+    const subtitle = `
+      id: ${this.triggerElement.id}<br>
+      controls: ${this.triggerElement.controls}
+    `
+    const content = this.triggerElement.viewStack
       .reverse()
       .map((view, index) => {
-        return this.trigger.sharedViews.includes(view)
+        return this.triggerElement.sharedViews.includes(view)
           ? `<div slot="content-top">${index + 1}. ${view}</div>`
           : `<div slot="content-bottom">${index + 1}. ${view}</div>`
       }, this)
       .join('')
 
-    const tooltip = appendTooltip(title, content, {
+    const tooltip = appendTooltip(title, subtitle, content, {
       backgroundColor: 'lavender',
       color: 'blueviolet'
     })
 
-    const coords = coordinates(this.trigger)
+    const coords = coordinates(this.triggerElement)
     const top = Math.ceil(coords.top - tooltip.offsetHeight * 2)
     const left = Math.ceil(coords.left + coords.width + tooltip.offsetWidth / 3)
     tooltip.style.top = `${top}px`
     tooltip.style.left = `${left}px`
 
-    tooltip.line = new LeaderLine(this.trigger, tooltip, {
+    tooltip.line = new LeaderLine(this.triggerElement, tooltip, {
       ...this.leaderLineOptions,
       color: 'blueviolet'
     })
@@ -244,16 +259,16 @@ export default class ToggleDevtool {
       }
     }
 
-    if (renderingTooltip) {
-      tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
+    if (morphTooltip) {
+      tooltip.lineToRendering = new LeaderLine(tooltip, morphTooltip, {
         ...this.leaderLineOptions,
         color: 'blueviolet',
-        middleLabel: 'renders',
+        middleLabel: 'renders and morphs',
         size: 2.1
       })
 
-      renderingTooltip.drag.onMove = () => {
-        renderingTooltip.line.position()
+      morphTooltip.drag.onMove = () => {
+        morphTooltip.line.position()
         if (tooltip.lineToTarget) tooltip.lineToTarget.position()
         tooltip.lineToRendering.position()
       }
@@ -261,6 +276,7 @@ export default class ToggleDevtool {
 
     tooltip.drag = new PlainDraggable(tooltip)
     tooltip.drag.onMove = () => {
+      console.log('nate', tooltip.line)
       tooltip.line.position()
       if (tooltip.lineToTarget) tooltip.lineToTarget.position()
       if (tooltip.lineToRendering) tooltip.lineToRendering.position()

data/app/javascript/elements/reflex_element.js

@@ -8,7 +8,6 @@ export default class ReflexElement extends HTMLElement {
 
   connectedCallback () {
     this.ensureId()
-    this.dataset.elementOrigin = 'hopsoft/reflex_behaviors'
   }
 
   ensureId () {
@@ -27,8 +26,9 @@ export default class ReflexElement extends HTMLElement {
   }
 
   get viewStack () {
-    if (!this.dataset.viewStack) return []
-    return JSON.parse(this.dataset.viewStack)
+    const value = this.getAttribute('view-stack')
+    if (!value) return []
+    return JSON.parse(value)
   }
 
   get partial () {

data/app/javascript/elements/toggle_target_element.js

@@ -1,3 +1,83 @@
 import ReflexElement from './reflex_element'
 
-export default class ToggleTargetElement extends ReflexElement {}
+export default class ToggleTargetElement extends ReflexElement {
+  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 () {
+    clearTimeout(this.collapseTimeout)
+    this.collapseTimeout = setTimeout(() => {
+      this.innerHTML = ''
+      try {
+        this.currentTriggerElement.expanded = false
+        this.currentTriggerElement.hideDevtool()
+      } catch {}
+    }, 250)
+  }
+
+  collapseMatches () {
+    document.querySelectorAll(this.collapseSelector).forEach(el => {
+      if (el === this) return
+      if (el.collapse) el.collapse()
+    })
+  }
+
+  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) return
+      this.focusElement.focus()
+      this.focusElement.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    }, 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

@@ -5,14 +5,38 @@ import ToggleDevtool from '../devtools/toggle'
 export default class ToggleTriggerElement extends ReflexElement {
   connectedCallback () {
     super.connectedCallback()
+
+    if (this.targetElement) {
+      this.targetElement.setAttribute('aria-labeledby', this.id)
+    }
+
+    this.addEventListener(TurboReflex.events.start, () => {
+      this.busy = true
+      this.targetElement.currentTriggerElement = this
+      this.targetElement.renderCachedHTML()
+    })
+
+    this.addEventListener(TurboReflex.events.success, () => {
+      this.busy = false
+      this.targetElement.focus()
+      this.targetElement.collapseMatches()
+      this.targetElement.cacheHTML()
+    })
+
+    this.addEventListener(TurboReflex.events.finish, () => (this.busy = false))
+
+    this.initializeDevtool()
+  }
+
+  initializeDevtool () {
     const mouseenter = () => this.devtool.show()
 
-    document.addEventListener('reflex-behaviors:devtools-start', () => {
+    addEventListener('reflex-behaviors:devtools-start', () => {
       this.devtool = new ToggleDevtool(this)
       this.addEventListener('mouseenter', mouseenter)
     })
 
-    document.addEventListener('reflex-behaviors:devtools-stop', () => {
+    addEventListener('reflex-behaviors:devtools-stop', () => {
       this.removeEventListener('mouseenter', mouseenter)
       delete this.devtool
     })
@@ -20,79 +44,76 @@ export default class ToggleTriggerElement extends ReflexElement {
     if (DevtoolSupervisor.started) DevtoolSupervisor.restart()
   }
 
-  collapse () {
-    try {
-      this.target.remove()
-      this.setAttribute('aria-expanded', false)
-    } catch (error) {
-      console.error('Failed to collapse toggle-trigger target!', error)
-    }
+  hideDevtool () {
+    if (this.devtool) this.devtool.hide(true)
   }
 
+  // a list of views shared between the trigger and target
   get sharedViews () {
-    if (!this.target) return []
-    if (!this.target.viewStack) return []
+    if (!this.targetElement) return []
+    if (!this.targetElement.viewStack) return []
     const reducer = (memo, view) => {
-      if (this.target.viewStack.includes(view)) memo.push(view)
+      if (this.targetElement.viewStack.includes(view)) memo.push(view)
       return memo
     }
     return this.viewStack.reduce(reducer.bind(this), [])
   }
 
-  get renderingInfo () {
-    if (!this.dataset.render) return {}
-    return JSON.parse(this.dataset.render)
+  // the partial to render
+  get renders () {
+    return this.getAttribute('renders')
+  }
+
+  // the renderered partial's top wrapping dom_id
+  get morphs () {
+    return this.getAttribute('morphs')
   }
 
-  get renderingPartial () {
-    return this.renderingInfo.partial
+  // the morph element
+  get morphElement () {
+    if (!this.morphs) return null
+    return document.getElementById(this.morphs)
   }
 
-  get renderingElement () {
-    const { id } = this.renderingInfo
-    if (!id) return null
-    return document.getElementById(id)
+  // 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'
   }
 
-  get controls () {
-    return this.getAttribute('aria-controls')
+  set expanded (value) {
+    this.setAttribute('aria-expanded', !!value)
   }
 
-  get target () {
-    return document.getElementById(this.controls)
+  // indicates if the target is expanded
+  get collapsed () {
+    return !this.expanded
   }
 
-  get active () {
-    return this.getAttribute('data-active') === 'true'
+  // indicates if an rpc call is active/busy
+  get busy () {
+    return this.getAttribute('busy') === 'true'
   }
 
-  set active (value) {
-    this.setAttribute('data-active', !!value)
+  set busy (value) {
+    this.setAttribute('busy', !!value)
   }
 }
-
-addEventListener(
-  TurboReflex.events.start,
-  event => (event.target.active = true)
-)
-addEventListener(
-  TurboReflex.events.success,
-  event => (event.target.active = false)
-)
-addEventListener(
-  TurboReflex.events.finish,
-  event => (event.target.active = false)
-)
-
-addEventListener('click', event => {
-  if (event.target.tagName.match(/reflex-behaviors-devtool/i)) return
-  setTimeout(() => {
-    const selector =
-      'toggle-trigger[aria-controls][aria-expanded="true"][data-auto-collapse="true"]'
-    document.querySelectorAll(selector).forEach(trigger => trigger.collapse())
-  })
-})

data/app/reflexes/reflex_behaviors/application_reflex.rb

@@ -21,19 +21,22 @@ class ReflexBehaviors::ApplicationReflex < TurboReflex::Base
   protected
 
   def render_payload
-    return {} if element.dataset.render.blank?
-    @render_payload ||= JSON.parse(element.dataset.render).deep_symbolize_keys.tap do |payload|
-      payload[:assigns] = {} if payload[:assigns].blank?
-      payload[:assigns].each { |key, value| payload[:assigns][key] = hydrated_value(value) }
-
-      payload[:locals] = {} if payload[:locals].blank?
-      payload[:locals].each { |key, value| payload[:locals][key] = hydrated_value(value) }
-    end
+    return {} if element.renders.blank?
+    @render_payload ||= {partial: idomatic_partial_path(element.renders)}.tap do |payload|
+      if element.assigns.present?
+        payload[:assigns] = JSON.parse(element.assigns)
+        payload[:assigns].each { |key, value| payload[:assigns][key] = hydrate_value(value) }
+      end
+      if element.locals.present?
+        payload[:locals] = JSON.parse(element.locals)
+        payload[:locals].each { |key, value| payload[:locals][key] = hydrate_value(value) }
+      end
+    end.deep_symbolize_keys
   end
 
   private
 
-  def hydrated_value(value)
+  def hydrate_value(value)
     hydrated = begin
       GlobalID::Locator.locate_signed(value)
     rescue
@@ -41,4 +44,8 @@ class ReflexBehaviors::ApplicationReflex < TurboReflex::Base
     end
     hydrated.blank? ? nil : hydrated
   end
+
+  def idomatic_partial_path(partial_path)
+    partial_path.to_s.gsub("/_", "/").split(".").first
+  end
 end