@jsenv/plugin-toolbar 0.1.0 → 0.1.2

package/dist/js/toolbar_injector.js

@@ -1,5 +1,5 @@
 const jsenvLogoSvgUrl = new URL("../other/jsenv_logo.svg", import.meta.url);
-const injectToolbar = async ({
+export const injectToolbar = async ({
   toolbarUrl,
   logLevel,
   theme,
@@ -234,6 +234,4 @@ const iframeToLoadedPromise = iframe => {
     };
     iframe.addEventListener("load", onload, true);
   });
-};
-
-export { injectToolbar };
+};

package/dist/js/toolbar_menu_overflow.js

@@ -0,0 +1,81 @@
+import { closeAllTooltips } from "./tooltip_actions.js";
+import { forceHideElement, removeForceHideElement, deactivateToolbarSection } from "./dom.js";
+import { createHorizontalBreakpoint } from "./responsive.js";
+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 handleOverflowMenuBreakpoint = () => {
+    responsiveToolbar(overflowMenuBreakpoint);
+  };
+  handleOverflowMenuBreakpoint();
+  overflowMenuBreakpoint.changed.listen(handleOverflowMenuBreakpoint);
+  document.querySelector("#menu_overflow_button").onclick = () => {
+    if (overflowMenuIsOpened()) {
+      closeOverflowMenu();
+    } else {
+      openOverflowMenu();
+    }
+  };
+};
+const responsiveToolbar = overflowMenuBreakpoint => {
+  // close all tooltips in case opened
+  closeAllTooltips();
+  // close settings box in case opened
+  deactivateToolbarSection(document.querySelector("#settings"));
+  if (overflowMenuBreakpoint.isBelow()) {
+    enableOverflow();
+  } else {
+    disableOverflow();
+  }
+};
+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");
+
+  // 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
+    };
+  });
+  document.querySelector("#toolbar").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"));
+  moves.forEach(({
+    element,
+    placeholder
+  }) => {
+    placeholder.parentNode.replaceChild(element, placeholder);
+  });
+  moves = [];
+  document.querySelector("#toolbar").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 openOverflowMenu = () => {
+  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");
+};

package/dist/js/toolbar_notification_setting.js

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

package/dist/js/toolbar_open_actions.js

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

package/dist/js/toolbar_open_effects.js

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

package/dist/js/toolbar_open_signals.js

@@ -0,0 +1,4 @@
+import { signal } from "./signals.mjs";
+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/dist/js/toolbar_opening.js

@@ -0,0 +1,65 @@
+import { effect } from "./signals.mjs";
+import { closeAllTooltips } from "./tooltip_actions.js";
+import { animationsEnabledSignal } from "./animation_signals.js";
+import { openedSignal } from "./toolbar_open_signals.js";
+import { getToolbarIframe, setStyles } from "./dom.js";
+import { startJavaScriptAnimation } from "./animation.js";
+export const initToolbarOpening = () => {
+  effect(() => {
+    const opened = openedSignal.value;
+    if (opened) {
+      showToolbar();
+    } else {
+      hideToolbar();
+    }
+  });
+};
+let restoreToolbarIframeParentStyles = () => {};
+let restoreToolbarIframeStyles = () => {};
+const hideToolbar = () => {
+  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 toolbarIframe = getToolbarIframe();
+  const toolbarIframeParent = toolbarIframe.parentNode;
+  const parentWindow = window.parent;
+  const parentDocumentElement = parentWindow.document.compatMode === "CSS1Compat" ? parentWindow.document.documentElement : parentWindow.document.body;
+  const scrollYMax = 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;
+    startJavaScriptAnimation({
+      duration: 300,
+      onProgress: ({
+        progress
+      }) => {
+        const value = scrollY + (scrollEnd - scrollY) * progress;
+        parentDocumentElement.scrollTop = value;
+      }
+    });
+  }
+};

package/dist/js/toolbar_overlay.js

@@ -0,0 +1,69 @@
+import { effect } from "./signals.mjs";
+import { openedSignal } from "./toolbar_open_signals.js";
+import { settingsOpenedSignal } from "./settings_signals.js";
+import { closeSettings } from "./settings_actions.js";
+import { closeAllTooltips } from "./tooltip_actions.js";
+import { executionTooltipOpenedSignal } from "./execution_signals.js";
+import { changesTooltipOpenedSignal } from "./changes_signals.js";
+import { serverTooltipOpenedSignal } from "./server_signals.js";
+import { getToolbarIframe, setStyles } from "./dom.js";
+export const renderToolbarOverlay = () => {
+  const toolbarOverlay = document.querySelector("#toolbar_overlay");
+  toolbarOverlay.onclick = () => {
+    closeAllTooltips();
+    closeSettings();
+  };
+  effect(() => {
+    if (!window.parent) {
+      // can happen while parent iframe reloads
+      return;
+    }
+    const opened = openedSignal.value;
+    const settingsOpened = settingsOpenedSignal.value;
+    const executionTooltipOpened = executionTooltipOpenedSignal.value;
+    const changesTooltipOpened = changesTooltipOpenedSignal.value;
+    const serverTooltipOpened = serverTooltipOpenedSignal.value;
+    if (!opened) {
+      return;
+    }
+    if (settingsOpened || executionTooltipOpened || changesTooltipOpened || serverTooltipOpened) {
+      enableIframeOverflowOnParentWindow();
+    } else {
+      disableIframeOverflowOnParentWindow();
+    }
+  });
+};
+const enableIframeOverflowOnParentWindow = () => {
+  const iframe = getToolbarIframe();
+  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
+      });
+    });
+  }
+};
+const disableIframeOverflowOnParentWindow = () => {
+  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
+      });
+    });
+  }
+};

package/dist/js/toolbar_settings.js

@@ -0,0 +1,44 @@
+import { effect } from "./signals.mjs";
+import { settingsOpenedSignal } from "./settings_signals.js";
+import { openSettings, closeSettings } from "./settings_actions.js";
+import { enableVariant } from "./variant.js";
+import { activateToolbarSection, deactivateToolbarSection } from "./dom.js";
+import { renderToolbarAutoreloadSetting } from "./toolbar_autoreload_setting.js";
+import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js";
+import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js";
+import { renderToolbarThemeSetting } from "./toolbar_theme_setting.js";
+export const renderToolbarSettings = () => {
+  document.querySelector("#settings_open_button").onclick = toggleSettings;
+  document.querySelector("#settings_close_button").onclick = toggleSettings;
+  disableWarningStyle();
+  renderToolbarAutoreloadSetting();
+  renderToolbarAnimationSetting();
+  renderToolbarNotificationSetting();
+  renderToolbarThemeSetting();
+  effect(() => {
+    const settingsOpened = settingsOpenedSignal.value;
+    if (settingsOpened) {
+      activateToolbarSection(document.querySelector("#settings"));
+    } else {
+      deactivateToolbarSection(document.querySelector("#settings"));
+    }
+  });
+};
+const toggleSettings = () => {
+  const settingsOpened = settingsOpenedSignal.value;
+  if (settingsOpened) {
+    closeSettings();
+  } else {
+    openSettings();
+  }
+};
+export const enableWarningStyle = () => {
+  enableVariant(document.querySelector("#settings_open_button"), {
+    has_warning: "yes"
+  });
+};
+export const disableWarningStyle = () => {
+  enableVariant(document.querySelector("#settings_open_button"), {
+    has_warning: "no"
+  });
+};

package/dist/js/toolbar_state_context.js

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

package/dist/js/toolbar_state_effects.js

@@ -0,0 +1,8 @@
+import { effect } from "./signals.mjs";
+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/dist/js/toolbar_state_signals.js

@@ -0,0 +1,17 @@
+import { computed } from "./signals.mjs";
+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/dist/js/toolbar_theme_setting.js

@@ -0,0 +1,13 @@
+import { themeSignal } from "./theme_signals.js";
+import { switchToDefaultTheme, switchToLightTheme } from "./theme_actions.js";
+export const renderToolbarThemeSetting = () => {
+  const checkbox = document.querySelector("#checkbox_dark_theme");
+  checkbox.checked = themeSignal.value === "dark";
+  checkbox.onchange = () => {
+    if (checkbox.checked) {
+      switchToDefaultTheme();
+    } else {
+      switchToLightTheme();
+    }
+  };
+};

package/dist/js/toolbar_ui.js

@@ -0,0 +1,20 @@
+import { initToolbarOpening } from "./toolbar_opening.js";
+import { initToolbarMenuOverflow } from "./toolbar_menu_overflow.js";
+import { renderToolbarOverlay } from "./toolbar_overlay.js";
+import { renderDocumentIndexLink } from "./document_index_link.js";
+import { renderDocumentExecutionIndicator } from "./document_execution_indicator.js";
+import { renderChangesIndicator } from "./changes_indicator.js";
+import { renderServerIndicator } from "./server_indicator.js";
+import { renderToolbarSettings } from "./toolbar_settings.js";
+import { renderToolbarCloseButton } from "./toolbar_close_button.js";
+export const initToolbarUI = () => {
+  initToolbarOpening();
+  initToolbarMenuOverflow();
+  renderToolbarOverlay();
+  renderDocumentIndexLink();
+  renderDocumentExecutionIndicator();
+  renderChangesIndicator();
+  renderServerIndicator();
+  renderToolbarSettings();
+  renderToolbarCloseButton();
+};

package/dist/js/tooltip_actions.js

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

package/dist/js/variant.js

@@ -0,0 +1,53 @@
+export const enableVariant = (rootNode, variables) => {
+  const nodesNotMatching = Array.from(rootNode.querySelectorAll(`[${attributeIndicatingACondition}]`));
+  nodesNotMatching.forEach(nodeNotMatching => {
+    const conditionAttributeValue = nodeNotMatching.getAttribute(attributeIndicatingACondition);
+    const matches = testCondition(conditionAttributeValue, variables);
+    if (matches) {
+      renameAttribute(nodeNotMatching, attributeIndicatingACondition, attributeIndicatingAMatch);
+    }
+  });
+  const nodesMatching = Array.from(rootNode.querySelectorAll(`[${attributeIndicatingAMatch}]`));
+  nodesMatching.forEach(nodeMatching => {
+    const conditionAttributeValue = nodeMatching.getAttribute(attributeIndicatingAMatch);
+    const matches = testCondition(conditionAttributeValue, variables);
+    if (!matches) {
+      renameAttribute(nodeMatching, attributeIndicatingAMatch, attributeIndicatingACondition);
+    }
+  });
+};
+const testCondition = (conditionAttributeValue, variables) => {
+  const condition = parseCondition(conditionAttributeValue);
+  return Object.keys(variables).some(key => {
+    if (condition.key !== key) {
+      return false;
+    }
+    // the condition do not specify a value, any value is ok
+    if (condition.value === undefined) {
+      return true;
+    }
+    if (condition.value === variables[key]) {
+      return true;
+    }
+    return false;
+  });
+};
+const parseCondition = conditionAttributeValue => {
+  const colonIndex = conditionAttributeValue.indexOf(":");
+  if (colonIndex === -1) {
+    return {
+      key: conditionAttributeValue,
+      value: undefined
+    };
+  }
+  return {
+    key: conditionAttributeValue.slice(0, colonIndex),
+    value: conditionAttributeValue.slice(colonIndex + 1)
+  };
+};
+const attributeIndicatingACondition = `data-when`;
+const attributeIndicatingAMatch = `data-when-active`;
+const renameAttribute = (node, name, newName) => {
+  node.setAttribute(newName, node.getAttribute(name));
+  node.removeAttribute(name);
+};

package/dist/jsenv_plugin_toolbar.js

@@ -1,6 +1,5 @@
-import { parseHtmlString, injectScriptNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst } from "@jsenv/ast";
-
-const jsenvPluginToolbar = ({
+import { parseHtmlString, stringifyHtmlAst, injectScriptNodeAsEarlyAsPossible, createHtmlNode } from "@jsenv/ast";
+export const jsenvPluginToolbar = ({
   logLevel = "warn",
   theme = "dark",
   opened = false,
@@ -52,6 +51,4 @@ injectToolbar(${JSON.stringify({
       }
     }
   };
-};
-
-export { jsenvPluginToolbar };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-toolbar",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "/src/"
   ],
   "dependencies": {
-    "@jsenv/ast": "1.4.7",
+    "@jsenv/ast": "1.4.9",
     "@preact/signals": "1.1.2"
   },
   "scripts": {