@jsenv/plugin-toolbar 0.1.14 → 0.1.15

package/src/client/core/toolbar_logger.js

@@ -1,23 +1,23 @@
-import { paramsFromParentWindow } from "./parent_window_context.js"
+import { paramsFromParentWindow } from "./parent_window_context.js";
 
-const logLevel = paramsFromParentWindow.logLevel
+const logLevel = paramsFromParentWindow.logLevel;
 
 export const logger = {
   info: (...args) => {
     if (logLevel === "warn" || logLevel === "info" || logLevel === "debug") {
-      console.info(...prefixArgs(...args))
+      console.info(...prefixArgs(...args));
     }
   },
 
   debug: (...args) => {
     if (logLevel === "debug") {
-      console.debug(...prefixArgs(...args))
+      console.debug(...prefixArgs(...args));
     }
   },
-}
+};
 
 // a nice yellow:ffdc00
-const backgroundColor = "#F7931E" // jsenv logo color
+const backgroundColor = "#F7931E"; // jsenv logo color
 
 // eslint-disable-next-line no-unused-vars
 const prefixArgs = (...args) => {
@@ -25,5 +25,5 @@ const prefixArgs = (...args) => {
     `%cjsenv`,
     `background: ${backgroundColor}; color: black; padding: 1px 3px; margin: 0 1px`,
     ...args,
-  ]
-}
+  ];
+};

package/src/client/core/toolbar_open_actions.js

@@ -1,9 +1,9 @@
-import { openedSignal } from "./toolbar_open_signals.js"
+import { openedSignal } from "./toolbar_open_signals.js";
 
 export const openToolbar = () => {
-  openedSignal.value = true
-}
+  openedSignal.value = true;
+};
 
 export const closeToolbar = () => {
-  openedSignal.value = false
-}
+  openedSignal.value = false;
+};

package/src/client/core/toolbar_open_effects.js

@@ -1,5 +1,5 @@
-import { addExternalCommandCallback } from "./parent_window_actions.js"
-import { openToolbar, closeToolbar } from "./toolbar_open_actions.js"
+import { addExternalCommandCallback } from "./parent_window_actions.js";
+import { openToolbar, closeToolbar } from "./toolbar_open_actions.js";
 
-addExternalCommandCallback("openToolbar", openToolbar)
-addExternalCommandCallback("closeToolbar", closeToolbar)
+addExternalCommandCallback("openToolbar", openToolbar);
+addExternalCommandCallback("closeToolbar", closeToolbar);

package/src/client/core/toolbar_open_signals.js

@@ -1,7 +1,7 @@
-import { signal } from "@preact/signals"
+import { signal } from "@preact/signals";
 
-import { paramsFromParentWindow } from "./parent_window_context.js"
-import { stateFromLocalStorage } from "./toolbar_state_context.js"
+import { paramsFromParentWindow } from "./parent_window_context.js";
+import { stateFromLocalStorage } from "./toolbar_state_context.js";
 
 export const openedSignal = signal(
   typeof stateFromLocalStorage.opened === "boolean"
@@ -9,4 +9,4 @@ export const openedSignal = signal(
     : typeof paramsFromParentWindow.opened === "boolean"
     ? paramsFromParentWindow.opened
     : false,
-)
+);

package/src/client/core/toolbar_state_context.js

@@ -2,4 +2,4 @@ export const stateFromLocalStorage = localStorage.hasOwnProperty(
   "jsenv_toolbar",
 )
   ? JSON.parse(localStorage.getItem("jsenv_toolbar"))
-  : {}
+  : {};

package/src/client/core/toolbar_state_effects.js

@@ -1,10 +1,10 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { toolbarStateSignal } from "./toolbar_state_signals.js"
-import { sendEventToParent } from "./parent_window_actions.js"
+import { toolbarStateSignal } from "./toolbar_state_signals.js";
+import { sendEventToParent } from "./parent_window_actions.js";
 
 effect(() => {
-  const toolbarState = toolbarStateSignal.value
-  localStorage.setItem("jsenv_toolbar", JSON.stringify(toolbarState))
-  sendEventToParent("toolbar_state_change", toolbarState)
-})
+  const toolbarState = toolbarStateSignal.value;
+  localStorage.setItem("jsenv_toolbar", JSON.stringify(toolbarState));
+  sendEventToParent("toolbar_state_change", toolbarState);
+});

package/src/client/core/toolbar_state_signals.js

@@ -1,20 +1,20 @@
-import { computed } from "@preact/signals"
+import { computed } from "@preact/signals";
 
-import { openedSignal } from "./toolbar_open_signals.js"
-import { themeSignal } from "./theme_signals.js"
-import { animationsEnabledSignal } from "./animation_signals.js"
-import { notificationsEnabledSignal } from "./notification_signals.js"
+import { openedSignal } from "./toolbar_open_signals.js";
+import { themeSignal } from "./theme_signals.js";
+import { animationsEnabledSignal } from "./animation_signals.js";
+import { notificationsEnabledSignal } from "./notification_signals.js";
 
 export const toolbarStateSignal = computed(() => {
-  const opened = openedSignal.value
-  const theme = themeSignal.value
-  const animationsEnabled = animationsEnabledSignal.value
-  const notificationsEnabled = notificationsEnabledSignal.value
+  const opened = openedSignal.value;
+  const theme = themeSignal.value;
+  const animationsEnabled = animationsEnabledSignal.value;
+  const notificationsEnabled = notificationsEnabledSignal.value;
 
   return {
     opened,
     theme,
     animationsEnabled,
     notificationsEnabled,
-  }
-})
+  };
+});

package/src/client/core/tooltip_actions.js

@@ -1,7 +1,7 @@
-import { closeExecutionTooltip } from "./execution_actions.js"
-import { closeServerTooltip } from "./server_actions.js"
+import { closeExecutionTooltip } from "./execution_actions.js";
+import { closeServerTooltip } from "./server_actions.js";
 
 export const closeAllTooltips = () => {
-  closeExecutionTooltip()
-  closeServerTooltip()
-}
+  closeExecutionTooltip();
+  closeServerTooltip();
+};

package/src/client/toolbar_core.js

@@ -1,8 +1,8 @@
-import "./core/animation_effects.js"
-import "./core/execution_effects.js"
-import "./core/notification_effects.js"
-import "./core/parent_window_effects.js"
-import "./core/server_effects.js"
-import "./core/theme_effects.js"
-import "./core/toolbar_open_effects.js"
-import "./core/toolbar_state_effects.js"
+import "./core/animation_effects.js";
+import "./core/execution_effects.js";
+import "./core/notification_effects.js";
+import "./core/parent_window_effects.js";
+import "./core/server_effects.js";
+import "./core/theme_effects.js";
+import "./core/toolbar_open_effects.js";
+import "./core/toolbar_state_effects.js";

package/src/client/toolbar_injector.js

@@ -1,4 +1,4 @@
-const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url)
+const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url);
 
 export const injectToolbar = async ({
   toolbarUrl,
@@ -11,21 +11,21 @@ export const injectToolbar = async ({
 }) => {
   if (document.readyState !== "complete") {
     await new Promise((resolve) => {
-      window.addEventListener("load", resolve)
-    })
+      window.addEventListener("load", resolve);
+    });
   }
   await new Promise((resolve) => {
     if (window.requestIdleCallback) {
-      window.requestIdleCallback(resolve, { timeout: 400 })
+      window.requestIdleCallback(resolve, { timeout: 400 });
     } else {
-      window.requestAnimationFrame(resolve)
+      window.requestAnimationFrame(resolve);
     }
-  })
-  const placeholder = getToolbarPlaceholder()
+  });
+  const placeholder = getToolbarPlaceholder();
 
-  const iframe = document.createElement("iframe")
-  iframe.setAttribute("tabindex", -1)
-  iframe.setAttribute("allowtransparency", true)
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("tabindex", -1);
+  iframe.setAttribute("allowtransparency", true);
   // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
   // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
   Object.assign(iframe.style, {
@@ -40,51 +40,51 @@ export const injectToolbar = async ({
     "transition-duration": "0",
     "transition-property": "height, visibility",
     "border": "none",
-  })
-  const iframeLoadedPromise = iframeToLoadedPromise(iframe)
-  const toolbarUrlObject = new URL(toolbarUrl, window.location.href)
-  toolbarUrlObject.searchParams.set("logLevel", logLevel)
-  toolbarUrlObject.searchParams.set("theme", theme)
+  });
+  const iframeLoadedPromise = iframeToLoadedPromise(iframe);
+  const toolbarUrlObject = new URL(toolbarUrl, window.location.href);
+  toolbarUrlObject.searchParams.set("logLevel", logLevel);
+  toolbarUrlObject.searchParams.set("theme", theme);
   if (opened) {
-    toolbarUrlObject.searchParams.set("opened", "")
+    toolbarUrlObject.searchParams.set("opened", "");
   }
   if (autoreload) {
-    toolbarUrlObject.searchParams.set("autoreload", "")
+    toolbarUrlObject.searchParams.set("autoreload", "");
   }
   if (animationsEnabled) {
-    toolbarUrlObject.searchParams.set("animationsEnabled", "")
+    toolbarUrlObject.searchParams.set("animationsEnabled", "");
   }
   if (notificationsEnabled) {
-    toolbarUrlObject.searchParams.set("notificationsEnabled", "")
+    toolbarUrlObject.searchParams.set("notificationsEnabled", "");
   }
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
-  iframe.setAttribute("src", toolbarUrlObject.href)
-  iframe.name = "jsenv toolbar"
-  placeholder.parentNode.replaceChild(iframe, placeholder)
+  iframe.setAttribute("src", toolbarUrlObject.href);
+  iframe.name = "jsenv toolbar";
+  placeholder.parentNode.replaceChild(iframe, placeholder);
 
   const listenToolbarStateChange = (callback) => {
-    return addToolbarEventCallback(iframe, "toolbar_state_change", callback)
-  }
+    return addToolbarEventCallback(iframe, "toolbar_state_change", callback);
+  };
 
   const cleanupInitOnReady = addToolbarEventCallback(
     iframe,
     "toolbar_ready",
     () => {
-      cleanupInitOnReady()
-      sendCommandToToolbar(iframe, "initToolbar")
+      cleanupInitOnReady();
+      sendCommandToToolbar(iframe, "initToolbar");
       setTimeout(() => {
         listenToolbarStateChange(({ animationsEnabled }) => {
           if (animationsEnabled) {
-            iframe.style.transitionDuration = "300ms"
+            iframe.style.transitionDuration = "300ms";
           } else {
-            iframe.style.transitionDuration = "0s"
+            iframe.style.transitionDuration = "0s";
           }
-        })
-      })
+        });
+      });
     },
-  )
+  );
 
-  const div = document.createElement("div")
+  const div = document.createElement("div");
   div.innerHTML = `
 <div id="jsenv_toolbar_trigger" style="display:none">
   <svg id="jsenv_toolbar_trigger_icon">
@@ -130,82 +130,82 @@ export const injectToolbar = async ({
       opacity: 1;
     }
   </style>
-</div>`
-  const toolbarTrigger = div.firstElementChild
-  iframe.parentNode.appendChild(toolbarTrigger)
+</div>`;
+  const toolbarTrigger = div.firstElementChild;
+  iframe.parentNode.appendChild(toolbarTrigger);
 
-  let timer
+  let timer;
   toolbarTrigger.onmouseenter = () => {
-    toolbarTrigger.setAttribute("data-animate", "")
-    timer = setTimeout(expandToolbarTrigger, 500)
-  }
+    toolbarTrigger.setAttribute("data-animate", "");
+    timer = setTimeout(expandToolbarTrigger, 500);
+  };
   toolbarTrigger.onmouseleave = () => {
-    clearTimeout(timer)
-    collapseToolbarTrigger()
-  }
+    clearTimeout(timer);
+    collapseToolbarTrigger();
+  };
   toolbarTrigger.onfocus = () => {
-    toolbarTrigger.removeAttribute("data-animate")
-    expandToolbarTrigger()
-  }
+    toolbarTrigger.removeAttribute("data-animate");
+    expandToolbarTrigger();
+  };
   toolbarTrigger.onblur = () => {
-    toolbarTrigger.removeAttribute("data-animate")
-    clearTimeout(timer)
-    collapseToolbarTrigger()
-  }
+    toolbarTrigger.removeAttribute("data-animate");
+    clearTimeout(timer);
+    collapseToolbarTrigger();
+  };
   toolbarTrigger.onclick = () => {
-    sendCommandToToolbar(iframe, "openToolbar")
-  }
+    sendCommandToToolbar(iframe, "openToolbar");
+  };
 
   const showToolbarTrigger = () => {
-    toolbarTrigger.style.display = "block"
-  }
+    toolbarTrigger.style.display = "block";
+  };
 
   const hideToolbarTrigger = () => {
-    toolbarTrigger.style.display = "none"
-  }
+    toolbarTrigger.style.display = "none";
+  };
 
   const expandToolbarTrigger = () => {
-    toolbarTrigger.setAttribute("data-expanded", "")
-  }
+    toolbarTrigger.setAttribute("data-expanded", "");
+  };
 
   const collapseToolbarTrigger = () => {
-    toolbarTrigger.removeAttribute("data-expanded", "")
-  }
+    toolbarTrigger.removeAttribute("data-expanded", "");
+  };
 
   listenToolbarStateChange(({ opened }) => {
     if (opened) {
-      hideToolbarTrigger()
+      hideToolbarTrigger();
     } else {
-      showToolbarTrigger()
+      showToolbarTrigger();
     }
-  })
+  });
 
-  await iframeLoadedPromise
-  iframe.removeAttribute("tabindex")
+  await iframeLoadedPromise;
+  iframe.removeAttribute("tabindex");
 
-  return iframe
-}
+  return iframe;
+};
 
 const addToolbarEventCallback = (iframe, eventName, callback) => {
   const messageEventCallback = (messageEvent) => {
-    const { data } = messageEvent
+    const { data } = messageEvent;
     if (typeof data !== "object") {
-      return
+      return;
     }
-    const { __jsenv__ } = data
+    const { __jsenv__ } = data;
     if (!__jsenv__) {
-      return
+      return;
     }
     if (__jsenv__.event !== eventName) {
-      return
+      return;
     }
-    callback(__jsenv__.data)
-  }
-  window.addEventListener("message", messageEventCallback, false)
+    callback(__jsenv__.data);
+  };
+  window.addEventListener("message", messageEventCallback, false);
   return () => {
-    window.removeEventListener("message", messageEventCallback, false)
-  }
-}
+    window.removeEventListener("message", messageEventCallback, false);
+  };
+};
 
 const sendCommandToToolbar = (iframe, command, ...args) => {
   iframe.contentWindow.postMessage(
@@ -216,40 +216,40 @@ const sendCommandToToolbar = (iframe, command, ...args) => {
       },
     },
     window.origin,
-  )
-}
+  );
+};
 
 const getToolbarPlaceholder = () => {
-  const placeholder = queryPlaceholder()
+  const placeholder = queryPlaceholder();
   if (placeholder) {
     if (document.body.contains(placeholder)) {
-      return placeholder
+      return placeholder;
     }
     // otherwise iframe would not be visible because in <head>
     console.warn(
       "element with [data-jsenv-toolbar-placeholder] must be inside document.body",
-    )
-    return createTooolbarPlaceholder()
+    );
+    return createTooolbarPlaceholder();
   }
-  return createTooolbarPlaceholder()
-}
+  return createTooolbarPlaceholder();
+};
 
 const queryPlaceholder = () => {
-  return document.querySelector("[data-jsenv-toolbar-placeholder]")
-}
+  return document.querySelector("[data-jsenv-toolbar-placeholder]");
+};
 
 const createTooolbarPlaceholder = () => {
-  const placeholder = document.createElement("span")
-  document.body.appendChild(placeholder)
-  return placeholder
-}
+  const placeholder = document.createElement("span");
+  document.body.appendChild(placeholder);
+  return placeholder;
+};
 
 const iframeToLoadedPromise = (iframe) => {
   return new Promise((resolve) => {
     const onload = () => {
-      iframe.removeEventListener("load", onload, true)
-      resolve()
-    }
-    iframe.addEventListener("load", onload, true)
-  })
-}
+      iframe.removeEventListener("load", onload, true);
+      resolve();
+    };
+    iframe.addEventListener("load", onload, true);
+  });
+};

package/src/client/ui/changes_indicator/changes_indicator.js

@@ -1,66 +1,66 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { parentWindowReloader } from "../../core/parent_window_context.js"
+import { parentWindowReloader } from "../../core/parent_window_context.js";
 import {
   autoreloadEnabledSignal,
   changesSignal,
-} from "../../core/parent_window_signals.js"
-import { changesTooltipOpenedSignal } from "../../core/changes_signals.js"
+} from "../../core/parent_window_signals.js";
+import { changesTooltipOpenedSignal } from "../../core/changes_signals.js";
 import {
   openChangesToolip,
   closeChangesToolip,
-} from "../../core/changes_actions.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/changes_actions.js";
+import { enableVariant } from "../variant.js";
 
-const changesIndicator = document.querySelector("#changes_indicator")
+const changesIndicator = document.querySelector("#changes_indicator");
 
 export const renderChangesIndicator = () => {
   effect(() => {
-    const autoreloadEnabled = autoreloadEnabledSignal.value
-    const changes = changesSignal.value
-    const changeCount = changes.length
+    const autoreloadEnabled = autoreloadEnabledSignal.value;
+    const changes = changesSignal.value;
+    const changeCount = changes.length;
     enableVariant(changesIndicator, {
       changes: !autoreloadEnabled && changeCount ? "yes" : "no",
-    })
+    });
     if (changeCount) {
       changesIndicator.querySelector(".tooltip_text").innerHTML =
-        computeTooltipText({ changes })
+        computeTooltipText({ changes });
       changesIndicator.querySelector(".tooltip_text a").onclick = () => {
         // eslint-disable-next-line no-alert
-        window.alert(JSON.stringify(changes, null, "  "))
-        console.log(changes)
-      }
-      changesIndicator.querySelector(".changes_text").innerHTML = changeCount
+        window.alert(JSON.stringify(changes, null, "  "));
+        console.log(changes);
+      };
+      changesIndicator.querySelector(".changes_text").innerHTML = changeCount;
     }
-  })
+  });
 
   changesIndicator.querySelector(".tooltip_action").onclick = () => {
-    parentWindowReloader.reload()
-  }
+    parentWindowReloader.reload();
+  };
 
   effect(() => {
-    const changesTooltipOpened = changesTooltipOpenedSignal.value
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
     if (changesTooltipOpened) {
-      changesIndicator.setAttribute("data-tooltip-visible", "")
+      changesIndicator.setAttribute("data-tooltip-visible", "");
     } else {
-      changesIndicator.removeAttribute("data-tooltip-visible")
+      changesIndicator.removeAttribute("data-tooltip-visible");
     }
-  })
-  const button = changesIndicator.querySelector("button")
+  });
+  const button = changesIndicator.querySelector("button");
   button.onclick = () => {
-    const changesTooltipOpened = changesTooltipOpenedSignal.value
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
     if (changesTooltipOpened) {
-      closeChangesToolip()
+      closeChangesToolip();
     } else {
-      openChangesToolip()
+      openChangesToolip();
     }
-  }
-}
+  };
+};
 
 const computeTooltipText = ({ changes }) => {
-  const changesCount = changes.length
+  const changesCount = changes.length;
   if (changesCount === 1) {
-    return `There is <a href="javascript:void(0)">1</a> change to apply`
+    return `There is <a href="javascript:void(0)">1</a> change to apply`;
   }
-  return `There is  <a href="javascript:void(0)">${changesCount}<a> changes to apply`
-}
+  return `There is  <a href="javascript:void(0)">${changesCount}<a> changes to apply`;
+};