@jsenv/plugin-toolbar 0.0.1 → 0.1.1

package/scripts/build.mjs

@@ -1,20 +0,0 @@
-import { build } from "@jsenv/core"
-
-build({
-  rootDirectoryUrl: new URL("../", import.meta.url),
-  buildDirectoryUrl: new URL("../dist/", import.meta.url),
-  entryPoints: {
-    "./src/jsenv_plugin_toolbar.js": "jsenv_plugin_toolbar.js",
-  },
-  runtimeCompat: {
-    node: "16.14",
-  },
-  urlAnalysis: {
-    include: {
-      "/**/*": true,
-      "/**/node_modules/@jsenv/ast/": false, // cannot inline "parse5", "@babel/core" and "postcss"
-    },
-  },
-  minification: false,
-  versioning: false,
-})

package/src/client/animation/toolbar_animation_core.js

@@ -1,30 +0,0 @@
-import { toolbarState, updateToolbarState } from "../toolbar_state.js"
-import { createPreference } from "../util/preferences.js"
-
-const animationPreference = createPreference("jsenv_toolbar_animation")
-
-export const animationsAreEnabled = () => {
-  return toolbarState.animationsEnabled
-}
-
-export const enableAnimations = () => {
-  updateToolbarState({
-    animationsEnabled: true,
-  })
-  animationPreference.set(true)
-  document.documentElement.removeAttribute("data-animation-disabled")
-}
-
-export const disableAnimations = () => {
-  updateToolbarState({
-    animationsEnabled: false,
-  })
-  animationPreference.set(false)
-  document.documentElement.setAttribute("data-animation-disabled", "")
-}
-
-updateToolbarState({
-  animationsEnabled: animationPreference.has()
-    ? animationPreference.get()
-    : true,
-})

package/src/client/animation/toolbar_animation_ui.js

@@ -1,21 +0,0 @@
-import {
-  animationsAreEnabled,
-  enableAnimations,
-  disableAnimations,
-} from "./toolbar_animation_core.js"
-
-export const renderToolbarAnimation = () => {
-  const animCheckbox = document.querySelector("#toggle-anims")
-  animCheckbox.checked = animationsAreEnabled()
-  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/eventsource/toolbar_eventsource.js

@@ -1,57 +0,0 @@
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant/variant.js"
-import {
-  toggleTooltip,
-  removeAutoShowTooltip,
-  autoShowTooltip,
-} from "../tooltip/tooltip.js"
-
-const parentEventSourceClient = window.parent.__jsenv_event_source_client__
-
-export const initToolbarEventSource = () => {
-  removeForceHideElement(document.querySelector("#eventsource-indicator"))
-  if (!parentEventSourceClient) {
-    disableAutoreloadSetting()
-    return
-  }
-  parentEventSourceClient.status.onchange = () => {
-    updateEventSourceIndicator()
-  }
-  updateEventSourceIndicator()
-}
-
-const updateEventSourceIndicator = () => {
-  const eventSourceIndicator = document.querySelector("#eventsource-indicator")
-  const eventSourceConnectionState = parentEventSourceClient.status.value
-  enableVariant(eventSourceIndicator, {
-    eventsource: eventSourceConnectionState,
-  })
-  const variantNode = document.querySelector(
-    "#eventsource-indicator > [data-when-active]",
-  )
-  variantNode.querySelector("button").onclick = () => {
-    toggleTooltip(eventSourceIndicator)
-  }
-  if (eventSourceConnectionState === "connecting") {
-    variantNode.querySelector("a").onclick = () => {
-      parentEventSourceClient.disconnect()
-    }
-  } else if (eventSourceConnectionState === "connected") {
-    removeAutoShowTooltip(eventSourceIndicator)
-  } else if (eventSourceConnectionState === "disconnected") {
-    autoShowTooltip(eventSourceIndicator)
-    variantNode.querySelector("a").onclick = () => {
-      parentEventSourceClient.connect()
-    }
-  }
-}
-
-const disableAutoreloadSetting = () => {
-  document
-    .querySelector(".settings-autoreload")
-    .setAttribute("data-disabled", "true")
-  document
-    .querySelector(".settings-autoreload")
-    .setAttribute("title", `Autoreload not available: disabled by server`)
-  document.querySelector("#toggle-autoreload").disabled = true
-}

package/src/client/execution/toolbar_execution.js

@@ -1,88 +0,0 @@
-import { removeForceHideElement } from "../util/dom.js"
-import { enableVariant } from "../variant/variant.js"
-import { toggleTooltip } from "../tooltip/tooltip.js"
-import { notifyExecutionResult } from "../notification/toolbar_notification.js"
-
-export const renderExecutionInToolbar = async () => {
-  // reset file execution indicator ui
-  applyExecutionIndicator()
-  removeForceHideElement(document.querySelector("#execution-indicator"))
-
-  const { status, startTime, endTime } =
-    await window.parent.__supervisor__.getDocumentExecutionResult()
-  const execution = { status, startTime, endTime }
-  applyExecutionIndicator(execution)
-  const executionStorageKey = window.location.href
-  const previousExecution = sessionStorage.hasOwnProperty(executionStorageKey)
-    ? JSON.parse(sessionStorage.getItem(executionStorageKey))
-    : undefined
-  notifyExecutionResult(executionStorageKey, execution, previousExecution)
-  sessionStorage.setItem(executionStorageKey, JSON.stringify(execution))
-}
-
-// 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()
-// }
-
-const applyExecutionIndicator = ({
-  status = "running",
-  startTime,
-  endTime,
-} = {}) => {
-  const executionIndicator = document.querySelector("#execution-indicator")
-  enableVariant(executionIndicator, { execution: status })
-  const variantNode = executionIndicator.querySelector("[data-when-active]")
-  variantNode.querySelector("button").onclick = () =>
-    toggleTooltip(executionIndicator)
-  variantNode.querySelector(".tooltip").textContent = computeText({
-    status,
-    startTime,
-    endTime,
-  })
-}
-
-// relative time: https://github.com/tc39/proposal-intl-relative-time/issues/118
-const computeText = ({ status, startTime, endTime }) => {
-  if (status === "completed") {
-    return `Execution completed in ${endTime - startTime}ms`
-  }
-  if (status === "errored") {
-    return `Execution failed in ${endTime - startTime}ms`
-  }
-  if (status === "running") {
-    return "Executing..."
-  }
-  return ""
-}

package/src/client/focus/focus.css

@@ -1,61 +0,0 @@
-button:focus,
-a:focus,
-input:focus,
-*[data-contains-hidden-input] input:focus + * {
-  outline-style: none;
-  outline-offset: -2px;
-}
-
-*[data-contains-hidden-input] input:focus + * {
-  outline-width: 4px;
-  outline-offset: -2px;
-}
-
-html[data-last-interaction="keyboard"] button:focus,
-html[data-last-interaction="keyboard"] a:focus,
-html[data-last-interaction="keyboard"] input:focus,
-html[data-last-interaction="keyboard"]
-  *[data-contains-hidden-input]
-  input:focus
-  + * {
-  outline-style: auto;
-}
-
-html[data-last-interaction="keyboard"]
-  *[data-contains-hidden-input]
-  input:focus
-  + * {
-  outline-color: rgb(0, 150, 255);
-}
-
-/*
-Don't try to replace @-moz-document url-prefix() this by
-
--moz-outline or -moz-outline-color
-Because firefox would take into account outline instead of -moz-outline
-
-:moz-focus-ring
-Because for some element we set the focus outline on a div which would not match :focusring
-*/
-@-moz-document url-prefix() {
-  html[data-last-interaction="keyboard"] button:focus,
-  html[data-last-interaction="keyboard"] a:focus,
-  html[data-last-interaction="keyboard"] input:focus,
-  html[data-last-interaction="keyboard"]
-    *[data-input-customized]
-    input:focus
-    + * {
-    outline-width: 2px;
-    outline-offset: 0;
-    outline-style: solid;
-    /*
-    force a blue color for firefox otherwise
-    it uses outline-color: inherit
-    making it unpredictible and sometimes hard to see
-    */
-    outline-color: rgb(0, 150, 255);
-  }
-}
-::-moz-focus-inner {
-  border: 0;
-}

package/src/client/focus/toolbar_focus.js

@@ -1,19 +0,0 @@
-// handle data-last-interaction attr on html (focusring)
-window.addEventListener("mousedown", (mousedownEvent) => {
-  if (mousedownEvent.defaultPrevented) {
-    return
-  }
-  document.documentElement.setAttribute("data-last-interaction", "mouse")
-})
-window.addEventListener("touchstart", (touchstartEvent) => {
-  if (touchstartEvent.defaultPrevented) {
-    return
-  }
-  document.documentElement.setAttribute("data-last-interaction", "mouse")
-})
-window.addEventListener("keydown", (keydownEvent) => {
-  if (keydownEvent.defaultPrevented) {
-    return
-  }
-  document.documentElement.setAttribute("data-last-interaction", "keyboard")
-})

package/src/client/notification/toolbar_notification.js

@@ -1,181 +0,0 @@
-import { createPreference } from "../util/preferences.js"
-import { enableVariant } from "../variant/variant.js"
-
-const notificationAvailable = typeof window.Notification === "function"
-const notificationPreference = createPreference("notification")
-
-const arrayOfOpenedNotifications = []
-export const renderToolbarNotification = () => {
-  if (!notificationAvailable) {
-    applyNotificationNotAvailableEffects()
-    return
-  }
-  updatePermission()
-}
-
-const updatePermission = () => {
-  const notifPermission = Notification.permission
-  if (notifPermission === "default") {
-    applyNotificationDefaultEffects()
-    return
-  }
-  if (notifPermission === "denied") {
-    applyNotificationDeniedEffects()
-    return
-  }
-  if (notifPermission === "granted") {
-    applyNotificationGrantedEffects()
-    return
-  }
-}
-
-const notifCheckbox = document.querySelector("#toggle-notifs")
-
-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.checked = getNotificationPreference()
-  notifCheckbox.onchange = () => {
-    setNotificationPreference(notifCheckbox.checked)
-    if (!notifCheckbox.checked) {
-      // slice because arrayOfOpenedNotifications can be mutated while looping
-      arrayOfOpenedNotifications.slice().forEach((notification) => {
-        notification.close()
-      })
-    }
-  }
-}
-const applyNotificationNOTGrantedEffects = () => {
-  enableVariant(document.querySelector(".notification-text"), {
-    notif_granted: "no",
-  })
-  notifCheckbox.disabled = true
-  notifCheckbox.checked = false
-  document.querySelector("a.request_notification_permission").onclick = () => {
-    requestPermission().then(() => {
-      setNotificationPreference(true)
-      updatePermission()
-    })
-  }
-}
-
-export const notifyExecutionResult = (
-  executedFileRelativeUrl,
-  execution,
-  previousExecution,
-) => {
-  const notificationEnabled = getNotificationPreference()
-  if (!notificationEnabled) return
-
-  const notificationOptions = {
-    lang: "en",
-    icon: getFaviconHref(),
-    clickToFocus: true,
-    clickToClose: true,
-  }
-
-  if (execution.status === "errored") {
-    if (previousExecution) {
-      if (previousExecution.status === "completed") {
-        notify("Broken", {
-          ...notificationOptions,
-          body: `${executedFileRelativeUrl} execution now failing.`,
-        })
-      } else {
-        notify("Still failing", {
-          ...notificationOptions,
-          body: `${executedFileRelativeUrl} execution still failing.`,
-        })
-      }
-    } else {
-      notify("Failing", {
-        ...notificationOptions,
-        body: `${executedFileRelativeUrl} execution failed.`,
-      })
-    }
-  } else if (previousExecution && previousExecution.status === "errored") {
-    notify("Fixed", {
-      ...notificationOptions,
-      body: `${executedFileRelativeUrl} execution fixed.`,
-    })
-  }
-}
-
-const getNotificationPreference = () =>
-  notificationPreference.has() ? notificationPreference.get() : true
-
-const setNotificationPreference = (value) => notificationPreference.set(value)
-
-const getFaviconHref = () => {
-  const link = document.querySelector('link[rel="icon"]')
-  return link ? link.href : undefined
-}
-
-let permission = "default"
-
-const notify = notificationAvailable
-  ? async (
-      title,
-      { clickToFocus = false, clickToClose = false, ...options } = {},
-    ) => {
-      if (permission !== "granted") {
-        return null
-      }
-
-      const notification = new Notification(title, options)
-      arrayOfOpenedNotifications.push(notification)
-      notification.onclick = () => {
-        // but if the user navigated inbetween
-        // focusing window will show something else
-        // in that case it could be great to do something
-        // maybe like showing a message saying this execution
-        // is no longer visible
-        // we could also navigauate to this file execution but
-        // there is no guarantee re-executing the file would give same output
-        // and it would also trigger an other notification
-        if (clickToFocus) window.focus()
-        if (clickToClose) notification.close()
-      }
-      notification.onclose = () => {
-        const index = arrayOfOpenedNotifications.indexOf(notification)
-        if (index > -1) {
-          arrayOfOpenedNotifications.splice(index, 1)
-        }
-      }
-      return notification
-    }
-  : () => {}
-
-let requestPromise
-const requestPermission = notificationAvailable
-  ? async () => {
-      if (requestPromise) return requestPromise
-      requestPromise = Notification.requestPermission()
-      permission = await requestPromise
-      requestPromise = undefined
-      return permission
-    }
-  : () => Promise.resolve("default")

package/src/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/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("jsenv_toolbar_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)
-}