reflex_behaviors 0.0.4 → 0.0.5

data/app/javascript/devtools/dom.js

@@ -22,13 +22,15 @@ export function addHighlight (element, options = {}) {
   }
   element.style.outline = `dotted ${width} ${color}`
   element.style.outlineOffset = offset
+  element.dataset.reflexBehaviorsHighlight = true
 }
 
 export function removeHighlight (element) {
-  if (element && element.originalStyles) {
-    for (const [key, value] of Object.entries(element.originalStyles)) {
+  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

@@ -54,8 +54,22 @@ export default class DevtoolElement extends HTMLElement {
 
   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

@@ -7,7 +7,7 @@ export default class SupervisorElement extends HTMLElement {
     this.attachShadow({ mode: 'open' })
     this.shadowRoot.innerHTML = this.html
     this.shadowRoot
-      .querySelector('button[data-role="closer"]')
+      .querySelector('button')
       .addEventListener('click', () => this.close())
 
     this.addEventListener('change', event => {
@@ -51,16 +51,16 @@ export default class SupervisorElement extends HTMLElement {
   }
 
   get closeElement () {
-    return this.querySelector('button[data-role="closer"]')
+    return this.querySelector('button')
   }
 
   get html () {
     return `
       <style>${this.stylesheet}</style>
-      <div data-role="container">
-        <strong>ReflexBehaviors</strong>
+      <div>
+        <label>ReflexBehaviors</label>
         <slot name="devtool"></slot>
-        <button data-role='closer'>X</button>
+        <button>X</button>
       </div>
     `
   }
@@ -68,46 +68,62 @@ export default class SupervisorElement extends HTMLElement {
   get stylesheet () {
     return `
       :host {
-        background-color: ghostwhite;
-        border-radius: 10px;
-        outline: solid 1px gainsboro;
+        background-color: lavender;
+        border-radius: 15px;
         bottom: 20px;
         display: block;
-        filter: drop-shadow(0 4px 3px rgba(0,0,0,.07));
+        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: 10000;
+        z-index: 100000;
       }
 
       :host, :host * {
         -webkit-user-select: none;
+        font-family: helvetica, sans-serif;
         user-select: none;
       }
 
-      strong {
-        color: silver;
-        font-weight: 600;
+      :host:has( input) {
+        outline-color: red;
+        outline-width: 2px;
       }
 
-      div[data-role="container"] {
+      label {
+        color: indigo;
+        opacity: 0.5;
+      }
+
+      div {
         display: flex;
         gap: 0 5px;
+        position: relative;
       }
 
-      button[data-role="closer"] {
-        border: none;
-        background-color: gainsboro;
+      button {
+        background-color: thistle;
         border-radius: 50%;
-        color: white;
-        font-size: 12px;
+        border: none;
+        color: indigo;
+        cursor: pointer;
+        font-size: 10px;
         height: 18px;
         line-height: 18px;
         margin: 0 -5px 0 10px;
-        padding: 0 3px;
+        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

@@ -56,14 +56,15 @@ export default class TooltipElement extends HTMLElement {
 
       [role="tooltip"] {
         background-color: ${this.backgroundColor};
-        border-radius: 5px;
+        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: solid 2px ${this.emphasisColor};
+        outline-offset: 1px;
+        outline: solid 3px ${this.emphasisColor};
         padding: 8px 12px 8px 12px;
         white-space: nowrap;
       }
@@ -71,11 +72,11 @@ export default class TooltipElement extends HTMLElement {
       [role="tooltip"]::after {
         border-color: ${this.cssArrow};
         border-style: solid;
-        border-width: 5px;
+        border-width: 10px;
         content: "";
-        margin-left: -5px;
+        margin-left: -7px;
         position: absolute;
-        top: ${this.position === 'bottom' ? '-10px' : '100%'};
+        top: ${this.position === 'bottom' ? '-21px' : 'calc(100% + 1px)'};
       }
 
       slot[name="title"] {

data/app/javascript/devtools/supervisor.js

@@ -10,7 +10,7 @@ customElements.define('reflex-behaviors-devools-tooltip', TooltipElement)
 let supervisorElement
 
 function stop () {
-  if (!supervisorElement) return
+  if (stopped()) return
   supervisorElement.close()
   supervisorElement.dispatchEvent(
     new CustomEvent('reflex-behaviors:devtools-stop', {
@@ -21,6 +21,7 @@ function stop () {
 }
 
 function start () {
+  if (started()) return
   appendHTML(
     '<reflex-behaviors-devtool-supervisor></reflex-behaviors-devtool-supervisor>'
   )
@@ -47,15 +48,28 @@ function restart () {
   })
 }
 
+function started () {
+  return !!supervisorElement
+}
+
+function stopped () {
+  return !started()
+}
+
 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 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
@@ -77,7 +91,13 @@ function enabled (name) {
 export default {
   enabled,
   register,
-  restart: debouncedRestart,
   start,
-  stop
+  stop,
+  restart: debouncedRestart,
+  get started () {
+    return started()
+  },
+  get stopped () {
+    return stopped()
+  }
 }

data/app/javascript/devtools/toggle.js

@@ -8,16 +8,6 @@ document.addEventListener('reflex-behaviors:devtools-start', () =>
 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'
@@ -38,11 +28,6 @@ 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
@@ -54,6 +39,11 @@ export default class ToggleDevtool {
       const { name } = event.detail
       if (name === this.name) removeHighlight(this.trigger)
     })
+
+    document.addEventListener('click', event => {
+      if (event.target.closest('reflex-behaviors-devools-tooltip')) return
+      this.hide()
+    })
   }
 
   get enabled () {
@@ -66,30 +56,67 @@ export default class ToggleDevtool {
     this.createTriggerTooltip()
     this.createTargetTooltip()
     addHighlight(this.target, { color: 'blue', offset: '-2px' })
-    addHighlight(this.renderingElement, {
+
+    let renderingPartial = this.trigger ? this.trigger.renderingPartial : null
+    renderingPartial =
+      renderingPartial || (this.target ? this.target.renderingPartial : null)
+
+    let renderingElement = this.trigger ? this.trigger.renderingElement : null
+    renderingElement =
+      renderingElement || (this.target ? this.target.renderingElement : null)
+
+    addHighlight(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
-      }
-    })
+    const data = {
+      rendering: { partial: null, id: null },
+      trigger: { partial: null, id: null },
+      target: { partial: null, id: null }
+    }
+
+    if (renderingPartial) data.rendering.partial = renderingPartial
+    if (renderingElement) data.rendering.id = 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 () {
+    let renderingElement = this.trigger ? this.trigger.renderingElement : null
+    renderingElement =
+      renderingElement || (this.target ? this.target.renderingElement : null)
+
     this.destroyTriggerTooltip()
     this.destroyTargetTooltip()
     removeHighlight(this.target)
-    removeHighlight(this.renderingElement)
+    removeHighlight(renderingElement)
+    this.cleanup()
+  }
+
+  cleanup () {
+    document
+      .querySelectorAll('reflex-behaviors-devools-tooltip')
+      .forEach(el => el.remove())
+
+    document
+      .querySelectorAll('[data-reflex-behaviors-highlight]')
+      .forEach(el => {
+        if (!el.tagName.match(/toggle-trigger/i)) removeHighlight(el)
+      })
   }
 
   createTriggerTooltip () {
+    if (!this.trigger) return
     const title = `TRIGGER (targets: ${this.trigger.controls})`
     const content = this.trigger.viewStack
       .map(view => {
@@ -105,8 +132,8 @@ export default class ToggleDevtool {
     })
 
     const coords = this.trigger.coordinates
-    const top = Math.ceil(coords.top - this.triggerTooltip.offsetHeight - 5)
-    const left = Math.ceil(coords.left)
+    const top = Math.ceil(coords.top - this.triggerTooltip.offsetHeight - 14)
+    const left = Math.ceil(coords.left - 15)
     this.triggerTooltip.style.top = `${top}px`
     this.triggerTooltip.style.left = `${left}px`
   }
@@ -119,6 +146,7 @@ export default class ToggleDevtool {
 
   createTargetTooltip () {
     if (!this.target) return
+    if (!this.target.viewStack) return
 
     const title = `TARGET (id: ${this.target.id})`
     const content = this.target.viewStack
@@ -136,8 +164,8 @@ export default class ToggleDevtool {
     })
 
     const coords = this.target.coordinates
-    const top = Math.ceil(coords.top + coords.height + 4)
-    const left = Math.ceil(coords.left)
+    const top = Math.ceil(coords.top + coords.height + 12)
+    const left = Math.ceil(coords.left - 15)
     this.targetTooltip.style.top = `${top}px`
     this.targetTooltip.style.left = `${left}px`
   }

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/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.5"
 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",

data/tags

@@ -213706,7 +213706,7 @@ VDash	node_modules/parse-srcset/tests/he.js	/^	var decodeMap = {'Aacute':'\\xC1'
 VDash	node_modules/simple-html-tokenizer/dist/es6/index.js	/^    Aacute: "Á", aacute: "á", Abreve: "Ă", abreve: "ă", ac: "∾", acd: "∿", acE: "∾̳",/;"	p	variable:namedCharRefs
 VDash	node_modules/simple-html-tokenizer/dist/simple-html-tokenizer.js	/^        Aacute: "Á", aacute: "á", Abreve: "Ă", abreve: "ă", ac: "∾", acd: "∿", acE: "∾/;"	p	variable:anonymousFunction3825d8d70300.namedCharRefs
 VDash	node_modules/simple-html-tokenizer/dist/types/generated/html5-named-char-refs.d.ts	/^    VDash: string;$/;"	C
-VERSION	lib/reflex_behaviors/version.rb	/^  VERSION = "0.0.4"$/;"	C	module:ReflexBehaviors
+VERSION	lib/reflex_behaviors/version.rb	/^  VERSION = "0.0.5"$/;"	C	module:ReflexBehaviors
 VERSION	node_modules/@angular/compiler/esm2015/src/output/source_map.js	/^const VERSION = 3;$/;"	C
 VERSION	node_modules/@angular/compiler/esm2015/src/version.js	/^export const VERSION = new Version('8.2.14');$/;"	C
 VERSION	node_modules/@angular/compiler/esm5/src/output/source_map.js	/^var VERSION = 3;$/;"	v
@@ -473774,7 +473774,7 @@ version	node_modules/yaml/dist/index.js	/^  version: '1.2'$/;"	p	variable:defaul
 version	node_modules/yaml/dist/test-events.js	/^    version: '1.2'$/;"	p	variable:testEvents.anonymousObjecta2b129440205
 version	node_modules/yaml/package.json	/^  "version": "1.8.3",$/;"	s
 version	node_modules/yocto-queue/package.json	/^	"version": "0.1.0",$/;"	s
-version	package.json	/^  "version": "0.0.3",$/;"	s
+version	package.json	/^  "version": "0.0.4",$/;"	s
 versionIncluded	node_modules/prettier-standard/src/vendor/node_modules/resolve/lib/core.js	/^function versionIncluded(specifierValue) {$/;"	f
 versionIncluded	node_modules/resolve/lib/core.js	/^function versionIncluded(specifierValue) {$/;"	f
 versionInfo	node_modules/graphql/version.d.ts	/^export const versionInfo: {$/;"	C

data/yarn.lock

@@ -165,9 +165,9 @@
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
 "@types/node@*":
-  version "18.11.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.10.tgz#4c64759f3c2343b7e6c4b9caf761c7a3a05cee34"
-  integrity sha512-juG3RWMBOqcOuXC643OAdSA525V44cVgGV6dUDuiFtss+8Fk5x1hI93Rsld43VeJVIeqlP9I7Fn9/qaVqoEAuQ==
+  version "18.11.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.11.tgz#1d455ac0211549a8409d3cdb371cd55cc971e8dc"
+  integrity sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g==
 
 "@types/unist@^2.0.0", "@types/unist@^2.0.2":
   version "2.0.6"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: reflex_behaviors
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-05 00:00:00.000000000 Z
+date: 2022-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails