turbo_boost-elements 0.0.13 → 0.0.15

data/app/javascript/devtools/dependencies.js

@@ -1,53 +0,0 @@
-const added = []
-
-const dependencies = {
-  LeaderLine: {
-    src:
-      'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js',
-    integrity:
-      'sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg==',
-    global: 'LeaderLine'
-  },
-
-  PlainDraggable: {
-    src:
-      'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js',
-    global: 'PlainDraggable'
-  }
-}
-
-function exists (dependency) {
-  if (dependency.global && self[dependency.global]) return true
-  if (document.querySelector(`[src='${dependency.src}']`)) return true
-  return added.includes(dependency)
-}
-
-function add (dependency) {
-  if (exists(dependency)) return
-  added.push(dependency)
-
-  const { src, integrity } = dependency
-  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 remove (dependency) {
-  if (!added.includes(dependency)) return
-  added.splice(added.indexOf(dependency), 1)
-
-  const { src } = dependency
-  const el = document.querySelector(`script[src='${src}']`)
-  if (el) el.remove()
-  if (dependency.global && self[dependency.global])
-    self[dependency.global] = null
-}
-
-function removeAll () {
-  ;[...added].forEach(dependency => remove(dependency))
-}
-
-export default { ...dependencies, add, remove, removeAll }

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

@@ -1,75 +0,0 @@
-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;
-        margin-right: 10px;
-      }
-
-      input:checked + label{
-        font-weight: bold;
-      }
-
-      label {
-        color: black;
-      }
-    `
-  }
-}

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

@@ -1,136 +0,0 @@
-import { appendHTML } from '../../utils/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.dispatchEvent(
-        new CustomEvent('turbo-boost:devtools-close', {
-          bubbles: true
-        })
-      )
-    )
-
-    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('turbo-boost:devtool-enable', {
-        bubbles: true,
-        detail: { name: name }
-      })
-    )
-  }
-
-  disableDevtool (name) {
-    if (!this.enabledDevtools[name]) return
-    delete this.enabledDevtools[name]
-    this.dispatchEvent(
-      new CustomEvent('turbo-boost: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>
-        <img src="https://ik.imagekit.io/hopsoft/turbo-boost-logo_zHiiimlvT.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1671722004342">
-        <slot name="devtool"></slot>
-        <button>✕</button>
-      </div>
-    `
-  }
-
-  get stylesheet () {
-    return `
-      :host {
-        background-color: gainsboro;
-        border-radius: 5px;
-        bottom: 20px;
-        display: block;
-        filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
-        left: 50%;
-        outline-offset: 1px;
-        outline: solid 2px black;
-        padding: 5px 10px;
-        position: fixed;
-        transform: translateX(-50%);
-        z-index: 8999;
-      }
-
-      * {
-        -webkit-user-select: none;
-        font-family: helvetica, sans-serif;
-        font-size: 1rem;
-        user-select: none;
-      }
-
-      img {
-        align-self: center;
-        cursor: grab;
-        height: 25px;
-        margin-left: -5px;
-        vertical-align: middle;
-      }
-
-      div {
-        display: flex;
-        gap: 0 5px;
-        position: relative;
-      }
-
-      [slot="devtool"] {
-        align-self: center;
-      }
-
-      button {
-        align-self: center;
-        background-color: darkgray;
-        border-radius: 50%;
-        border: none;
-        color: black;
-        cursor: pointer;
-        font-size: 10px;
-        height: 18px;
-        line-height: 18px;
-        margin-right: -5px;
-        opacity: 0.5;
-        outline: solid 1px black;
-        padding: 0 2px;
-        width: 18px;
-      }
-
-      button:hover {
-        opacity: 1;
-      }
-    `
-  }
-}

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

@@ -1,121 +0,0 @@
-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 backgroundColor () {
-    return this.getAttribute('background-color') || 'gainsboro'
-  }
-
-  get position () {
-    return this.getAttribute('position') || 'top'
-  }
-
-  get html () {
-    return `
-      <style>${this.stylesheet}</style>
-      <div role="container">
-        <div role="title">
-          <slot name="title"></slot>
-          <img src="https://ik.imagekit.io/hopsoft/turbo-boost-logo_zHiiimlvT.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1671722004342">
-        </div>
-        <slot name="subtitle"></slot>
-        <slot name="content-top"></slot>
-        <slot name="content"></slot>
-        <slot name="content-bottom"></slot>
-      </div>
-    `
-  }
-
-  get stylesheet () {
-    return `
-      :host {
-        display: block;
-        position: absolute;
-        z-index: 8999;
-      }
-
-      * {
-        color: ${this.color}
-        font-size: 1rem;
-      }
-
-      [role="container"] {
-        background-color: ${this.backgroundColor};
-        border-radius: 15px;
-        filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
-        font-family: monospace;
-        min-height: 30px;
-        min-width: 100px;
-        opacity: 0.9;
-        outline-offset: 1px;
-        outline: dashed 3px ${this.color};
-        padding: 12px;
-        position: relative;
-        white-space: nowrap;
-      }
-
-      [role="title"] {
-        display: flex;
-      }
-
-      [role="title"] slot[name="title"] {
-        color: ${this.color};
-        display: block;
-        flex-grow: 1;
-        font-weight: bold;
-      }
-
-      [role="title"] img {
-        height: 25px;
-        vertical-align: middle;
-      }
-
-      slot[name="subtitle"] {
-        border-bottom: dotted 1px ${this.color};
-        border-top: dotted 1px ${this.color};
-        color: ${this.color};
-        display: block;
-        font-size: 0.8rem;
-        font-weight: lighter;
-        margin-bottom: 12px;
-        margin-top: 8px;
-        padding-bottom: 4px;
-        padding-top: 4px;
-        width: 100%;
-      }
-
-      slot[name="content-top"],
-      slot[name="content"],
-      slot[name="content-bottom"] {
-        display: block;
-        font-weight: normal;
-      }
-
-      slot[name="content-top"] {
-        color: ${this.color};
-        margin-bottom: 8px;
-      }
-
-      slot[name="content"],
-      slot[name="content-bottom"] {
-        opacity: 0.7;
-        padding-left: 12px;
-      }
-
-      slot[name="content"] {
-        color: ${this.color};
-      }
-
-      slot[name="content-bottom"] {
-        color: red;
-      }
-    `
-  }
-}

data/app/javascript/devtools/index.js

@@ -1,5 +0,0 @@
-import supervisor from './supervisor'
-
-const { restart, start, stop } = supervisor
-
-export default { restart, start, stop }

data/app/javascript/devtools/supervisor.js

@@ -1,116 +0,0 @@
-import { appendHTML } from '../utils/dom'
-import DevtoolElement from './elements/devtool_element'
-import SupervisorElement from './elements/supervisor_element'
-import TooltipElement from './elements/tooltip_element'
-import dependencies from './dependencies'
-
-customElements.define('turbo-boost-devtool', DevtoolElement)
-customElements.define('turbo-boost-devtool-supervisor', SupervisorElement)
-customElements.define('turbo-boost-devtool-tooltip', TooltipElement)
-
-let supervisorElement
-
-function makeDraggable () {
-  if (!supervisorElement) return
-  try {
-    new PlainDraggable(supervisorElement)
-  } catch {
-    setTimeout(makeDraggable, 200)
-  }
-}
-
-function stop () {
-  if (stopped()) return
-  supervisorElement.close()
-  supervisorElement.dispatchEvent(
-    new CustomEvent('turbo-boost:devtools-stop', {
-      bubbles: true
-    })
-  )
-  supervisorElement = null
-  dependencies.removeAll()
-}
-
-function start () {
-  if (started()) return
-  dependencies.add(dependencies.LeaderLine)
-  dependencies.add(dependencies.PlainDraggable)
-  supervisorElement = appendHTML(
-    '<turbo-boost-devtool-supervisor></turbo-boost-devtool-supervisor>'
-  )
-  setTimeout(makeDraggable, 200)
-  supervisorElement.dispatchEvent(
-    new CustomEvent('turbo-boost: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(TurboBoost.Commands.events.success, autoRestart)
-addEventListener(TurboBoost.Commands.events.finish, autoRestart)
-addEventListener('turbo-boost:devtools-connect', autoRestart)
-addEventListener('turbo-boost:devtools-close', stop)
-
-function register (name, label) {
-  if (!supervisorElement) return
-  return appendHTML(
-    `
-      <turbo-boost-devtool name="${name}" slot="devtool">
-        <span slot="label">${label}</span>
-      </turbo-boost-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()
-  }
-}