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.
@@ -0,0 +1 @@
1
+ {"inputs":{"node_modules/@turbo-boost/commands/app/assets/builds/@turbo-boost/commands.js":{"bytes":11151,"imports":[],"format":"esm"},"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js":{"bytes":19326,"imports":[],"format":"esm"},"app/javascript/elements/turbo_boost_element/index.js":{"bytes":844,"imports":[],"format":"esm"},"app/javascript/elements/toggle_elements/toggle_element/index.js":{"bytes":2193,"imports":[{"path":"app/javascript/elements/turbo_boost_element/index.js","kind":"import-statement","original":"../../turbo_boost_element"}],"format":"esm"},"app/javascript/elements/toggle_elements/target_element/index.js":{"bytes":3370,"imports":[{"path":"app/javascript/elements/toggle_elements/toggle_element/index.js","kind":"import-statement","original":"../toggle_element"}],"format":"esm"},"app/javascript/elements/toggle_elements/trigger_element/focus.js":{"bytes":1585,"imports":[],"format":"esm"},"app/javascript/elements/toggle_elements/trigger_element/index.js":{"bytes":7168,"imports":[{"path":"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js","kind":"import-statement","original":"@turbo-boost/devtools"},{"path":"app/javascript/elements/toggle_elements/toggle_element/index.js","kind":"import-statement","original":"../toggle_element"},{"path":"app/javascript/elements/toggle_elements/trigger_element/focus.js","kind":"import-statement","original":"./focus"}],"format":"esm"},"app/javascript/elements/index.js":{"bytes":481,"imports":[{"path":"app/javascript/elements/turbo_boost_element/index.js","kind":"import-statement","original":"./turbo_boost_element"},{"path":"app/javascript/elements/toggle_elements/target_element/index.js","kind":"import-statement","original":"./toggle_elements/target_element"},{"path":"app/javascript/elements/toggle_elements/trigger_element/index.js","kind":"import-statement","original":"./toggle_elements/trigger_element"}],"format":"esm"},"app/javascript/index.js":{"bytes":244,"imports":[{"path":"node_modules/@turbo-boost/commands/app/assets/builds/@turbo-boost/commands.js","kind":"import-statement","original":"@turbo-boost/commands"},{"path":"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js","kind":"import-statement","original":"@turbo-boost/devtools"},{"path":"app/javascript/elements/index.js","kind":"import-statement","original":"./elements"}],"format":"esm"}},"outputs":{"app/assets/builds/@turbo-boost/elements.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":92571},"app/assets/builds/@turbo-boost/elements.js":{"imports":[],"exports":["default"],"entryPoint":"app/javascript/index.js","inputs":{"node_modules/@turbo-boost/commands/app/assets/builds/@turbo-boost/commands.js":{"bytesInOutput":11085},"node_modules/@turbo-boost/devtools/dist/@turbo-boost/devtools.js":{"bytesInOutput":19262},"app/javascript/elements/turbo_boost_element/index.js":{"bytesInOutput":541},"app/javascript/elements/toggle_elements/toggle_element/index.js":{"bytesInOutput":1284},"app/javascript/elements/toggle_elements/target_element/index.js":{"bytesInOutput":2040},"app/javascript/elements/toggle_elements/trigger_element/focus.js":{"bytesInOutput":768},"app/javascript/elements/toggle_elements/trigger_element/index.js":{"bytesInOutput":4299},"app/javascript/elements/index.js":{"bytesInOutput":146},"app/javascript/index.js":{"bytesInOutput":124}},"bytes":39609}}}
@@ -1,7 +1,7 @@
1
1
  import ToggleElement from '../toggle_element'
2
2
 
3
3
  export default class ToggleTargetElement extends ToggleElement {
4
- connectedCallback () {
4
+ connectedCallback() {
5
5
  super.connectedCallback()
6
6
 
7
7
  this.mouseenterHandler = this.onMouseenter.bind(this)
@@ -23,7 +23,7 @@ export default class ToggleTargetElement extends ToggleElement {
23
23
  })
24
24
  }
25
25
 
26
- disconnectedCallback () {
26
+ disconnectedCallback() {
27
27
  this.removeEventListener('mouseenter', this.mouseenterHandler)
28
28
 
29
29
  this.collapseOn.forEach(entry => {
@@ -43,27 +43,26 @@ export default class ToggleTargetElement extends ToggleElement {
43
43
  // perhaps use a mechanic other than morph
44
44
 
45
45
  // TODO: implement cache (similar to Turbo Drive restoration visit)
46
- cacheHTML () {
46
+ cacheHTML() {
47
47
  // this.cachedHTML = this.innerHTML
48
48
  }
49
49
 
50
50
  // TODO: implement cache (similar to Turbo Drive restoration visit)
51
- renderCachedHTML () {
51
+ renderCachedHTML() {
52
52
  // if (!this.cachedHTML) return
53
53
  // this.innerHTML = this.cachedHTML
54
54
  }
55
55
 
56
- onMouseenter () {
56
+ onMouseenter() {
57
57
  clearTimeout(this.collapseTimeout)
58
58
  }
59
59
 
60
- collapse (delay = 250) {
60
+ collapse(delay = 250) {
61
61
  clearTimeout(this.collapseTimeout)
62
62
  if (this.busy) return
63
63
  if (typeof delay !== 'number') delay = 250
64
64
 
65
- if (delay > 0)
66
- return (this.collapseTimeout = setTimeout(() => this.collapse(0), delay))
65
+ if (delay > 0) return (this.collapseTimeout = setTimeout(() => this.collapse(0), delay))
67
66
 
68
67
  this.innerHTML = ''
69
68
  try {
@@ -72,63 +71,60 @@ export default class ToggleTargetElement extends ToggleElement {
72
71
  } catch {}
73
72
  }
74
73
 
75
- collapseNow (event) {
74
+ collapseNow(event) {
76
75
  if (event.target.closest('turbo-boost-devtool-tooltip')) return
77
76
  this.collapse(0)
78
77
  }
79
78
 
80
- collapseMatches () {
79
+ collapseMatches() {
81
80
  document.querySelectorAll(this.collapseSelector).forEach(el => {
82
81
  if (el.id === this.id) return
83
82
  if (el.collapse) el.collapse(0)
84
83
  })
85
84
  }
86
85
 
87
- get collapseSelector () {
88
- return (
89
- this.triggerElement.collapseSelector ||
90
- this.getAttribute('collapse-selector')
91
- )
86
+ get collapseSelector() {
87
+ return this.triggerElement.collapseSelector || this.getAttribute('collapse-selector')
92
88
  }
93
89
 
94
- get focusSelector () {
90
+ get focusSelector() {
95
91
  return this.getAttribute('focus-selector')
96
92
  }
97
93
 
98
94
  // the active trigger
99
- get triggerElement () {
95
+ get triggerElement() {
100
96
  return document.getElementById(this.labeledBy)
101
97
  }
102
98
 
103
99
  // all triggers
104
- get triggerElements () {
100
+ get triggerElements() {
105
101
  return document.querySelectorAll(`[aria-controls="${this.id}"]`)
106
102
  }
107
103
 
108
104
  // the dom id of the active trigger
109
- get labeledBy () {
105
+ get labeledBy() {
110
106
  return this.getAttribute('aria-labeledby')
111
107
  }
112
108
 
113
- set labeledBy (value) {
109
+ set labeledBy(value) {
114
110
  return this.setAttribute('aria-labeledby', value)
115
111
  }
116
112
 
117
- get collapseOn () {
113
+ get collapseOn() {
118
114
  const value = this.getAttribute('collapse-on')
119
115
  if (!value) return []
120
116
  return JSON.parse(value)
121
117
  }
122
118
 
123
- get expanded () {
119
+ get expanded() {
124
120
  return this.triggerElement ? this.triggerElement.expanded : false
125
121
  }
126
122
 
127
- set expanded (value) {
123
+ set expanded(value) {
128
124
  this.triggerElements.forEach(el => (el.expanded = value))
129
125
  }
130
126
 
131
- get busy () {
127
+ get busy() {
132
128
  return this.triggerElement && this.triggerElement.busy
133
129
  }
134
130
  }
@@ -11,13 +11,13 @@ export const busyDelay = 100 // milliseconds - time to wait before showing busy
11
11
  export const busyDuration = 400 // milliseconds - minimum time that busy element is shown
12
12
 
13
13
  export default class ToggleElement extends TurboBoostElement {
14
- constructor () {
14
+ constructor() {
15
15
  super(html)
16
16
  }
17
17
 
18
18
  // TODO: Should we timeout after a theoretical max wait time?
19
19
  // The idea being that a server error occurred and the toggle failed.
20
- showBusyElement () {
20
+ showBusyElement() {
21
21
  clearTimeout(this.showBusyElementTimeout)
22
22
  clearTimeout(this.hideBusyElementTimeout)
23
23
 
@@ -30,7 +30,7 @@ export default class ToggleElement extends TurboBoostElement {
30
30
  }, busyDelay)
31
31
  }
32
32
 
33
- hideBusyElement () {
33
+ hideBusyElement() {
34
34
  clearTimeout(this.showBusyElementTimeout)
35
35
  clearTimeout(this.hideBusyElementTimeout)
36
36
 
@@ -46,25 +46,25 @@ export default class ToggleElement extends TurboBoostElement {
46
46
  }, delay)
47
47
  }
48
48
 
49
- get busyElement () {
49
+ get busyElement() {
50
50
  return this.querySelector(':scope > [slot="busy"]')
51
51
  }
52
52
 
53
- get busySlotElement () {
53
+ get busySlotElement() {
54
54
  return this.shadowRoot.querySelector('slot[name="busy"]')
55
55
  }
56
56
 
57
- get defaultSlotElement () {
57
+ get defaultSlotElement() {
58
58
  return this.shadowRoot.querySelector('slot:not([name])')
59
59
  }
60
60
 
61
61
  // indicates if an rpc call is active/busy
62
- get busy () {
62
+ get busy() {
63
63
  return this.getAttribute('busy') === 'true'
64
64
  }
65
65
 
66
66
  // indicates if an rpc call is active/busy
67
- set busy (value) {
67
+ set busy(value) {
68
68
  value = !!value
69
69
  if (this.busy === value) return
70
70
  this.setAttribute('busy', value)
@@ -72,12 +72,12 @@ export default class ToggleElement extends TurboBoostElement {
72
72
  else this.hideBusyElement()
73
73
  }
74
74
 
75
- get busyStartedAt () {
75
+ get busyStartedAt() {
76
76
  if (!this.dataset.busyStartedAt) return 0
77
77
  return Number(this.dataset.busyStartedAt)
78
78
  }
79
79
 
80
- set busyStartedAt (value) {
80
+ set busyStartedAt(value) {
81
81
  this.dataset.busyStartedAt = value
82
82
  }
83
83
  }
@@ -1,31 +1,18 @@
1
1
  let focusTimeout
2
2
 
3
- function deactivateTrixAttributes (editor) {
4
- const attributes = [
5
- 'bold',
6
- 'bullet',
7
- 'code',
8
- 'heading1',
9
- 'href',
10
- 'italic',
11
- 'number',
12
- 'quote',
13
- 'strike'
14
- ]
3
+ function deactivateTrixAttributes(editor) {
4
+ const attributes = ['bold', 'bullet', 'code', 'heading1', 'href', 'italic', 'number', 'quote', 'strike']
15
5
  attributes.forEach(name => editor.deactivateAttribute(name))
16
6
  }
17
7
 
18
- function focusTrixEditorElement (element) {
8
+ function focusTrixEditorElement(element) {
19
9
  if (element.value.length === 0) return
20
10
 
21
11
  const editor = element.editor
22
12
 
23
13
  // move cursor to the end
24
14
  let lastRange = []
25
- while (
26
- lastRange[0] !== editor.getSelectedRange()[0] &&
27
- lastRange[1] !== editor.getSelectedRange()[1]
28
- ) {
15
+ while (lastRange[0] !== editor.getSelectedRange()[0] && lastRange[1] !== editor.getSelectedRange()[1]) {
29
16
  lastRange = editor.getSelectedRange()
30
17
  editor.moveCursorInDirection('forward')
31
18
  }
@@ -39,13 +26,10 @@ function focusTrixEditorElement (element) {
39
26
  deactivateTrixAttributes(editor)
40
27
 
41
28
  // move cursor to end and collapse the selection
42
- editor.setSelectedRange([
43
- editor.getSelectedRange()[1],
44
- editor.getSelectedRange()[1]
45
- ])
29
+ editor.setSelectedRange([editor.getSelectedRange()[1], editor.getSelectedRange()[1]])
46
30
  }
47
31
 
48
- function debouncedFocus (element) {
32
+ function debouncedFocus(element) {
49
33
  clearTimeout(focusTimeout)
50
34
 
51
35
  focusTimeout = setTimeout(() => {
@@ -1,11 +1,20 @@
1
+ import { Devtool, decorateElementWithDevtool } from '@turbo-boost/devtools'
2
+
1
3
  import ToggleElement, { busyDuration } from '../toggle_element'
2
- import Devtool from './devtool'
3
4
  import focus from './focus'
4
5
 
6
+ document.addEventListener('turbo-boost:devtools-start', () => Devtool.register('toggle', 'toggles'))
7
+
5
8
  let currentFocusSelector
6
9
 
7
10
  export default class ToggleTriggerElement extends ToggleElement {
8
- connectedCallback () {
11
+ constructor() {
12
+ super()
13
+
14
+ decorateElementWithDevtool(this, 'toggle', 'toggles')
15
+ }
16
+
17
+ connectedCallback() {
9
18
  super.connectedCallback()
10
19
 
11
20
  const { start: commandStartEvent } = TurboBoost.Commands.events
@@ -24,7 +33,7 @@ export default class ToggleTriggerElement extends ToggleElement {
24
33
  this.initializeDevtool()
25
34
  }
26
35
 
27
- disconnectedCallback () {
36
+ disconnectedCallback() {
28
37
  // delay cleanup because the trigger may have been morphed out of the DOM,
29
38
  // but it's needed to apply behavior like focus etc...
30
39
  setTimeout(() => {
@@ -34,37 +43,11 @@ export default class ToggleTriggerElement extends ToggleElement {
34
43
  const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
35
44
  removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
36
45
 
37
- this.devtool.hide({ active: false })
38
- this.devtool.unregisterEventListeners()
39
- delete this.devtool
46
+ this.removeDevtool()
40
47
  }, 1000)
41
48
  }
42
49
 
43
- initializeDevtool () {
44
- const mouseenter = () => this.devtool.show()
45
-
46
- addEventListener('turbo-boost:devtools-start', () => {
47
- this.devtool = new Devtool(this)
48
- this.addEventListener('mouseenter', mouseenter)
49
- })
50
-
51
- addEventListener('turbo-boost:devtools-stop', () => {
52
- this.removeEventListener('mouseenter', mouseenter)
53
- this.devtool.hide({ active: false })
54
- this.devtool.unregisterEventListeners()
55
- delete this.devtool
56
- })
57
-
58
- this.dispatchEvent(
59
- new CustomEvent('turbo-boost:devtools-connect', { bubbles: true })
60
- )
61
- }
62
-
63
- hideDevtool () {
64
- if (this.devtool) this.devtool.hide({ active: false })
65
- }
66
-
67
- onCommandStart (event) {
50
+ onCommandStart(event) {
68
51
  currentFocusSelector = this.focusSelector
69
52
  this.targetElement.labeledBy = this.id
70
53
  this.targetElement.collapseMatches()
@@ -73,7 +56,7 @@ export default class ToggleTriggerElement extends ToggleElement {
73
56
  }
74
57
 
75
58
  // runs before an invoke turbo stream is executed
76
- onBeforeInvoke (event) {
59
+ onBeforeInvoke(event) {
77
60
  // return early if we're not the element responsible for this invoke
78
61
  if (event.detail.method !== 'morph') return
79
62
  if (event.target.id !== this.morphs) return
@@ -95,14 +78,11 @@ export default class ToggleTriggerElement extends ToggleElement {
95
78
  }, delay - 10)
96
79
 
97
80
  // runs after the morph is executed
98
- setTimeout(
99
- () => focus(this.targetElement.querySelector(currentFocusSelector)),
100
- delay + 100
101
- )
81
+ setTimeout(() => focus(this.targetElement.querySelector(currentFocusSelector)), delay + 100)
102
82
  }
103
83
 
104
84
  // a list of views shared between the trigger and target
105
- get sharedViews () {
85
+ get sharedViews() {
106
86
  if (!this.targetElement) return []
107
87
  if (!this.targetElement.viewStack) return []
108
88
  const reducer = (memo, view) => {
@@ -113,69 +93,125 @@ export default class ToggleTriggerElement extends ToggleElement {
113
93
  }
114
94
 
115
95
  // the partial to render
116
- get renders () {
96
+ get renders() {
117
97
  return this.getAttribute('renders')
118
98
  }
119
99
 
120
100
  // the renderered partial's top wrapping dom_id
121
- get morphs () {
101
+ get morphs() {
122
102
  return this.getAttribute('morphs')
123
103
  }
124
104
 
125
- // the morph element
126
- get morphElement () {
127
- if (!this.morphs) return null
128
- return document.getElementById(this.morphs)
129
- }
130
-
131
105
  // all toggle elements contained by the `morphElement`
132
- get morphToggleTriggerElements () {
133
- return Array.from(
134
- this.morphElement.querySelectorAll('turbo-boost-toggle-trigger')
135
- )
106
+ get morphToggleTriggerElements() {
107
+ return Array.from(this.morphElement.querySelectorAll('turbo-boost-toggle-trigger'))
136
108
  }
137
109
 
138
110
  // the target's dom_id
139
- get controls () {
111
+ get controls() {
140
112
  return this.getAttribute('aria-controls')
141
113
  }
142
114
 
143
- // the target element
144
- get targetElement () {
145
- if (!this.controls) return null
146
- return document.getElementById(this.controls)
147
- }
148
-
149
- get collapseSelector () {
115
+ get collapseSelector() {
150
116
  return this.getAttribute('collapse-selector')
151
117
  }
152
118
 
153
- get focusSelector () {
154
- return (
155
- this.getAttribute('focus-selector') || this.targetElement.focusSelector
156
- )
119
+ get focusSelector() {
120
+ return this.getAttribute('focus-selector') || this.targetElement.focusSelector
157
121
  }
158
122
 
159
123
  // indicates if the toggle state should be remembered across requests
160
- get remember () {
124
+ get remember() {
161
125
  return this.getAttribute('remember') === 'true'
162
126
  }
163
127
 
164
- set remember (value) {
128
+ set remember(value) {
165
129
  return this.setAttribute('remember', !!value)
166
130
  }
167
131
 
168
132
  // indicates if the target is expanded
169
- get expanded () {
133
+ get expanded() {
170
134
  return this.getAttribute('aria-expanded') === 'true'
171
135
  }
172
136
 
173
- set expanded (value) {
137
+ set expanded(value) {
174
138
  this.setAttribute('aria-expanded', !!value)
175
139
  }
176
140
 
177
141
  // indicates if the target is expanded
178
- get collapsed () {
142
+ get collapsed() {
179
143
  return !this.expanded
180
144
  }
145
+
146
+ // ------ DevToolDelegate ------
147
+ get command() {
148
+ return this.dataset.turboCommand
149
+ }
150
+
151
+ get renderingLineLabel() {
152
+ return 'renders & morphs'
153
+ }
154
+
155
+ // the morph element
156
+ get morphElement() {
157
+ if (!this.morphs) return null
158
+ return document.getElementById(this.morphs)
159
+ }
160
+
161
+ // the target element
162
+ get targetElement() {
163
+ if (!this.controls) return null
164
+ return document.getElementById(this.controls)
165
+ }
166
+
167
+ get triggerTooltipData() {
168
+ let content = this.triggerElement.viewStack
169
+ .reverse()
170
+ .map((view, index) => {
171
+ return this.triggerElement.sharedViews.includes(view)
172
+ ? `<div slot="content">${index + 1}. ${view}</div>`
173
+ : `<div slot="content-bottom">${index + 1}. ${view}</div>`
174
+ }, this)
175
+ .join('')
176
+
177
+ return {
178
+ subtitle: `
179
+ <b>id</b>: ${this.triggerElement.id}<br>
180
+ <b>aria-controls</b>: ${this.triggerElement.controls}<br>
181
+ <b>aria-expanded</b>: ${this.triggerElement.expanded}<br>
182
+ <b>remember</b>: ${this.triggerElement.remember}<br>
183
+ `,
184
+ content: `
185
+ <div slot="content-top">
186
+ <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
187
+ <b>View Stack</b>
188
+ </div>
189
+ ${content}
190
+ `
191
+ }
192
+ }
193
+
194
+ get targetTooltipData() {
195
+ let content = this.targetElement.viewStack
196
+ .reverse()
197
+ .map((view, index) => {
198
+ return this.triggerElement.sharedViews.includes(view)
199
+ ? `<div slot="content">${index + 1}. ${view}</div>`
200
+ : `<div slot="content-bottom">${index + 1}. ${view}</div>`
201
+ }, this)
202
+ .join('')
203
+
204
+ return {
205
+ subtitle: `<b>id</b>: ${this.targetElement.id}<br>
206
+ <b>aria-labeled-by</b>: ${this.targetElement.labeledBy}<br>
207
+ `,
208
+ content: `
209
+ <div slot="content-top">
210
+ <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
211
+ <b>View Stack</b>
212
+ </div>
213
+ ${content}
214
+ `
215
+ }
216
+ }
181
217
  }
@@ -1,37 +1,34 @@
1
1
  export default class TurboBoostElement extends HTMLElement {
2
- constructor (html) {
2
+ constructor(html) {
3
3
  super()
4
4
  this.devtool = 'unknown'
5
5
  this.attachShadow({ mode: 'open' })
6
6
  this.shadowRoot.innerHTML = html || '<slot></slot>'
7
7
  }
8
8
 
9
- connectedCallback () {
9
+ connectedCallback() {
10
10
  this.ensureId()
11
11
  }
12
12
 
13
- ensureId () {
13
+ ensureId() {
14
14
  if (this.id.trim().length) return
15
15
  this.id = `${this.tagName}-${this.uuidv4()}`.toLowerCase()
16
16
  }
17
17
 
18
18
  // SEE: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
19
- uuidv4 () {
19
+ uuidv4() {
20
20
  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
21
- (
22
- c ^
23
- (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
24
- ).toString(16)
21
+ (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
25
22
  )
26
23
  }
27
24
 
28
- get viewStack () {
25
+ get viewStack() {
29
26
  const value = this.getAttribute('view-stack')
30
27
  if (!value) return []
31
28
  return JSON.parse(value)
32
29
  }
33
30
 
34
- get partial () {
31
+ get partial() {
35
32
  return this.viewStack[0]
36
33
  }
37
34
  }
@@ -1,6 +1,6 @@
1
1
  import '@turbo-boost/commands'
2
+ import devtools from '@turbo-boost/devtools'
2
3
  import './elements'
3
- import devtools from './devtools'
4
4
 
5
5
  self.TurboBoost = self.TurboBoost || {}
6
6
  self.TurboBoost.devtools = devtools
@@ -2,6 +2,6 @@
2
2
 
3
3
  module TurboBoost
4
4
  module Elements
5
- VERSION = "0.0.14"
5
+ VERSION = "0.0.15"
6
6
  end
7
7
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: turbo_boost-elements
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.14
4
+ version: 0.0.15
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nate Hopkins (hopsoft)
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-02-09 00:00:00.000000000 Z
11
+ date: 2023-08-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -132,26 +132,20 @@ extra_rdoc_files: []
132
132
  files:
133
133
  - MIT-LICENSE
134
134
  - README.md
135
+ - app/assets/builds/@turbo-boost/commands.metafile.json
135
136
  - app/assets/builds/@turbo-boost/elements.js
136
137
  - app/assets/builds/@turbo-boost/elements.js.map
138
+ - app/assets/builds/@turbo-boost/elements.metafile.json
137
139
  - app/commands/turbo_boost/elements/application_command.rb
138
140
  - app/commands/turbo_boost/elements/toggle_command.rb
139
141
  - app/helpers/turbo_boost/elements/application_helper.rb
140
- - app/javascript/devtools/dependencies.js
141
- - app/javascript/devtools/elements/devtool_element.js
142
- - app/javascript/devtools/elements/supervisor_element.js
143
- - app/javascript/devtools/elements/tooltip_element.js
144
- - app/javascript/devtools/index.js
145
- - app/javascript/devtools/supervisor.js
146
142
  - app/javascript/elements/index.js
147
143
  - app/javascript/elements/toggle_elements/target_element/index.js
148
144
  - app/javascript/elements/toggle_elements/toggle_element/index.js
149
- - app/javascript/elements/toggle_elements/trigger_element/devtool.js
150
145
  - app/javascript/elements/toggle_elements/trigger_element/focus.js
151
146
  - app/javascript/elements/toggle_elements/trigger_element/index.js
152
147
  - app/javascript/elements/turbo_boost_element/index.js
153
148
  - app/javascript/index.js
154
- - app/javascript/utils/dom.js
155
149
  - lib/turbo_boost/elements.rb
156
150
  - lib/turbo_boost/elements/engine.rb
157
151
  - lib/turbo_boost/elements/tag_builders.rb
@@ -180,7 +174,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
180
174
  - !ruby/object:Gem::Version
181
175
  version: '0'
182
176
  requirements: []
183
- rubygems_version: 3.3.7
177
+ rubygems_version: 3.4.10
184
178
  signing_key:
185
179
  specification_version: 4
186
180
  summary: Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.
@@ -1,53 +0,0 @@
1
- const added = []
2
-
3
- const dependencies = {
4
- LeaderLine: {
5
- src:
6
- 'https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js',
7
- integrity:
8
- 'sha512-0dNdzMjpT6pJdFGF1DwybFCfm3K/lzHhxaMXC/92J9/DZujHlqYFqmhTOAoD0o+LkeEsVK2ar/ESs7/Q2B6wJg==',
9
- global: 'LeaderLine'
10
- },
11
-
12
- PlainDraggable: {
13
- src:
14
- 'https://cdn.jsdelivr.net/npm/plain-draggable@2.5.14/plain-draggable.min.js',
15
- global: 'PlainDraggable'
16
- }
17
- }
18
-
19
- function exists (dependency) {
20
- if (dependency.global && self[dependency.global]) return true
21
- if (document.querySelector(`[src='${dependency.src}']`)) return true
22
- return added.includes(dependency)
23
- }
24
-
25
- function add (dependency) {
26
- if (exists(dependency)) return
27
- added.push(dependency)
28
-
29
- const { src, integrity } = dependency
30
- const script = document.createElement('script')
31
- script.setAttribute('src', src)
32
- script.setAttribute('crossorigin', 'anonymous')
33
- script.setAttribute('referrerpolicy', 'no-referrer')
34
- if (integrity) script.setAttribute('integrity', integrity)
35
- document.head.appendChild(script)
36
- }
37
-
38
- function remove (dependency) {
39
- if (!added.includes(dependency)) return
40
- added.splice(added.indexOf(dependency), 1)
41
-
42
- const { src } = dependency
43
- const el = document.querySelector(`script[src='${src}']`)
44
- if (el) el.remove()
45
- if (dependency.global && self[dependency.global])
46
- self[dependency.global] = null
47
- }
48
-
49
- function removeAll () {
50
- ;[...added].forEach(dependency => remove(dependency))
51
- }
52
-
53
- export default { ...dependencies, add, remove, removeAll }