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.
- checksums.yaml +4 -4
- data/app/assets/builds/@turbo-boost/commands.metafile.json +1 -0
- data/app/assets/builds/@turbo-boost/elements.js +34 -39
- data/app/assets/builds/@turbo-boost/elements.js.map +4 -4
- data/app/assets/builds/@turbo-boost/elements.metafile.json +1 -0
- data/app/javascript/elements/toggle_elements/target_element/index.js +20 -24
- data/app/javascript/elements/toggle_elements/toggle_element/index.js +10 -10
- data/app/javascript/elements/toggle_elements/trigger_element/focus.js +6 -22
- data/app/javascript/elements/toggle_elements/trigger_element/index.js +102 -66
- data/app/javascript/elements/turbo_boost_element/index.js +7 -10
- data/app/javascript/index.js +1 -1
- data/lib/turbo_boost/elements/version.rb +1 -1
- metadata +5 -11
- data/app/javascript/devtools/dependencies.js +0 -53
- data/app/javascript/devtools/elements/devtool_element.js +0 -75
- data/app/javascript/devtools/elements/supervisor_element.js +0 -136
- data/app/javascript/devtools/elements/tooltip_element.js +0 -121
- data/app/javascript/devtools/index.js +0 -5
- data/app/javascript/devtools/supervisor.js +0 -116
- data/app/javascript/elements/toggle_elements/trigger_element/devtool.js +0 -374
- data/app/javascript/utils/dom.js +0 -70
@@ -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,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
|
-
}
|