@jsenv/plugin-toolbar 0.0.1

package/src/client/toolbar_main.css

@@ -0,0 +1,173 @@
+@import "./execution/execution.css";
+@import "./focus/focus.css";
+@import "./eventsource/eventsource.css";
+@import "./responsive/overflow_menu.css";
+@import "./settings/settings.css";
+@import "./theme/light_theme.css";
+@import "./tooltip/tooltip.css";
+
+html[data-animation-disabled] * {
+  transition: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+}
+
+[data-when] {
+  display: none !important;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+html {
+  font-family: arial, sans;
+}
+
+/* global utils */
+[data-force-hide] {
+  display: none !important;
+}
+
+#toolbar-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  filter: url(#better-blur);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+#toolbar {
+  position: fixed;
+  bottom: 0;
+  height: 40px;
+  width: 100%;
+  background: #404040;
+}
+
+#toolbar-wrapper {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+
+#toolbar-wrapper > * {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#toolbar button {
+  background: none;
+  border: none;
+  height: 100%;
+  padding: 0;
+}
+
+#toolbar button:hover {
+  cursor: pointer;
+}
+
+#toolbar a:hover {
+  cursor: pointer;
+}
+
+/* file and settings icons */
+#fileIconSvg,
+.settings-icon {
+  width: 20px;
+}
+
+.iconToolbar {
+  height: 40px;
+  fill: #cecece;
+  color: #cecece;
+}
+
+.iconToolbar:hover {
+  fill: #909090 !important;
+}
+
+.toolbar-icon-wrapper {
+  height: 100%;
+  text-align: center;
+  width: 40px;
+  display: inline-block;
+}
+
+#file-list-link[data-active] a {
+  background: #1f262c;
+}
+
+#file[data-active] {
+  background: rgba(31, 38, 44, 0.72);
+}
+
+#settings[data-active] button {
+  background: #030713;
+}
+
+/* close icon */
+#crossIconSvg {
+  width: 18px;
+}
+
+/* re-open toolbar-trigger */
+#toolbar-trigger {
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  bottom: -32px;
+  right: 20px;
+  height: 40px;
+  width: 40px;
+  padding: 0;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid rgba(0, 0, 0, 0.33);
+  border-bottom: none;
+  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
+  background: transparent;
+}
+
+#toolbar-trigger[data-animate] {
+  transition: 600ms;
+}
+
+#toolbar-trigger #jsenvLogoSvg {
+  width: 35px;
+  height: 35px;
+  opacity: 0;
+  transition: 600ms;
+}
+
+html[data-toolbar-visible] #toolbar-trigger {
+  display: none;
+}
+
+#toolbar-trigger:hover {
+  cursor: pointer;
+}
+
+#toolbar-trigger[data-expanded] {
+  bottom: 0;
+}
+
+#toolbar-trigger[data-expanded] #jsenvLogoSvg {
+  opacity: 1;
+}
+
+/* #jsenvLogo {
+  transition: 600ms;
+} */
+
+#toolbar a {
+  color: inherit;
+}

package/src/client/toolbar_main.js

@@ -0,0 +1,174 @@
+import { updateToolbarState } from "./toolbar_state.js"
+import { addExternalCommandCallback } from "./communication/parent_window_communication.js"
+import { startJavaScriptAnimation } from "./util/animation.js"
+import "./focus/toolbar_focus.js"
+import { setLinkHrefForParentWindow } from "./util/iframe_to_parent_href.js"
+import {
+  getToolbarIframe,
+  deactivateToolbarSection,
+  setStyles,
+} from "./util/dom.js"
+import { createPreference } from "./util/preferences.js"
+import { hideTooltip, hideAllTooltip } from "./tooltip/tooltip.js"
+import {
+  renderToolbarSettings,
+  hideSettings,
+} from "./settings/toolbar_settings.js"
+import { animationsAreEnabled } from "./animation/toolbar_animation_core.js"
+import { renderToolbarNotification } from "./notification/toolbar_notification.js"
+import { renderToolbarTheme } from "./theme/toolbar_theme.js"
+import { renderToolbarAnimation } from "./animation/toolbar_animation_ui.js"
+import { renderExecutionInToolbar } from "./execution/toolbar_execution.js"
+import { initToolbarEventSource } from "./eventsource/toolbar_eventsource.js"
+import { makeToolbarResponsive } from "./responsive/toolbar_responsive.js"
+
+const toolbarVisibilityPreference = createPreference("jsenv_toolbar_visible")
+
+const renderToolbar = async () => {
+  const toolbarOverlay = document.querySelector("#toolbar-overlay")
+  toolbarOverlay.onclick = () => {
+    hideAllTooltip()
+    hideSettings()
+  }
+
+  const toolbarVisible = toolbarVisibilityPreference.has()
+    ? toolbarVisibilityPreference.get()
+    : true
+
+  if (toolbarVisible) {
+    showToolbar({ animate: false })
+  } else {
+    hideToolbar({ animate: false })
+  }
+
+  setLinkHrefForParentWindow(
+    document.querySelector(".toolbar-icon-wrapper"),
+    "/",
+  )
+  renderToolbarNotification()
+  makeToolbarResponsive()
+  renderToolbarSettings()
+  renderToolbarAnimation()
+  renderToolbarTheme()
+  renderExecutionInToolbar()
+  // this might become active but we need to detect this somehow
+  deactivateToolbarSection(document.querySelector("#file-list-link"))
+  initToolbarEventSource()
+
+  // 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("#button-close-toolbar").onclick = () =>
+    toogleToolbar()
+}
+
+const toogleToolbar = () => {
+  if (toolbarIsVisible()) {
+    hideToolbar()
+  } else {
+    showToolbar()
+  }
+}
+
+const toolbarIsVisible = () =>
+  document.documentElement.hasAttribute("data-toolbar-visible")
+
+let hideToolbar = () => {
+  // toolbar hidden by default, nothing to do to hide it by default
+  updateToolbarState({
+    visible: false,
+  })
+}
+
+// (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 = () => {
+  toolbarVisibilityPreference.set(true)
+  if (animationsAreEnabled()) {
+    document.documentElement.setAttribute("data-toolbar-animation", "")
+  } else {
+    document.documentElement.removeAttribute("data-toolbar-animation")
+  }
+  document.documentElement.setAttribute("data-toolbar-visible", "")
+
+  updateToolbarState({
+    visible: true,
+  })
+
+  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": animationsAreEnabled() ? "300ms" : "0s",
+  })
+  // maybe we should use js animation here because we would not conflict with css
+  const 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
+  })
+  const 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
+      },
+    })
+  }
+
+  hideToolbar = () => {
+    restoreToolbarIframeParentStyles()
+    restoreToolbarIframeStyles()
+
+    hideTooltip(document.querySelector("#eventsource-indicator"))
+    hideTooltip(document.querySelector("#execution-indicator"))
+    toolbarVisibilityPreference.set(false)
+    if (animationsAreEnabled()) {
+      document.documentElement.setAttribute("data-toolbar-animation", "")
+    } else {
+      document.documentElement.removeAttribute("data-toolbar-animation")
+    }
+    document.documentElement.removeAttribute("data-toolbar-visible")
+    updateToolbarState({
+      visible: false,
+    })
+  }
+}
+
+window.toolbar = {
+  show: showToolbar,
+  hide: () => hideToolbar(),
+}
+
+// const { currentScript } = document
+addExternalCommandCallback("renderToolbar", ({ logs }) => {
+  renderToolbar({
+    logs,
+  })
+})
+addExternalCommandCallback("showToolbar", () => {
+  showToolbar()
+})
+addExternalCommandCallback("hideToolbar", () => {
+  hideToolbar()
+})
+updateToolbarState({
+  ready: true,
+})

package/src/client/toolbar_state.js

@@ -0,0 +1,16 @@
+import { sendEventToParent } from "./communication/parent_window_communication.js"
+
+export const toolbarState = {
+  ready: false,
+  visible: false,
+  animationsEnabled:
+    window.localStorage.getItem("jsenv_toolbar_animation") === "true",
+}
+
+export const updateToolbarState = (properties) => {
+  Object.assign(toolbarState, properties)
+  if (!toolbarState.ready) {
+    return
+  }
+  sendEventToParent("toolbar_state_change", toolbarState)
+}

package/src/client/tooltip/tooltip.css

@@ -0,0 +1,61 @@
+.tooltip {
+  display: none;
+  background-color: rgb(94, 94, 94);
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  position: absolute;
+  bottom: 120%;
+  padding: 10px;
+  font-size: 14px;
+  margin-left: -40px;
+  max-width: 260px;
+  cursor: default;
+}
+
+.tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 60px;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgb(94, 94, 94) transparent transparent transparent;
+}
+
+[data-tooltip-visible] .tooltip,
+[data-tooltip-auto-visible] .tooltip {
+  display: block;
+  animation: fadeIn ease 0.4s;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.tooltipAction {
+  display: inline-block;
+  border: 1px solid #a0a0a0;
+  border-radius: 3px;
+  padding: 3px 7px;
+  margin-top: 6px;
+}
+
+.tooltipAction a {
+  vertical-align: middle;
+  color: white;
+  text-decoration: none;
+}
+
+.tooltipIcon {
+  fill: white;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}

package/src/client/tooltip/tooltip.js

@@ -0,0 +1,39 @@
+import { updateIframeOverflowOnParentWindow } from "../util/dom.js"
+
+export const toggleTooltip = (element) => {
+  if (element.hasAttribute("data-tooltip-visible")) {
+    hideTooltip(element)
+  } else {
+    showTooltip(element)
+  }
+}
+
+export const hideTooltip = (element) => {
+  element.removeAttribute("data-tooltip-visible")
+  element.removeAttribute("data-tooltip-auto-visible")
+  updateIframeOverflowOnParentWindow()
+}
+
+export const showTooltip = (element) => {
+  element.setAttribute("data-tooltip-visible", "")
+  updateIframeOverflowOnParentWindow()
+}
+
+export const autoShowTooltip = (element) => {
+  element.setAttribute("data-tooltip-auto-visible", "")
+  updateIframeOverflowOnParentWindow()
+}
+
+export const removeAutoShowTooltip = (element) => {
+  element.removeAttribute("data-tooltip-auto-visible")
+  updateIframeOverflowOnParentWindow()
+}
+
+export const hideAllTooltip = () => {
+  const elementsWithTooltip = Array.from(
+    document.querySelectorAll("[data-tooltip-visible]"),
+  )
+  elementsWithTooltip.forEach((elementWithTooltip) => {
+    hideTooltip(elementWithTooltip)
+  })
+}