@jsenv/plugin-toolbar 1.4.14 → 1.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/js/toolbar_injector.js +38 -5
  2. package/package.json +1 -1
  3. package/src/client/toolbar_injector.js +85 -46
package/dist/js/toolbar_injector.js CHANGED
@@ -26,10 +26,16 @@ const injectToolbar = async ({
26
26
  close: closeToolbar
27
27
  };
28
28
  if (document.readyState !== "complete") {
29
+ if (logLevel === "debug") {
30
+ console.debug('toolbar injection: wait for window "load"');
31
+ }
29
32
  await new Promise(resolve => {
30
33
  window.addEventListener("load", resolve);
31
34
  });
32
35
  }
36
+ if (logLevel === "debug") {
37
+ console.debug("toolbar injection: wait idleCallback");
38
+ }
33
39
  await new Promise(resolve => {
34
40
  if (window.requestIdleCallback) {
35
41
  window.requestIdleCallback(resolve, {
@@ -40,10 +46,15 @@ const injectToolbar = async ({
40
46
  }
41
47
  });
42
48
  const jsenvToolbar = document.createElement("jsenv-toolbar");
49
+ console.debug("toolbar injection: create iframe");
43
50
  iframe = createIframeNode();
44
51
  const toolbarTriggerNode = createToolbarTriggerNode();
45
- jsenvToolbar.appendChild(iframe);
46
- jsenvToolbar.appendChild(toolbarTriggerNode);
52
+ appendIntoRespectingLineBreaksAndIndentation(iframe, jsenvToolbar, {
53
+ indent: 3
54
+ });
55
+ appendIntoRespectingLineBreaksAndIndentation(toolbarTriggerNode, jsenvToolbar, {
56
+ indent: 3
57
+ });
47
58
  const iframeLoadedPromise = iframeToLoadedPromise(iframe);
48
59
  const toolbarUrlObject = new URL(toolbarUrl, window.location.href);
49
60
  toolbarUrlObject.searchParams.set("logLevel", logLevel);
@@ -96,6 +107,7 @@ const injectToolbar = async ({
96
107
  const collapseToolbarTrigger = () => {
97
108
  toolbarTriggerNode.removeAttribute("data-expanded", "");
98
109
  };
110
+ console.debug("toolbar injection: inject iframe in document");
99
111
  const placeholder = getToolbarPlaceholder();
100
112
  placeholder.parentNode.replaceChild(jsenvToolbar, placeholder);
101
113
  const listenToolbarStateChange = callback => {
@@ -126,8 +138,10 @@ const injectToolbar = async ({
126
138
  });
127
139
  });
128
140
  await iframeLoadedPromise;
141
+ console.debug("toolbar injection: iframe loaded");
129
142
  resolveToolbarReadyPromise();
130
- iframe.removeAttribute("tabindex");
143
+ iframe.removeAttribute("tabindex"); // why so late? and not when creating the iframe?
144
+
131
145
  return iframe;
132
146
  };
133
147
  const createIframeNode = () => {
@@ -151,9 +165,28 @@ const createIframeNode = () => {
151
165
  });
152
166
  return iframe;
153
167
  };
168
+ const appendIntoRespectingLineBreaksAndIndentation = (node, parentNode, {
169
+ indent = 2
170
+ } = {}) => {
171
+ const indentMinusOne = " ".repeat(indent - 1);
172
+ const desiredIndent = " ".repeat(indent);
173
+ const previousSibling = parentNode.childNodes[parentNode.childNodes.length - 1];
174
+ if (previousSibling && previousSibling.nodeName === "#text") {
175
+ if (previousSibling.nodeValue === "\n".concat(indentMinusOne)) {
176
+ previousSibling.nodeValue = "\n".concat(desiredIndent);
177
+ }
178
+ if (previousSibling.nodeValue !== "\n".concat(desiredIndent)) {
179
+ previousSibling.nodeValue = "\n".concat(desiredIndent);
180
+ }
181
+ } else {
182
+ parentNode.appendChild(document.createTextNode("\n".concat(desiredIndent)));
183
+ }
184
+ parentNode.appendChild(node);
185
+ parentNode.appendChild(document.createTextNode("\n".concat(indentMinusOne)));
186
+ };
154
187
  const createToolbarTriggerNode = () => {
155
188
  const div = document.createElement("div");
156
- div.innerHTML = "\n<div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n <svg id=\"jsenv_toolbar_trigger_icon\">\n <use xlink:href=\"".concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n </svg>\n <style>\n #jsenv_toolbar_trigger {\n display: block;\n overflow: hidden;\n position: fixed;\n z-index: 1000;\n bottom: -32px;\n right: 20px;\n height: 40px;\n width: 40px;\n padding: 0;\n margin: 0;\n border-radius: 5px 5px 0 0;\n border: 1px solid rgba(0, 0, 0, 0.33);\n border-bottom: none;\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n background: transparent;\n text-align: center;\n transition: 600ms;\n }\n\n #jsenv_toolbar_trigger:hover {\n cursor: pointer;\n }\n\n #jsenv_toolbar_trigger[data-expanded] {\n bottom: 0;\n }\n\n #jsenv_toolbar_trigger_icon {\n width: 35px;\n height: 35px;\n opacity: 0;\n transition: 600ms;\n }\n\n #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n opacity: 1;\n }\n </style>\n</div>");
189
+ div.innerHTML = "<div id=\"jsenv_toolbar_trigger\" style=\"display:none\">\n <svg id=\"jsenv_toolbar_trigger_icon\">\n <use xlink:href=\"".concat(jsenvLogoSvgUrl, "#jsenv_logo\"></use>\n </svg>\n <style>\n #jsenv_toolbar_trigger {\n display: block;\n overflow: hidden;\n position: fixed;\n z-index: 1000;\n bottom: -32px;\n right: 20px;\n height: 40px;\n width: 40px;\n padding: 0;\n margin: 0;\n border-radius: 5px 5px 0 0;\n border: 1px solid rgba(0, 0, 0, 0.33);\n border-bottom: none;\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);\n background: transparent;\n text-align: center;\n transition: 600ms;\n }\n\n #jsenv_toolbar_trigger:hover {\n cursor: pointer;\n }\n\n #jsenv_toolbar_trigger[data-expanded] {\n bottom: 0;\n }\n\n #jsenv_toolbar_trigger_icon {\n width: 35px;\n height: 35px;\n opacity: 0;\n transition: 600ms;\n }\n\n #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {\n opacity: 1;\n }\n </style>\n </div>");
157
190
  const toolbarTrigger = div.firstElementChild;
158
191
  return toolbarTrigger;
159
192
  };
@@ -206,7 +239,7 @@ const queryPlaceholder = () => {
206
239
  };
207
240
  const createTooolbarPlaceholder = () => {
208
241
  const jsenvToolbar = document.createElement("jsenv-toolbar");
209
- document.body.appendChild(jsenvToolbar);
242
+ appendIntoRespectingLineBreaksAndIndentation(jsenvToolbar, document.body);
210
243
  return jsenvToolbar;
211
244
  };
212
245
  const iframeToLoadedPromise = iframe => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/plugin-toolbar",
3
- "version": "1.4.14",
3
+ "version": "1.4.15",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
package/src/client/toolbar_injector.js CHANGED
@@ -28,10 +28,16 @@ export const injectToolbar = async ({
28
28
  };
29
29
 
30
30
  if (document.readyState !== "complete") {
31
+ if (logLevel === "debug") {
32
+ console.debug('toolbar injection: wait for window "load"');
33
+ }
31
34
  await new Promise((resolve) => {
32
35
  window.addEventListener("load", resolve);
33
36
  });
34
37
  }
38
+ if (logLevel === "debug") {
39
+ console.debug("toolbar injection: wait idleCallback");
40
+ }
35
41
  await new Promise((resolve) => {
36
42
  if (window.requestIdleCallback) {
37
43
  window.requestIdleCallback(resolve, { timeout: 400 });
@@ -40,10 +46,19 @@ export const injectToolbar = async ({
40
46
  }
41
47
  });
42
48
  const jsenvToolbar = document.createElement("jsenv-toolbar");
49
+ console.debug("toolbar injection: create iframe");
43
50
  iframe = createIframeNode();
44
51
  const toolbarTriggerNode = createToolbarTriggerNode();
45
- jsenvToolbar.appendChild(iframe);
46
- jsenvToolbar.appendChild(toolbarTriggerNode);
52
+ appendIntoRespectingLineBreaksAndIndentation(iframe, jsenvToolbar, {
53
+ indent: 3,
54
+ });
55
+ appendIntoRespectingLineBreaksAndIndentation(
56
+ toolbarTriggerNode,
57
+ jsenvToolbar,
58
+ {
59
+ indent: 3,
60
+ },
61
+ );
47
62
  const iframeLoadedPromise = iframeToLoadedPromise(iframe);
48
63
  const toolbarUrlObject = new URL(toolbarUrl, window.location.href);
49
64
  toolbarUrlObject.searchParams.set("logLevel", logLevel);
@@ -102,6 +117,7 @@ export const injectToolbar = async ({
102
117
  toolbarTriggerNode.removeAttribute("data-expanded", "");
103
118
  };
104
119
 
120
+ console.debug("toolbar injection: inject iframe in document");
105
121
  const placeholder = getToolbarPlaceholder();
106
122
  placeholder.parentNode.replaceChild(jsenvToolbar, placeholder);
107
123
 
@@ -136,8 +152,9 @@ export const injectToolbar = async ({
136
152
  );
137
153
 
138
154
  await iframeLoadedPromise;
155
+ console.debug("toolbar injection: iframe loaded");
139
156
  resolveToolbarReadyPromise();
140
- iframe.removeAttribute("tabindex");
157
+ iframe.removeAttribute("tabindex"); // why so late? and not when creating the iframe?
141
158
 
142
159
  return iframe;
143
160
  };
@@ -164,54 +181,76 @@ const createIframeNode = () => {
164
181
  return iframe;
165
182
  };
166
183
 
184
+ const appendIntoRespectingLineBreaksAndIndentation = (
185
+ node,
186
+ parentNode,
187
+ { indent = 2 } = {},
188
+ ) => {
189
+ const indentMinusOne = " ".repeat(indent - 1);
190
+ const desiredIndent = " ".repeat(indent);
191
+ const previousSibling =
192
+ parentNode.childNodes[parentNode.childNodes.length - 1];
193
+ if (previousSibling && previousSibling.nodeName === "#text") {
194
+ if (previousSibling.nodeValue === `\n${indentMinusOne}`) {
195
+ previousSibling.nodeValue = `\n${desiredIndent}`;
196
+ }
197
+ if (previousSibling.nodeValue !== `\n${desiredIndent}`) {
198
+ previousSibling.nodeValue = `\n${desiredIndent}`;
199
+ }
200
+ } else {
201
+ parentNode.appendChild(document.createTextNode(`\n${desiredIndent}`));
202
+ }
203
+ parentNode.appendChild(node);
204
+ parentNode.appendChild(document.createTextNode(`\n${indentMinusOne}`));
205
+ };
206
+
167
207
  const createToolbarTriggerNode = () => {
168
208
  const div = document.createElement("div");
169
- div.innerHTML = `
170
- <div id="jsenv_toolbar_trigger" style="display:none">
171
- <svg id="jsenv_toolbar_trigger_icon">
172
- <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
173
- </svg>
174
- <style>
175
- #jsenv_toolbar_trigger {
176
- display: block;
177
- overflow: hidden;
178
- position: fixed;
179
- z-index: 1000;
180
- bottom: -32px;
181
- right: 20px;
182
- height: 40px;
183
- width: 40px;
184
- padding: 0;
185
- margin: 0;
186
- border-radius: 5px 5px 0 0;
187
- border: 1px solid rgba(0, 0, 0, 0.33);
188
- border-bottom: none;
189
- box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
190
- background: transparent;
191
- text-align: center;
192
- transition: 600ms;
193
- }
209
+ div.innerHTML = `<div id="jsenv_toolbar_trigger" style="display:none">
210
+ <svg id="jsenv_toolbar_trigger_icon">
211
+ <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
212
+ </svg>
213
+ <style>
214
+ #jsenv_toolbar_trigger {
215
+ display: block;
216
+ overflow: hidden;
217
+ position: fixed;
218
+ z-index: 1000;
219
+ bottom: -32px;
220
+ right: 20px;
221
+ height: 40px;
222
+ width: 40px;
223
+ padding: 0;
224
+ margin: 0;
225
+ border-radius: 5px 5px 0 0;
226
+ border: 1px solid rgba(0, 0, 0, 0.33);
227
+ border-bottom: none;
228
+ box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
229
+ background: transparent;
230
+ text-align: center;
231
+ transition: 600ms;
232
+ }
194
233
 
195
- #jsenv_toolbar_trigger:hover {
196
- cursor: pointer;
197
- }
234
+ #jsenv_toolbar_trigger:hover {
235
+ cursor: pointer;
236
+ }
198
237
 
199
- #jsenv_toolbar_trigger[data-expanded] {
200
- bottom: 0;
201
- }
238
+ #jsenv_toolbar_trigger[data-expanded] {
239
+ bottom: 0;
240
+ }
202
241
 
203
- #jsenv_toolbar_trigger_icon {
204
- width: 35px;
205
- height: 35px;
206
- opacity: 0;
207
- transition: 600ms;
208
- }
242
+ #jsenv_toolbar_trigger_icon {
243
+ width: 35px;
244
+ height: 35px;
245
+ opacity: 0;
246
+ transition: 600ms;
247
+ }
209
248
 
210
- #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
211
- opacity: 1;
212
- }
213
- </style>
214
- </div>`;
249
+ #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
250
+ opacity: 1;
251
+ }
252
+ </style>
253
+ </div>`;
215
254
  const toolbarTrigger = div.firstElementChild;
216
255
  return toolbarTrigger;
217
256
  };
@@ -270,7 +309,7 @@ const queryPlaceholder = () => {
270
309
 
271
310
  const createTooolbarPlaceholder = () => {
272
311
  const jsenvToolbar = document.createElement("jsenv-toolbar");
273
- document.body.appendChild(jsenvToolbar);
312
+ appendIntoRespectingLineBreaksAndIndentation(jsenvToolbar, document.body);
274
313
  return jsenvToolbar;
275
314
  };
276
315