reflex_behaviors 0.0.2 → 0.0.4

data/app/helpers/reflex_behaviors/application_helper.rb

@@ -3,18 +3,25 @@
 require ReflexBehaviors::Engine.root.join("lib/reflex_behaviors/tag_builders")
 
 module ReflexBehaviors::ApplicationHelper
-  def friendly_partial_path(partial_path = nil, start: 1)
-    prefix = "app/views/"
-    partial_path ||= caller_locations(start, 1).first.path
-    partial_path = partial_path.split(prefix).last if partial_path.include?(prefix)
-    partial_path[0, partial_path.index(".") || partial_path.length].gsub(/\/_/, "/")
+  def idomatic_partial_path(partial_path)
+    partial_path.to_s.gsub("/_", "/").split(".").first
   end
 
   def current_partial_path
-    friendly_partial_path start: 2
+    path = nil
+    prefix = "app/views/"
+    start = 1
+    while path.nil? && start < 100
+      location = caller_locations(start, 1).first
+      path = location.path if location.path.include?(prefix)
+      start += 1
+    end
+    return "unknown" if path.nil?
+    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] ||= {}

data/app/javascript/devtools/dom.js

@@ -0,0 +1,34 @@
+export function template (html) {
+  let template = document.createElement('template')
+  template.innerHTML = html
+  return template
+}
+
+export function appendHTML (html, parent) {
+  parent = parent || document.body
+  return parent.appendChild(template(html).content.cloneNode(true))
+}
+
+export function addHighlight (element, options = {}) {
+  if (!element) return
+  let { color, offset, width } = options
+  color = color || 'red'
+  offset = offset || '0px'
+  width = width || '3px'
+  const { outline, outlineOffset } = element.style
+  element.originalStyles = element.originalStyles || {
+    outline,
+    outlineOffset
+  }
+  element.style.outline = `dotted ${width} ${color}`
+  element.style.outlineOffset = offset
+}
+
+export function removeHighlight (element) {
+  if (element && element.originalStyles) {
+    for (const [key, value] of Object.entries(element.originalStyles)) {
+      value ? (element.style[key] = value) : (element.style[key] = '')
+    }
+    delete element.originalStyles
+  }
+}

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

@@ -0,0 +1,62 @@
+export default class DevtoolElement extends HTMLElement {
+  constructor () {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = this.html
+    this.labelElement.addEventListener('click', event => {
+      event.preventDefault()
+      this.toggle()
+    })
+    this.checkboxElement.addEventListener('change', event =>
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true }))
+    )
+  }
+
+  toggle () {
+    this.checked ? this.uncheck() : this.check()
+  }
+
+  check () {
+    this.checkboxElement.checked = true
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true }))
+  }
+
+  uncheck () {
+    this.checkboxElement.checked = false
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true }))
+  }
+
+  get name () {
+    return this.getAttribute('name')
+  }
+
+  get checked () {
+    return this.checkboxElement.checked
+  }
+
+  get checkboxElement () {
+    return this.shadowRoot.querySelector('input')
+  }
+
+  get labelElement () {
+    return this.shadowRoot.querySelector('label')
+  }
+
+  get html () {
+    return `
+      <style>${this.stylesheet}</style>
+      <div>
+        <input name="checkbox" type="checkbox">
+        <label for="checkbox"><slot name="label"></slot></label>
+      </div>
+    `
+  }
+
+  get stylesheet () {
+    return `
+      div {
+        display: flex;
+      }
+    `
+  }
+}

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

@@ -0,0 +1,113 @@
+import { appendHTML } from '../dom'
+
+export default class SupervisorElement extends HTMLElement {
+  constructor () {
+    super()
+    this.enabledDevtools = {}
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = this.html
+    this.shadowRoot
+      .querySelector('button[data-role="closer"]')
+      .addEventListener('click', () => this.close())
+
+    this.addEventListener('change', event => {
+      const devtoolElement = event.target
+      const { checked, name } = devtoolElement
+      checked ? this.enableDevtool(name) : this.disableDevtool(name)
+    })
+  }
+
+  enableDevtool (name) {
+    if (this.enabledDevtools[name]) return
+    this.enabledDevtools[name] = true
+    this.dispatchEvent(
+      new CustomEvent('reflex-behaviors:devtool-enable', {
+        bubbles: true,
+        detail: { name: name }
+      })
+    )
+  }
+
+  disableDevtool (name) {
+    if (!this.enabledDevtools[name]) return
+    delete this.enabledDevtools[name]
+    this.dispatchEvent(
+      new CustomEvent('reflex-behaviors:devtool-disable', {
+        bubbles: true,
+        detail: { name: name }
+      })
+    )
+  }
+
+  close () {
+    this.devtoolElements.forEach(el => {
+      if (el.checked) el.uncheck()
+    })
+    this.remove()
+  }
+
+  get devtoolElements () {
+    return this.querySelectorAll('[slot="devtool"]')
+  }
+
+  get closeElement () {
+    return this.querySelector('button[data-role="closer"]')
+  }
+
+  get html () {
+    return `
+      <style>${this.stylesheet}</style>
+      <div data-role="container">
+        <strong>ReflexBehaviors</strong>
+        <slot name="devtool"></slot>
+        <button data-role='closer'>X</button>
+      </div>
+    `
+  }
+
+  get stylesheet () {
+    return `
+      :host {
+        background-color: ghostwhite;
+        border-radius: 10px;
+        outline: solid 1px gainsboro;
+        bottom: 20px;
+        display: block;
+        filter: drop-shadow(0 4px 3px rgba(0,0,0,.07));
+        left: 50%;
+        padding: 5px 10px;
+        position: fixed;
+        transform: translateX(-50%);
+        z-index: 10000;
+      }
+
+      :host, :host * {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      strong {
+        color: silver;
+        font-weight: 600;
+      }
+
+      div[data-role="container"] {
+        display: flex;
+        gap: 0 5px;
+      }
+
+      button[data-role="closer"] {
+        border: none;
+        background-color: gainsboro;
+        border-radius: 50%;
+        color: white;
+        font-size: 12px;
+        height: 18px;
+        line-height: 18px;
+        margin: 0 -5px 0 10px;
+        padding: 0 3px;
+        width: 18px;
+      }
+    `
+  }
+}

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

@@ -0,0 +1,102 @@
+export default class TooltipElement extends HTMLElement {
+  constructor () {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = this.html
+  }
+
+  get color () {
+    return this.getAttribute('color') || 'darkslategray'
+  }
+
+  get emphasisColor () {
+    return this.getAttribute('emphasis-color') || 'black'
+  }
+
+  get backgroundColor () {
+    return this.getAttribute('background-color') || 'gainsboro'
+  }
+
+  get position () {
+    return this.getAttribute('position') || 'top'
+  }
+
+  get cssArrow () {
+    switch (this.position) {
+      case 'bottom':
+        return `transparent transparent ${this.emphasisColor} transparent`
+      default:
+        return `${this.emphasisColor} transparent transparent transparent;`
+    }
+  }
+
+  get html () {
+    return `
+      <style>${this.stylesheet}</style>
+      <div role="tooltip">
+        <slot name="title"></slot>
+        <hr>
+        <slot name="normal"></slot>
+        <slot name="emphasis"></slot>
+      </div>
+    `
+  }
+
+  get stylesheet () {
+    return `
+      :host {
+        display: block;
+        position: absolute;
+        z-index: 10000;
+      }
+
+      * {
+        color: ${this.color}
+      }
+
+      [role="tooltip"] {
+        background-color: ${this.backgroundColor};
+        border-radius: 5px;
+        filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
+        font-family: monospace;
+        left: 50px;
+        min-height: 30px;
+        min-width: 100px;
+        opacity: 0.9;
+        outline: solid 2px ${this.emphasisColor};
+        padding: 8px 12px 8px 12px;
+        white-space: nowrap;
+      }
+
+      [role="tooltip"]::after {
+        border-color: ${this.cssArrow};
+        border-style: solid;
+        border-width: 5px;
+        content: "";
+        margin-left: -5px;
+        position: absolute;
+        top: ${this.position === 'bottom' ? '-10px' : '100%'};
+      }
+
+      slot[name="title"] {
+        color: ${this.emphasisColor};
+        font-weight: bold;
+      }
+
+      slot[name="emphasis"] {
+        color: ${this.emphasisColor};
+        font-weight: normal;
+        opacity: 0.7;
+      }
+
+      hr {
+        background-color: ${this.emphasisColor};
+        border: none;
+        height: 1px;
+        margin-bottom: 4px;
+        margin-top: 4px;
+        opacity: 0.3;
+      }
+    `
+  }
+}

data/app/javascript/devtools/index.js

@@ -0,0 +1,5 @@
+import supervisor from './supervisor'
+
+const { restart, start, stop } = supervisor
+
+export default { restart, start, stop }

data/app/javascript/devtools/supervisor.js

@@ -0,0 +1,83 @@
+import { appendHTML } from './dom'
+import DevtoolElement from './elements/devtool_element'
+import SupervisorElement from './elements/supervisor_element'
+import TooltipElement from './elements/tooltip_element'
+
+customElements.define('reflex-behaviors-devtool', DevtoolElement)
+customElements.define('reflex-behaviors-devtool-supervisor', SupervisorElement)
+customElements.define('reflex-behaviors-devools-tooltip', TooltipElement)
+
+let supervisorElement
+
+function stop () {
+  if (!supervisorElement) return
+  supervisorElement.close()
+  supervisorElement.dispatchEvent(
+    new CustomEvent('reflex-behaviors:devtools-stop', {
+      bubbles: true
+    })
+  )
+  supervisorElement = null
+}
+
+function start () {
+  appendHTML(
+    '<reflex-behaviors-devtool-supervisor></reflex-behaviors-devtool-supervisor>'
+  )
+  supervisorElement = document.body.querySelector(
+    'reflex-behaviors-devtool-supervisor'
+  )
+  supervisorElement.dispatchEvent(
+    new CustomEvent('reflex-behaviors:devtools-start', {
+      bubbles: true
+    })
+  )
+}
+
+function restart () {
+  const enabledList = supervisorElement
+    ? Object.keys(supervisorElement.enabledDevtools)
+    : []
+
+  stop()
+  start()
+
+  supervisorElement.devtoolElements.forEach(el => {
+    if (enabledList.includes(el.name)) el.check()
+  })
+}
+
+let restartTimeout
+function debouncedRestart () {
+  clearTimeout(restartTimeout)
+  restartTimeout = setTimeout(restart, 25)
+}
+addEventListener('turbo:load', debouncedRestart)
+addEventListener('turbo-frame:load', debouncedRestart)
+addEventListener('turbo-reflex:success', debouncedRestart)
+addEventListener('turbo-reflex:finish', debouncedRestart)
+
+function register (name, label) {
+  if (!supervisorElement) return
+  return appendHTML(
+    `
+      <reflex-behaviors-devtool name="${name}" slot="devtool">
+        <span slot="label">${label}</span>
+      </reflex-behaviors-devtool>
+    `,
+    supervisorElement
+  )
+}
+
+function enabled (name) {
+  if (!supervisorElement) return false
+  return supervisorElement.enabledDevtools[name]
+}
+
+export default {
+  enabled,
+  register,
+  restart: debouncedRestart,
+  start,
+  stop
+}

data/app/javascript/devtools/toggle.js

@@ -0,0 +1,150 @@
+import { appendHTML, addHighlight, removeHighlight } from './dom'
+import supervisor from './supervisor'
+
+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
+  color = color || 'white'
+  position = position || 'top'
+
+  appendHTML(`
+    <reflex-behaviors-devools-tooltip id="${id}" position="${position}" background-color="${backgroundColor}" color="${color}" emphasis-color="${emphaisColor}">
+      <div slot='title'>${title}</div>
+      ${content}
+    </reflex-behaviors-devools-tooltip>
+  `)
+  return document.getElementById(id)
+}
+
+export default class ToggleDevtool {
+  constructor (trigger) {
+    this.name = 'toggle'
+    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' })
+    })
+
+    document.addEventListener('reflex-behaviors:devtool-disable', event => {
+      const { name } = event.detail
+      if (name === this.name) removeHighlight(this.trigger)
+    })
+  }
+
+  get enabled () {
+    return supervisor.enabled(this.name)
+  }
+
+  show () {
+    if (!this.enabled) return
+    this.hide()
+    this.createTriggerTooltip()
+    this.createTargetTooltip()
+    addHighlight(this.target, { color: 'blue', offset: '-2px' })
+    addHighlight(this.renderingElement, {
+      color: 'turquoise',
+      offset: '4px',
+      width: '4px'
+    })
+
+    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
+      }
+    })
+  }
+
+  hide () {
+    this.destroyTriggerTooltip()
+    this.destroyTargetTooltip()
+    removeHighlight(this.target)
+    removeHighlight(this.renderingElement)
+  }
+
+  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('')
+
+    this.triggerTooltip = appendTooltip(triggerTooltipId, title, content, {
+      backgroundColor: 'pink',
+      emphaisColor: 'darkred'
+    })
+
+    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`
+  }
+
+  destroyTriggerTooltip () {
+    if (!this.triggerTooltip) return
+    this.triggerTooltip.remove()
+    delete this.triggerTooltip
+  }
+
+  createTargetTooltip () {
+    if (!this.target) return
+
+    const title = `TARGET (id: ${this.target.id})`
+    const content = this.target.viewStack
+      .map(view => {
+        return this.trigger.sharedViews.includes(view)
+          ? `<div slot="emphasis">${view}</div>`
+          : `<div slot="normal">${view}</div>`
+      }, this)
+      .join('')
+
+    this.targetTooltip = appendTooltip(targetTooltipId, title, content, {
+      backgroundColor: 'lightskyblue',
+      emphaisColor: 'blue',
+      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`
+  }
+
+  destroyTargetTooltip () {
+    if (!this.targetTooltip) return
+    this.targetTooltip.remove()
+    delete this.targetTooltip
+  }
+}

data/app/javascript/elements/reflex_element.js

@@ -1,6 +1,14 @@
 export default class ReflexElement extends HTMLElement {
+  constructor () {
+    super()
+    this.devtool = 'unknown'
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = '<slot></slot>'
+  }
+
   connectedCallback () {
     this.ensureId()
+    this.dataset.elementOrigin = 'hopsoft/reflex_behaviors'
   }
 
   ensureId () {
@@ -17,4 +25,23 @@ export default class ReflexElement extends HTMLElement {
       ).toString(16)
     )
   }
+
+  get viewStack () {
+    if (!this.dataset.viewStack) return []
+    return JSON.parse(this.dataset.viewStack)
+  }
+
+  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

@@ -1,6 +1,29 @@
 import ReflexElement from './reflex_element'
+import DevtoolSupervisor from '../devtools/supervisor'
+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()
+  }
+
   collapse () {
     try {
       this.target.remove()
@@ -10,14 +33,38 @@ export default class ToggleTriggerElement extends ReflexElement {
     }
   }
 
-  get controls () {
-    return this.getAttribute('aria-controls')
+  get sharedViews () {
+    if (!this.target) return []
+    const reducer = (memo, view) => {
+      if (this.target.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)
+  }
+
+  get renderingPartial () {
+    return this.renderingInfo.partial
+  }
+
+  get renderingElement () {
+    const { id } = this.renderingInfo
+    if (!id) return null
+    return document.getElementById(id)
   }
 
   get expanded () {
     return this.getAttribute('aria-expanded') === 'true'
   }
 
+  get controls () {
+    return this.getAttribute('aria-controls')
+  }
+
   get target () {
     return document.getElementById(this.controls)
   }
@@ -45,6 +92,7 @@ addEventListener(
 )
 
 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"]'