@jsenv/core 29.8.5 → 29.9.0
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.
- package/README.md +1 -1
- package/dist/babel_helpers/iterableToArrayLimit/iterableToArrayLimit.js +21 -5
- package/dist/babel_helpers/iterableToArrayLimitLoose/iterableToArrayLimitLoose.js +8 -6
- package/dist/js/autoreload.js +1 -1
- package/dist/js/s.js +22 -5
- package/dist/js/s.js.map +9 -7
- package/dist/main.js +50 -2085
- package/package.json +8 -8
- package/src/build/build.js +33 -33
- package/src/plugins/plugins.js +1 -1
- package/src/plugins/ribbon/jsenv_plugin_ribbon.js +6 -1
- package/src/plugins/url_resolution/jsenv_plugin_url_resolution.js +6 -2
- package/src/plugins/url_resolution/node_esm_resolver.js +6 -1
- package/dist/js/html_src_set.js +0 -20
- package/src/plugins/toolbar/client/animation/toolbar_animation.js +0 -39
- package/src/plugins/toolbar/client/eventsource/eventsource.css +0 -83
- package/src/plugins/toolbar/client/eventsource/toolbar_eventsource.js +0 -57
- package/src/plugins/toolbar/client/execution/execution.css +0 -79
- package/src/plugins/toolbar/client/execution/toolbar_execution.js +0 -88
- package/src/plugins/toolbar/client/focus/focus.css +0 -61
- package/src/plugins/toolbar/client/focus/toolbar_focus.js +0 -19
- package/src/plugins/toolbar/client/jsenv_logo.svg +0 -140
- package/src/plugins/toolbar/client/notification/toolbar_notification.js +0 -181
- package/src/plugins/toolbar/client/responsive/overflow_menu.css +0 -61
- package/src/plugins/toolbar/client/responsive/toolbar_responsive.js +0 -103
- package/src/plugins/toolbar/client/settings/settings.css +0 -201
- package/src/plugins/toolbar/client/settings/toolbar_settings.js +0 -47
- package/src/plugins/toolbar/client/theme/jsenv_theme.css +0 -77
- package/src/plugins/toolbar/client/theme/light_theme.css +0 -106
- package/src/plugins/toolbar/client/theme/toolbar_theme.js +0 -34
- package/src/plugins/toolbar/client/toolbar.html +0 -457
- package/src/plugins/toolbar/client/toolbar_injector.js +0 -218
- package/src/plugins/toolbar/client/toolbar_main.css +0 -172
- package/src/plugins/toolbar/client/toolbar_main.js +0 -197
- package/src/plugins/toolbar/client/tooltip/tooltip.css +0 -61
- package/src/plugins/toolbar/client/tooltip/tooltip.js +0 -39
- package/src/plugins/toolbar/client/util/animation.js +0 -305
- package/src/plugins/toolbar/client/util/dom.js +0 -108
- package/src/plugins/toolbar/client/util/fetch_using_xhr.js +0 -400
- package/src/plugins/toolbar/client/util/fetching.js +0 -14
- package/src/plugins/toolbar/client/util/iframe_to_parent_href.js +0 -10
- package/src/plugins/toolbar/client/util/jsenv_logger.js +0 -28
- package/src/plugins/toolbar/client/util/preferences.js +0 -10
- package/src/plugins/toolbar/client/util/responsive.js +0 -112
- package/src/plugins/toolbar/client/util/util.js +0 -19
- package/src/plugins/toolbar/client/variant/variant.js +0 -74
- package/src/plugins/toolbar/jsenv_plugin_toolbar.js +0 -62
|
@@ -1,457 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Jsenv toolbar</title>
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
-
<meta charset="utf-8" />
|
|
7
|
-
<link rel="icon" href="data:," />
|
|
8
|
-
<link
|
|
9
|
-
rel="stylesheet"
|
|
10
|
-
type="text/css"
|
|
11
|
-
href="./toolbar_main.css"
|
|
12
|
-
data-jsenv-force-inline
|
|
13
|
-
/>
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
<div id="toolbar-overlay"></div>
|
|
17
|
-
<!-- toolbar -->
|
|
18
|
-
<div id="toolbar">
|
|
19
|
-
<div id="toolbar-wrapper">
|
|
20
|
-
<section id="file-list-link" data-responsive-toolbar-element>
|
|
21
|
-
<a class="toolbar-icon-wrapper" href="javascript:void(0);">
|
|
22
|
-
<svg
|
|
23
|
-
id="fileIconSvg"
|
|
24
|
-
class="iconToolbar"
|
|
25
|
-
viewBox="0 0 24 24"
|
|
26
|
-
width="35"
|
|
27
|
-
height="35"
|
|
28
|
-
>
|
|
29
|
-
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
30
|
-
<path
|
|
31
|
-
d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"
|
|
32
|
-
/>
|
|
33
|
-
</svg>
|
|
34
|
-
</a>
|
|
35
|
-
</section>
|
|
36
|
-
|
|
37
|
-
<section id="execution-indicator">
|
|
38
|
-
<div data-when="execution:default">
|
|
39
|
-
<div class="tooltip">Unknown state</div>
|
|
40
|
-
</div>
|
|
41
|
-
<div data-when="execution:running">
|
|
42
|
-
<div class="tooltip">Executing...</div>
|
|
43
|
-
<button>
|
|
44
|
-
<svg id="loader-icon" data-animate>
|
|
45
|
-
<use xlink:href="#loading_svg"></use>
|
|
46
|
-
</svg>
|
|
47
|
-
</button>
|
|
48
|
-
</div>
|
|
49
|
-
<div data-when="execution:completed">
|
|
50
|
-
<div class="tooltip">Execution completed in X ms</div>
|
|
51
|
-
<button>
|
|
52
|
-
<svg id="check-icon" data-animate viewBox="0 0 52 52">
|
|
53
|
-
<path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
|
|
54
|
-
</svg>
|
|
55
|
-
</button>
|
|
56
|
-
</div>
|
|
57
|
-
<div data-when="execution:errored">
|
|
58
|
-
<div class="tooltip">Execution failed in X ms</div>
|
|
59
|
-
<button>
|
|
60
|
-
<svg id="cross-icon" data-animate viewBox="0 0 512 512">
|
|
61
|
-
<rect
|
|
62
|
-
id="cross_p1"
|
|
63
|
-
x="239.397"
|
|
64
|
-
y="67.518"
|
|
65
|
-
rx="17"
|
|
66
|
-
ry="17"
|
|
67
|
-
transform="matrix(0.7071 0.7071 -0.7071 0.7071 255.9995 -106.0389)"
|
|
68
|
-
/>
|
|
69
|
-
<rect
|
|
70
|
-
id="cross_p2"
|
|
71
|
-
x="239.397"
|
|
72
|
-
y="67.519"
|
|
73
|
-
rx="17"
|
|
74
|
-
ry="17"
|
|
75
|
-
transform="matrix(0.7071 -0.7071 0.7071 0.7071 -106.039 256.0001)"
|
|
76
|
-
/>
|
|
77
|
-
</svg>
|
|
78
|
-
</button>
|
|
79
|
-
</div>
|
|
80
|
-
</section>
|
|
81
|
-
|
|
82
|
-
<section id="changes-indicator" data-when="autoreload:off">
|
|
83
|
-
<div data-when="changes:no"></div>
|
|
84
|
-
<div data-when="changes:yes">
|
|
85
|
-
<div class="tooltip">There is X changes to apply</div>
|
|
86
|
-
<button>
|
|
87
|
-
<svg>
|
|
88
|
-
<circle class="eventsource-circle" cx="20" cy="20" r="5" />
|
|
89
|
-
</svg>
|
|
90
|
-
<span>X</span>
|
|
91
|
-
</button>
|
|
92
|
-
</div>
|
|
93
|
-
</section>
|
|
94
|
-
|
|
95
|
-
<div style="width: 100%"></div>
|
|
96
|
-
|
|
97
|
-
<section id="eventsource-indicator" data-responsive-toolbar-element>
|
|
98
|
-
<div data-when="eventsource:default">
|
|
99
|
-
<div class="tooltip">Unknown state</div>
|
|
100
|
-
<button>
|
|
101
|
-
<svg>
|
|
102
|
-
<circle class="eventsource-circle" cx="20" cy="20" r="5" />
|
|
103
|
-
</svg>
|
|
104
|
-
</button>
|
|
105
|
-
</div>
|
|
106
|
-
<div data-when="eventsource:connecting">
|
|
107
|
-
<div class="tooltip">
|
|
108
|
-
Connecting to server...
|
|
109
|
-
<br />
|
|
110
|
-
<div class="tooltipAction">
|
|
111
|
-
<a href="javascript:void(0);">
|
|
112
|
-
<svg
|
|
113
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
114
|
-
id="powerOffIconSvg"
|
|
115
|
-
class="tooltipIcon"
|
|
116
|
-
viewBox="0 0 24 24"
|
|
117
|
-
>
|
|
118
|
-
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
119
|
-
<path
|
|
120
|
-
d="M10 3H8v1.88l2 2zm6 6v3.88l1.8 1.8.2-.2V9c0-1.1-.9-2-2-2V3h-2v4h-3.88l2 2H16zM4.12 3.84L2.71 5.25 6 8.54v5.96L9.5 18v3h5v-3l.48-.48 4.47 4.47 1.41-1.41L4.12 3.84zm8.38 13.33V19h-1v-1.83L8 13.65v-3.11l5.57 5.57-1.07 1.06z"
|
|
121
|
-
/>
|
|
122
|
-
</svg>
|
|
123
|
-
cancel
|
|
124
|
-
</a>
|
|
125
|
-
</div>
|
|
126
|
-
</div>
|
|
127
|
-
<button>
|
|
128
|
-
<svg>
|
|
129
|
-
<circle
|
|
130
|
-
class="eventsource-circle"
|
|
131
|
-
data-variant="connecting"
|
|
132
|
-
cx="20"
|
|
133
|
-
cy="20"
|
|
134
|
-
r="5"
|
|
135
|
-
/>
|
|
136
|
-
<circle class="eventsource-ring" cx="20" cy="20" r="13" />
|
|
137
|
-
</svg>
|
|
138
|
-
</button>
|
|
139
|
-
</div>
|
|
140
|
-
<div data-when="eventsource:disconnected">
|
|
141
|
-
<div class="tooltip">
|
|
142
|
-
Disconnected from server
|
|
143
|
-
<br />
|
|
144
|
-
<div class="tooltipAction">
|
|
145
|
-
<a href="javascript:void(0);">
|
|
146
|
-
<svg
|
|
147
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
148
|
-
viewBox="0 0 24 24"
|
|
149
|
-
id="powerIconSvg"
|
|
150
|
-
class="tooltipIcon"
|
|
151
|
-
>
|
|
152
|
-
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
153
|
-
<path
|
|
154
|
-
d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
|
|
155
|
-
/>
|
|
156
|
-
</svg>
|
|
157
|
-
connect
|
|
158
|
-
</a>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
<button>
|
|
162
|
-
<svg>
|
|
163
|
-
<circle
|
|
164
|
-
class="eventsource-circle"
|
|
165
|
-
data-variant="off"
|
|
166
|
-
cx="20"
|
|
167
|
-
cy="20"
|
|
168
|
-
r="5"
|
|
169
|
-
/>
|
|
170
|
-
</svg>
|
|
171
|
-
</button>
|
|
172
|
-
</div>
|
|
173
|
-
<div data-when="eventsource:connected">
|
|
174
|
-
<div class="tooltip">Connected to server</div>
|
|
175
|
-
<button>
|
|
176
|
-
<svg
|
|
177
|
-
class="event-source-autoreload iconToolbar"
|
|
178
|
-
data-variant="enabled"
|
|
179
|
-
>
|
|
180
|
-
<use xlink:href="#loading_svg"></use>
|
|
181
|
-
</svg>
|
|
182
|
-
<svg class="event-source-icon">
|
|
183
|
-
<circle
|
|
184
|
-
class="eventsource-circle"
|
|
185
|
-
data-variant="connected"
|
|
186
|
-
cx="20"
|
|
187
|
-
cy="20"
|
|
188
|
-
r="5"
|
|
189
|
-
/>
|
|
190
|
-
</svg>
|
|
191
|
-
</button>
|
|
192
|
-
</div>
|
|
193
|
-
</section>
|
|
194
|
-
|
|
195
|
-
<section id="settings" data-responsive-toolbar-element>
|
|
196
|
-
<div id="settings-box">
|
|
197
|
-
<div id="settings-box-header">
|
|
198
|
-
<button id="button-close-settings">
|
|
199
|
-
<svg
|
|
200
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
201
|
-
viewBox="0 0 24 24"
|
|
202
|
-
width="18px"
|
|
203
|
-
height="18px"
|
|
204
|
-
>
|
|
205
|
-
<path
|
|
206
|
-
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
|
207
|
-
/>
|
|
208
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
209
|
-
</svg>
|
|
210
|
-
</button>
|
|
211
|
-
<svg
|
|
212
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
213
|
-
viewBox="0 0 24 24"
|
|
214
|
-
width="35px"
|
|
215
|
-
height="35px"
|
|
216
|
-
class="settings-icon"
|
|
217
|
-
>
|
|
218
|
-
<path
|
|
219
|
-
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
|
|
220
|
-
/>
|
|
221
|
-
</svg>
|
|
222
|
-
<h3>Settings</h3>
|
|
223
|
-
</div>
|
|
224
|
-
<div id="settings-box-body">
|
|
225
|
-
<div class="settings-box-items-wrapper">
|
|
226
|
-
<div class="settings-box-item settings-autoreload">
|
|
227
|
-
<div class="category-title">
|
|
228
|
-
<svg width="20px" height="20px">
|
|
229
|
-
<use xlink:href="#loading_svg"></use>
|
|
230
|
-
</svg>
|
|
231
|
-
<span>Autoreload</span>
|
|
232
|
-
</div>
|
|
233
|
-
<label class="switch" data-contains-hidden-input>
|
|
234
|
-
<input id="toggle-autoreload" type="checkbox" />
|
|
235
|
-
<div>
|
|
236
|
-
<div class="slider"></div>
|
|
237
|
-
<div class="square"></div>
|
|
238
|
-
</div>
|
|
239
|
-
</label>
|
|
240
|
-
<div class="category-subtitle">
|
|
241
|
-
Auto reload when a file is modified, deleted or created.
|
|
242
|
-
</div>
|
|
243
|
-
</div>
|
|
244
|
-
<div class="settings-box-item settings-notification">
|
|
245
|
-
<div class="category-title">
|
|
246
|
-
<svg
|
|
247
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
248
|
-
viewBox="0 0 24 24"
|
|
249
|
-
width="20px"
|
|
250
|
-
height="20px"
|
|
251
|
-
>
|
|
252
|
-
<path
|
|
253
|
-
d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
|
|
254
|
-
/>
|
|
255
|
-
</svg>
|
|
256
|
-
Notifications
|
|
257
|
-
</div>
|
|
258
|
-
<label class="switch" data-contains-hidden-input>
|
|
259
|
-
<input id="toggle-notifs" type="checkbox" />
|
|
260
|
-
<div>
|
|
261
|
-
<div class="slider"></div>
|
|
262
|
-
<div class="square"></div>
|
|
263
|
-
</div>
|
|
264
|
-
</label>
|
|
265
|
-
<div class="category-subtitle">
|
|
266
|
-
Send system notification when execution fails or is fixed.
|
|
267
|
-
<div class="notification-text">
|
|
268
|
-
<a
|
|
269
|
-
data-when="notif_granted:no"
|
|
270
|
-
class="request_notification_permission"
|
|
271
|
-
href="javascript:void(0);"
|
|
272
|
-
>Enable notification</a
|
|
273
|
-
>
|
|
274
|
-
</div>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
277
|
-
|
|
278
|
-
<div class="settings-box-item">
|
|
279
|
-
<div class="category-title">
|
|
280
|
-
<svg
|
|
281
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
282
|
-
viewBox="0 0 24 24"
|
|
283
|
-
width="20px"
|
|
284
|
-
height="20px"
|
|
285
|
-
>
|
|
286
|
-
<path
|
|
287
|
-
d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"
|
|
288
|
-
/>
|
|
289
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
290
|
-
</svg>
|
|
291
|
-
Animations
|
|
292
|
-
</div>
|
|
293
|
-
<label class="switch" data-contains-hidden-input>
|
|
294
|
-
<input id="toggle-anims" type="checkbox" />
|
|
295
|
-
<div>
|
|
296
|
-
<div class="slider"></div>
|
|
297
|
-
<div class="square"></div>
|
|
298
|
-
</div>
|
|
299
|
-
</label>
|
|
300
|
-
<div class="category-subtitle">
|
|
301
|
-
Play toolbar animations and transitions.
|
|
302
|
-
</div>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="settings-box-item">
|
|
305
|
-
<div class="category-title">
|
|
306
|
-
<svg
|
|
307
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
308
|
-
viewBox="0 0 24 24"
|
|
309
|
-
width="20px"
|
|
310
|
-
height="20px"
|
|
311
|
-
id="paletteIconSvg"
|
|
312
|
-
>
|
|
313
|
-
<path
|
|
314
|
-
d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
|
|
315
|
-
/>
|
|
316
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
317
|
-
</svg>
|
|
318
|
-
Dark mode
|
|
319
|
-
</div>
|
|
320
|
-
<label class="switch" data-contains-hidden-input>
|
|
321
|
-
<input id="checkbox-dark-theme" type="checkbox" />
|
|
322
|
-
<div>
|
|
323
|
-
<div class="slider"></div>
|
|
324
|
-
<div class="square"></div>
|
|
325
|
-
</div>
|
|
326
|
-
</label>
|
|
327
|
-
<div class="category-subtitle">
|
|
328
|
-
Choose between light and dark theme for jsenv toolbar.
|
|
329
|
-
</div>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
</div>
|
|
333
|
-
</div>
|
|
334
|
-
<button id="settings-button" class="toolbar-icon-wrapper">
|
|
335
|
-
<div data-when="has_warning:yes">
|
|
336
|
-
<svg
|
|
337
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
338
|
-
viewBox="0 0 45.818 45.818"
|
|
339
|
-
width="20px"
|
|
340
|
-
height="20px"
|
|
341
|
-
class="iconToolbar"
|
|
342
|
-
style="transform: rotate(180deg)"
|
|
343
|
-
>
|
|
344
|
-
<path
|
|
345
|
-
d="M22.909,0C10.258,0,0,10.257,0,22.908c0,12.652,10.258,22.91,22.909,22.91s22.909-10.258,22.909-22.91
|
|
346
|
-
C45.818,10.257,35.561,0,22.909,0z M26.411,35.417c0,1.921-1.573,3.478-3.492,3.478c-1.92,0-3.492-1.557-3.492-3.478V20.201
|
|
347
|
-
c0-1.92,1.572-3.477,3.492-3.477c1.919,0,3.492,1.556,3.492,3.477V35.417z M22.909,13.851c-2.119,0-3.837-1.718-3.837-3.836
|
|
348
|
-
c0-2.12,1.718-3.836,3.837-3.836c2.118,0,3.837,1.716,3.837,3.836C26.746,12.133,25.027,13.851,22.909,13.851z"
|
|
349
|
-
/>
|
|
350
|
-
</svg>
|
|
351
|
-
</div>
|
|
352
|
-
<div data-when="has_warning:no">
|
|
353
|
-
<svg
|
|
354
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
355
|
-
viewBox="0 0 24 24"
|
|
356
|
-
width="24px"
|
|
357
|
-
height="24px"
|
|
358
|
-
class="iconToolbar"
|
|
359
|
-
>
|
|
360
|
-
<path
|
|
361
|
-
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
|
|
362
|
-
/>
|
|
363
|
-
</svg>
|
|
364
|
-
</div>
|
|
365
|
-
</button>
|
|
366
|
-
</section>
|
|
367
|
-
|
|
368
|
-
<section id="close" data-responsive-toolbar-element>
|
|
369
|
-
<button id="button-close-toolbar">
|
|
370
|
-
<div class="toolbar-icon-wrapper">
|
|
371
|
-
<svg
|
|
372
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
373
|
-
viewBox="0 0 24 24"
|
|
374
|
-
id="crossIconSvg"
|
|
375
|
-
class="iconToolbar"
|
|
376
|
-
width="35px"
|
|
377
|
-
height="35px"
|
|
378
|
-
>
|
|
379
|
-
<path
|
|
380
|
-
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
|
381
|
-
/>
|
|
382
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
383
|
-
</svg>
|
|
384
|
-
</div>
|
|
385
|
-
</button>
|
|
386
|
-
</section>
|
|
387
|
-
</div>
|
|
388
|
-
|
|
389
|
-
<div id="overflow-menu">
|
|
390
|
-
<div style="width: 100%"></div>
|
|
391
|
-
</div>
|
|
392
|
-
|
|
393
|
-
<div id="overflow-menu-button">
|
|
394
|
-
<button class="toolbar-icon-wrapper">
|
|
395
|
-
<svg
|
|
396
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
397
|
-
viewBox="0 0 24 24"
|
|
398
|
-
width="35px"
|
|
399
|
-
height="35px"
|
|
400
|
-
id="dotsIconSvg"
|
|
401
|
-
class="iconToolbar"
|
|
402
|
-
>
|
|
403
|
-
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
404
|
-
<path
|
|
405
|
-
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
|
406
|
-
/>
|
|
407
|
-
</svg>
|
|
408
|
-
</button>
|
|
409
|
-
</div>
|
|
410
|
-
</div>
|
|
411
|
-
|
|
412
|
-
<!-- svg filter
|
|
413
|
-
must not be hidden or won't show in firefox)
|
|
414
|
-
see also:
|
|
415
|
-
https://codepen.io/tigt/post/fixing-the-white-glow-in-the-css-blur-filter
|
|
416
|
-
https://stackoverflow.com/questions/46906819/edge-detection-in-svg-filter
|
|
417
|
-
https://github.com/msurguy/background-blur/issues/5
|
|
418
|
-
https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/
|
|
419
|
-
-->
|
|
420
|
-
<svg width="0" height="0">
|
|
421
|
-
<defs>
|
|
422
|
-
<filter id="better-blur" x="0" y="0" width="1" height="1">
|
|
423
|
-
<feGaussianBlur stdDeviation="5" result="blurred" />
|
|
424
|
-
|
|
425
|
-
<feMerge>
|
|
426
|
-
<feMergeNode in="SourceGraphic" />
|
|
427
|
-
<feMergeNode in="blurred" />
|
|
428
|
-
</feMerge>
|
|
429
|
-
</filter>
|
|
430
|
-
</defs>
|
|
431
|
-
</svg>
|
|
432
|
-
|
|
433
|
-
<!--
|
|
434
|
-
Reusable svg(s)
|
|
435
|
-
-->
|
|
436
|
-
<div style="display: none; position: absolute">
|
|
437
|
-
<svg
|
|
438
|
-
id="loading_svg"
|
|
439
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
440
|
-
viewBox="0 0 430 430"
|
|
441
|
-
>
|
|
442
|
-
<path
|
|
443
|
-
fill="currentColor"
|
|
444
|
-
d="m32.118 204.979.302 5.179c.124 3.4.638 8.29 1.434 14.48l.786 4.882.421 2.617c.154.89.376 1.789.558 2.712l1.197 5.75c.444 1.981 1.027 4.008 1.56 6.112 2.274 8.378 5.328 17.708 9.758 27.396a180.713 180.713 0 0 0 17.062 29.673 178.57 178.57 0 0 0 25.102 28.499c9.702 8.888 20.652 17.025 32.581 23.85a180.596 180.596 0 0 0 38.159 16.203c13.357 3.824 27.155 5.896 40.737 6.35l2.541.113 2.542-.017c1.689-.012 3.376-.142 5.059-.152l1.259-.126h.157c-.466 0-.034.113-.096.111l.329.039.657-.012 2.625-.138c1.748-.094 3.492-.181 5.229-.274l2.599-.14 2.399-.292c1.596-.203 3.188-.354 4.772-.526 3.147-.236 6.372-.888 9.541-1.397a213.826 213.826 0 0 0 35.916-9.232 622.925 622.925 0 0 1 8.182-3.142c2.655-1.114 5.222-2.329 7.782-3.459 2.6-1.056 4.984-2.43 7.407-3.636l3.584-1.832c1.189-.598 2.295-1.31 3.432-1.949 2.248-1.316 4.477-2.577 6.623-3.866l6.146-4.011c2.042-1.258 3.901-2.66 5.735-3.997 1.822-1.352 3.646-2.613 5.355-3.907l4.843-3.918c1.569-1.258 3.121-2.439 4.471-3.723l4.031-3.563c1.288-1.139 2.548-2.204 3.621-3.327 2.193-2.203 4.225-4.131 5.979-5.831 1.697-1.744 3.063-3.304 4.243-4.516l3.588-3.767.026-.028a.855.855 0 0 1 1.37.997s-.868 1.598-2.574 4.574c-.854 1.488-1.885 3.349-3.214 5.459-1.387 2.064-2.967 4.465-4.816 7.108-.887 1.355-1.955 2.669-3.051 4.075l-3.46 4.412c-1.185 1.56-2.571 3.036-3.979 4.607a11889.58 11889.58 0 0 1-4.424 4.853c-1.572 1.628-3.282 3.218-5.018 4.893-1.745 1.662-3.502 3.432-5.49 5.023l-6.021 5.047c-2.111 1.653-4.363 3.226-6.623 4.899-9.169 6.472-19.718 12.805-31.671 17.869-11.917 5.107-25.137 9.123-39.146 11.367-3.516.507-7.004 1.114-10.719 1.336-1.834.148-3.674.319-5.521.438l-2.773.192-2.611.027-5.237.045-2.63.012-1.585-.006-1.378-.074-5.521-.302-2.766-.157-2.764-.29a202.304 202.304 0 0 1-43.748-9.26 193.358 193.358 0 0 1-40.221-18.991c-12.467-7.743-23.632-16.999-33.41-26.861-9.758-9.893-18.135-20.455-24.833-31.222a187.62 187.62 0 0 1-15.97-31.794c-4.006-10.258-6.601-20.021-8.441-28.721-1.917-8.698-2.688-16.429-3.245-22.764-.396-6.374-.584-11.386-.485-14.752l.04-5.188a.85.85 0 0 1 .857-.844.86.86 0 0 1 .844.805zM393.625 225.021l-.297-4.979-.162-2.716-.093-1.565-.182-1.679c-.269-2.323-.534-4.99-.906-7.966l-.763-4.693-.408-2.516a34.227 34.227 0 0 0-.487-2.616c-.778-3.54-1.458-7.393-2.614-11.413l-.812-3.075a41.978 41.978 0 0 0-.908-3.147l-2.071-6.509c-1.604-4.392-3.258-9.013-5.353-13.684a178.146 178.146 0 0 0-15.844-28.827c-6.541-9.647-14.329-19.197-23.385-28.038l-1.683-1.677-1.766-1.605c-1.182-1.068-2.366-2.142-3.557-3.218-1.163-1.104-2.449-2.08-3.686-3.116l-3.75-3.083c-1.3-.972-2.604-1.946-3.91-2.924-1.324-.953-2.58-2.003-3.953-2.902l-4.075-2.768-2.042-1.389-2.112-1.291a179.101 179.101 0 0 0-35.961-17.193c-12.643-4.307-25.78-6.991-38.788-8.151-1.628-.128-3.24-.356-4.867-.403l-4.858-.205c-3.224-.204-6.444-.09-9.634-.125l-2.151-.002-2.495.128c-1.66.095-3.316.141-4.966.211l-2.47.097c-.809.042-1.532.143-2.3.21l-4.522.438c-2.979.166-6.046.719-9.053 1.084-3.023.336-5.975.917-8.906 1.449-1.462.28-2.93.501-4.374.794l-4.282.989-4.245.947c-1.396.353-2.766.767-4.137 1.143-2.735.781-5.465 1.47-8.073 2.398l-3.917 1.296c-1.3.42-2.588.844-3.827 1.363l-7.408 2.85a564.405 564.405 0 0 1-7.01 3.092c-1.163.477-2.267 1.042-3.361 1.598l-3.263 1.627-3.206 1.579a4807.3 4807.3 0 0 1-3.039 1.706c-1.992 1.14-4.003 2.158-5.868 3.29a478.807 478.807 0 0 1-5.419 3.344c-1.792 1.037-3.405 2.208-5.008 3.287l-4.64 3.135-7.955 5.898c-2.294 1.916-4.409 3.579-6.239 5.05-.934.718-1.729 1.45-2.471 2.111l-2.044 1.782-3.793 3.262-.025.022a.857.857 0 0 1-1.27-1.123s.969-1.457 2.861-4.161c.957-1.342 2.071-3.069 3.577-4.928 1.497-1.867 3.207-4.042 5.195-6.425a711.243 711.243 0 0 1 6.954-7.583l4.222-4.055c1.466-1.404 2.982-2.873 4.665-4.248a492.728 492.728 0 0 1 5.158-4.347c1.799-1.46 3.737-2.85 5.699-4.323l3.003-2.214 3.188-2.104a4521.47 4521.47 0 0 0 3.282-2.14c1.107-.723 2.227-1.456 3.411-2.104 9.235-5.625 19.942-10.626 31.724-14.697 1.475-.504 2.951-1.046 4.456-1.527a9356.8 9356.8 0 0 0 4.587-1.314l4.658-1.299c1.57-.402 3.17-.716 4.772-1.065l4.839-1.029a26.288 26.288 0 0 1 2.454-.433l2.478-.368c3.322-.481 6.616-1.035 10.133-1.254l5.236-.383c.866-.054 1.775-.143 2.61-.166l2.472-.042c1.65-.022 3.307-.069 4.97-.067l2.497-.011c-.163.003.397-.005.4-.001l.164.008.327.015.655.031 1.311.062c3.497.194 7.019.236 10.533.702l5.285.567c1.767.169 3.518.523 5.28.778a200.938 200.938 0 0 1 41.516 11.19 191.734 191.734 0 0 1 37.788 20.016l2.192 1.471 2.117 1.569 4.215 3.127c2.768 2.124 5.406 4.386 8.06 6.582l3.813 3.468c1.254 1.164 2.556 2.267 3.731 3.496l3.587 3.591 1.775 1.789 1.689 1.859c9.061 9.819 16.775 20.217 23.014 30.685a185.353 185.353 0 0 1 14.763 30.855c1.899 4.94 3.31 9.814 4.67 14.425l1.712 6.814c.297 1.098.526 2.196.731 3.282l.636 3.2c.923 4.179 1.378 8.165 1.943 11.813.151.911.247 1.811.318 2.695l.24 2.587.445 4.814c.173 3.065.257 5.808.365 8.183l.066 1.714-.015 1.567-.024 2.721-.045 4.987a.85.85 0 0 1-.857.843.852.852 0 0 1-.837-.8z"
|
|
445
|
-
/>
|
|
446
|
-
<circle fill="currentColor" cx="70.536" cy="110.694" r="36.011" />
|
|
447
|
-
<circle fill="currentColor" cx="362.721" cy="309.694" r="36.012" />
|
|
448
|
-
</svg>
|
|
449
|
-
</div>
|
|
450
|
-
<script
|
|
451
|
-
type="module"
|
|
452
|
-
src="./toolbar_main.js"
|
|
453
|
-
data-jsenv-force-inline
|
|
454
|
-
no-html-supervisor
|
|
455
|
-
></script>
|
|
456
|
-
</body>
|
|
457
|
-
</html>
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
import { setAttributes, setStyles } from "./util/dom.js"
|
|
2
|
-
|
|
3
|
-
const jsenvLogoSvgUrl = new URL("./jsenv_logo.svg", import.meta.url)
|
|
4
|
-
|
|
5
|
-
export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
|
|
6
|
-
if (document.readyState !== "complete") {
|
|
7
|
-
await new Promise((resolve) => {
|
|
8
|
-
window.addEventListener("load", resolve)
|
|
9
|
-
})
|
|
10
|
-
}
|
|
11
|
-
await new Promise((resolve) => {
|
|
12
|
-
if (window.requestIdleCallback) {
|
|
13
|
-
window.requestIdleCallback(resolve, { timeout: 400 })
|
|
14
|
-
} else {
|
|
15
|
-
window.requestAnimationFrame(resolve)
|
|
16
|
-
}
|
|
17
|
-
})
|
|
18
|
-
const placeholder = getToolbarPlaceholder()
|
|
19
|
-
|
|
20
|
-
const iframe = document.createElement("iframe")
|
|
21
|
-
setAttributes(iframe, {
|
|
22
|
-
tabindex: -1,
|
|
23
|
-
// sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
|
|
24
|
-
// allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
|
|
25
|
-
allowtransparency: true,
|
|
26
|
-
})
|
|
27
|
-
setStyles(iframe, {
|
|
28
|
-
"position": "fixed",
|
|
29
|
-
"zIndex": 1000,
|
|
30
|
-
"bottom": 0,
|
|
31
|
-
"left": 0,
|
|
32
|
-
"width": "100%",
|
|
33
|
-
"height": 0,
|
|
34
|
-
/* ensure toolbar children are not focusable when hidden */
|
|
35
|
-
"visibility": "hidden",
|
|
36
|
-
"transition-duration": "300ms",
|
|
37
|
-
"transition-property": "height, visibility",
|
|
38
|
-
"border": "none",
|
|
39
|
-
})
|
|
40
|
-
const iframeLoadedPromise = iframeToLoadedPromise(iframe)
|
|
41
|
-
// set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
|
|
42
|
-
iframe.setAttribute("src", toolbarUrl)
|
|
43
|
-
placeholder.parentNode.replaceChild(iframe, placeholder)
|
|
44
|
-
|
|
45
|
-
addToolbarEventCallback(iframe, "toolbar_ready", () => {
|
|
46
|
-
sendCommandToToolbar(iframe, "renderToolbar", { logs })
|
|
47
|
-
})
|
|
48
|
-
|
|
49
|
-
await iframeLoadedPromise
|
|
50
|
-
iframe.removeAttribute("tabindex")
|
|
51
|
-
|
|
52
|
-
const div = document.createElement("div")
|
|
53
|
-
div.innerHTML = `
|
|
54
|
-
<div id="jsenv-toolbar-trigger">
|
|
55
|
-
<svg id="jsenv-toolbar-trigger-icon">
|
|
56
|
-
<use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
|
|
57
|
-
</svg>
|
|
58
|
-
<style>
|
|
59
|
-
#jsenv-toolbar-trigger {
|
|
60
|
-
display: block;
|
|
61
|
-
overflow: hidden;
|
|
62
|
-
position: fixed;
|
|
63
|
-
z-index: 1000;
|
|
64
|
-
bottom: -32px;
|
|
65
|
-
right: 20px;
|
|
66
|
-
height: 40px;
|
|
67
|
-
width: 40px;
|
|
68
|
-
padding: 0;
|
|
69
|
-
margin: 0;
|
|
70
|
-
border-radius: 5px 5px 0 0;
|
|
71
|
-
border: 1px solid rgba(0, 0, 0, 0.33);
|
|
72
|
-
border-bottom: none;
|
|
73
|
-
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
|
|
74
|
-
background: transparent;
|
|
75
|
-
text-align: center;
|
|
76
|
-
transition: 600ms;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
#jsenv-toolbar-trigger:hover {
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
#jsenv-toolbar-trigger[data-expanded] {
|
|
84
|
-
bottom: 0;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
#jsenv-toolbar-trigger-icon {
|
|
88
|
-
width: 35px;
|
|
89
|
-
height: 35px;
|
|
90
|
-
opacity: 0;
|
|
91
|
-
transition: 600ms;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
#jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {
|
|
95
|
-
opacity: 1;
|
|
96
|
-
}
|
|
97
|
-
</style>
|
|
98
|
-
</div>`
|
|
99
|
-
const toolbarTrigger = div.firstElementChild
|
|
100
|
-
iframe.parentNode.appendChild(toolbarTrigger)
|
|
101
|
-
|
|
102
|
-
let timer
|
|
103
|
-
toolbarTrigger.onmouseenter = () => {
|
|
104
|
-
toolbarTrigger.setAttribute("data-animate", "")
|
|
105
|
-
timer = setTimeout(expandToolbarTrigger, 500)
|
|
106
|
-
}
|
|
107
|
-
toolbarTrigger.onmouseleave = () => {
|
|
108
|
-
clearTimeout(timer)
|
|
109
|
-
collapseToolbarTrigger()
|
|
110
|
-
}
|
|
111
|
-
toolbarTrigger.onfocus = () => {
|
|
112
|
-
toolbarTrigger.removeAttribute("data-animate")
|
|
113
|
-
expandToolbarTrigger()
|
|
114
|
-
}
|
|
115
|
-
toolbarTrigger.onblur = () => {
|
|
116
|
-
toolbarTrigger.removeAttribute("data-animate")
|
|
117
|
-
clearTimeout(timer)
|
|
118
|
-
collapseToolbarTrigger()
|
|
119
|
-
}
|
|
120
|
-
toolbarTrigger.onclick = () => {
|
|
121
|
-
sendCommandToToolbar(iframe, "showToolbar")
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
const showToolbarTrigger = () => {
|
|
125
|
-
toolbarTrigger.style.display = "block"
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
const hideToolbarTrigger = () => {
|
|
129
|
-
toolbarTrigger.style.display = "none"
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
const expandToolbarTrigger = () => {
|
|
133
|
-
toolbarTrigger.setAttribute("data-expanded", "")
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
const collapseToolbarTrigger = () => {
|
|
137
|
-
toolbarTrigger.removeAttribute("data-expanded", "")
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
hideToolbarTrigger()
|
|
141
|
-
addToolbarEventCallback(iframe, "toolbar-visibility-change", (visible) => {
|
|
142
|
-
if (visible) {
|
|
143
|
-
hideToolbarTrigger()
|
|
144
|
-
} else {
|
|
145
|
-
showToolbarTrigger()
|
|
146
|
-
}
|
|
147
|
-
})
|
|
148
|
-
|
|
149
|
-
return iframe
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
const addToolbarEventCallback = (iframe, eventName, callback) => {
|
|
153
|
-
const messageEventCallback = (messageEvent) => {
|
|
154
|
-
const { data } = messageEvent
|
|
155
|
-
if (typeof data !== "object") {
|
|
156
|
-
return
|
|
157
|
-
}
|
|
158
|
-
const { __jsenv__ } = data
|
|
159
|
-
if (!__jsenv__) {
|
|
160
|
-
return
|
|
161
|
-
}
|
|
162
|
-
if (__jsenv__.event !== eventName) {
|
|
163
|
-
return
|
|
164
|
-
}
|
|
165
|
-
callback(__jsenv__.data)
|
|
166
|
-
}
|
|
167
|
-
window.addEventListener("message", messageEventCallback, false)
|
|
168
|
-
return () => {
|
|
169
|
-
window.removeEventListener("message", messageEventCallback, false)
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
const sendCommandToToolbar = (iframe, command, ...args) => {
|
|
174
|
-
iframe.contentWindow.postMessage(
|
|
175
|
-
{
|
|
176
|
-
__jsenv__: {
|
|
177
|
-
command,
|
|
178
|
-
args,
|
|
179
|
-
},
|
|
180
|
-
},
|
|
181
|
-
window.origin,
|
|
182
|
-
)
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
const getToolbarPlaceholder = () => {
|
|
186
|
-
const placeholder = queryPlaceholder()
|
|
187
|
-
if (placeholder) {
|
|
188
|
-
if (document.body.contains(placeholder)) {
|
|
189
|
-
return placeholder
|
|
190
|
-
}
|
|
191
|
-
// otherwise iframe would not be visible because in <head>
|
|
192
|
-
console.warn(
|
|
193
|
-
"element with [data-jsenv-toolbar-placeholder] must be inside document.body",
|
|
194
|
-
)
|
|
195
|
-
return createTooolbarPlaceholder()
|
|
196
|
-
}
|
|
197
|
-
return createTooolbarPlaceholder()
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
const queryPlaceholder = () => {
|
|
201
|
-
return document.querySelector("[data-jsenv-toolbar-placeholder]")
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
const createTooolbarPlaceholder = () => {
|
|
205
|
-
const placeholder = document.createElement("span")
|
|
206
|
-
document.body.appendChild(placeholder)
|
|
207
|
-
return placeholder
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
const iframeToLoadedPromise = (iframe) => {
|
|
211
|
-
return new Promise((resolve) => {
|
|
212
|
-
const onload = () => {
|
|
213
|
-
iframe.removeEventListener("load", onload, true)
|
|
214
|
-
resolve()
|
|
215
|
-
}
|
|
216
|
-
iframe.addEventListener("load", onload, true)
|
|
217
|
-
})
|
|
218
|
-
}
|