reflex_behaviors 0.0.3 → 0.0.4

data/app/javascript/elements/toggle_trigger_element.js

@@ -1,48 +1,27 @@
 import ReflexElement from './reflex_element'
-import devtools from '../devtools'
+import DevtoolSupervisor from '../devtools/supervisor'
+import ToggleDevtool from '../devtools/toggle'
 
 export default class ToggleTriggerElement extends ReflexElement {
-  constructor () {
-    super()
-
-    this.addEventListener('mouseenter', event => {
-      if (devtools.isEnabled('toggle')) {
-        clearTimeout(this.mouseLeaveTimeout)
-        event.target.target.classList.add('debug')
-        event.target.showDebugTooltips()
-      }
-    })
+  connectedCallback () {
+    super.connectedCallback()
 
-    this.addEventListener('mouseleave', event => {
-      if (devtools.isEnabled('toggle')) {
-        clearTimeout(this.mouseLeaveTimeout)
-        this.mouseLeaveTimeout = setTimeout(() => {
-          event.target.target.classList.remove('debug')
-          document
-            .querySelectorAll('.reflex-behaviors-tooltip')
-            .forEach(tooltip => tooltip.remove())
-        }, 250)
-      }
-    })
-  }
+    const mouseenter = () => this.devtool.show()
+    const mouseleave = () => this.devtool.hide()
 
-  showDebugTooltips () {
-    const sharedViewPath = this.sharedViewPath
-    let shared = false
-    let title = `controls: ${this.controls}`
-    let body = this.viewStack.map(path => {
-      shared = shared || path === sharedViewPath
-      return `<div class='${shared ? 'shared' : null}'>${path}<div>`
+    document.addEventListener('reflex-behaviors:devtools-start', () => {
+      this.devtool = new ToggleDevtool(this)
+      this.addEventListener('mouseenter', mouseenter)
+      this.addEventListener('mouseleave', mouseleave)
     })
-    devtools.tooltip(this, title, body.join(''), 'trigger', 'top')
 
-    shared = false
-    title = `id: ${this.target.id}`
-    body = this.target.viewStack.map(path => {
-      shared = shared || path === sharedViewPath
-      return `<div class='${shared ? 'shared' : null}'>${path}<div>`
+    document.addEventListener('reflex-behaviors:devtools-stop', () => {
+      this.removeEventListener('mouseenter', mouseenter)
+      this.removeEventListener('mouseleave', mouseleave)
+      delete this.devtool
     })
-    devtools.tooltip(this.target, title, body.join(''), 'target', 'bottom')
+
+    DevtoolSupervisor.restart()
   }
 
   collapse () {
@@ -54,19 +33,38 @@ export default class ToggleTriggerElement extends ReflexElement {
     }
   }
 
-  get sharedViewPath () {
-    const targetViewStack = this.target.viewStack
-    return this.viewStack.find(path => targetViewStack.includes(path))
+  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 controls () {
-    return this.getAttribute('aria-controls')
+  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)
   }
@@ -94,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"]'

data/app/javascript/index.js

@@ -5,8 +5,4 @@ import 'turbo_reflex'
 import './elements'
 import devtools from './devtools'
 
-const { enable, disable, start, stop } = devtools
-
-self.ReflexBehavors = {
-  devtools: { enable, disable, start, stop }
-}
+self.ReflexBehaviors = { devtools }

data/lib/reflex_behaviors/engine.rb

@@ -8,7 +8,6 @@ module ReflexBehaviors
   end
 
   class Engine < ::Rails::Engine
-    config.assets.precompile << "reflex_behaviors_manifest.js"
     config.reflex_behaviors = ActiveSupport::OrderedOptions.new
 
     ActiveSupport.on_load(:action_controller) do

data/lib/reflex_behaviors/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reflex_behaviors",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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",