@jsenv/plugin-toolbar 0.0.1 → 0.1.0

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

@@ -0,0 +1,88 @@
+import { effect } from "@preact/signals"
+
+import {
+  notificationsEnabledSignal,
+  notificationPermissionSignal,
+} from "../../core/notification_signals.js"
+import { notificationAPIDetected } from "../../core/notification_context.js"
+import {
+  enableNotifications,
+  disableNotifications,
+  requestPermission,
+} from "../../core/notification_actions.js"
+import { enableVariant } from "../variant.js"
+
+const notifCheckbox = document.querySelector("#toggle_notifs")
+
+export const renderToolbarNotificationSetting = () => {
+  effect(() => {
+    const notificationsEnabled = notificationsEnabledSignal.value
+    notifCheckbox.checked = notificationsEnabled
+  })
+
+  effect(() => {
+    const notificationPermission = notificationPermissionSignal.value
+    if (!notificationAPIDetected) {
+      applyNotificationNotAvailableEffects()
+      return
+    }
+    if (notificationPermission === "default") {
+      applyNotificationDefaultEffects()
+      return
+    }
+    if (notificationPermission === "denied") {
+      applyNotificationDeniedEffects()
+      return
+    }
+    if (notificationPermission === "granted") {
+      applyNotificationGrantedEffects()
+      return
+    }
+  })
+}
+
+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.onchange = () => {
+    if (notifCheckbox.checked) {
+      enableNotifications()
+    } else {
+      disableNotifications()
+    }
+  }
+}
+
+const applyNotificationNOTGrantedEffects = () => {
+  enableVariant(document.querySelector(".notification_text"), {
+    notif_granted: "no",
+  })
+  notifCheckbox.disabled = true
+  notifCheckbox.checked = false
+  document.querySelector("a.request_notification_permission").onclick = () => {
+    requestPermission()
+  }
+}

package/src/client/{settings/settings.css → ui/toolbar_settings/toolbar_settings.css}

@@ -1,16 +1,18 @@
-#settings-button {
+@import "./theme_light.css";
+
+#settings_button {
   position: relative;
 }
 
-#settings-button[data-warning] svg {
+#settings_button[data-warning] svg {
   fill: #cb5909;
 }
 
-#settings-button[data-warning] svg:hover {
+#settings_button[data-warning] svg:hover {
   fill: darkorange !important;
 }
 
-#settings-box {
+#settings_box {
   display: none;
   position: absolute;
   bottom: 40px;
@@ -26,7 +28,7 @@
   z-index: -1;
 }
 
-[data-active] #settings-box {
+[data-active] #settings_box {
   display: block;
   animation: comeUp ease 0.3s;
 }
@@ -42,7 +44,7 @@
   }
 }
 
-#settings-box-body {
+#settings_box_body {
   text-align: left;
   padding: 18px 0;
   max-height: 80vh;
@@ -52,21 +54,21 @@
   justify-content: center;
 }
 
-.settings-box-items-wrapper {
+.settings_box_items_wrapper {
   max-width: 700px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-.settings-box-item {
+.settings_box_item {
   padding: 15px;
   background: #0c111b;
   width: 250px;
   margin: 9px 18px;
 }
 
-#settings-box-header .settings-icon {
+#settings_box_header .settings_icon {
   fill: none;
   stroke: #24b1b0;
   stroke-width: 2;
@@ -77,19 +79,18 @@
   top: 4px;
 }
 
-#settings-box h3 {
+#settings_box h3 {
   display: inline-block;
   font-size: 20px;
   margin: 10px 0;
   color: #24b1b0;
 }
 
-#button-close-settings {
+#settings_close_button {
   float: right;
   fill: #24b1b0;
 }
-
-#button-close-settings:hover {
+#settings_close_button:hover {
   opacity: 0.6;
 }
 
@@ -100,7 +101,7 @@ label {
   display: block;
 }
 
-#settings-box .category-title {
+#settings_box .category_title {
   color: #24b1b0;
   font-size: 16px;
   display: inline-block;
@@ -108,7 +109,7 @@ label {
   margin-top: 4px;
 }
 
-#settings-box .category-title svg {
+#settings_box .category_title svg {
   fill: currentColor;
   vertical-align: top;
   margin-right: 5px;
@@ -116,7 +117,7 @@ label {
   height: 18px;
 }
 
-#settings-box .category-subtitle {
+#settings_box .category_subtitle {
   color: #a9a8a8;
   font-size: 14px;
   max-width: 220px;
@@ -181,21 +182,21 @@ To be able to apply an outline to this element later*/
   background-color: #24b1b0;
 }
 
-.settings-box-item[data-disabled] {
+.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 {
+.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 {
+.settings_box_item[data-disabled] .category_title span {
   text-decoration: line-through;
 }
-.settings-box-item[data-disabled] .category-subtitle {
+.settings_box_item[data-disabled] .category_subtitle {
   text-decoration: line-through;
 }
-.settings-box-item[data-disabled] .switch {
+.settings_box_item[data-disabled] .switch {
   cursor: default;
 }

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

@@ -0,0 +1,54 @@
+import { effect } from "@preact/signals"
+
+import { settingsOpenedSignal } from "../../core/settings_signals.js"
+import { openSettings, closeSettings } from "../../core/settings_actions.js"
+import { enableVariant } from "../variant.js"
+import {
+  activateToolbarSection,
+  deactivateToolbarSection,
+} from "../util/dom.js"
+import { renderToolbarAutoreloadSetting } from "./toolbar_autoreload_setting.js"
+import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js"
+import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js"
+import { renderToolbarThemeSetting } from "./toolbar_theme_setting.js"
+
+export const renderToolbarSettings = () => {
+  document.querySelector("#settings_open_button").onclick = toggleSettings
+  document.querySelector("#settings_close_button").onclick = toggleSettings
+  disableWarningStyle()
+
+  renderToolbarAutoreloadSetting()
+  renderToolbarAnimationSetting()
+  renderToolbarNotificationSetting()
+  renderToolbarThemeSetting()
+
+  effect(() => {
+    const settingsOpened = settingsOpenedSignal.value
+    if (settingsOpened) {
+      activateToolbarSection(document.querySelector("#settings"))
+    } else {
+      deactivateToolbarSection(document.querySelector("#settings"))
+    }
+  })
+}
+
+const toggleSettings = () => {
+  const settingsOpened = settingsOpenedSignal.value
+  if (settingsOpened) {
+    closeSettings()
+  } else {
+    openSettings()
+  }
+}
+
+export const enableWarningStyle = () => {
+  enableVariant(document.querySelector("#settings_open_button"), {
+    has_warning: "yes",
+  })
+}
+
+export const disableWarningStyle = () => {
+  enableVariant(document.querySelector("#settings_open_button"), {
+    has_warning: "no",
+  })
+}

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

@@ -0,0 +1,17 @@
+import { themeSignal } from "../../core/theme_signals.js"
+import {
+  switchToDefaultTheme,
+  switchToLightTheme,
+} from "../../core/theme_actions.js"
+
+export const renderToolbarThemeSetting = () => {
+  const checkbox = document.querySelector("#checkbox_dark_theme")
+  checkbox.checked = themeSignal.value === "dark"
+  checkbox.onchange = () => {
+    if (checkbox.checked) {
+      switchToDefaultTheme()
+    } else {
+      switchToLightTheme()
+    }
+  }
+}

package/src/client/ui/toolbar_ui.js

@@ -0,0 +1,21 @@
+import { initToolbarOpening } from "./toolbar_opening/toolbar_opening.js"
+import { initToolbarMenuOverflow } from "./toolbar_menu_overflow/toolbar_menu_overflow.js"
+import { renderToolbarOverlay } from "./toolbar_overlay/toolbar_overlay.js"
+import { renderDocumentIndexLink } from "./document_index_link/document_index_link.js"
+import { renderDocumentExecutionIndicator } from "./document_execution_indicator/document_execution_indicator.js"
+import { renderChangesIndicator } from "./changes_indicator/changes_indicator.js"
+import { renderServerIndicator } from "./server_indicator/server_indicator.js"
+import { renderToolbarSettings } from "./toolbar_settings/toolbar_settings.js"
+import { renderToolbarCloseButton } from "./toolbar_close_button/toolbar_close_button.js"
+
+export const initToolbarUI = () => {
+  initToolbarOpening()
+  initToolbarMenuOverflow()
+  renderToolbarOverlay()
+  renderDocumentIndexLink()
+  renderDocumentExecutionIndicator()
+  renderChangesIndicator()
+  renderServerIndicator()
+  renderToolbarSettings()
+  renderToolbarCloseButton()
+}

package/src/client/{tooltip/tooltip.css → ui/tooltips/tooltips.css}

@@ -5,10 +5,10 @@
   text-align: center;
   border-radius: 6px;
   position: absolute;
-  bottom: 120%;
+  bottom: 100%;
+  margin-bottom: 6px;
   padding: 10px;
   font-size: 14px;
-  margin-left: -40px;
   max-width: 260px;
   cursor: default;
 }
@@ -17,13 +17,19 @@
   content: "";
   position: absolute;
   top: 100%;
-  left: 60px;
-  margin-left: -5px;
+  left: 14px;
   border-width: 5px;
   border-style: solid;
   border-color: rgb(94, 94, 94) transparent transparent transparent;
 }
 
+.tooltip[data-toolip-left] {
+  margin-right: 5px;
+}
+.tooltip[data-toolip-left]::after {
+  left: 15px;
+}
+
 [data-tooltip-visible] .tooltip,
 [data-tooltip-auto-visible] .tooltip {
   display: block;
@@ -39,7 +45,7 @@
   }
 }
 
-.tooltipAction {
+.tooltip_action {
   display: inline-block;
   border: 1px solid #a0a0a0;
   border-radius: 3px;
@@ -47,13 +53,13 @@
   margin-top: 6px;
 }
 
-.tooltipAction a {
+.tooltip_action a {
   vertical-align: middle;
   color: white;
   text-decoration: none;
 }
 
-.tooltipIcon {
+.tooltip_icon {
   fill: white;
   width: 20px;
   height: 20px;

package/src/client/ui/util/dom.js

@@ -0,0 +1,57 @@
+export const getToolbarIframe = () => {
+  const iframes = Array.from(window.parent.document.querySelectorAll("iframe"))
+  return iframes.find((iframe) => iframe.contentWindow === window)
+}
+
+export const forceHideElement = (element) => {
+  element.setAttribute("data-force-hide", "")
+}
+
+export const removeForceHideElement = (element) => {
+  element.removeAttribute("data-force-hide")
+}
+
+export const setStyles = (element, styles) => {
+  const elementStyle = element.style
+  const restoreStyles = Object.keys(styles).map((styleName) => {
+    let restore
+    if (styleName in elementStyle) {
+      const currentStyle = elementStyle[styleName]
+      restore = () => {
+        elementStyle[styleName] = currentStyle
+      }
+    } else {
+      restore = () => {
+        delete elementStyle[styleName]
+      }
+    }
+
+    elementStyle[styleName] = styles[styleName]
+
+    return restore
+  })
+  return () => {
+    restoreStyles.forEach((restore) => restore())
+  }
+}
+
+export const setAttributes = (element, attributes) => {
+  Object.keys(attributes).forEach((name) => {
+    element.setAttribute(name, attributes[name])
+  })
+}
+
+export const getDocumentScroll = () => {
+  return {
+    x: document.documentElement.scrollLeft,
+    y: document.documentElement.scrollTop,
+  }
+}
+
+export const activateToolbarSection = (element) => {
+  element.setAttribute("data-active", "")
+}
+
+export const deactivateToolbarSection = (element) => {
+  element.removeAttribute("data-active")
+}

package/src/jsenv_plugin_toolbar.js

@@ -5,7 +5,14 @@ import {
   createHtmlNode,
 } from "@jsenv/ast"
 
-export const jsenvPluginToolbar = ({ logs = false } = {}) => {
+export const jsenvPluginToolbar = ({
+  logLevel = "warn",
+  theme = "dark",
+  opened = false,
+  autoreload = true,
+  animationsEnabled = true,
+  notificationsEnabled = true,
+} = {}) => {
   const toolbarInjectorClientFileUrl = new URL(
     "./client/toolbar_injector.js",
     import.meta.url,
@@ -19,18 +26,18 @@ export const jsenvPluginToolbar = ({ logs = false } = {}) => {
     name: "jsenv:toolbar",
     appliesDuring: "dev",
     transformUrlContent: {
-      html: (urlInfo, { referenceUtils }) => {
-        urlInfo.data.noribbon = true
-        if (urlInfo.url === toolbarHtmlClientFileUrl) {
+      html: (urlInfo, context) => {
+        if (urlInfo.url.startsWith(toolbarHtmlClientFileUrl)) {
+          urlInfo.data.isJsenvToolbar = true
           return null
         }
         const htmlAst = parseHtmlString(urlInfo.content)
-        const [toolbarInjectorReference] = referenceUtils.inject({
+        const [toolbarInjectorReference] = context.referenceUtils.inject({
           type: "js_import",
           expectedType: "js_module",
           specifier: toolbarInjectorClientFileUrl,
         })
-        const [toolbarClientFileReference] = referenceUtils.inject({
+        const [toolbarClientFileReference] = context.referenceUtils.inject({
           type: "iframe_src",
           expectedType: "html",
           specifier: toolbarHtmlClientFileUrl,
@@ -45,7 +52,12 @@ import { injectToolbar } from ${toolbarInjectorReference.generatedSpecifier}
 injectToolbar(${JSON.stringify(
               {
                 toolbarUrl: toolbarClientFileReference.generatedSpecifier,
-                logs,
+                logLevel,
+                theme,
+                opened,
+                autoreload,
+                animationsEnabled,
+                notificationsEnabled,
               },
               null,
               "  ",