reflex_behaviors 0.0.4 → 0.0.6

data/app/javascript/devtools/dependencies/index.js

@@ -0,0 +1,48 @@
+const addedDependencies = []
+
+function addScript (src, integrity) {
+  if (document.querySelector(`[src='${src}']`)) return
+
+  if (addedDependencies.includes(src)) return
+  addedDependencies.push(src)
+
+  const script = document.createElement('script')
+  script.setAttribute('src', src)
+  script.setAttribute('crossorigin', 'anonymous')
+  script.setAttribute('referrerpolicy', 'no-referrer')
+  if (integrity) script.setAttribute('integrity', integrity)
+  document.head.appendChild(script)
+}
+
+function removeScript (src) {
+  if (!addedDependencies.includes(src)) return
+  addedDependencies.splice(addedDependencies.indexOf(src), 1)
+
+  const el = document.querySelector(`script[src='${src}']`)
+  if (el) el.remove()
+}
+
+export function addLeaderLineDependency () {
+  addScript(
+    'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js',
+    'sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg=='
+  )
+}
+
+export function removeLeaderLineDependency () {
+  removeScript(
+    'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js'
+  )
+}
+
+export function addPlainDraggableDependency () {
+  addScript(
+    'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js'
+  )
+}
+
+export function removePlainDraggableDependency () {
+  removeScript(
+    'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js'
+  )
+}

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

@@ -1,4 +1,4 @@
-import { appendHTML } from '../dom'
+import { appendHTML } from '../../utils/dom'
 
 export default class SupervisorElement extends HTMLElement {
   constructor () {
@@ -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>✕</button>
       </div>
     `
   }
@@ -68,45 +68,59 @@ 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: 8999;
       }
 
-      :host, :host * {
+      * {
         -webkit-user-select: none;
+        font-family: helvetica, sans-serif;
+        font-size: 1rem;
         user-select: none;
       }
 
-      strong {
-        color: silver;
-        font-weight: 600;
+      label {
+        color: indigo;
+        cursor: grab;
+        opacity: 0.5;
       }
 
-      div[data-role="container"] {
+      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;
+        opacity: 0.5;
+      }
+
+      button:hover {
+        opacity: 1;
       }
     `
   }

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

@@ -9,10 +9,6 @@ export default class TooltipElement extends HTMLElement {
     return this.getAttribute('color') || 'darkslategray'
   }
 
-  get emphasisColor () {
-    return this.getAttribute('emphasis-color') || 'black'
-  }
-
   get backgroundColor () {
     return this.getAttribute('background-color') || 'gainsboro'
   }
@@ -21,23 +17,14 @@ export default class TooltipElement extends HTMLElement {
     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">
+      <div>
         <slot name="title"></slot>
-        <hr>
-        <slot name="normal"></slot>
-        <slot name="emphasis"></slot>
+        <slot name="content-top"></slot>
+        <slot name="content"></slot>
+        <slot name="content-bottom"></slot>
       </div>
     `
   }
@@ -47,55 +34,55 @@ export default class TooltipElement extends HTMLElement {
       :host {
         display: block;
         position: absolute;
-        z-index: 10000;
+        z-index: 8999;
       }
 
       * {
         color: ${this.color}
+        font-size: 1rem;
       }
 
-      [role="tooltip"] {
+      div {
         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: dashed 3px ${this.color};
         padding: 8px 12px 8px 12px;
+        position: relative;
         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};
+        border-bottom: dotted 1px ${this.color};
+        color: ${this.color};
+        display: inline-block;
         font-weight: bold;
+        margin-bottom: 8px;
+        padding-bottom: 8px;
+        width: 100%;
       }
 
-      slot[name="emphasis"] {
-        color: ${this.emphasisColor};
+      slot[name="content-top"] {
+        color: ${this.color};
         font-weight: normal;
         opacity: 0.7;
       }
 
-      hr {
-        background-color: ${this.emphasisColor};
-        border: none;
-        height: 1px;
-        margin-bottom: 4px;
-        margin-top: 4px;
-        opacity: 0.3;
+      slot[name="content"] {
+        color: ${this.color};
+        font-weight: normal;
+        opacity: 0.7;
+      }
+
+      slot[name="content-bottom"] {
+        color: red;
+        font-weight: normal;
+        opacity: 0.7;
       }
     `
   }

data/app/javascript/devtools/supervisor.js

@@ -1,7 +1,13 @@
-import { appendHTML } from './dom'
+import { appendHTML } from '../utils/dom'
 import DevtoolElement from './elements/devtool_element'
 import SupervisorElement from './elements/supervisor_element'
 import TooltipElement from './elements/tooltip_element'
+import {
+  addLeaderLineDependency,
+  addPlainDraggableDependency,
+  removeLeaderLineDependency,
+  removePlainDraggableDependency
+} from './dependencies'
 
 customElements.define('reflex-behaviors-devtool', DevtoolElement)
 customElements.define('reflex-behaviors-devtool-supervisor', SupervisorElement)
@@ -9,8 +15,17 @@ customElements.define('reflex-behaviors-devools-tooltip', TooltipElement)
 
 let supervisorElement
 
-function stop () {
+function makeDraggable () {
   if (!supervisorElement) return
+  try {
+    new PlainDraggable(supervisorElement)
+  } catch {
+    setTimeout(makeDraggable, 200)
+  }
+}
+
+function stop () {
+  if (stopped()) return
   supervisorElement.close()
   supervisorElement.dispatchEvent(
     new CustomEvent('reflex-behaviors:devtools-stop', {
@@ -18,15 +33,18 @@ function stop () {
     })
   )
   supervisorElement = null
+  removeLeaderLineDependency()
+  removePlainDraggableDependency()
 }
 
 function start () {
-  appendHTML(
+  if (started()) return
+  addLeaderLineDependency()
+  addPlainDraggableDependency()
+  supervisorElement = appendHTML(
     '<reflex-behaviors-devtool-supervisor></reflex-behaviors-devtool-supervisor>'
   )
-  supervisorElement = document.body.querySelector(
-    'reflex-behaviors-devtool-supervisor'
-  )
+  setTimeout(makeDraggable, 200)
   supervisorElement.dispatchEvent(
     new CustomEvent('reflex-behaviors:devtools-start', {
       bubbles: true
@@ -47,15 +65,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 +108,13 @@ function enabled (name) {
 export default {
   enabled,
   register,
-  restart: debouncedRestart,
   start,
-  stop
+  stop,
+  restart: debouncedRestart,
+  get started () {
+    return started()
+  },
+  get stopped () {
+    return stopped()
+  }
 }