reflex_behaviors 0.0.4 → 0.0.6

data/app/javascript/devtools/toggle.js

@@ -1,35 +1,27 @@
-import { appendHTML, addHighlight, removeHighlight } from './dom'
+import {
+  appendHTML,
+  addHighlight,
+  coordinates,
+  removeHighlight
+} from '../utils/dom'
 import supervisor from './supervisor'
 
+let activeToggle
+
 document.addEventListener('reflex-behaviors:devtools-start', () =>
   supervisor.register('toggle', 'toggles<small>(trigger/target)</small>')
 )
 
-const triggerTooltipId = 'toggle-trigger-tooltip'
-const targetTooltipId = 'toggle-target-tooltip'
-
-addEventListener('click', () => setTimeout(removeTooltips))
-
-function removeTooltips () {
-  const ids = [triggerTooltipId, targetTooltipId]
-  ids.forEach(id => {
-    const el = document.getElementById(id)
-    if (el) el.remove()
-  })
-}
-
-function appendTooltip (id, title, content, options = {}) {
-  let { backgroundColor, color, emphaisColor, position } = options
+function appendTooltip (title, content, options = {}) {
+  let { backgroundColor, color, position } = options
   color = color || 'white'
   position = position || 'top'
-
-  appendHTML(`
-    <reflex-behaviors-devools-tooltip id="${id}" position="${position}" background-color="${backgroundColor}" color="${color}" emphasis-color="${emphaisColor}">
+  return appendHTML(`
+    <reflex-behaviors-devools-tooltip position="${position}" background-color="${backgroundColor}" color="${color}">
       <div slot='title'>${title}</div>
       ${content}
     </reflex-behaviors-devools-tooltip>
   `)
-  return document.getElementById(id)
 }
 
 export default class ToggleDevtool {
@@ -38,22 +30,27 @@ export default class ToggleDevtool {
     this.reflex = trigger.dataset.turboReflex
     this.trigger = trigger
     this.target = trigger.target
-    this.renderingPartial = trigger.renderingPartial
-    this.renderingElement = trigger.renderingElement
-    this.renderingElementId = this.renderingElement
-      ? this.renderingElement.id
-      : null
 
     document.addEventListener('reflex-behaviors:devtool-enable', event => {
       const { name } = event.detail
-      if (name === this.name)
-        addHighlight(this.trigger, { color: 'red', offset: '2px' })
+      if (name === this.name) {
+        addHighlight(this.trigger, {
+          outline: '3px dashed blueviolet',
+          outlineOffset: '2px'
+        })
+      }
     })
 
     document.addEventListener('reflex-behaviors:devtool-disable', event => {
       const { name } = event.detail
       if (name === this.name) removeHighlight(this.trigger)
     })
+
+    document.addEventListener('click', event => {
+      if (event.target.closest('reflex-behaviors-devools-tooltip')) return
+      activeToggle = null
+      this.hide()
+    })
   }
 
   get enabled () {
@@ -62,89 +59,204 @@ export default class ToggleDevtool {
 
   show () {
     if (!this.enabled) return
+    if (activeToggle === this) return
+    activeToggle = this
     this.hide()
-    this.createTriggerTooltip()
-    this.createTargetTooltip()
-    addHighlight(this.target, { color: 'blue', offset: '-2px' })
-    addHighlight(this.renderingElement, {
-      color: 'turquoise',
-      offset: '4px',
-      width: '4px'
+
+    addHighlight(this.target, {
+      outline: '3px dashed darkcyan',
+      outlineOffset: '-2px'
     })
 
-    console.table({
-      trigger: { id: this.trigger.id, partial: this.trigger.partial },
-      target: { id: this.target.id, partial: this.target.partial },
-      [this.reflex]: {
-        id: this.renderingElementId,
-        partial: this.renderingPartial
-      }
+    addHighlight(this.renderingElement, {
+      outline: '3px dashed chocolate',
+      outlineOffset: '3px'
     })
+
+    const renderingTooltip = this.createRenderingTooltip()
+    const targetTooltip = this.createTargetTooltip()
+    this.createTriggerTooltip(targetTooltip, renderingTooltip)
+
+    document
+      .querySelectorAll('.leader-line')
+      .forEach(el => (el.style.zIndex = 100000))
+
+    const data = {
+      rendering: { partial: null, id: null },
+      trigger: { partial: null, id: null },
+      target: { partial: null, id: null }
+    }
+
+    if (this.renderingPartial) data.rendering.partial = this.renderingPartial
+    if (this.renderingElement) data.rendering.id = this.renderingElement.id
+
+    if (this.trigger)
+      data.trigger = { partial: this.trigger.partial, id: this.trigger.id }
+
+    if (this.target)
+      data.target = { partial: this.target.partial, id: this.target.id }
+    else if (this.trigger)
+      data.target.id = `No element matches the targeted DOM id: ${this.trigger.controls}`
+
+    console.table(data)
   }
 
   hide () {
-    this.destroyTriggerTooltip()
-    this.destroyTargetTooltip()
-    removeHighlight(this.target)
-    removeHighlight(this.renderingElement)
-  }
+    document.querySelectorAll('.leader-line').forEach(el => el.remove())
+    document
+      .querySelectorAll('reflex-behaviors-devools-tooltip')
+      .forEach(el => el.remove())
 
-  createTriggerTooltip () {
-    const title = `TRIGGER (targets: ${this.trigger.controls})`
-    const content = this.trigger.viewStack
-      .map(view => {
-        return this.trigger.sharedViews.includes(view)
-          ? `<div slot="emphasis">${view}</div>`
-          : `<div slot="normal">${view}</div>`
-      }, this)
-      .join('')
+    document
+      .querySelectorAll('[data-reflex-behaviors-highlight]')
+      .forEach(el => {
+        if (!el.tagName.match(/toggle-trigger/i)) removeHighlight(el)
+      })
+  }
 
-    this.triggerTooltip = appendTooltip(triggerTooltipId, title, content, {
-      backgroundColor: 'pink',
-      emphaisColor: 'darkred'
+  createRenderingTooltip () {
+    if (!this.renderingElement) return
+    const title = `RENDERING (id: ${this.renderingElement.id || 'unknown'})`
+    const content = `<div slot="content">partial: ${this.renderingPartial}</div>`
+    const tooltip = appendTooltip(title, content, {
+      backgroundColor: 'lightyellow',
+      color: 'chocolate'
     })
 
-    const coords = this.trigger.coordinates
-    const top = Math.ceil(coords.top - this.triggerTooltip.offsetHeight - 5)
-    const left = Math.ceil(coords.left)
-    this.triggerTooltip.style.top = `${top}px`
-    this.triggerTooltip.style.left = `${left}px`
-  }
+    const coords = coordinates(this.renderingElement)
+    const top = Math.ceil(
+      coords.top + coords.height / 2 - tooltip.offsetHeight / 2
+    )
+    const left = Math.ceil(coords.left + coords.width + 100)
+    tooltip.style.top = `${top}px`
+    tooltip.style.left = `${left}px`
+
+    tooltip.line = new LeaderLine(tooltip, this.renderingElement, {
+      ...this.leaderLineOptions,
+      color: 'chocolate'
+    })
 
-  destroyTriggerTooltip () {
-    if (!this.triggerTooltip) return
-    this.triggerTooltip.remove()
-    delete this.triggerTooltip
+    tooltip.drag = new PlainDraggable(tooltip)
+    return tooltip
   }
 
   createTargetTooltip () {
     if (!this.target) return
+    if (!this.target.viewStack) return
 
     const title = `TARGET (id: ${this.target.id})`
     const content = this.target.viewStack
-      .map(view => {
+      .reverse()
+      .map((view, index) => {
         return this.trigger.sharedViews.includes(view)
-          ? `<div slot="emphasis">${view}</div>`
-          : `<div slot="normal">${view}</div>`
+          ? `<div slot="content-top">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
       }, this)
       .join('')
 
-    this.targetTooltip = appendTooltip(targetTooltipId, title, content, {
-      backgroundColor: 'lightskyblue',
-      emphaisColor: 'blue',
+    const tooltip = appendTooltip(title, content, {
+      backgroundColor: 'lightcyan',
+      color: 'darkcyan',
       position: 'bottom'
     })
 
-    const coords = this.target.coordinates
-    const top = Math.ceil(coords.top + coords.height + 4)
-    const left = Math.ceil(coords.left)
-    this.targetTooltip.style.top = `${top}px`
-    this.targetTooltip.style.left = `${left}px`
+    const coords = coordinates(this.target)
+    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, {
+      ...this.leaderLineOptions,
+      color: 'darkcyan'
+    })
+
+    tooltip.drag = new PlainDraggable(tooltip)
+    return tooltip
+  }
+
+  createTriggerTooltip (targetTooltip, renderingTooltip) {
+    if (!this.trigger) return
+    const title = `TRIGGER (controls: ${this.trigger.controls})`
+    const content = this.trigger.viewStack
+      .reverse()
+      .map((view, index) => {
+        return this.trigger.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, {
+      backgroundColor: 'lavender',
+      color: 'blueviolet'
+    })
+
+    const coords = coordinates(this.trigger)
+    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, {
+      ...this.leaderLineOptions,
+      color: 'blueviolet'
+    })
+
+    tooltip.lineToTarget = new LeaderLine(tooltip, targetTooltip, {
+      ...this.leaderLineOptions,
+      color: 'blueviolet',
+      middleLabel: 'toggles',
+      size: 2.1
+    })
+
+    tooltip.lineToRendering = new LeaderLine(tooltip, renderingTooltip, {
+      ...this.leaderLineOptions,
+      color: 'blueviolet',
+      middleLabel: 'renders',
+      size: 2.1
+    })
+
+    tooltip.drag = new PlainDraggable(tooltip)
+    tooltip.drag.onMove = () => {
+      tooltip.line.position()
+      tooltip.lineToTarget.position()
+      tooltip.lineToRendering.position()
+    }
+    targetTooltip.drag.onMove = () => {
+      targetTooltip.line.position()
+      tooltip.lineToTarget.position()
+      tooltip.lineToRendering.position()
+    }
+    renderingTooltip.drag.onMove = () => {
+      renderingTooltip.line.position()
+      tooltip.lineToTarget.position()
+      tooltip.lineToRendering.position()
+    }
+    return tooltip
+  }
+
+  get renderingPartial () {
+    let partial = this.trigger ? this.trigger.renderingPartial : null
+    partial = partial || (this.target ? this.target.renderingPartial : null)
+    return partial
+  }
+
+  get renderingElement () {
+    let element = this.trigger ? this.trigger.renderingElement : null
+    element = element || (this.target ? this.target.renderingElement : null)
+    return element
   }
 
-  destroyTargetTooltip () {
-    if (!this.targetTooltip) return
-    this.targetTooltip.remove()
-    delete this.targetTooltip
+  get leaderLineOptions () {
+    return {
+      dash: { animation: true },
+      dropShadow: { opacity: 0.3 },
+      endPlug: 'arrow3',
+      endPlugSize: 1.7,
+      size: 3,
+      startPlug: 'disc',
+      startPlugSize: 1
+    }
   }
 }

data/app/javascript/elements/reflex_element.js

@@ -34,14 +34,4 @@ export default class ReflexElement extends HTMLElement {
   get partial () {
     return this.viewStack[0]
   }
-
-  get coordinates () {
-    const rect = this.getBoundingClientRect()
-    return {
-      left: rect.left + window.scrollX,
-      top: rect.top + window.scrollY,
-      width: this.offsetWidth,
-      height: this.offsetHeight
-    }
-  }
 }

data/app/javascript/elements/toggle_trigger_element.js

@@ -5,23 +5,19 @@ import ToggleDevtool from '../devtools/toggle'
 export default class ToggleTriggerElement extends ReflexElement {
   connectedCallback () {
     super.connectedCallback()
-
     const mouseenter = () => this.devtool.show()
-    const mouseleave = () => this.devtool.hide()
 
     document.addEventListener('reflex-behaviors:devtools-start', () => {
       this.devtool = new ToggleDevtool(this)
       this.addEventListener('mouseenter', mouseenter)
-      this.addEventListener('mouseleave', mouseleave)
     })
 
     document.addEventListener('reflex-behaviors:devtools-stop', () => {
       this.removeEventListener('mouseenter', mouseenter)
-      this.removeEventListener('mouseleave', mouseleave)
       delete this.devtool
     })
 
-    DevtoolSupervisor.restart()
+    if (DevtoolSupervisor.started) DevtoolSupervisor.restart()
   }
 
   collapse () {
@@ -35,6 +31,7 @@ export default class ToggleTriggerElement extends ReflexElement {
 
   get sharedViews () {
     if (!this.target) return []
+    if (!this.target.viewStack) return []
     const reducer = (memo, view) => {
       if (this.target.viewStack.includes(view)) memo.push(view)
       return memo

data/app/javascript/utils/dom.js

@@ -0,0 +1,62 @@
+export function template (html) {
+  let template = document.createElement('template')
+  template.innerHTML = html
+  return template
+}
+
+export function appendHTML (html, parent) {
+  parent = parent || document.body
+  const clone = template(html).content.cloneNode(true)
+  const child = clone.querySelector('*')
+  return parent.appendChild(child)
+}
+
+export function addHighlight (element, options = {}) {
+  if (!element) return
+  removeHighlight(element)
+  let { outline, outlineOffset } = options
+
+  outline = outline || 'dashed 3px red'
+  outlineOffset = outlineOffset || '0px'
+
+  element.originalStyles = element.originalStyles || {
+    display: element.style.display,
+    minHeight: element.style.minHeight,
+    minWidth: element.style.minWidth,
+    outline: element.style.outline,
+    outlineOffset: element.style.outlineOffset
+  }
+
+  if (
+    getComputedStyle(element).display.match(/^inline$/i) &&
+    element.offsetWidth === 0 &&
+    element.offsetHeight === 0
+  ) {
+    element.style.display = 'inline-block'
+    element.style.minHeight = '2px'
+    element.style.minWidth = '2px'
+  }
+  element.style.outline = outline
+  element.style.outlineOffset = outlineOffset
+  element.dataset.reflexBehaviorsHighlight = true
+}
+
+export function removeHighlight (element) {
+  if (!element) return
+  if (element.originalStyles) {
+    for (const [key, value] of Object.entries(element.originalStyles))
+      value ? (element.style[key] = value) : (element.style[key] = '')
+    delete element.originalStyles
+  }
+  delete element.dataset.reflexBehaviorsHighlight
+}
+
+export function coordinates (element) {
+  const rect = element.getBoundingClientRect()
+  return {
+    left: rect.left + window.scrollX,
+    top: rect.top + window.scrollY,
+    width: element.offsetWidth,
+    height: element.offsetHeight
+  }
+}

data/app/reflexes/reflex_behaviors/application_reflex.rb

@@ -34,8 +34,11 @@ class ReflexBehaviors::ApplicationReflex < TurboReflex::Base
   private
 
   def hydrated_value(value)
-    GlobalID::Locator.locate_signed(value)
-  rescue
-    value
+    hydrated = begin
+      GlobalID::Locator.locate_signed(value)
+    rescue
+      value
+    end
+    hydrated.blank? ? nil : hydrated
   end
 end

data/lib/reflex_behaviors/tag_builders/toggle_tags_builder.rb

@@ -4,25 +4,6 @@ require_relative "base_tag_builder"
 
 module ReflexBehaviors::TagBuilders
   class ToggleTagsBuilder < BaseTagBuilder
-    def target_tag(id, expanded: false, **kwargs, &block)
-      kwargs = kwargs.with_indifferent_access
-      kwargs[:id] = id
-      kwargs[:role] = "region"
-
-      kwargs[:aria] ||= {}
-      kwargs[:aria][:label] ||= "Dynamic Content Region"
-      kwargs[:aria][:live] ||= "polite"
-
-      kwargs[:data] ||= {}
-      kwargs[:data][:view_stack] = view_stack.to_json if Rails.env.development?
-
-      if expanded || target_expanded?(id)
-        content_tag("toggle-target", nil, kwargs, &block)
-      else
-        content_tag("toggle-target", nil, kwargs)
-      end
-    end
-
     def trigger_tag(target:, render:, action: :toggle, disabled: false, **kwargs, &block)
       kwargs = kwargs.with_indifferent_access
       kwargs[:id] ||= "#{target}-toggle-trigger"
@@ -42,6 +23,25 @@ module ReflexBehaviors::TagBuilders
       content_tag("toggle-trigger", nil, kwargs, &block)
     end
 
+    def target_tag(id, expanded: false, **kwargs, &block)
+      kwargs = kwargs.with_indifferent_access
+      kwargs[:id] = id
+      kwargs[:role] = "region"
+
+      kwargs[:aria] ||= {}
+      kwargs[:aria][:label] ||= "Dynamic Content Region"
+      kwargs[:aria][:live] ||= "polite"
+
+      kwargs[:data] ||= {}
+      kwargs[:data][:view_stack] = view_stack.to_json if Rails.env.development?
+
+      if expanded || target_expanded?(id)
+        content_tag("toggle-target", nil, kwargs, &block)
+      else
+        content_tag("toggle-target", nil, kwargs)
+      end
+    end
+
     def target_expanded?(target)
       !!turbo_reflex.state[target]
     end

data/lib/reflex_behaviors/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReflexBehaviors
-  VERSION = "0.0.4"
+  VERSION = "0.0.6"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reflex_behaviors",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Pre-built easy to use reactive TurboReflex behaviors for Rails/Hotwire apps.",
   "main": "app/javascript/index.js",
   "repository": "https://github.com/hopsoft/reflex_behaviors",
@@ -15,7 +15,7 @@
     "@hotwired/turbo-rails": ">= 7.2"
   },
   "devDependencies": {
-    "esbuild": "^0.15.7",
+    "esbuild": "^0.16.1",
     "eslint": "^8.19.0",
     "prettier-standard": "^16.4.1"
   },