@jsenv/plugin-toolbar 0.1.13 → 0.1.15

package/src/client/ui/document_execution_indicator/document_execution_indicator.js

@@ -1,66 +1,66 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
 import {
   executionSignal,
   executionTooltipOpenedSignal,
-} from "../../core/execution_signals.js"
+} from "../../core/execution_signals.js";
 import {
   closeExecutionTooltip,
   openExecutionTooltip,
-} from "../../core/execution_actions.js"
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/execution_actions.js";
+import { removeForceHideElement } from "../util/dom.js";
+import { enableVariant } from "../variant.js";
 
 const executionIndicator = document.querySelector(
   "#document_execution_indicator",
-)
+);
 
 export const renderDocumentExecutionIndicator = async () => {
   removeForceHideElement(
     document.querySelector("#document_execution_indicator"),
-  )
+  );
   effect(() => {
-    const execution = executionSignal.value
-    updateExecutionIndicator(execution)
-  })
+    const execution = executionSignal.value;
+    updateExecutionIndicator(execution);
+  });
   effect(() => {
-    const executionTooltipOpened = executionTooltipOpenedSignal.value
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
     if (executionTooltipOpened) {
-      executionIndicator.setAttribute("data-tooltip-visible", "")
+      executionIndicator.setAttribute("data-tooltip-visible", "");
     } else {
-      executionIndicator.removeAttribute("data-tooltip-visible")
+      executionIndicator.removeAttribute("data-tooltip-visible");
     }
-  })
-}
+  });
+};
 
 const updateExecutionIndicator = ({ status, startTime, endTime } = {}) => {
-  enableVariant(executionIndicator, { execution: status })
-  const variantNode = executionIndicator.querySelector("[data-when-active]")
+  enableVariant(executionIndicator, { execution: status });
+  const variantNode = executionIndicator.querySelector("[data-when-active]");
   variantNode.querySelector("button").onclick = () => {
-    const executionTooltipOpened = executionTooltipOpenedSignal.value
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
     if (executionTooltipOpened) {
-      closeExecutionTooltip()
+      closeExecutionTooltip();
     } else {
-      openExecutionTooltip()
+      openExecutionTooltip();
     }
-  }
+  };
   variantNode.querySelector(".tooltip").textContent = computeText({
     status,
     startTime,
     endTime,
-  })
-}
+  });
+};
 
 // relative time: https://github.com/tc39/proposal-intl-relative-time/issues/118
 const computeText = ({ status, startTime, endTime }) => {
   if (status === "completed") {
-    return `Execution completed in ${endTime - startTime}ms`
+    return `Execution completed in ${endTime - startTime}ms`;
   }
   if (status === "failed") {
-    return `Execution failed in ${endTime - startTime}ms`
+    return `Execution failed in ${endTime - startTime}ms`;
   }
   if (status === "running") {
-    return "Executing..."
+    return "Executing...";
   }
-  return ""
-}
+  return "";
+};

package/src/client/ui/document_index_link/document_index_link.js

@@ -1,8 +1,8 @@
-import { setLinkHrefForParentWindow } from "../util/iframe_to_parent_href.js"
+import { setLinkHrefForParentWindow } from "../util/iframe_to_parent_href.js";
 
 export const renderDocumentIndexLink = () => {
   setLinkHrefForParentWindow(
     document.querySelector("#document_index_link"),
     "/",
-  )
-}
+  );
+};

package/src/client/ui/server_indicator/server_indicator.js

@@ -1,62 +1,62 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
 import {
   serverConnectionSignal,
   serverTooltipOpenedSignal,
-} from "../../core/server_signals.js"
+} from "../../core/server_signals.js";
 import {
   openServerTooltip,
   closeServerTooltip,
-} from "../../core/server_actions.js"
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/server_actions.js";
+import { removeForceHideElement } from "../util/dom.js";
+import { enableVariant } from "../variant.js";
 
-const parentServerEvents = window.parent.__server_events__
-const serverEvents = window.__server_events__
-const serverIndicator = document.querySelector("#server_indicator")
+const parentServerEvents = window.parent.__server_events__;
+const serverEvents = window.__server_events__;
+const serverIndicator = document.querySelector("#server_indicator");
 
 export const renderServerIndicator = () => {
-  removeForceHideElement(document.querySelector("#server_indicator"))
+  removeForceHideElement(document.querySelector("#server_indicator"));
   effect(() => {
-    const serverConnection = serverConnectionSignal.value
-    updateServerIndicator(serverConnection)
-  })
+    const serverConnection = serverConnectionSignal.value;
+    updateServerIndicator(serverConnection);
+  });
   effect(() => {
-    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    const serverTooltipOpened = serverTooltipOpenedSignal.value;
     if (serverTooltipOpened) {
-      serverIndicator.setAttribute("data-tooltip-visible", "")
+      serverIndicator.setAttribute("data-tooltip-visible", "");
     } else {
-      serverIndicator.removeAttribute("data-tooltip-visible")
+      serverIndicator.removeAttribute("data-tooltip-visible");
     }
-  })
-}
+  });
+};
 
 const updateServerIndicator = (connectionState) => {
-  enableVariant(serverIndicator, { connectionState })
+  enableVariant(serverIndicator, { connectionState });
   const variantNode = document.querySelector(
     "#server_indicator > [data-when-active]",
-  )
+  );
   variantNode.querySelector("button").onclick = () => {
-    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    const serverTooltipOpened = serverTooltipOpenedSignal.value;
     if (serverTooltipOpened) {
-      closeServerTooltip()
+      closeServerTooltip();
     } else {
-      openServerTooltip()
+      openServerTooltip();
     }
-  }
+  };
   if (connectionState === "connecting") {
     variantNode.querySelector("a").onclick = () => {
       if (parentServerEvents) {
-        parentServerEvents.disconnect()
+        parentServerEvents.disconnect();
       }
-      serverEvents.disconnect()
-    }
+      serverEvents.disconnect();
+    };
   } else if (connectionState === "closed") {
     variantNode.querySelector("a").onclick = () => {
       if (parentServerEvents) {
-        parentServerEvents.connect()
+        parentServerEvents.connect();
       }
-      serverEvents.connect()
-    }
+      serverEvents.connect();
+    };
   }
-}
+};

package/src/client/ui/toolbar_close_button/toolbar_close_button.js

@@ -1,5 +1,5 @@
-import { openedSignal } from "../../core/toolbar_open_signals.js"
-import { openToolbar, closeToolbar } from "../../core/toolbar_open_actions.js"
+import { openedSignal } from "../../core/toolbar_open_signals.js";
+import { openToolbar, closeToolbar } from "../../core/toolbar_open_actions.js";
 
 export const renderToolbarCloseButton = () => {
   // if user click enter or space quickly while closing toolbar
@@ -7,9 +7,9 @@ export const renderToolbarCloseButton = () => {
   // that's why I used toggleToolbar and not hideToolbar
   document.querySelector("#toolbar_close_button").onclick = () => {
     if (openedSignal.value) {
-      closeToolbar()
+      closeToolbar();
     } else {
-      openToolbar()
+      openToolbar();
     }
-  }
-}
+  };
+};

package/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.js

@@ -1,97 +1,97 @@
-import { closeAllTooltips } from "../../core/tooltip_actions.js"
+import { closeAllTooltips } from "../../core/tooltip_actions.js";
 import {
   forceHideElement,
   removeForceHideElement,
   deactivateToolbarSection,
-} from "../util/dom.js"
-import { createHorizontalBreakpoint } from "../util/responsive.js"
+} from "../util/dom.js";
+import { createHorizontalBreakpoint } from "../util/responsive.js";
 
-const WINDOW_SMALL_WIDTH = 420
+const WINDOW_SMALL_WIDTH = 420;
 
 export const initToolbarMenuOverflow = () => {
   // apply responsive design on toolbar icons if needed + add listener on resize screen
   // ideally we should listen breakpoint once, for now restore toolbar
-  const overflowMenuBreakpoint = createHorizontalBreakpoint(WINDOW_SMALL_WIDTH)
+  const overflowMenuBreakpoint = createHorizontalBreakpoint(WINDOW_SMALL_WIDTH);
   const handleOverflowMenuBreakpoint = () => {
-    responsiveToolbar(overflowMenuBreakpoint)
-  }
-  handleOverflowMenuBreakpoint()
-  overflowMenuBreakpoint.changed.listen(handleOverflowMenuBreakpoint)
+    responsiveToolbar(overflowMenuBreakpoint);
+  };
+  handleOverflowMenuBreakpoint();
+  overflowMenuBreakpoint.changed.listen(handleOverflowMenuBreakpoint);
 
   document.querySelector("#menu_overflow_button").onclick = () => {
     if (overflowMenuIsOpened()) {
-      closeOverflowMenu()
+      closeOverflowMenu();
     } else {
-      openOverflowMenu()
+      openOverflowMenu();
     }
-  }
-}
+  };
+};
 
 const responsiveToolbar = (overflowMenuBreakpoint) => {
   // close all tooltips in case opened
-  closeAllTooltips()
+  closeAllTooltips();
   // close settings box in case opened
-  deactivateToolbarSection(document.querySelector("#settings"))
+  deactivateToolbarSection(document.querySelector("#settings"));
 
   if (overflowMenuBreakpoint.isBelow()) {
-    enableOverflow()
+    enableOverflow();
   } else {
-    disableOverflow()
+    disableOverflow();
   }
-}
+};
 
-let moves = []
+let moves = [];
 
 const enableOverflow = () => {
   // move elements from toolbar to overflow menu
   const responsiveToolbarElements = document.querySelectorAll(
     "[data-responsive-toolbar-element]",
-  )
-  const overflowMenu = document.querySelector("#menu_overflow")
+  );
+  const overflowMenu = document.querySelector("#menu_overflow");
 
   // keep a placeholder element to know where to move them back
   moves = Array.from(responsiveToolbarElements).map((element) => {
-    const placeholder = document.createElement("div")
-    placeholder.style.display = "none"
-    placeholder.setAttribute("data-placeholder", "")
-    element.parentNode.replaceChild(placeholder, element)
-    overflowMenu.appendChild(element)
-    return { element, placeholder }
-  })
+    const placeholder = document.createElement("div");
+    placeholder.style.display = "none";
+    placeholder.setAttribute("data-placeholder", "");
+    element.parentNode.replaceChild(placeholder, element);
+    overflowMenu.appendChild(element);
+    return { element, placeholder };
+  });
 
   document
     .querySelector("#toolbar")
-    .setAttribute("data-menu-overflow-enabled", "")
-  removeForceHideElement(document.querySelector("#menu_overflow_button"))
-}
+    .setAttribute("data-menu-overflow-enabled", "");
+  removeForceHideElement(document.querySelector("#menu_overflow_button"));
+};
 
 const disableOverflow = () => {
   // close overflow menu in case it's open & unselect toggleOverflowMenu button in case it's selected
-  closeOverflowMenu()
-  deactivateToolbarSection(document.querySelector("#menu_overflow"))
+  closeOverflowMenu();
+  deactivateToolbarSection(document.querySelector("#menu_overflow"));
   moves.forEach(({ element, placeholder }) => {
-    placeholder.parentNode.replaceChild(element, placeholder)
-  })
-  moves = []
+    placeholder.parentNode.replaceChild(element, placeholder);
+  });
+  moves = [];
   document
     .querySelector("#toolbar")
-    .removeAttribute("data-menu-overflow-enabled")
-  forceHideElement(document.querySelector("#menu_overflow_button"))
-}
+    .removeAttribute("data-menu-overflow-enabled");
+  forceHideElement(document.querySelector("#menu_overflow_button"));
+};
 
 const overflowMenuIsOpened = () => {
-  const toolbar = document.querySelector("#toolbar")
-  return toolbar.hasAttribute("data-menu-overflow-opened")
-}
+  const toolbar = document.querySelector("#toolbar");
+  return toolbar.hasAttribute("data-menu-overflow-opened");
+};
 
 const openOverflowMenu = () => {
-  const toolbar = document.querySelector("#toolbar")
-  document.querySelector("#menu_overflow").setAttribute("data-animate", "")
-  toolbar.setAttribute("data-menu-overflow-opened", "")
-}
+  const toolbar = document.querySelector("#toolbar");
+  document.querySelector("#menu_overflow").setAttribute("data-animate", "");
+  toolbar.setAttribute("data-menu-overflow-opened", "");
+};
 
 const closeOverflowMenu = () => {
-  const toolbar = document.querySelector("#toolbar")
-  toolbar.removeAttribute("data-menu-overflow-opened")
-  document.querySelector("#menu_overflow").removeAttribute("data-animate")
-}
+  const toolbar = document.querySelector("#toolbar");
+  toolbar.removeAttribute("data-menu-overflow-opened");
+  document.querySelector("#menu_overflow").removeAttribute("data-animate");
+};

package/src/client/ui/toolbar_opening/toolbar_opening.js

@@ -1,73 +1,73 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { closeAllTooltips } from "../../core/tooltip_actions.js"
-import { animationsEnabledSignal } from "../../core/animation_signals.js"
-import { openedSignal } from "../../core/toolbar_open_signals.js"
-import { getToolbarIframe, setStyles } from "../util/dom.js"
-import { startJavaScriptAnimation } from "../util/animation.js"
+import { closeAllTooltips } from "../../core/tooltip_actions.js";
+import { animationsEnabledSignal } from "../../core/animation_signals.js";
+import { openedSignal } from "../../core/toolbar_open_signals.js";
+import { getToolbarIframe, setStyles } from "../util/dom.js";
+import { startJavaScriptAnimation } from "../util/animation.js";
 
 export const initToolbarOpening = () => {
   effect(() => {
-    const opened = openedSignal.value
+    const opened = openedSignal.value;
     if (opened) {
-      showToolbar()
+      showToolbar();
     } else {
-      hideToolbar()
+      hideToolbar();
     }
-  })
-}
+  });
+};
 
-let restoreToolbarIframeParentStyles = () => {}
-let restoreToolbarIframeStyles = () => {}
+let restoreToolbarIframeParentStyles = () => {};
+let restoreToolbarIframeStyles = () => {};
 
 const hideToolbar = () => {
-  closeAllTooltips()
-  restoreToolbarIframeParentStyles()
-  restoreToolbarIframeStyles()
-  document.documentElement.removeAttribute("data-toolbar-visible")
-}
+  closeAllTooltips();
+  restoreToolbarIframeParentStyles();
+  restoreToolbarIframeStyles();
+  document.documentElement.removeAttribute("data-toolbar-visible");
+};
 
 // (by the way it might be cool to have the toolbar auto show when)
 // it has something to say (being disconnected from server)
 const showToolbar = () => {
-  const animationsEnabled = animationsEnabledSignal.peek()
-  document.documentElement.setAttribute("data-toolbar-visible", "")
+  const animationsEnabled = animationsEnabledSignal.peek();
+  document.documentElement.setAttribute("data-toolbar-visible", "");
 
-  const toolbarIframe = getToolbarIframe()
-  const toolbarIframeParent = toolbarIframe.parentNode
-  const parentWindow = window.parent
+  const toolbarIframe = getToolbarIframe();
+  const toolbarIframeParent = toolbarIframe.parentNode;
+  const parentWindow = window.parent;
   const parentDocumentElement =
     parentWindow.document.compatMode === "CSS1Compat"
       ? parentWindow.document.documentElement
-      : parentWindow.document.body
+      : parentWindow.document.body;
 
   const scrollYMax =
-    parentDocumentElement.scrollHeight - parentWindow.innerHeight
-  const scrollY = parentDocumentElement.scrollTop
-  const scrollYRemaining = scrollYMax - scrollY
+    parentDocumentElement.scrollHeight - parentWindow.innerHeight;
+  const scrollY = parentDocumentElement.scrollTop;
+  const scrollYRemaining = scrollYMax - scrollY;
 
   setStyles(toolbarIframeParent, {
     "transition-property": "padding-bottom",
     "transition-duration": animationsEnabled ? "300ms" : "0s",
-  })
+  });
   // maybe we should use js animation here because we would not conflict with css
   restoreToolbarIframeParentStyles = setStyles(toolbarIframeParent, {
     "scroll-padding-bottom": "40px", // same here we should add 40px
     "padding-bottom": "40px", // if there is already one we should add 40px
-  })
+  });
   restoreToolbarIframeStyles = setStyles(toolbarIframe, {
     height: "40px",
     visibility: "visible",
-  })
+  });
 
   if (scrollYRemaining < 40 && scrollYMax > 0) {
-    const scrollEnd = scrollY + 40
+    const scrollEnd = scrollY + 40;
     startJavaScriptAnimation({
       duration: 300,
       onProgress: ({ progress }) => {
-        const value = scrollY + (scrollEnd - scrollY) * progress
-        parentDocumentElement.scrollTop = value
+        const value = scrollY + (scrollEnd - scrollY) * progress;
+        parentDocumentElement.scrollTop = value;
       },
-    })
+    });
   }
-}
+};

package/src/client/ui/toolbar_overlay/toolbar_overlay.js

@@ -1,33 +1,33 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { openedSignal } from "../../core/toolbar_open_signals.js"
-import { settingsOpenedSignal } from "../../core/settings_signals.js"
-import { closeSettings } from "../../core/settings_actions.js"
-import { closeAllTooltips } from "../../core/tooltip_actions.js"
-import { executionTooltipOpenedSignal } from "../../core/execution_signals.js"
-import { changesTooltipOpenedSignal } from "../../core/changes_signals.js"
-import { serverTooltipOpenedSignal } from "../../core/server_signals.js"
-import { getToolbarIframe, setStyles } from "../util/dom.js"
+import { openedSignal } from "../../core/toolbar_open_signals.js";
+import { settingsOpenedSignal } from "../../core/settings_signals.js";
+import { closeSettings } from "../../core/settings_actions.js";
+import { closeAllTooltips } from "../../core/tooltip_actions.js";
+import { executionTooltipOpenedSignal } from "../../core/execution_signals.js";
+import { changesTooltipOpenedSignal } from "../../core/changes_signals.js";
+import { serverTooltipOpenedSignal } from "../../core/server_signals.js";
+import { getToolbarIframe, setStyles } from "../util/dom.js";
 
 export const renderToolbarOverlay = () => {
-  const toolbarOverlay = document.querySelector("#toolbar_overlay")
+  const toolbarOverlay = document.querySelector("#toolbar_overlay");
   toolbarOverlay.onclick = () => {
-    closeAllTooltips()
-    closeSettings()
-  }
+    closeAllTooltips();
+    closeSettings();
+  };
 
   effect(() => {
     if (!window.parent) {
       // can happen while parent iframe reloads
-      return
+      return;
     }
-    const opened = openedSignal.value
-    const settingsOpened = settingsOpenedSignal.value
-    const executionTooltipOpened = executionTooltipOpenedSignal.value
-    const changesTooltipOpened = changesTooltipOpenedSignal.value
-    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    const opened = openedSignal.value;
+    const settingsOpened = settingsOpenedSignal.value;
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
+    const serverTooltipOpened = serverTooltipOpenedSignal.value;
     if (!opened) {
-      return
+      return;
     }
     if (
       settingsOpened ||
@@ -35,42 +35,42 @@ export const renderToolbarOverlay = () => {
       changesTooltipOpened ||
       serverTooltipOpened
     ) {
-      enableIframeOverflowOnParentWindow()
+      enableIframeOverflowOnParentWindow();
     } else {
-      disableIframeOverflowOnParentWindow()
+      disableIframeOverflowOnParentWindow();
     }
-  })
-}
+  });
+};
 
 const enableIframeOverflowOnParentWindow = () => {
-  const iframe = getToolbarIframe()
+  const iframe = getToolbarIframe();
 
-  const transitionDuration = iframe.style.transitionDuration
+  const transitionDuration = iframe.style.transitionDuration;
   setStyles(iframe, {
     "height": "100%",
     // we don't want to animate height transition
     // but if it was enabled, we'll restore it afterwards
     "transition-duration": "0ms",
-  })
+  });
   if (transitionDuration) {
     setTimeout(() => {
-      setStyles(iframe, { "transition-duration": transitionDuration })
-    })
+      setStyles(iframe, { "transition-duration": transitionDuration });
+    });
   }
-}
+};
 
 const disableIframeOverflowOnParentWindow = () => {
-  const iframe = getToolbarIframe()
-  const transitionDuration = iframe.style.transitionDuration
+  const iframe = getToolbarIframe();
+  const transitionDuration = iframe.style.transitionDuration;
   setStyles(iframe, {
     "height": "40px",
     // we don't want to animate height transition
     // but if it was enabled, we'll restore it afterwards
     "transition-duration": "0ms",
-  })
+  });
   if (transitionDuration) {
     setTimeout(() => {
-      setStyles(iframe, { "transition-duration": transitionDuration })
-    })
+      setStyles(iframe, { "transition-duration": transitionDuration });
+    });
   }
-}
+};

package/src/client/ui/toolbar_settings/toolbar_animation_setting.js

@@ -1,27 +1,27 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { animationsEnabledSignal } from "../../core/animation_signals.js"
+import { animationsEnabledSignal } from "../../core/animation_signals.js";
 import {
   enableAnimations,
   disableAnimations,
-} from "../../core/animation_actions.js"
+} from "../../core/animation_actions.js";
 
 export const renderToolbarAnimationSetting = () => {
-  const animCheckbox = document.querySelector("#toggle_anims")
+  const animCheckbox = document.querySelector("#toggle_anims");
 
   effect(() => {
-    const animationsEnabled = animationsEnabledSignal.value
-    animCheckbox.checked = animationsEnabled
-  })
+    const animationsEnabled = animationsEnabledSignal.value;
+    animCheckbox.checked = animationsEnabled;
+  });
   animCheckbox.onchange = () => {
     if (animCheckbox.checked) {
-      enableAnimations()
+      enableAnimations();
     } else {
-      disableAnimations()
+      disableAnimations();
     }
-  }
+  };
   // enable toolbar transition only after first render
   setTimeout(() => {
-    document.querySelector("#toolbar").setAttribute("data-animate", "")
-  })
-}
+    document.querySelector("#toolbar").setAttribute("data-animate", "");
+  });
+};