@jsenv/core 29.8.5 → 29.9.0

package/src/plugins/toolbar/client/toolbar_main.css

@@ -1,172 +0,0 @@
-@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;
-}
-
-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/plugins/toolbar/client/toolbar_main.js

@@ -1,197 +0,0 @@
-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 { renderToolbarNotification } from "./notification/toolbar_notification.js"
-import { renderToolbarTheme } from "./theme/toolbar_theme.js"
-import { renderToolbarAnimation } from "./animation/toolbar_animation.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("toolbar")
-
-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
-  sendEventToParent("toolbar-visibility-change", 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 = ({ animate = true } = {}) => {
-  toolbarVisibilityPreference.set(true)
-  if (animate) {
-    document.documentElement.setAttribute("data-toolbar-animation", "")
-  } else {
-    document.documentElement.removeAttribute("data-toolbar-animation")
-  }
-  document.documentElement.setAttribute("data-toolbar-visible", "")
-
-  sendEventToParent("toolbar-visibility-change", 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": "300ms",
-  })
-  // 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 (animate) {
-      document.documentElement.setAttribute("data-toolbar-animation", "")
-    } else {
-      document.documentElement.removeAttribute("data-toolbar-animation")
-    }
-    document.documentElement.removeAttribute("data-toolbar-visible")
-    sendEventToParent("toolbar-visibility-change", false)
-  }
-}
-
-const addExternalCommandCallback = (command, callback) => {
-  const messageEventCallback = (messageEvent) => {
-    const { data } = messageEvent
-    if (typeof data !== "object") {
-      return
-    }
-    const { __jsenv__ } = data
-    if (!__jsenv__) {
-      return
-    }
-    if (__jsenv__.command !== command) {
-      return
-    }
-    callback(...__jsenv__.args)
-  }
-
-  window.addEventListener("message", messageEventCallback)
-  return () => {
-    window.removeEventListener("message", messageEventCallback)
-  }
-}
-
-const sendEventToParent = (name, data) => {
-  window.parent.postMessage(
-    {
-      __jsenv__: {
-        event: name,
-        data,
-      },
-    },
-    "*",
-  )
-}
-
-window.toolbar = {
-  show: showToolbar,
-  hide: () => hideToolbar(),
-}
-
-// const { currentScript } = document
-addExternalCommandCallback("renderToolbar", ({ logs }) => {
-  renderToolbar({
-    logs,
-  })
-})
-addExternalCommandCallback("showToolbar", () => {
-  showToolbar()
-})
-addExternalCommandCallback("hideToolbar", () => {
-  hideToolbar()
-})
-sendEventToParent("toolbar_ready")

package/src/plugins/toolbar/client/tooltip/tooltip.css

@@ -1,61 +0,0 @@
-.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/plugins/toolbar/client/tooltip/tooltip.js

@@ -1,39 +0,0 @@
-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)
-  })
-}