reflex_behaviors 0.0.3 → 0.0.4

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

@@ -1,117 +1,5 @@
-// Tasks
-// - [ ] audit css class names and refine
-// - [ ] extract stylesheet and host on cdn
-// - [ ] ensure tooltips don't overlap or run off screen
-// - [ ] add ability to remember start/stop in local storage
-// - [ ] isolate individual tools and register them (i.e. plugin framework)
-//       will probably have behaviors register any devtools they support
-//
-//       Tool markup example
-//
-//         <div name="TOOL_NAME" class="devtool">
-//           <input name="TOOL_NAME-checkbox" value="TOOL_NAME" type="checkbox">
-//           <label for="TOOL_NAME-checkbox">TOOL_LABEL</label>
-//         </div>
+import supervisor from './supervisor'
 
-let tray
+const { restart, start, stop } = supervisor
 
-addEventListener('click', () => {
-  setTimeout(() => {
-    document
-      .querySelectorAll('.reflex-behaviors-tooltip')
-      .forEach(tooltip => tooltip.remove())
-  }, 300)
-})
-
-function tooltip (reflexElement, title, body, cssClass, position = 'top') {
-  const el = document.createElement('div')
-  el.classList.add('reflex-behaviors-tooltip', cssClass)
-  el.innerHTML = `<strong>${title}</strong><hr>${body}`
-  document.body.appendChild(el)
-
-  const coords = reflexElement.coordinates
-
-  if (position === 'top') {
-    el.style.top = `${Math.ceil(coords.top - el.offsetHeight - 5)}px`
-    el.style.left = `${Math.ceil(coords.left + 4)}px`
-  }
-
-  if (position === 'bottom') {
-    el.style.top = `${Math.ceil(coords.top + coords.height + 5)}px`
-    el.style.left = `${Math.ceil(coords.left + 4)}px`
-  }
-}
-
-function enabled () {
-  const tools = document.body.dataset.devtools || ''
-  return tools.trim().split(' ')
-}
-
-function isEnabled (tool) {
-  return enabled().includes(tool)
-}
-
-function enable (tool) {
-  if (isEnabled(tool)) return
-  const list = enabled()
-  list.push(tool)
-  document.body.dataset.devtools = list.join(' ').trim()
-}
-
-function disable (tool) {
-  const list = enabled()
-  const index = list.indexOf(tool)
-  if (index < 0) return
-  list.splice(index, 1)
-  document.body.dataset.devtools = list.join(' ').trim()
-}
-
-function stop () {
-  if (!tray) return
-  tray
-    .querySelectorAll('.devtool')
-    .forEach(devtool => disable(devtool.getAttribute('name')))
-  tray.remove()
-  tray = null
-}
-
-function start () {
-  stop()
-  tray = document.createElement('div')
-  tray.id = 'reflex-behaviors-devtools'
-  tray.innerHTML = `
-    <strong>DEVTOOLS</strong>
-    <div name="toggle" class="devtool">
-      <input name="toggle-checkbox" value="toggle" type="checkbox">
-      <label for="toggle-checkbox">toggles<small>(trigger/target)</small></label>
-    </div>
-    <button data-action='close'>X</button>
-  `
-  document.body.appendChild(tray)
-  tray
-    .querySelector('button[data-action=close]')
-    .addEventListener('click', () => stop())
-  tray.querySelectorAll('.devtool').forEach(devtool => {
-    devtool.querySelector('input').addEventListener('change', event => {
-      event.target.checked
-        ? enable(event.target.value)
-        : disable(event.target.value)
-    })
-    devtool.addEventListener('click', event => {
-      if (event.target.tagName.match(/input/i)) return
-      event.target
-        .closest('.devtool')
-        .querySelector('input')
-        .click()
-    })
-  })
-}
-
-export default {
-  disable,
-  enable,
-  isEnabled,
-  start,
-  stop,
-  tooltip
-}
+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 () {
@@ -23,6 +31,10 @@ export default class ReflexElement extends HTMLElement {
     return JSON.parse(this.dataset.viewStack)
   }
 
+  get partial () {
+    return this.viewStack[0]
+  }
+
   get coordinates () {
     const rect = this.getBoundingClientRect()
     return {