@jsenv/plugin-toolbar 0.0.1 → 0.1.0

package/src/client/core/server_actions.js

@@ -0,0 +1,9 @@
+import { serverTooltipOpenedSignal } from "./server_signals.js"
+
+export const openServerTooltip = () => {
+  serverTooltipOpenedSignal.value = true
+}
+
+export const closeServerTooltip = () => {
+  serverTooltipOpenedSignal.value = false
+}

package/src/client/core/server_effects.js

@@ -0,0 +1,11 @@
+import { effect } from "@preact/signals"
+
+import { serverConnectionSignal } from "./server_signals.js"
+import { openServerTooltip } from "./server_actions.js"
+
+effect(() => {
+  const serverConnection = serverConnectionSignal.value
+  if (serverConnection === "connecting" || serverConnection === "closed") {
+    openServerTooltip()
+  }
+})

package/src/client/core/server_signals.js

@@ -0,0 +1,12 @@
+import { signal } from "@preact/signals"
+
+export const serverTooltipOpenedSignal = signal(false)
+
+export const serverConnectionSignal = signal("default")
+const serverEvents = window.__server_events__
+if (serverEvents) {
+  serverEvents.readyState.onchange = () => {
+    serverConnectionSignal.value = serverEvents.readyState.value
+  }
+  serverConnectionSignal.value = serverEvents.readyState.value
+}

package/src/client/core/settings_actions.js

@@ -0,0 +1,9 @@
+import { settingsOpenedSignal } from "./settings_signals.js"
+
+export const openSettings = () => {
+  settingsOpenedSignal.value = true
+}
+
+export const closeSettings = () => {
+  settingsOpenedSignal.value = false
+}

package/src/client/core/settings_signals.js

@@ -0,0 +1,3 @@
+import { signal } from "@preact/signals"
+
+export const settingsOpenedSignal = signal(false)

package/src/client/core/theme_actions.js

@@ -0,0 +1,9 @@
+import { themeSignal } from "./theme_signals.js"
+
+export const switchToLightTheme = () => {
+  themeSignal.value = "light"
+}
+
+export const switchToDefaultTheme = () => {
+  themeSignal.value = "dark"
+}

package/src/client/core/theme_effects.js

@@ -0,0 +1,8 @@
+import { effect } from "@preact/signals"
+
+import { themeSignal } from "./theme_signals.js"
+
+effect(() => {
+  const theme = themeSignal.value
+  document.querySelector("html").setAttribute("data-theme", theme)
+})

package/src/client/core/theme_signals.js

@@ -0,0 +1,12 @@
+import { signal } from "@preact/signals"
+
+import { paramsFromParentWindow } from "./parent_window_context.js"
+import { stateFromLocalStorage } from "./toolbar_state_context.js"
+
+export const themeSignal = signal(
+  typeof stateFromLocalStorage.theme === "string"
+    ? stateFromLocalStorage.theme
+    : typeof paramsFromParentWindow.theme === "string"
+    ? paramsFromParentWindow.theme
+    : "dark",
+)

package/src/client/core/toolbar_logger.js

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

package/src/client/core/toolbar_open_actions.js

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

package/src/client/core/toolbar_open_effects.js

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

package/src/client/core/toolbar_open_signals.js

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

package/src/client/core/toolbar_state_context.js

@@ -0,0 +1,5 @@
+export const stateFromLocalStorage = localStorage.hasOwnProperty(
+  "jsenv_toolbar",
+)
+  ? JSON.parse(localStorage.getItem("jsenv_toolbar"))
+  : {}

package/src/client/core/toolbar_state_effects.js

@@ -0,0 +1,10 @@
+import { effect } from "@preact/signals"
+
+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)
+})

package/src/client/core/toolbar_state_signals.js

@@ -0,0 +1,20 @@
+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"
+
+export const toolbarStateSignal = computed(() => {
+  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

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

package/src/client/toolbar.html

@@ -5,18 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="utf-8" />
     <link rel="icon" href="data:," />
-    <link rel="stylesheet" type="text/css" href="./toolbar_main.css" />
+    <link rel="stylesheet" type="text/css" href="./ui/toolbar.css" />
   </head>
   <body>
-    <div id="toolbar-overlay"></div>
+    <div id="toolbar_overlay"></div>
     <!-- toolbar -->
     <div id="toolbar">
-      <div id="toolbar-wrapper">
-        <section id="file-list-link" data-responsive-toolbar-element>
-          <a class="toolbar-icon-wrapper" href="javascript:void(0);">
+      <div id="toolbar_wrapper">
+        <section id="document_index_section" data-responsive-toolbar-element>
+          <a
+            id="document_index_link"
+            class="toolbar_control"
+            href="javascript:void(0);"
+          >
             <svg
-              id="fileIconSvg"
-              class="iconToolbar"
+              id="document_index_icon"
+              class="toolbar_icon"
               viewBox="0 0 24 24"
               width="35"
               height="35"
@@ -29,30 +33,38 @@
           </a>
         </section>
 
-        <section id="execution-indicator">
+        <section id="document_execution_indicator">
           <div data-when="execution:default">
             <div class="tooltip">Unknown state</div>
           </div>
           <div data-when="execution:running">
             <div class="tooltip">Executing...</div>
-            <button>
-              <svg id="loader-icon" data-animate>
+            <button class="toolbar_control">
+              <svg id="execution_pending_icon" data-animate>
                 <use xlink:href="#loading_svg"></use>
               </svg>
             </button>
           </div>
           <div data-when="execution:completed">
             <div class="tooltip">Execution completed in X ms</div>
-            <button>
-              <svg id="check-icon" data-animate viewBox="0 0 52 52">
+            <button class="toolbar_control">
+              <svg
+                id="execution_completed_icon"
+                data-animate
+                viewBox="0 0 52 52"
+              >
                 <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
               </svg>
             </button>
           </div>
           <div data-when="execution:errored">
             <div class="tooltip">Execution failed in X ms</div>
-            <button>
-              <svg id="cross-icon" data-animate viewBox="0 0 512 512">
+            <button class="toolbar_control">
+              <svg
+                id="execution_failed_icon"
+                data-animate
+                viewBox="0 0 512 512"
+              >
                 <rect
                   id="cross_p1"
                   x="239.397"
@@ -74,40 +86,56 @@
           </div>
         </section>
 
-        <section id="changes-indicator" data-when="autoreload:off">
+        <section id="changes_indicator">
           <div data-when="changes:no"></div>
           <div data-when="changes:yes">
-            <div class="tooltip">There is X changes to apply</div>
-            <button>
-              <svg>
-                <circle class="eventsource-circle" cx="20" cy="20" r="5" />
+            <div class="tooltip">
+              <div class="tooltip_text">There is X changes to apply</div>
+              <div class="tooltip_action">
+                <a href="javascript:void(0);">
+                  <svg
+                    class="tooltip_icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <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"
+                    />
+                  </svg>
+                  apply changes
+                </a>
+              </div>
+            </div>
+            <button class="toolbar_control">
+              <svg class="changes_icon">
+                <circle class="server_indicator_circle" cx="20" cy="20" r="5" />
               </svg>
-              <span>X</span>
+              <span class="changes_text">X</span>
             </button>
           </div>
         </section>
 
         <div style="width: 100%"></div>
 
-        <section id="eventsource-indicator" data-responsive-toolbar-element>
-          <div data-when="eventsource:default">
-            <div class="tooltip">Unknown state</div>
-            <button>
+        <section id="server_indicator" data-responsive-toolbar-element>
+          <div data-when="connectionState:closing">
+            <div class="tooltip" data-toolip-left>Unknown state</div>
+            <button class="toolbar_control">
               <svg>
-                <circle class="eventsource-circle" cx="20" cy="20" r="5" />
+                <circle class="server_indicator_circle" cx="20" cy="20" r="5" />
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:connecting">
-            <div class="tooltip">
+          <div data-when="connectionState:connecting">
+            <div class="tooltip" data-toolip-left>
               Connecting to server...
               <br />
-              <div class="tooltipAction">
+              <div class="tooltip_action">
                 <a href="javascript:void(0);">
                   <svg
+                    class="tooltip_icon"
                     xmlns="http://www.w3.org/2000/svg"
-                    id="powerOffIconSvg"
-                    class="tooltipIcon"
                     viewBox="0 0 24 24"
                   >
                     <path d="M0 0h24v24H0V0z" fill="none" />
@@ -119,30 +147,29 @@
                 </a>
               </div>
             </div>
-            <button>
+            <button class="toolbar_control">
               <svg>
                 <circle
-                  class="eventsource-circle"
+                  class="server_indicator_circle"
                   data-variant="connecting"
                   cx="20"
                   cy="20"
                   r="5"
                 />
-                <circle class="eventsource-ring" cx="20" cy="20" r="13" />
+                <circle class="server_indicator_ring" cx="20" cy="20" r="13" />
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:disconnected">
-            <div class="tooltip">
+          <div data-when="connectionState:closed">
+            <div class="tooltip" data-toolip-left>
               Disconnected from server
               <br />
-              <div class="tooltipAction">
+              <div class="tooltip_action">
                 <a href="javascript:void(0);">
                   <svg
+                    class="tooltip_icon"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
-                    id="powerIconSvg"
-                    class="tooltipIcon"
                   >
                     <path d="M0 0h24v24H0V0z" fill="none" />
                     <path
@@ -153,11 +180,11 @@
                 </a>
               </div>
             </div>
-            <button>
+            <button class="toolbar_control">
               <svg>
                 <circle
-                  class="eventsource-circle"
-                  data-variant="off"
+                  class="server_indicator_circle"
+                  data-variant="closed"
                   cx="20"
                   cy="20"
                   r="5"
@@ -165,18 +192,15 @@
               </svg>
             </button>
           </div>
-          <div data-when="eventsource:connected">
-            <div class="tooltip">Connected to server</div>
-            <button>
-              <svg
-                class="event-source-autoreload iconToolbar"
-                data-variant="enabled"
-              >
+          <div data-when="connectionState:open">
+            <div class="tooltip" data-toolip-left>Connected to server</div>
+            <button class="toolbar_control">
+              <svg class="autoreload toolbar_icon" data-variant="enabled">
                 <use xlink:href="#loading_svg"></use>
               </svg>
-              <svg class="event-source-icon">
+              <svg class="icon">
                 <circle
-                  class="eventsource-circle"
+                  class="server_indicator_circle"
                   data-variant="connected"
                   cx="20"
                   cy="20"
@@ -188,9 +212,9 @@
         </section>
 
         <section id="settings" data-responsive-toolbar-element>
-          <div id="settings-box">
-            <div id="settings-box-header">
-              <button id="button-close-settings">
+          <div id="settings_box">
+            <div id="settings_box_header">
+              <button id="settings_close_button" class="toolbar_control">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
@@ -204,11 +228,11 @@
                 </svg>
               </button>
               <svg
+                class="settings_icon"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="35px"
                 height="35px"
-                class="settings-icon"
               >
                 <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"
@@ -216,28 +240,28 @@
               </svg>
               <h3>Settings</h3>
             </div>
-            <div id="settings-box-body">
-              <div class="settings-box-items-wrapper">
-                <div class="settings-box-item settings-autoreload">
-                  <div class="category-title">
+            <div id="settings_box_body">
+              <div class="settings_box_items_wrapper">
+                <div class="settings_box_item settings_autoreload">
+                  <div class="category_title">
                     <svg width="20px" height="20px">
                       <use xlink:href="#loading_svg"></use>
                     </svg>
                     <span>Autoreload</span>
                   </div>
                   <label class="switch" data-contains-hidden-input>
-                    <input id="toggle-autoreload" type="checkbox" />
+                    <input id="toggle_autoreload" type="checkbox" />
                     <div>
                       <div class="slider"></div>
                       <div class="square"></div>
                     </div>
                   </label>
-                  <div class="category-subtitle">
+                  <div class="category_subtitle">
                     Auto reload when a file is modified, deleted or created.
                   </div>
                 </div>
-                <div class="settings-box-item settings-notification">
-                  <div class="category-title">
+                <div class="settings_box_item settings_notification">
+                  <div class="category_title">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
@@ -251,15 +275,15 @@
                     Notifications
                   </div>
                   <label class="switch" data-contains-hidden-input>
-                    <input id="toggle-notifs" type="checkbox" />
+                    <input id="toggle_notifs" type="checkbox" />
                     <div>
                       <div class="slider"></div>
                       <div class="square"></div>
                     </div>
                   </label>
-                  <div class="category-subtitle">
+                  <div class="category_subtitle">
                     Send system notification when execution fails or is fixed.
-                    <div class="notification-text">
+                    <div class="notification_text">
                       <a
                         data-when="notif_granted:no"
                         class="request_notification_permission"
@@ -270,8 +294,8 @@
                   </div>
                 </div>
 
-                <div class="settings-box-item">
-                  <div class="category-title">
+                <div class="settings_box_item">
+                  <div class="category_title">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
@@ -286,18 +310,18 @@
                     Animations
                   </div>
                   <label class="switch" data-contains-hidden-input>
-                    <input id="toggle-anims" type="checkbox" />
+                    <input id="toggle_anims" type="checkbox" />
                     <div>
                       <div class="slider"></div>
                       <div class="square"></div>
                     </div>
                   </label>
-                  <div class="category-subtitle">
+                  <div class="category_subtitle">
                     Play toolbar animations and transitions.
                   </div>
                 </div>
-                <div class="settings-box-item">
-                  <div class="category-title">
+                <div class="settings_box_item">
+                  <div class="category_title">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 24 24"
@@ -313,27 +337,30 @@
                     Dark mode
                   </div>
                   <label class="switch" data-contains-hidden-input>
-                    <input id="checkbox-dark-theme" type="checkbox" />
+                    <input id="checkbox_dark_theme" type="checkbox" />
                     <div>
                       <div class="slider"></div>
                       <div class="square"></div>
                     </div>
                   </label>
-                  <div class="category-subtitle">
-                    Choose between light and dark theme for jsenv toolbar.
+                  <div class="category_subtitle">
+                    Toggle light/dark mode on jsenv toolbar.
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <button id="settings-button" class="toolbar-icon-wrapper">
+          <button
+            id="settings_open_button"
+            class="toolbar_icon_wrapper toolbar_control"
+          >
             <div data-when="has_warning:yes">
               <svg
+                class="toolbar_icon"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 45.818 45.818"
                 width="20px"
                 height="20px"
-                class="iconToolbar"
                 style="transform: rotate(180deg)"
               >
                 <path
@@ -346,11 +373,11 @@
             </div>
             <div data-when="has_warning:no">
               <svg
+                class="toolbar_icon"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24px"
                 height="24px"
-                class="iconToolbar"
               >
                 <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"
@@ -360,14 +387,14 @@
           </button>
         </section>
 
-        <section id="close" data-responsive-toolbar-element>
-          <button id="button-close-toolbar">
-            <div class="toolbar-icon-wrapper">
+        <section id="toolbar_close_section" data-responsive-toolbar-element>
+          <button id="toolbar_close_button" class="toolbar_control">
+            <div class="toolbar_icon_wrapper">
               <svg
+                id="toolbar_close_button_icon"
+                class="toolbar_icon"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                id="crossIconSvg"
-                class="iconToolbar"
                 width="35px"
                 height="35px"
               >
@@ -381,19 +408,19 @@
         </section>
       </div>
 
-      <div id="overflow-menu">
-        <div style="width: 100%"></div>
+      <div id="menu_overflow">
+        <div style="flex: 1"></div>
       </div>
 
-      <div id="overflow-menu-button">
-        <button class="toolbar-icon-wrapper">
+      <div id="menu_overflow_button">
+        <button class="toolbar_icon_wrapper">
           <svg
+            id="menu_overflow_icon"
+            class="toolbar_icon"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             width="35px"
             height="35px"
-            id="dotsIconSvg"
-            class="iconToolbar"
           >
             <path d="M0 0h24v24H0V0z" fill="none" />
             <path
@@ -444,7 +471,7 @@
     </div>
     <script
       type="module"
-      src="./toolbar_main.js"
+      src="./toolbar_core.js"
       data-jsenv-force-inline
       no-html-supervisor
     ></script>

package/src/client/toolbar_core.js

@@ -0,0 +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"