@jsenv/core 29.8.6 → 29.9.1

package/src/plugins/toolbar/client/responsive/toolbar_responsive.js

@@ -1,103 +0,0 @@
-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 = () => {
-  // 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)
-
-  // overflow menu
-  document.querySelector("#overflow-menu-button").onclick = () =>
-    toggleOverflowMenu()
-}
-
-const responsiveToolbar = (overflowMenuBreakpoint) => {
-  // close all tooltips in case opened
-  hideTooltip(document.querySelector("#eventsource-indicator"))
-  hideTooltip(document.querySelector("#execution-indicator"))
-  // 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("#overflow-menu")
-
-  // 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-overflow-menu-enabled", "")
-  removeForceHideElement(document.querySelector("#overflow-menu-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"))
-  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()
-  }
-}
-
-const overflowMenuIsVisible = () => {
-  const toolbar = document.querySelector("#toolbar")
-  return toolbar.hasAttribute("data-overflow-menu-visible")
-}
-
-const showOverflowMenu = () => {
-  const toolbar = document.querySelector("#toolbar")
-  document.querySelector("#overflow-menu").setAttribute("data-animate", "")
-  toolbar.setAttribute("data-overflow-menu-visible", "")
-}
-
-const hideOverflowMenu = () => {
-  const toolbar = document.querySelector("#toolbar")
-  toolbar.removeAttribute("data-overflow-menu-visible")
-  document.querySelector("#overflow-menu").removeAttribute("data-animate")
-}

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

@@ -1,201 +0,0 @@
-#settings-button {
-  position: relative;
-}
-
-#settings-button[data-warning] svg {
-  fill: #cb5909;
-}
-
-#settings-button[data-warning] svg:hover {
-  fill: darkorange !important;
-}
-
-#settings-box {
-  display: none;
-  position: absolute;
-  bottom: 40px;
-  right: 0;
-  text-align: center;
-  padding: 17px;
-  font-size: 14px;
-  color: #fff;
-  background-color: #030713;
-  border-radius: 5px 5px 0 0;
-  min-width: 250px;
-  min-height: 150px;
-  z-index: -1;
-}
-
-[data-active] #settings-box {
-  display: block;
-  animation: comeUp ease 0.3s;
-}
-
-@keyframes comeUp {
-  0% {
-    opacity: 0;
-    transform: translate(0, 90px);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
-
-#settings-box-body {
-  text-align: left;
-  padding: 18px 0;
-  max-height: 80vh;
-  overflow: auto;
-  width: 100vw;
-  display: flex;
-  justify-content: center;
-}
-
-.settings-box-items-wrapper {
-  max-width: 700px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.settings-box-item {
-  padding: 15px;
-  background: #0c111b;
-  width: 250px;
-  margin: 9px 18px;
-}
-
-#settings-box-header .settings-icon {
-  fill: none;
-  stroke: #24b1b0;
-  stroke-width: 2;
-  margin-right: 10px;
-  width: 22px;
-  height: 22px;
-  position: relative;
-  top: 4px;
-}
-
-#settings-box h3 {
-  display: inline-block;
-  font-size: 20px;
-  margin: 10px 0;
-  color: #24b1b0;
-}
-
-#button-close-settings {
-  float: right;
-  fill: #24b1b0;
-}
-
-#button-close-settings:hover {
-  opacity: 0.6;
-}
-
-label {
-  color: #a9a8a8;
-  font-size: 14px;
-  padding-bottom: 3px;
-  display: block;
-}
-
-#settings-box .category-title {
-  color: #24b1b0;
-  font-size: 16px;
-  display: inline-block;
-  margin-bottom: 15px;
-  margin-top: 4px;
-}
-
-#settings-box .category-title svg {
-  fill: currentColor;
-  vertical-align: top;
-  margin-right: 5px;
-  width: 18px;
-  height: 18px;
-}
-
-#settings-box .category-subtitle {
-  color: #a9a8a8;
-  font-size: 14px;
-  max-width: 220px;
-}
-
-/* checkbox switch */
-.switch {
-  position: relative;
-  float: right;
-  width: 3.5em;
-  height: 2em;
-  padding: 0;
-  cursor: pointer;
-}
-.switch input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.switch .slider {
-  position: absolute;
-  vertical-align: middle;
-  height: 0.3em;
-  left: 0.5em;
-  right: 0.5em;
-  top: 50%;
-  margin-top: -0.15em;
-  background-color: #4c4c4c;
-  transition: 0.4s;
-  border-radius: 0.15em;
-}
-.switch .square {
-  position: absolute;
-  content: "";
-  height: 1em;
-  width: 1em;
-  left: 0.5em;
-  top: 50%;
-  margin-top: -0.5em;
-  background-color: #4c4c4c;
-  color: #030713;
-  transition: 0.4s;
-  border-radius: 0.15em;
-}
-.switch input + * {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  /* It's important to have a border (event transparent)
-To be able to apply an outline to this element later*/
-  border-width: 1px;
-  border-color: transparent;
-  border-style: solid;
-}
-.switch input:checked + * .slider {
-  background-color: #24b1b0;
-}
-.switch input:checked + * .square {
-  transform: translateX(1.6em);
-  background-color: #24b1b0;
-}
-
-.settings-box-item[data-disabled] {
-  background-color: rgba(12, 17, 27, 0.4);
-  cursor: default;
-}
-.settings-box-item[data-disabled] .category-title,
-.settings-box-item[data-disabled] .switch,
-.settings-box-item[data-disabled] .category-subtitle {
-  opacity: 0.4;
-}
-.settings-box-item[data-disabled] .category-title span {
-  text-decoration: line-through;
-}
-.settings-box-item[data-disabled] .category-subtitle {
-  text-decoration: line-through;
-}
-.settings-box-item[data-disabled] .switch {
-  cursor: default;
-}

package/src/plugins/toolbar/client/settings/toolbar_settings.js

@@ -1,47 +0,0 @@
-import {
-  toolbarSectionIsActive,
-  deactivateToolbarSection,
-  activateToolbarSection,
-  updateIframeOverflowOnParentWindow,
-} from "../util/dom.js"
-import { enableVariant } from "../variant/variant.js"
-
-export const renderToolbarSettings = () => {
-  document.querySelector("#settings-button").onclick = toggleSettings
-  document.querySelector("#button-close-settings").onclick = toggleSettings
-  disableWarningStyle()
-}
-
-const toggleSettings = () => {
-  if (settingsAreVisible()) {
-    hideSettings()
-  } else {
-    showSettings()
-  }
-}
-
-export const enableWarningStyle = () => {
-  enableVariant(document.querySelector("#settings-button"), {
-    has_warning: "yes",
-  })
-}
-
-export const disableWarningStyle = () => {
-  enableVariant(document.querySelector("#settings-button"), {
-    has_warning: "no",
-  })
-}
-
-export const settingsAreVisible = () => {
-  return toolbarSectionIsActive(document.querySelector(`#settings`))
-}
-
-export const hideSettings = () => {
-  deactivateToolbarSection(document.querySelector(`#settings`))
-  updateIframeOverflowOnParentWindow()
-}
-
-export const showSettings = () => {
-  activateToolbarSection(document.querySelector(`#settings`))
-  updateIframeOverflowOnParentWindow()
-}

package/src/plugins/toolbar/client/theme/jsenv_theme.css

@@ -1,77 +0,0 @@
-/* icons */
-html[data-theme="jsenv"] .iconToolbar {
-  fill: #de5600;
-}
-html[data-theme="jsenv"] .iconToolbar:hover {
-  fill: #9a5300 !important;
-}
-
-/* loaders */
-html[data-theme="jsenv"] #loader-icon {
-  color: #404040;
-}
-
-/* settings */
-html[data-theme="jsenv"] #settings-box,
-html[data-theme="jsenv"] #settings[data-active] button {
-  background: #f7931e;
-}
-html[data-theme="jsenv"] .settings-box-item {
-  background: #ffa641;
-}
-html[data-theme="jsenv"] #settings-box-header .settings-icon {
-  stroke: #076570;
-}
-html[data-theme="jsenv"] #button-close-settings {
-  fill: #076570;
-}
-html[data-theme="jsenv"] #settings-box h3,
-html[data-theme="jsenv"] #settings-box .category-title {
-  color: #076570;
-}
-html[data-theme="jsenv"] #settings-box .category-title svg {
-  fill: #076570;
-}
-html[data-theme="jsenv"] #settings-box .category-subtitle {
-  color: #076570;
-}
-html[data-theme="jsenv"] label {
-  color: #002e33;
-}
-html[data-theme="jsenv"] input:checked + .slider,
-html[data-theme="jsenv"] .switch input:checked + .slider:before {
-  background-color: #de5600;
-}
-html[data-theme="jsenv"] .switch .slider,
-html[data-theme="jsenv"] .switch .slider:before {
-  background-color: grey;
-}
-
-/* tooltips */
-html[data-theme="jsenv"] .tooltip {
-  background-color: #ffd390;
-  color: #884900;
-}
-html[data-theme="jsenv"] .tooltipAction {
-  border-color: #884900;
-}
-html[data-theme="jsenv"] .tooltipAction a {
-  color: #884900;
-}
-html[data-theme="jsenv"] .tooltipIcon {
-  fill: #884900;
-}
-html[data-theme="jsenv"] .tooltip::after {
-  border-color: #ffd390 transparent transparent transparent;
-}
-
-/* page file list */
-html[data-theme="jsenv"] h2 {
-  color: orange;
-}
-html[data-theme="jsenv"] #fileIconSvgConfig {
-  fill: orange;
-}
-html[data-theme="jsenv"] #explorables h2 span {
-  color: #24b1b0;
-}

package/src/plugins/toolbar/client/theme/light_theme.css

@@ -1,106 +0,0 @@
-/* general */
-html[data-theme="light"] #toolbar {
-  background: #e8eff3;
-}
-
-/* icons */
-html[data-theme="light"] .iconToolbar {
-  fill: #404040;
-}
-html[data-theme="light"] .iconToolbar:hover {
-  fill: #757575 !important;
-}
-
-/* loaders */
-html[data-theme="light"] #loader-icon {
-  color: #404040;
-}
-
-/* settings */
-html[data-theme="light"] #settings-box,
-html[data-theme="light"] #settings[data-active] button {
-  background: #87acd3;
-}
-html[data-theme="light"] .settings-box-item {
-  background: #97b9da;
-}
-html[data-theme="light"] #settings-box-header .settings-icon {
-  stroke: #076570;
-}
-html[data-theme="light"] #button-close-settings {
-  fill: #076570;
-}
-html[data-theme="light"] #settings-box h3,
-html[data-theme="light"] #settings-box .category-title {
-  color: #076570;
-}
-html[data-theme="light"] #settings-box .category-title svg {
-  fill: #076570;
-}
-html[data-theme="light"] #settings-box .category-subtitle {
-  color: #5d5d5d;
-}
-html[data-theme="light"] label {
-  color: #002e33;
-}
-html[data-theme="light"] .switch input + * .slider,
-html[data-theme="light"] .switch input + * .square {
-  background-color: grey;
-}
-html[data-theme="light"] .switch input:checked + * .slider,
-html[data-theme="light"] .switch input:checked + * .square {
-  background-color: #076570;
-}
-
-/* tooltips */
-html[data-theme="light"] .tooltip {
-  background-color: rgb(138, 145, 154);
-  color: #fff;
-}
-html[data-theme="light"] .tooltipAction {
-  border-color: #fff;
-}
-html[data-theme="light"] .tooltip::after {
-  border-color: rgb(138, 145, 154) transparent transparent transparent;
-}
-
-/* overflow menu */
-html[data-theme="light"] #overflow-menu-button {
-  background: #e8eff3;
-}
-html[data-theme="light"]
-  #toolbar[data-overflow-menu-visible]
-  #overflow-menu-button {
-  background: #a5a9ad;
-}
-html[data-theme="light"] #overflow-menu {
-  background: #dfe4e7;
-}
-
-/*  page file list */
-html[data-theme="light"] h2,
-html[data-theme="light"] h4 {
-  color: #076570;
-}
-html[data-theme="light"] #fileIconSvgConfig {
-  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 {
-  background: #bbd5ea;
-}
-html[data-theme="light"] #explorables fieldset input:checked + * {
-  color: #ff8d00;
-  background: #bbd5ea;
-}
-html[data-theme="light"] #explorables #explorables-header,
-html[data-theme="light"] #explorables fieldset label input + * {
-  background: #ddf0ff;
-}
-html[data-theme="light"] .execution-link {
-  background: #ddf0ff;
-  color: #076570;
-}

package/src/plugins/toolbar/client/theme/toolbar_theme.js

@@ -1,34 +0,0 @@
-import { createPreference } from "../util/preferences.js"
-
-const DARK_THEME = "dark"
-const LIGHT_THEME = "light"
-const themePreference = createPreference("theme")
-
-export const renderToolbarTheme = () => {
-  const theme = getThemePreference()
-  const checkbox = document.querySelector("#checkbox-dark-theme")
-  checkbox.checked = theme === DARK_THEME
-  setTheme(theme)
-  checkbox.onchange = () => {
-    if (checkbox.checked) {
-      setThemePreference(DARK_THEME)
-      setTheme(DARK_THEME)
-    } else {
-      setThemePreference(LIGHT_THEME)
-      setTheme(LIGHT_THEME)
-    }
-  }
-}
-
-const getThemePreference = () => {
-  return themePreference.has() ? themePreference.get() : DARK_THEME
-}
-
-const setThemePreference = (value) => {
-  themePreference.set(value)
-  setTheme(value)
-}
-
-const setTheme = (theme) => {
-  document.querySelector("html").setAttribute("data-theme", theme)
-}