turbo_boost-elements 0.0.14 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,75 +0,0 @@
1
- export default class DevtoolElement extends HTMLElement {
2
- constructor () {
3
- super()
4
- this.attachShadow({ mode: 'open' })
5
- this.shadowRoot.innerHTML = this.html
6
- this.labelElement.addEventListener('click', event => {
7
- event.preventDefault()
8
- this.toggle()
9
- })
10
- this.checkboxElement.addEventListener('change', event =>
11
- this.dispatchEvent(new CustomEvent('change', { bubbles: true }))
12
- )
13
- }
14
-
15
- toggle () {
16
- this.checked ? this.uncheck() : this.check()
17
- }
18
-
19
- check () {
20
- this.checkboxElement.checked = true
21
- this.dispatchEvent(new CustomEvent('change', { bubbles: true }))
22
- }
23
-
24
- uncheck () {
25
- this.checkboxElement.checked = false
26
- this.dispatchEvent(new CustomEvent('change', { bubbles: true }))
27
- }
28
-
29
- get name () {
30
- return this.getAttribute('name')
31
- }
32
-
33
- get checked () {
34
- return this.checkboxElement.checked
35
- }
36
-
37
- get checkboxElement () {
38
- return this.shadowRoot.querySelector('input')
39
- }
40
-
41
- get labelElement () {
42
- return this.shadowRoot.querySelector('label')
43
- }
44
-
45
- get html () {
46
- return `
47
- <style>${this.stylesheet}</style>
48
- <div>
49
- <input name="checkbox" type="checkbox">
50
- <label for="checkbox"><slot name="label"></slot></label>
51
- </div>
52
- `
53
- }
54
-
55
- get stylesheet () {
56
- return `
57
- :host, :host * {
58
- cursor: pointer;
59
- }
60
-
61
- div {
62
- display: flex;
63
- margin-right: 10px;
64
- }
65
-
66
- input:checked + label{
67
- font-weight: bold;
68
- }
69
-
70
- label {
71
- color: black;
72
- }
73
- `
74
- }
75
- }
@@ -1,136 +0,0 @@
1
- import { appendHTML } from '../../utils/dom'
2
-
3
- export default class SupervisorElement extends HTMLElement {
4
- constructor () {
5
- super()
6
- this.enabledDevtools = {}
7
- this.attachShadow({ mode: 'open' })
8
- this.shadowRoot.innerHTML = this.html
9
- this.shadowRoot.querySelector('button').addEventListener('click', () =>
10
- this.dispatchEvent(
11
- new CustomEvent('turbo-boost:devtools-close', {
12
- bubbles: true
13
- })
14
- )
15
- )
16
-
17
- this.addEventListener('change', event => {
18
- const devtoolElement = event.target
19
- const { checked, name } = devtoolElement
20
- checked ? this.enableDevtool(name) : this.disableDevtool(name)
21
- })
22
- }
23
-
24
- enableDevtool (name) {
25
- if (this.enabledDevtools[name]) return
26
- this.enabledDevtools[name] = true
27
- this.dispatchEvent(
28
- new CustomEvent('turbo-boost:devtool-enable', {
29
- bubbles: true,
30
- detail: { name: name }
31
- })
32
- )
33
- }
34
-
35
- disableDevtool (name) {
36
- if (!this.enabledDevtools[name]) return
37
- delete this.enabledDevtools[name]
38
- this.dispatchEvent(
39
- new CustomEvent('turbo-boost:devtool-disable', {
40
- bubbles: true,
41
- detail: { name: name }
42
- })
43
- )
44
- }
45
-
46
- close () {
47
- this.devtoolElements.forEach(el => {
48
- if (el.checked) el.uncheck()
49
- })
50
- this.remove()
51
- }
52
-
53
- get devtoolElements () {
54
- return this.querySelectorAll('[slot="devtool"]')
55
- }
56
-
57
- get closeElement () {
58
- return this.querySelector('button')
59
- }
60
-
61
- get html () {
62
- return `
63
- <style>${this.stylesheet}</style>
64
- <div>
65
- <img src="https://ik.imagekit.io/hopsoft/turbo-boost-logo_zHiiimlvT.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1671722004342">
66
- <slot name="devtool"></slot>
67
- <button>✕</button>
68
- </div>
69
- `
70
- }
71
-
72
- get stylesheet () {
73
- return `
74
- :host {
75
- background-color: gainsboro;
76
- border-radius: 5px;
77
- bottom: 20px;
78
- display: block;
79
- filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
80
- left: 50%;
81
- outline-offset: 1px;
82
- outline: solid 2px black;
83
- padding: 5px 10px;
84
- position: fixed;
85
- transform: translateX(-50%);
86
- z-index: 8999;
87
- }
88
-
89
- * {
90
- -webkit-user-select: none;
91
- font-family: helvetica, sans-serif;
92
- font-size: 1rem;
93
- user-select: none;
94
- }
95
-
96
- img {
97
- align-self: center;
98
- cursor: grab;
99
- height: 25px;
100
- margin-left: -5px;
101
- vertical-align: middle;
102
- }
103
-
104
- div {
105
- display: flex;
106
- gap: 0 5px;
107
- position: relative;
108
- }
109
-
110
- [slot="devtool"] {
111
- align-self: center;
112
- }
113
-
114
- button {
115
- align-self: center;
116
- background-color: darkgray;
117
- border-radius: 50%;
118
- border: none;
119
- color: black;
120
- cursor: pointer;
121
- font-size: 10px;
122
- height: 18px;
123
- line-height: 18px;
124
- margin-right: -5px;
125
- opacity: 0.5;
126
- outline: solid 1px black;
127
- padding: 0 2px;
128
- width: 18px;
129
- }
130
-
131
- button:hover {
132
- opacity: 1;
133
- }
134
- `
135
- }
136
- }
@@ -1,121 +0,0 @@
1
- export default class TooltipElement extends HTMLElement {
2
- constructor () {
3
- super()
4
- this.attachShadow({ mode: 'open' })
5
- this.shadowRoot.innerHTML = this.html
6
- }
7
-
8
- get color () {
9
- return this.getAttribute('color') || 'darkslategray'
10
- }
11
-
12
- get backgroundColor () {
13
- return this.getAttribute('background-color') || 'gainsboro'
14
- }
15
-
16
- get position () {
17
- return this.getAttribute('position') || 'top'
18
- }
19
-
20
- get html () {
21
- return `
22
- <style>${this.stylesheet}</style>
23
- <div role="container">
24
- <div role="title">
25
- <slot name="title"></slot>
26
- <img src="https://ik.imagekit.io/hopsoft/turbo-boost-logo_zHiiimlvT.webp?ik-sdk-version=javascript-1.4.3&updatedAt=1671722004342">
27
- </div>
28
- <slot name="subtitle"></slot>
29
- <slot name="content-top"></slot>
30
- <slot name="content"></slot>
31
- <slot name="content-bottom"></slot>
32
- </div>
33
- `
34
- }
35
-
36
- get stylesheet () {
37
- return `
38
- :host {
39
- display: block;
40
- position: absolute;
41
- z-index: 8999;
42
- }
43
-
44
- * {
45
- color: ${this.color}
46
- font-size: 1rem;
47
- }
48
-
49
- [role="container"] {
50
- background-color: ${this.backgroundColor};
51
- border-radius: 15px;
52
- filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
53
- font-family: monospace;
54
- min-height: 30px;
55
- min-width: 100px;
56
- opacity: 0.9;
57
- outline-offset: 1px;
58
- outline: dashed 3px ${this.color};
59
- padding: 12px;
60
- position: relative;
61
- white-space: nowrap;
62
- }
63
-
64
- [role="title"] {
65
- display: flex;
66
- }
67
-
68
- [role="title"] slot[name="title"] {
69
- color: ${this.color};
70
- display: block;
71
- flex-grow: 1;
72
- font-weight: bold;
73
- }
74
-
75
- [role="title"] img {
76
- height: 25px;
77
- vertical-align: middle;
78
- }
79
-
80
- slot[name="subtitle"] {
81
- border-bottom: dotted 1px ${this.color};
82
- border-top: dotted 1px ${this.color};
83
- color: ${this.color};
84
- display: block;
85
- font-size: 0.8rem;
86
- font-weight: lighter;
87
- margin-bottom: 12px;
88
- margin-top: 8px;
89
- padding-bottom: 4px;
90
- padding-top: 4px;
91
- width: 100%;
92
- }
93
-
94
- slot[name="content-top"],
95
- slot[name="content"],
96
- slot[name="content-bottom"] {
97
- display: block;
98
- font-weight: normal;
99
- }
100
-
101
- slot[name="content-top"] {
102
- color: ${this.color};
103
- margin-bottom: 8px;
104
- }
105
-
106
- slot[name="content"],
107
- slot[name="content-bottom"] {
108
- opacity: 0.7;
109
- padding-left: 12px;
110
- }
111
-
112
- slot[name="content"] {
113
- color: ${this.color};
114
- }
115
-
116
- slot[name="content-bottom"] {
117
- color: red;
118
- }
119
- `
120
- }
121
- }
@@ -1,5 +0,0 @@
1
- import supervisor from './supervisor'
2
-
3
- const { restart, start, stop } = supervisor
4
-
5
- export default { restart, start, stop }
@@ -1,116 +0,0 @@
1
- import { appendHTML } from '../utils/dom'
2
- import DevtoolElement from './elements/devtool_element'
3
- import SupervisorElement from './elements/supervisor_element'
4
- import TooltipElement from './elements/tooltip_element'
5
- import dependencies from './dependencies'
6
-
7
- customElements.define('turbo-boost-devtool', DevtoolElement)
8
- customElements.define('turbo-boost-devtool-supervisor', SupervisorElement)
9
- customElements.define('turbo-boost-devtool-tooltip', TooltipElement)
10
-
11
- let supervisorElement
12
-
13
- function makeDraggable () {
14
- if (!supervisorElement) return
15
- try {
16
- new PlainDraggable(supervisorElement)
17
- } catch {
18
- setTimeout(makeDraggable, 200)
19
- }
20
- }
21
-
22
- function stop () {
23
- if (stopped()) return
24
- supervisorElement.close()
25
- supervisorElement.dispatchEvent(
26
- new CustomEvent('turbo-boost:devtools-stop', {
27
- bubbles: true
28
- })
29
- )
30
- supervisorElement = null
31
- dependencies.removeAll()
32
- }
33
-
34
- function start () {
35
- if (started()) return
36
- dependencies.add(dependencies.LeaderLine)
37
- dependencies.add(dependencies.PlainDraggable)
38
- supervisorElement = appendHTML(
39
- '<turbo-boost-devtool-supervisor></turbo-boost-devtool-supervisor>'
40
- )
41
- setTimeout(makeDraggable, 200)
42
- supervisorElement.dispatchEvent(
43
- new CustomEvent('turbo-boost:devtools-start', {
44
- bubbles: true
45
- })
46
- )
47
- }
48
-
49
- function restart () {
50
- const enabledList = supervisorElement
51
- ? Object.keys(supervisorElement.enabledDevtools)
52
- : []
53
-
54
- stop()
55
- start()
56
-
57
- supervisorElement.devtoolElements.forEach(el => {
58
- if (enabledList.includes(el.name)) el.check()
59
- })
60
- }
61
-
62
- function started () {
63
- return !!supervisorElement
64
- }
65
-
66
- function stopped () {
67
- return !started()
68
- }
69
-
70
- let restartTimeout
71
- function debouncedRestart () {
72
- clearTimeout(restartTimeout)
73
- restartTimeout = setTimeout(restart, 25)
74
- }
75
-
76
- function autoRestart () {
77
- if (started()) debouncedRestart()
78
- }
79
-
80
- addEventListener('turbo:load', autoRestart)
81
- addEventListener('turbo-frame:load', autoRestart)
82
- addEventListener(TurboBoost.Commands.events.success, autoRestart)
83
- addEventListener(TurboBoost.Commands.events.finish, autoRestart)
84
- addEventListener('turbo-boost:devtools-connect', autoRestart)
85
- addEventListener('turbo-boost:devtools-close', stop)
86
-
87
- function register (name, label) {
88
- if (!supervisorElement) return
89
- return appendHTML(
90
- `
91
- <turbo-boost-devtool name="${name}" slot="devtool">
92
- <span slot="label">${label}</span>
93
- </turbo-boost-devtool>
94
- `,
95
- supervisorElement
96
- )
97
- }
98
-
99
- function enabled (name) {
100
- if (!supervisorElement) return false
101
- return supervisorElement.enabledDevtools[name]
102
- }
103
-
104
- export default {
105
- enabled,
106
- register,
107
- start,
108
- stop,
109
- restart: debouncedRestart,
110
- get started () {
111
- return started()
112
- },
113
- get stopped () {
114
- return stopped()
115
- }
116
- }