turbo_boost-elements 0.0.14 → 0.0.15

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
- }