@jsenv/plugin-toolbar 0.1.14 → 1.0.1

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", "");
+  });
+};

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

@@ -1,46 +1,46 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
-import { autoreloadEnabledSignal } from "../../core/parent_window_signals.js"
+import { autoreloadEnabledSignal } from "../../core/parent_window_signals.js";
 import {
   disableAutoreload,
   enableAutoreload,
-} from "../../core/parent_window_actions.js"
+} from "../../core/parent_window_actions.js";
 
 export const renderToolbarAutoreloadSetting = () => {
-  const parentWindowReloader = window.parent.__reloader__
+  const parentWindowReloader = window.parent.__reloader__;
   if (!parentWindowReloader) {
-    disableAutoreloadSetting()
-    return
+    disableAutoreloadSetting();
+    return;
   }
 
-  const autoreloadCheckbox = document.querySelector("#toggle_autoreload")
+  const autoreloadCheckbox = document.querySelector("#toggle_autoreload");
   effect(() => {
-    const autoreloadEnabled = autoreloadEnabledSignal.value
+    const autoreloadEnabled = autoreloadEnabledSignal.value;
     if (autoreloadEnabled) {
-      autoreloadCheckbox.checked = true
+      autoreloadCheckbox.checked = true;
     } else {
-      autoreloadCheckbox.checked = false
+      autoreloadCheckbox.checked = false;
     }
-  })
+  });
 
   autoreloadCheckbox.onchange = () => {
     if (autoreloadCheckbox.checked) {
-      enableAutoreload()
+      enableAutoreload();
     } else {
-      disableAutoreload()
+      disableAutoreload();
     }
-  }
-}
+  };
+};
 
 const disableAutoreloadSetting = () => {
   document
     .querySelector(".settings_autoreload")
-    .setAttribute("data-disabled", "true")
+    .setAttribute("data-disabled", "true");
   document
     .querySelector(".settings_autoreload")
-    .setAttribute("title", `Autoreload not enabled on server`)
-  document.querySelector("#toggle_autoreload").disabled = true
-}
+    .setAttribute("title", `Autoreload not enabled on server`);
+  document.querySelector("#toggle_autoreload").disabled = true;
+};
 
 // const changeLink = variantNode.querySelector(".eventsource-changes-link")
 // changeLink.innerHTML = reloadMessageCount

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

@@ -1,88 +1,88 @@
-import { effect } from "@preact/signals"
+import { effect } from "@preact/signals";
 
 import {
   notificationsEnabledSignal,
   notificationPermissionSignal,
-} from "../../core/notification_signals.js"
-import { notificationAPIDetected } from "../../core/notification_context.js"
+} from "../../core/notification_signals.js";
+import { notificationAPIDetected } from "../../core/notification_context.js";
 import {
   enableNotifications,
   disableNotifications,
   requestPermission,
-} from "../../core/notification_actions.js"
-import { enableVariant } from "../variant.js"
+} from "../../core/notification_actions.js";
+import { enableVariant } from "../variant.js";
 
-const notifCheckbox = document.querySelector("#toggle_notifs")
+const notifCheckbox = document.querySelector("#toggle_notifs");
 
 export const renderToolbarNotificationSetting = () => {
   effect(() => {
-    const notificationsEnabled = notificationsEnabledSignal.value
-    notifCheckbox.checked = notificationsEnabled
-  })
+    const notificationsEnabled = notificationsEnabledSignal.value;
+    notifCheckbox.checked = notificationsEnabled;
+  });
 
   effect(() => {
-    const notificationPermission = notificationPermissionSignal.value
+    const notificationPermission = notificationPermissionSignal.value;
     if (!notificationAPIDetected) {
-      applyNotificationNotAvailableEffects()
-      return
+      applyNotificationNotAvailableEffects();
+      return;
     }
     if (notificationPermission === "default") {
-      applyNotificationDefaultEffects()
-      return
+      applyNotificationDefaultEffects();
+      return;
     }
     if (notificationPermission === "denied") {
-      applyNotificationDeniedEffects()
-      return
+      applyNotificationDeniedEffects();
+      return;
     }
     if (notificationPermission === "granted") {
-      applyNotificationGrantedEffects()
-      return
+      applyNotificationGrantedEffects();
+      return;
     }
-  })
-}
+  });
+};
 
 const applyNotificationNotAvailableEffects = () => {
-  const notifSetting = document.querySelector(".settings_notification")
-  notifSetting.setAttribute("data-disabled", "true")
+  const notifSetting = document.querySelector(".settings_notification");
+  notifSetting.setAttribute("data-disabled", "true");
   notifSetting.setAttribute(
     "title",
     `Notification not available in the browser`,
-  )
-  notifCheckbox.disabled = true
-}
+  );
+  notifCheckbox.disabled = true;
+};
 const applyNotificationDefaultEffects = () => {
-  applyNotificationNOTGrantedEffects()
-  const notifSetting = document.querySelector(".settings_notification")
-  notifSetting.removeAttribute("data-disabled")
-  notifSetting.removeAttribute("title")
-}
+  applyNotificationNOTGrantedEffects();
+  const notifSetting = document.querySelector(".settings_notification");
+  notifSetting.removeAttribute("data-disabled");
+  notifSetting.removeAttribute("title");
+};
 const applyNotificationDeniedEffects = () => {
-  applyNotificationNOTGrantedEffects()
-  const notifSetting = document.querySelector(".settings_notification")
-  notifSetting.setAttribute("data-disabled", "true")
-  notifSetting.setAttribute("title", `Notification denied`)
-}
+  applyNotificationNOTGrantedEffects();
+  const notifSetting = document.querySelector(".settings_notification");
+  notifSetting.setAttribute("data-disabled", "true");
+  notifSetting.setAttribute("title", `Notification denied`);
+};
 const applyNotificationGrantedEffects = () => {
   enableVariant(document.querySelector(".notification_text"), {
     notif_granted: "yes",
-  })
-  notifCheckbox.disabled = false
+  });
+  notifCheckbox.disabled = false;
   notifCheckbox.onchange = () => {
     if (notifCheckbox.checked) {
-      enableNotifications()
+      enableNotifications();
     } else {
-      disableNotifications()
+      disableNotifications();
     }
-  }
-}
+  };
+};
 
 const applyNotificationNOTGrantedEffects = () => {
   enableVariant(document.querySelector(".notification_text"), {
     notif_granted: "no",
-  })
-  notifCheckbox.disabled = true
-  notifCheckbox.checked = false
+  });
+  notifCheckbox.disabled = true;
+  notifCheckbox.checked = false;
   document.querySelector("a.request_notification_permission").onclick = () => {
-    requestPermission()
-  }
-}
+    requestPermission();
+  };
+};