@jsenv/plugin-toolbar 0.0.1

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.
Files changed (117) hide show
  1. package/dist/css/toolbar_main.css +784 -0
  2. package/dist/html/toolbar.html +305 -0
  3. package/dist/js/toolbar_injector.js +300 -0
  4. package/dist/js/toolbar_main.js +900 -0
  5. package/dist/jsenv_plugin_toolbar.js +51 -0
  6. package/dist/other/jsenv_logo.svg +140 -0
  7. package/package.json +30 -0
  8. package/scripts/build.mjs +20 -0
  9. package/src/client/animation/toolbar_animation_core.js +30 -0
  10. package/src/client/animation/toolbar_animation_ui.js +21 -0
  11. package/src/client/communication/parent_window_communication.js +33 -0
  12. package/src/client/eventsource/eventsource.css +83 -0
  13. package/src/client/eventsource/toolbar_eventsource.js +57 -0
  14. package/src/client/execution/execution.css +79 -0
  15. package/src/client/execution/toolbar_execution.js +88 -0
  16. package/src/client/focus/focus.css +61 -0
  17. package/src/client/focus/toolbar_focus.js +19 -0
  18. package/src/client/jsenv_logo.svg +140 -0
  19. package/src/client/notification/toolbar_notification.js +181 -0
  20. package/src/client/responsive/overflow_menu.css +61 -0
  21. package/src/client/responsive/toolbar_responsive.js +103 -0
  22. package/src/client/settings/settings.css +201 -0
  23. package/src/client/settings/toolbar_settings.js +47 -0
  24. package/src/client/theme/jsenv_theme.css +77 -0
  25. package/src/client/theme/light_theme.css +106 -0
  26. package/src/client/theme/toolbar_theme.js +34 -0
  27. package/src/client/toolbar.html +452 -0
  28. package/src/client/toolbar_injector.js +230 -0
  29. package/src/client/toolbar_main.css +173 -0
  30. package/src/client/toolbar_main.js +174 -0
  31. package/src/client/toolbar_state.js +16 -0
  32. package/src/client/tooltip/tooltip.css +61 -0
  33. package/src/client/tooltip/tooltip.js +39 -0
  34. package/src/client/util/animation.js +305 -0
  35. package/src/client/util/dom.js +108 -0
  36. package/src/client/util/fetch_using_xhr.js +400 -0
  37. package/src/client/util/fetching.js +14 -0
  38. package/src/client/util/iframe_to_parent_href.js +10 -0
  39. package/src/client/util/jsenv_logger.js +28 -0
  40. package/src/client/util/preferences.js +10 -0
  41. package/src/client/util/responsive.js +112 -0
  42. package/src/client/util/util.js +19 -0
  43. package/src/client/variant/variant.js +74 -0
  44. package/src/jsenv_plugin_toolbar.js +63 -0
  45. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/ast/src/html/html_src_set.js +18 -0
  46. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation.js +45 -0
  47. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation.js.map +12 -0
  48. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js +32 -0
  49. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js.map +12 -0
  50. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js +23 -0
  51. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js.map +12 -0
  52. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/communication/parent_window_communication.js +33 -0
  53. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/eventsource/eventsource.css +87 -0
  54. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js +59 -0
  55. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js.map +12 -0
  56. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/execution/execution.css +88 -0
  57. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js +90 -0
  58. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js.map +12 -0
  59. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/focus/focus.css +28 -0
  60. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/focus/toolbar_focus.js +19 -0
  61. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/jsenv_logo.svg +140 -0
  62. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js +183 -0
  63. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js.map +12 -0
  64. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/responsive/overflow_menu.css +60 -0
  65. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js +105 -0
  66. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js.map +12 -0
  67. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/settings/settings.css +200 -0
  68. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js +49 -0
  69. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js.map +12 -0
  70. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/theme/light_theme.css +110 -0
  71. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js +36 -0
  72. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js.map +12 -0
  73. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar.html +319 -0
  74. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js +232 -0
  75. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js.map +12 -0
  76. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.css +161 -0
  77. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.css.map +12 -0
  78. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.js +176 -0
  79. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.js.map +12 -0
  80. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js +18 -0
  81. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js.map +12 -0
  82. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.css +60 -0
  83. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js +41 -0
  84. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js.map +12 -0
  85. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/animation.js +307 -0
  86. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/animation.js.map +12 -0
  87. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/dom.js +108 -0
  88. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/iframe_to_parent_href.js +10 -0
  89. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/preferences.js +10 -0
  90. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/responsive.js +112 -0
  91. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/variant/variant.js +74 -0
  92. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/autoreload.js +201 -0
  93. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/autoreload.js.map +12 -0
  94. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/autoreload_preference.js +11 -0
  95. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/reload.js +138 -0
  96. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/reload.js.map +12 -0
  97. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/url_helpers.js +20 -0
  98. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html +590 -0
  99. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L15C5-L20C12.js +7 -0
  100. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L15C5-L20C12.js.map +12 -0
  101. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L368C5-L481C14.js +114 -0
  102. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L482C5-L605C14.js +124 -0
  103. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L69C5-L299C13.css +227 -0
  104. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L8C5-L68C13.css +28 -0
  105. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/import_meta_hot/client/import_meta_hot.js +82 -0
  106. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/ribbon/client/ribbon.js +51 -0
  107. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/connection_manager.js +165 -0
  108. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/events_manager.js +75 -0
  109. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/server_events_client.js +20 -0
  110. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/server_events_client.js.map +12 -0
  111. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/web_socket_connection.js +83 -0
  112. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/web_socket_connection.js.map +12 -0
  113. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/supervisor/client/script_type_module_supervisor.js +98 -0
  114. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/supervisor/client/supervisor.js +966 -0
  115. package/tests/toolbar_basic/main.html +18 -0
  116. package/tests/toolbar_basic/start_dev_server.mjs +7 -0
  117. package/todo.txt +0 -0
package/dist/html/toolbar.html ADDED
@@ -0,0 +1,305 @@
1
+ <!DOCTYPE html><html><head>
2
+ <title>Jsenv toolbar</title>
3
+ <meta name="viewport" content="width=device-width, initial-scale=1">
4
+ <meta charset="utf-8">
5
+ <link rel="icon" href="data:,">
6
+ <link rel="stylesheet" type="text/css" href="../css/toolbar_main.css">
7
+ </head>
8
+ <body>
9
+ <div id="toolbar-overlay"></div>
10
+ <!-- toolbar -->
11
+ <div id="toolbar">
12
+ <div id="toolbar-wrapper">
13
+ <section id="file-list-link" data-responsive-toolbar-element="">
14
+ <a class="toolbar-icon-wrapper" href="javascript:void(0);">
15
+ <svg id="fileIconSvg" class="iconToolbar" viewBox="0 0 24 24" width="35" height="35">
16
+ <path d="M0 0h24v24H0V0z" fill="none"></path>
17
+ <path 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"></path>
18
+ </svg>
19
+ </a>
20
+ </section>
21
+
22
+ <section id="execution-indicator">
23
+ <div data-when="execution:default">
24
+ <div class="tooltip">Unknown state</div>
25
+ </div>
26
+ <div data-when="execution:running">
27
+ <div class="tooltip">Executing...</div>
28
+ <button>
29
+ <svg id="loader-icon" data-animate="">
30
+ <use xlink:href="#loading_svg"></use>
31
+ </svg>
32
+ </button>
33
+ </div>
34
+ <div data-when="execution:completed">
35
+ <div class="tooltip">Execution completed in X ms</div>
36
+ <button>
37
+ <svg id="check-icon" data-animate="" viewBox="0 0 52 52">
38
+ <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path>
39
+ </svg>
40
+ </button>
41
+ </div>
42
+ <div data-when="execution:errored">
43
+ <div class="tooltip">Execution failed in X ms</div>
44
+ <button>
45
+ <svg id="cross-icon" data-animate="" viewBox="0 0 512 512">
46
+ <rect id="cross_p1" x="239.397" y="67.518" rx="17" ry="17" transform="matrix(0.7071 0.7071 -0.7071 0.7071 255.9995 -106.0389)"></rect>
47
+ <rect id="cross_p2" x="239.397" y="67.519" rx="17" ry="17" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -106.039 256.0001)"></rect>
48
+ </svg>
49
+ </button>
50
+ </div>
51
+ </section>
52
+
53
+ <section id="changes-indicator" data-when="autoreload:off">
54
+ <div data-when="changes:no"></div>
55
+ <div data-when="changes:yes">
56
+ <div class="tooltip">There is X changes to apply</div>
57
+ <button>
58
+ <svg>
59
+ <circle class="eventsource-circle" cx="20" cy="20" r="5"></circle>
60
+ </svg>
61
+ <span>X</span>
62
+ </button>
63
+ </div>
64
+ </section>
65
+
66
+ <div style="width: 100%"></div>
67
+
68
+ <section id="eventsource-indicator" data-responsive-toolbar-element="">
69
+ <div data-when="eventsource:default">
70
+ <div class="tooltip">Unknown state</div>
71
+ <button>
72
+ <svg>
73
+ <circle class="eventsource-circle" cx="20" cy="20" r="5"></circle>
74
+ </svg>
75
+ </button>
76
+ </div>
77
+ <div data-when="eventsource:connecting">
78
+ <div class="tooltip">
79
+ Connecting to server...
80
+ <br>
81
+ <div class="tooltipAction">
82
+ <a href="javascript:void(0);">
83
+ <svg xmlns="http://www.w3.org/2000/svg" id="powerOffIconSvg" class="tooltipIcon" viewBox="0 0 24 24">
84
+ <path d="M0 0h24v24H0V0z" fill="none"></path>
85
+ <path 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"></path>
86
+ </svg>
87
+ cancel
88
+ </a>
89
+ </div>
90
+ </div>
91
+ <button>
92
+ <svg>
93
+ <circle class="eventsource-circle" data-variant="connecting" cx="20" cy="20" r="5"></circle>
94
+ <circle class="eventsource-ring" cx="20" cy="20" r="13"></circle>
95
+ </svg>
96
+ </button>
97
+ </div>
98
+ <div data-when="eventsource:disconnected">
99
+ <div class="tooltip">
100
+ Disconnected from server
101
+ <br>
102
+ <div class="tooltipAction">
103
+ <a href="javascript:void(0);">
104
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="powerIconSvg" class="tooltipIcon">
105
+ <path d="M0 0h24v24H0V0z" fill="none"></path>
106
+ <path 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"></path>
107
+ </svg>
108
+ connect
109
+ </a>
110
+ </div>
111
+ </div>
112
+ <button>
113
+ <svg>
114
+ <circle class="eventsource-circle" data-variant="off" cx="20" cy="20" r="5"></circle>
115
+ </svg>
116
+ </button>
117
+ </div>
118
+ <div data-when="eventsource:connected">
119
+ <div class="tooltip">Connected to server</div>
120
+ <button>
121
+ <svg class="event-source-autoreload iconToolbar" data-variant="enabled">
122
+ <use xlink:href="#loading_svg"></use>
123
+ </svg>
124
+ <svg class="event-source-icon">
125
+ <circle class="eventsource-circle" data-variant="connected" cx="20" cy="20" r="5"></circle>
126
+ </svg>
127
+ </button>
128
+ </div>
129
+ </section>
130
+
131
+ <section id="settings" data-responsive-toolbar-element="">
132
+ <div id="settings-box">
133
+ <div id="settings-box-header">
134
+ <button id="button-close-settings">
135
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18px" height="18px">
136
+ <path 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"></path>
137
+ <path d="M0 0h24v24H0z" fill="none"></path>
138
+ </svg>
139
+ </button>
140
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="35px" height="35px" class="settings-icon">
141
+ <path 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"></path>
142
+ </svg>
143
+ <h3>Settings</h3>
144
+ </div>
145
+ <div id="settings-box-body">
146
+ <div class="settings-box-items-wrapper">
147
+ <div class="settings-box-item settings-autoreload">
148
+ <div class="category-title">
149
+ <svg width="20px" height="20px">
150
+ <use xlink:href="#loading_svg"></use>
151
+ </svg>
152
+ <span>Autoreload</span>
153
+ </div>
154
+ <label class="switch" data-contains-hidden-input="">
155
+ <input id="toggle-autoreload" type="checkbox">
156
+ <div>
157
+ <div class="slider"></div>
158
+ <div class="square"></div>
159
+ </div>
160
+ </label>
161
+ <div class="category-subtitle">
162
+ Auto reload when a file is modified, deleted or created.
163
+ </div>
164
+ </div>
165
+ <div class="settings-box-item settings-notification">
166
+ <div class="category-title">
167
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px">
168
+ <path 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"></path>
169
+ </svg>
170
+ Notifications
171
+ </div>
172
+ <label class="switch" data-contains-hidden-input="">
173
+ <input id="toggle-notifs" type="checkbox">
174
+ <div>
175
+ <div class="slider"></div>
176
+ <div class="square"></div>
177
+ </div>
178
+ </label>
179
+ <div class="category-subtitle">
180
+ Send system notification when execution fails or is fixed.
181
+ <div class="notification-text">
182
+ <a data-when="notif_granted:no" class="request_notification_permission" href="javascript:void(0);">Enable notification</a>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="settings-box-item">
188
+ <div class="category-title">
189
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px">
190
+ <path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"></path>
191
+ <path d="M0 0h24v24H0z" fill="none"></path>
192
+ </svg>
193
+ Animations
194
+ </div>
195
+ <label class="switch" data-contains-hidden-input="">
196
+ <input id="toggle-anims" type="checkbox">
197
+ <div>
198
+ <div class="slider"></div>
199
+ <div class="square"></div>
200
+ </div>
201
+ </label>
202
+ <div class="category-subtitle">
203
+ Play toolbar animations and transitions.
204
+ </div>
205
+ </div>
206
+ <div class="settings-box-item">
207
+ <div class="category-title">
208
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px" id="paletteIconSvg">
209
+ <path 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"></path>
210
+ <path d="M0 0h24v24H0z" fill="none"></path>
211
+ </svg>
212
+ Dark mode
213
+ </div>
214
+ <label class="switch" data-contains-hidden-input="">
215
+ <input id="checkbox-dark-theme" type="checkbox">
216
+ <div>
217
+ <div class="slider"></div>
218
+ <div class="square"></div>
219
+ </div>
220
+ </label>
221
+ <div class="category-subtitle">
222
+ Choose between light and dark theme for jsenv toolbar.
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ <button id="settings-button" class="toolbar-icon-wrapper">
229
+ <div data-when="has_warning:yes">
230
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.818 45.818" width="20px" height="20px" class="iconToolbar" style="transform: rotate(180deg)">
231
+ <path 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
232
+ 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
233
+ 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
234
+ 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"></path>
235
+ </svg>
236
+ </div>
237
+ <div data-when="has_warning:no">
238
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" class="iconToolbar">
239
+ <path 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"></path>
240
+ </svg>
241
+ </div>
242
+ </button>
243
+ </section>
244
+
245
+ <section id="close" data-responsive-toolbar-element="">
246
+ <button id="button-close-toolbar">
247
+ <div class="toolbar-icon-wrapper">
248
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="crossIconSvg" class="iconToolbar" width="35px" height="35px">
249
+ <path 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"></path>
250
+ <path d="M0 0h24v24H0z" fill="none"></path>
251
+ </svg>
252
+ </div>
253
+ </button>
254
+ </section>
255
+ </div>
256
+
257
+ <div id="overflow-menu">
258
+ <div style="width: 100%"></div>
259
+ </div>
260
+
261
+ <div id="overflow-menu-button">
262
+ <button class="toolbar-icon-wrapper">
263
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="35px" height="35px" id="dotsIconSvg" class="iconToolbar">
264
+ <path d="M0 0h24v24H0V0z" fill="none"></path>
265
+ <path 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"></path>
266
+ </svg>
267
+ </button>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- svg filter
272
+ must not be hidden or won't show in firefox)
273
+ see also:
274
+ https://codepen.io/tigt/post/fixing-the-white-glow-in-the-css-blur-filter
275
+ https://stackoverflow.com/questions/46906819/edge-detection-in-svg-filter
276
+ https://github.com/msurguy/background-blur/issues/5
277
+ https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/
278
+ -->
279
+ <svg width="0" height="0">
280
+ <defs>
281
+ <filter id="better-blur" x="0" y="0" width="1" height="1">
282
+ <feGaussianBlur stdDeviation="5" result="blurred"></feGaussianBlur>
283
+
284
+ <feMerge>
285
+ <feMergeNode in="SourceGraphic"></feMergeNode>
286
+ <feMergeNode in="blurred"></feMergeNode>
287
+ </feMerge>
288
+ </filter>
289
+ </defs>
290
+ </svg>
291
+
292
+ <!--
293
+ Reusable svg(s)
294
+ -->
295
+ <div style="display: none; position: absolute">
296
+ <svg id="loading_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 430">
297
+ <path fill="currentColor" 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"></path>
298
+ <circle fill="currentColor" cx="70.536" cy="110.694" r="36.011"></circle>
299
+ <circle fill="currentColor" cx="362.721" cy="309.694" r="36.012"></circle>
300
+ </svg>
301
+ </div>
302
+ <script type="module" src="../js/toolbar_main.js" data-jsenv-force-inline="" no-html-supervisor=""></script>
303
+
304
+
305
+ </body></html>
package/dist/js/toolbar_injector.js ADDED
@@ -0,0 +1,300 @@
1
+ const updateIframeOverflowOnParentWindow = () => {
2
+ if (!window.parent) {
3
+ // can happen while parent iframe reloads
4
+ return;
5
+ }
6
+ const aTooltipIsOpened = document.querySelector("[data-tooltip-visible]") || document.querySelector("[data-tooltip-auto-visible]");
7
+ const settingsAreOpened = document.querySelector("#settings[data-active]");
8
+ if (aTooltipIsOpened || settingsAreOpened) {
9
+ enableIframeOverflowOnParentWindow();
10
+ } else {
11
+ disableIframeOverflowOnParentWindow();
12
+ }
13
+ };
14
+ let iframeOverflowEnabled = false;
15
+ const enableIframeOverflowOnParentWindow = () => {
16
+ if (iframeOverflowEnabled) return;
17
+ iframeOverflowEnabled = true;
18
+ const iframe = getToolbarIframe();
19
+ const transitionDuration = iframe.style.transitionDuration;
20
+ setStyles(iframe, {
21
+ "height": "100%",
22
+ "transition-duration": "0ms"
23
+ });
24
+ if (transitionDuration) {
25
+ setTimeout(() => {
26
+ setStyles(iframe, {
27
+ "transition-duration": transitionDuration
28
+ });
29
+ });
30
+ }
31
+ };
32
+ const disableIframeOverflowOnParentWindow = () => {
33
+ if (!iframeOverflowEnabled) return;
34
+ iframeOverflowEnabled = false;
35
+ const iframe = getToolbarIframe();
36
+ const transitionDuration = iframe.style.transitionDuration;
37
+ setStyles(iframe, {
38
+ "height": "40px",
39
+ "transition-duration": "0ms"
40
+ });
41
+ if (transitionDuration) {
42
+ setTimeout(() => {
43
+ setStyles(iframe, {
44
+ "transition-duration": transitionDuration
45
+ });
46
+ });
47
+ }
48
+ };
49
+ const getToolbarIframe = () => {
50
+ const iframes = Array.from(window.parent.document.querySelectorAll("iframe"));
51
+ return iframes.find(iframe => iframe.contentWindow === window);
52
+ };
53
+ const forceHideElement = element => {
54
+ element.setAttribute("data-force-hide", "");
55
+ };
56
+ const removeForceHideElement = element => {
57
+ element.removeAttribute("data-force-hide");
58
+ };
59
+ const setStyles = (element, styles) => {
60
+ const elementStyle = element.style;
61
+ const restoreStyles = Object.keys(styles).map(styleName => {
62
+ let restore;
63
+ if (styleName in elementStyle) {
64
+ const currentStyle = elementStyle[styleName];
65
+ restore = () => {
66
+ elementStyle[styleName] = currentStyle;
67
+ };
68
+ } else {
69
+ restore = () => {
70
+ delete elementStyle[styleName];
71
+ };
72
+ }
73
+ elementStyle[styleName] = styles[styleName];
74
+ return restore;
75
+ });
76
+ return () => {
77
+ restoreStyles.forEach(restore => restore());
78
+ };
79
+ };
80
+ const setAttributes = (element, attributes) => {
81
+ Object.keys(attributes).forEach(name => {
82
+ element.setAttribute(name, attributes[name]);
83
+ });
84
+ };
85
+ const toolbarSectionIsActive = element => {
86
+ return element.hasAttribute("data-active");
87
+ };
88
+ const activateToolbarSection = element => {
89
+ element.setAttribute("data-active", "");
90
+ };
91
+ const deactivateToolbarSection = element => {
92
+ element.removeAttribute("data-active");
93
+ };
94
+
95
+ const jsenvLogoSvgUrl = new URL("../other/jsenv_logo.svg", import.meta.url);
96
+ const injectToolbar = async ({
97
+ toolbarUrl,
98
+ logs = false
99
+ }) => {
100
+ if (document.readyState !== "complete") {
101
+ await new Promise(resolve => {
102
+ window.addEventListener("load", resolve);
103
+ });
104
+ }
105
+ await new Promise(resolve => {
106
+ if (window.requestIdleCallback) {
107
+ window.requestIdleCallback(resolve, {
108
+ timeout: 400
109
+ });
110
+ } else {
111
+ window.requestAnimationFrame(resolve);
112
+ }
113
+ });
114
+ const placeholder = getToolbarPlaceholder();
115
+ const iframe = document.createElement("iframe");
116
+ setAttributes(iframe, {
117
+ tabindex: -1,
118
+ // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
119
+ // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
120
+ allowtransparency: true
121
+ });
122
+ setStyles(iframe, {
123
+ "position": "fixed",
124
+ "zIndex": 1000,
125
+ "bottom": 0,
126
+ "left": 0,
127
+ "width": "100%",
128
+ "height": 0,
129
+ /* ensure toolbar children are not focusable when hidden */
130
+ "visibility": "hidden",
131
+ "transition-duration": "300ms",
132
+ "transition-property": "height, visibility",
133
+ "border": "none"
134
+ });
135
+ const iframeLoadedPromise = iframeToLoadedPromise(iframe);
136
+ // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
137
+ iframe.setAttribute("src", toolbarUrl);
138
+ placeholder.parentNode.replaceChild(iframe, placeholder);
139
+ addToolbarEventCallback(iframe, "toolbar_ready", () => {
140
+ sendCommandToToolbar(iframe, "renderToolbar", {
141
+ logs
142
+ });
143
+ });
144
+ await iframeLoadedPromise;
145
+ iframe.removeAttribute("tabindex");
146
+ const div = document.createElement("div");
147
+ div.innerHTML = `
148
+ <div id="jsenv-toolbar-trigger">
149
+ <svg id="jsenv-toolbar-trigger-icon">
150
+ <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
151
+ </svg>
152
+ <style>
153
+ #jsenv-toolbar-trigger {
154
+ display: block;
155
+ overflow: hidden;
156
+ position: fixed;
157
+ z-index: 1000;
158
+ bottom: -32px;
159
+ right: 20px;
160
+ height: 40px;
161
+ width: 40px;
162
+ padding: 0;
163
+ margin: 0;
164
+ border-radius: 5px 5px 0 0;
165
+ border: 1px solid rgba(0, 0, 0, 0.33);
166
+ border-bottom: none;
167
+ box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
168
+ background: transparent;
169
+ text-align: center;
170
+ transition: 600ms;
171
+ }
172
+
173
+ #jsenv-toolbar-trigger:hover {
174
+ cursor: pointer;
175
+ }
176
+
177
+ #jsenv-toolbar-trigger[data-expanded] {
178
+ bottom: 0;
179
+ }
180
+
181
+ #jsenv-toolbar-trigger-icon {
182
+ width: 35px;
183
+ height: 35px;
184
+ opacity: 0;
185
+ transition: 600ms;
186
+ }
187
+
188
+ #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {
189
+ opacity: 1;
190
+ }
191
+ </style>
192
+ </div>`;
193
+ const toolbarTrigger = div.firstElementChild;
194
+ iframe.parentNode.appendChild(toolbarTrigger);
195
+ let timer;
196
+ toolbarTrigger.onmouseenter = () => {
197
+ toolbarTrigger.setAttribute("data-animate", "");
198
+ timer = setTimeout(expandToolbarTrigger, 500);
199
+ };
200
+ toolbarTrigger.onmouseleave = () => {
201
+ clearTimeout(timer);
202
+ collapseToolbarTrigger();
203
+ };
204
+ toolbarTrigger.onfocus = () => {
205
+ toolbarTrigger.removeAttribute("data-animate");
206
+ expandToolbarTrigger();
207
+ };
208
+ toolbarTrigger.onblur = () => {
209
+ toolbarTrigger.removeAttribute("data-animate");
210
+ clearTimeout(timer);
211
+ collapseToolbarTrigger();
212
+ };
213
+ toolbarTrigger.onclick = () => {
214
+ sendCommandToToolbar(iframe, "showToolbar");
215
+ };
216
+ const showToolbarTrigger = () => {
217
+ toolbarTrigger.style.display = "block";
218
+ };
219
+ const hideToolbarTrigger = () => {
220
+ toolbarTrigger.style.display = "none";
221
+ };
222
+ const expandToolbarTrigger = () => {
223
+ toolbarTrigger.setAttribute("data-expanded", "");
224
+ };
225
+ const collapseToolbarTrigger = () => {
226
+ toolbarTrigger.removeAttribute("data-expanded", "");
227
+ };
228
+ hideToolbarTrigger();
229
+ addToolbarEventCallback(iframe, "toolbar-visibility-change", visible => {
230
+ if (visible) {
231
+ hideToolbarTrigger();
232
+ } else {
233
+ showToolbarTrigger();
234
+ }
235
+ });
236
+ return iframe;
237
+ };
238
+ const addToolbarEventCallback = (iframe, eventName, callback) => {
239
+ const messageEventCallback = messageEvent => {
240
+ const {
241
+ data
242
+ } = messageEvent;
243
+ if (typeof data !== "object") {
244
+ return;
245
+ }
246
+ const {
247
+ __jsenv__
248
+ } = data;
249
+ if (!__jsenv__) {
250
+ return;
251
+ }
252
+ if (__jsenv__.event !== eventName) {
253
+ return;
254
+ }
255
+ callback(__jsenv__.data);
256
+ };
257
+ window.addEventListener("message", messageEventCallback, false);
258
+ return () => {
259
+ window.removeEventListener("message", messageEventCallback, false);
260
+ };
261
+ };
262
+ const sendCommandToToolbar = (iframe, command, ...args) => {
263
+ iframe.contentWindow.postMessage({
264
+ __jsenv__: {
265
+ command,
266
+ args
267
+ }
268
+ }, window.origin);
269
+ };
270
+ const getToolbarPlaceholder = () => {
271
+ const placeholder = queryPlaceholder();
272
+ if (placeholder) {
273
+ if (document.body.contains(placeholder)) {
274
+ return placeholder;
275
+ }
276
+ // otherwise iframe would not be visible because in <head>
277
+ console.warn("element with [data-jsenv-toolbar-placeholder] must be inside document.body");
278
+ return createTooolbarPlaceholder();
279
+ }
280
+ return createTooolbarPlaceholder();
281
+ };
282
+ const queryPlaceholder = () => {
283
+ return document.querySelector("[data-jsenv-toolbar-placeholder]");
284
+ };
285
+ const createTooolbarPlaceholder = () => {
286
+ const placeholder = document.createElement("span");
287
+ document.body.appendChild(placeholder);
288
+ return placeholder;
289
+ };
290
+ const iframeToLoadedPromise = iframe => {
291
+ return new Promise(resolve => {
292
+ const onload = () => {
293
+ iframe.removeEventListener("load", onload, true);
294
+ resolve();
295
+ };
296
+ iframe.addEventListener("load", onload, true);
297
+ });
298
+ };
299
+
300
+ export { activateToolbarSection as a, deactivateToolbarSection as d, forceHideElement as f, getToolbarIframe as g, injectToolbar, removeForceHideElement as r, setStyles as s, toolbarSectionIsActive as t, updateIframeOverflowOnParentWindow as u };