@jsenv/plugin-toolbar 0.0.1 → 0.1.0

package/src/client/ui/toolbar.css

@@ -0,0 +1,76 @@
+@import "./globals.css";
+@import "./document_execution_indicator/document_execution_indicator.css";
+@import "./server_indicator/server_indicator.css";
+@import "./toolbar_settings/toolbar_settings.css";
+@import "./toolbar_menu_overflow/toolbar_menu_overflow.css";
+@import "./tooltips/tooltips.css";
+
+.toolbar_control {
+  background: none;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: 40px;
+  padding: 0;
+}
+
+.toolbar_control:hover {
+  cursor: pointer;
+}
+
+/* file and settings icons */
+#document_index_icon,
+.settings-icon {
+  width: 20px;
+}
+
+.toolbar_icon {
+  height: 40px;
+  fill: #cecece;
+  color: #cecece;
+}
+
+.toolbar_icon:hover {
+  fill: #909090 !important;
+}
+
+.toolbar_icon_wrapper {
+  height: 100%;
+  text-align: center;
+  width: 40px;
+  display: inline-block;
+}
+
+#file[data-active] {
+  background: rgba(31, 38, 44, 0.72);
+}
+
+#settings[data-active] button {
+  background: #030713;
+}
+
+#toolbar_close_button_icon {
+  width: 18px;
+}
+
+#toolbar a {
+  color: inherit;
+}
+
+#changes_indicator button {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  width: auto;
+}
+
+.changes_icon {
+  width: 32px;
+}
+
+.changes_text {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,15 @@
+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
+  // it will cancel the closing
+  // that's why I used toggleToolbar and not hideToolbar
+  document.querySelector("#toolbar_close_button").onclick = () => {
+    if (openedSignal.value) {
+      closeToolbar()
+    } else {
+      openToolbar()
+    }
+  }
+}

package/src/client/{responsive/overflow_menu.css → ui/toolbar_menu_overflow/toolbar_menu_overflow.css}

@@ -1,4 +1,4 @@
-#overflow-menu-button {
+#menu_overflow_button {
   display: none;
   position: absolute;
   top: 0;
@@ -7,11 +7,11 @@
   background: #404040;
 }
 
-#dotsIconSvg {
+#menu_overflow_icon {
   width: 25px;
 }
 
-#overflow-menu {
+#menu_overflow {
   visibility: hidden; /* disable keyboard navigation */
   display: none;
   position: absolute;
@@ -24,31 +24,30 @@
   opacity: 0;
 }
 
-#overflow-menu[data-animate] {
+#menu_overflow[data-animate] {
   transition-property: left, opacity;
   transition-duration: 0.3s;
 }
 
-#overflow-menu > * {
-  display: table-cell;
+#menu_overflow > * {
   vertical-align: middle;
   text-align: center;
 }
 
-#toolbar[data-overflow-menu-enabled] #overflow-menu-button {
+#toolbar[data-menu-overflow-enabled] #menu_overflow_button {
   display: block;
 }
 
-#toolbar[data-overflow-menu-visible] #overflow-menu-button {
+#toolbar[data-menu-overflow-opened] #menu_overflow_button {
   background: #030713;
 }
 
-#toolbar[data-overflow-menu-enabled][data-overflow-menu-visible]
+#toolbar[data-menu-overflow-enabled][data-menu-overflow-opened]
   #toolbar-wrapper {
   visibility: hidden; /* disable keyboard navigation */
 }
 
-#toolbar[data-overflow-menu-visible] #overflow-menu {
+#toolbar[data-menu-overflow-opened] #menu_overflow {
   visibility: visible; /* restore keyboard navigation */
   display: block;
   opacity: 1;
@@ -56,6 +55,6 @@
   margin-left: -40px;
 }
 
-#toolbar[data-overflow-menu-enabled] #settings-box {
+#toolbar[data-menu-overflow-enabled] #settings_box {
   right: -40px;
 }

package/src/client/{responsive/toolbar_responsive.js → ui/toolbar_menu_overflow/toolbar_menu_overflow.js}

@@ -1,14 +1,14 @@
+import { closeAllTooltips } from "../../core/tooltip_actions.js"
 import {
   forceHideElement,
   removeForceHideElement,
   deactivateToolbarSection,
 } from "../util/dom.js"
 import { createHorizontalBreakpoint } from "../util/responsive.js"
-import { hideTooltip } from "../tooltip/tooltip.js"
 
 const WINDOW_SMALL_WIDTH = 420
 
-export const makeToolbarResponsive = () => {
+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)
@@ -18,15 +18,18 @@ export const makeToolbarResponsive = () => {
   handleOverflowMenuBreakpoint()
   overflowMenuBreakpoint.changed.listen(handleOverflowMenuBreakpoint)
 
-  // overflow menu
-  document.querySelector("#overflow-menu-button").onclick = () =>
-    toggleOverflowMenu()
+  document.querySelector("#menu_overflow_button").onclick = () => {
+    if (overflowMenuIsOpened()) {
+      closeOverflowMenu()
+    } else {
+      openOverflowMenu()
+    }
+  }
 }
 
 const responsiveToolbar = (overflowMenuBreakpoint) => {
   // close all tooltips in case opened
-  hideTooltip(document.querySelector("#eventsource-indicator"))
-  hideTooltip(document.querySelector("#execution-indicator"))
+  closeAllTooltips()
   // close settings box in case opened
   deactivateToolbarSection(document.querySelector("#settings"))
 
@@ -44,7 +47,7 @@ const enableOverflow = () => {
   const responsiveToolbarElements = document.querySelectorAll(
     "[data-responsive-toolbar-element]",
   )
-  const overflowMenu = document.querySelector("#overflow-menu")
+  const overflowMenu = document.querySelector("#menu_overflow")
 
   // keep a placeholder element to know where to move them back
   moves = Array.from(responsiveToolbarElements).map((element) => {
@@ -58,46 +61,37 @@ const enableOverflow = () => {
 
   document
     .querySelector("#toolbar")
-    .setAttribute("data-overflow-menu-enabled", "")
-  removeForceHideElement(document.querySelector("#overflow-menu-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
-  hideOverflowMenu()
-  deactivateToolbarSection(document.querySelector("#overflow-menu"))
+  closeOverflowMenu()
+  deactivateToolbarSection(document.querySelector("#menu_overflow"))
   moves.forEach(({ element, placeholder }) => {
     placeholder.parentNode.replaceChild(element, placeholder)
   })
   moves = []
-
   document
     .querySelector("#toolbar")
-    .removeAttribute("data-overflow-menu-enabled")
-  forceHideElement(document.querySelector("#overflow-menu-button"))
-}
-
-const toggleOverflowMenu = () => {
-  if (overflowMenuIsVisible()) {
-    hideOverflowMenu()
-  } else {
-    showOverflowMenu()
-  }
+    .removeAttribute("data-menu-overflow-enabled")
+  forceHideElement(document.querySelector("#menu_overflow_button"))
 }
 
-const overflowMenuIsVisible = () => {
+const overflowMenuIsOpened = () => {
   const toolbar = document.querySelector("#toolbar")
-  return toolbar.hasAttribute("data-overflow-menu-visible")
+  return toolbar.hasAttribute("data-menu-overflow-opened")
 }
 
-const showOverflowMenu = () => {
+const openOverflowMenu = () => {
   const toolbar = document.querySelector("#toolbar")
-  document.querySelector("#overflow-menu").setAttribute("data-animate", "")
-  toolbar.setAttribute("data-overflow-menu-visible", "")
+  document.querySelector("#menu_overflow").setAttribute("data-animate", "")
+  toolbar.setAttribute("data-menu-overflow-opened", "")
 }
 
-const hideOverflowMenu = () => {
+const closeOverflowMenu = () => {
   const toolbar = document.querySelector("#toolbar")
-  toolbar.removeAttribute("data-overflow-menu-visible")
-  document.querySelector("#overflow-menu").removeAttribute("data-animate")
+  toolbar.removeAttribute("data-menu-overflow-opened")
+  document.querySelector("#menu_overflow").removeAttribute("data-animate")
 }

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

@@ -0,0 +1,73 @@
+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"
+
+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/src/client/ui/toolbar_overlay/toolbar_overlay.js

@@ -0,0 +1,76 @@
+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"
+
+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/src/client/{theme → ui/toolbar_settings}/jsenv_theme.css

@@ -1,8 +1,8 @@
 /* icons */
-html[data-theme="jsenv"] .iconToolbar {
+html[data-theme="jsenv"] .toolbar_icon {
   fill: #de5600;
 }
-html[data-theme="jsenv"] .iconToolbar:hover {
+html[data-theme="jsenv"] .toolbar_icon:hover {
   fill: #9a5300 !important;
 }
 
@@ -52,13 +52,13 @@ html[data-theme="jsenv"] .tooltip {
   background-color: #ffd390;
   color: #884900;
 }
-html[data-theme="jsenv"] .tooltipAction {
+html[data-theme="jsenv"] .tooltip_action {
   border-color: #884900;
 }
-html[data-theme="jsenv"] .tooltipAction a {
+html[data-theme="jsenv"] .tooltip_action a {
   color: #884900;
 }
-html[data-theme="jsenv"] .tooltipIcon {
+html[data-theme="jsenv"] .tooltip_icon {
   fill: #884900;
 }
 html[data-theme="jsenv"] .tooltip::after {
@@ -69,7 +69,7 @@ html[data-theme="jsenv"] .tooltip::after {
 html[data-theme="jsenv"] h2 {
   color: orange;
 }
-html[data-theme="jsenv"] #fileIconSvgConfig {
+html[data-theme="jsenv"] #explorables_icon {
   fill: orange;
 }
 html[data-theme="jsenv"] #explorables h2 span {

package/src/client/{theme/light_theme.css → ui/toolbar_settings/theme_light.css}

@@ -4,10 +4,10 @@ html[data-theme="light"] #toolbar {
 }
 
 /* icons */
-html[data-theme="light"] .iconToolbar {
+html[data-theme="light"] .toolbar_icon {
   fill: #404040;
 }
-html[data-theme="light"] .iconToolbar:hover {
+html[data-theme="light"] .toolbar_icon:hover {
   fill: #757575 !important;
 }
 
@@ -57,7 +57,7 @@ html[data-theme="light"] .tooltip {
   background-color: rgb(138, 145, 154);
   color: #fff;
 }
-html[data-theme="light"] .tooltipAction {
+html[data-theme="light"] .tooltip_action {
   border-color: #fff;
 }
 html[data-theme="light"] .tooltip::after {
@@ -65,15 +65,15 @@ html[data-theme="light"] .tooltip::after {
 }
 
 /* overflow menu */
-html[data-theme="light"] #overflow-menu-button {
+html[data-theme="light"] #menu_overflow_button {
   background: #e8eff3;
 }
 html[data-theme="light"]
-  #toolbar[data-overflow-menu-visible]
-  #overflow-menu-button {
+  #toolbar[data-menu-overflow-opened]
+  #menu_overflow_button {
   background: #a5a9ad;
 }
-html[data-theme="light"] #overflow-menu {
+html[data-theme="light"] #menu_overflow {
   background: #dfe4e7;
 }
 
@@ -82,14 +82,13 @@ html[data-theme="light"] h2,
 html[data-theme="light"] h4 {
   color: #076570;
 }
-html[data-theme="light"] #fileIconSvgConfig {
+html[data-theme="light"] #explorables_icon {
   fill: #076570;
 }
 html[data-theme="light"] #explorables h2 span {
   color: #ff8d00;
 }
-html[data-theme="light"] article[data-page="file-list"],
-html[data-theme="light"] #file-list-link[data-active] a {
+html[data-theme="light"] article[data-page="file-list"] {
   background: #bbd5ea;
 }
 html[data-theme="light"] #explorables fieldset input:checked + * {

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

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

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

@@ -0,0 +1,79 @@
+import { effect } from "@preact/signals"
+
+import { autoreloadEnabledSignal } from "../../core/parent_window_signals.js"
+import {
+  disableAutoreload,
+  enableAutoreload,
+} from "../../core/parent_window_actions.js"
+
+export const renderToolbarAutoreloadSetting = () => {
+  const parentWindowReloader = window.parent.__reloader__
+  if (!parentWindowReloader) {
+    disableAutoreloadSetting()
+    return
+  }
+
+  const autoreloadCheckbox = document.querySelector("#toggle_autoreload")
+  effect(() => {
+    const autoreloadEnabled = autoreloadEnabledSignal.value
+    if (autoreloadEnabled) {
+      autoreloadCheckbox.checked = true
+    } else {
+      autoreloadCheckbox.checked = false
+    }
+  })
+
+  autoreloadCheckbox.onchange = () => {
+    if (autoreloadCheckbox.checked) {
+      enableAutoreload()
+    } else {
+      disableAutoreload()
+    }
+  }
+}
+
+const disableAutoreloadSetting = () => {
+  document
+    .querySelector(".settings_autoreload")
+    .setAttribute("data-disabled", "true")
+  document
+    .querySelector(".settings_autoreload")
+    .setAttribute("title", `Autoreload not enabled on server`)
+  document.querySelector("#toggle_autoreload").disabled = true
+}
+
+// const changeLink = variantNode.querySelector(".eventsource-changes-link")
+// changeLink.innerHTML = reloadMessageCount
+// changeLink.onclick = () => {
+//   console.log(reloadMessages)
+//   // eslint-disable-next-line no-alert
+//   window.parent.alert(JSON.stringify(reloadMessages, null, "  "))
+// }
+
+// const someFailed = reloadMessages.some((m) => m.status === "failed")
+// const somePending = reloadMessages.some((m) => m.status === "pending")
+// const applyLink = variantNode.querySelector(".eventsource-reload-link")
+// applyLink.innerHTML = someFailed
+//   ? "failed"
+//   : somePending
+//   ? "applying..."
+//   : "apply changes"
+// applyLink.onclick = someFailed
+//   ? () => {
+//       parentEventSourceClient.applyReloadMessageEffects()
+//     }
+//   : somePending
+//   ? () => {}
+//   : () => {
+//       parentEventSourceClient.applyReloadMessageEffects()
+//     }
+
+// parentEventSourceClient.reloadMessagesSignal.onchange = () => {
+//   updateEventSourceIndicator()
+// }
+// const autoreloadCheckbox = document.querySelector("#toggle-autoreload")
+// autoreloadCheckbox.checked = parentEventSourceClient.isAutoreloadEnabled()
+// autoreloadCheckbox.onchange = () => {
+//   parentEventSourceClient.setAutoreloadPreference(autoreloadCheckbox.checked)
+//   updateEventSourceIndicator()
+// }