reflex_behaviors 0.0.3 → 0.0.5

data/app/javascript/devtools/dom.js

@@ -0,0 +1,36 @@
+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
+  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
+}

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

@@ -0,0 +1,76 @@
+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 `
+      :host, :host * {
+        cursor: pointer;
+      }
+
+      div {
+        display: flex;
+        position: relative;
+        top: -1px;
+      }
+
+      input:checked + label{
+        font-weight: bold;
+      }
+
+      label {
+        color: indigo;
+      }
+    `
+  }
+}

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

@@ -0,0 +1,129 @@
+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')
+      .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')
+  }
+
+  get html () {
+    return `
+      <style>${this.stylesheet}</style>
+      <div>
+        <label>ReflexBehaviors</label>
+        <slot name="devtool"></slot>
+        <button>X</button>
+      </div>
+    `
+  }
+
+  get stylesheet () {
+    return `
+      :host {
+        background-color: lavender;
+        border-radius: 15px;
+        bottom: 20px;
+        display: block;
+        filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
+        left: 50%;
+        outline-offset: 1px;
+        outline: solid 3px indigo;
+        padding: 5px 10px;
+        position: fixed;
+        transform: translateX(-50%);
+        z-index: 100000;
+      }
+
+      :host, :host * {
+        -webkit-user-select: none;
+        font-family: helvetica, sans-serif;
+        user-select: none;
+      }
+
+      :host:has( input) {
+        outline-color: red;
+        outline-width: 2px;
+      }
+
+      label {
+        color: indigo;
+        opacity: 0.5;
+      }
+
+      div {
+        display: flex;
+        gap: 0 5px;
+        position: relative;
+      }
+
+      button {
+        background-color: thistle;
+        border-radius: 50%;
+        border: none;
+        color: indigo;
+        cursor: pointer;
+        font-size: 10px;
+        height: 18px;
+        line-height: 18px;
+        margin: 0 -5px 0 10px;
+        outline: solid 1px indigo;
+        padding: 0 2px;
+        position: relative;
+        top: 1px;
+        width: 18px;
+      }
+
+      button:hover {
+        outline-width: 2px;
+      }
+    `
+  }
+}

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

@@ -0,0 +1,103 @@
+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: 15px;
+        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-offset: 1px;
+        outline: solid 3px ${this.emphasisColor};
+        padding: 8px 12px 8px 12px;
+        white-space: nowrap;
+      }
+
+      [role="tooltip"]::after {
+        border-color: ${this.cssArrow};
+        border-style: solid;
+        border-width: 10px;
+        content: "";
+        margin-left: -7px;
+        position: absolute;
+        top: ${this.position === 'bottom' ? '-21px' : 'calc(100% + 1px)'};
+      }
+
+      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,103 @@
+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 (stopped()) return
+  supervisorElement.close()
+  supervisorElement.dispatchEvent(
+    new CustomEvent('reflex-behaviors:devtools-stop', {
+      bubbles: true
+    })
+  )
+  supervisorElement = null
+}
+
+function start () {
+  if (started()) return
+  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()
+  })
+}
+
+function started () {
+  return !!supervisorElement
+}
+
+function stopped () {
+  return !started()
+}
+
+let restartTimeout
+function debouncedRestart () {
+  clearTimeout(restartTimeout)
+  restartTimeout = setTimeout(restart, 25)
+}
+
+function autoRestart () {
+  if (started()) debouncedRestart()
+}
+
+addEventListener('turbo:load', autoRestart)
+addEventListener('turbo-frame:load', autoRestart)
+addEventListener('turbo-reflex:success', autoRestart)
+addEventListener('turbo-reflex:finish', autoRestart)
+
+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,
+  start,
+  stop,
+  restart: debouncedRestart,
+  get started () {
+    return started()
+  },
+  get stopped () {
+    return stopped()
+  }
+}