@jsenv/plugin-toolbar 0.0.1

package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L368C5-L481C14.js

@@ -0,0 +1,114 @@
+
+      // eslint-disable-next-line no-undef
+      const { rootDirectoryUrl, groups, files } = SERVER_PARAMS
+
+      const groupPreference = {
+        has: () => localStorage.hasOwnProperty("explorer_active_group"),
+        get: () =>
+          localStorage.hasOwnProperty("explorer_active_group")
+            ? JSON.parse(localStorage.getItem("explorer_active_group"))
+            : undefined,
+        set: (value) =>
+          localStorage.setItem("explorer_active_group", JSON.stringify(value)),
+      }
+      const directoryNameFromUrl = (directoryUrl) => {
+        const slashLastIndex = directoryUrl.lastIndexOf(
+          "/",
+          // ignore last slash
+          directoryUrl.length - 2,
+        )
+        if (slashLastIndex === -1) return ""
+        return directoryUrl.slice(slashLastIndex + 1)
+      }
+      const urlToVisitFromRelativeUrl = (relativeUrl) => {
+        return `${window.origin}/${relativeUrl}`
+      }
+
+      const fileListElement = document
+        .querySelector(`[data-page="file-list"]`)
+        .cloneNode(true)
+      const directoryName = directoryNameFromUrl(rootDirectoryUrl)
+      const span = fileListElement.querySelector("#directory_relative_url")
+      span.title = rootDirectoryUrl
+      span.textContent = directoryName
+
+      const h4 = fileListElement.querySelector("h4")
+      const ul = fileListElement.querySelector("ul")
+      ul.innerHTML = files
+        .map(
+          (file) =>
+            `<li>
+        <a
+          class="execution-link"
+          data-relative-url=${file.relativeUrl}
+          href=${urlToVisitFromRelativeUrl(file.relativeUrl)}
+        >
+          ${file.relativeUrl}
+        </a>
+      </li>`,
+        )
+        .join("")
+
+      const groupFieldset = fileListElement.querySelector("#filter-group-set")
+      const groupNames = Object.keys(groups)
+      groupFieldset.innerHTML = groupNames
+        .map(
+          (key) => `<label data-contains-hidden-input class="item">
+        <input type="radio" name="filter-group" value="${key}"/>
+        <span>${key}</span>
+      </label>`,
+        )
+        .join("")
+
+      const groupFromLocalStorage = groupPreference.get()
+      const currentGroup =
+        groupFromLocalStorage && groupNames.includes(groupFromLocalStorage)
+          ? groupFromLocalStorage
+          : groupNames[0]
+      Array.from(groupFieldset.querySelectorAll("input")).forEach(
+        (inputRadio) => {
+          inputRadio.checked = inputRadio.value === currentGroup
+          inputRadio.onchange = () => {
+            if (inputRadio.checked) {
+              groupPreference.set(inputRadio.value)
+              enableGroup(inputRadio.value)
+            }
+          }
+        },
+      )
+
+      const enableGroup = (groupName) => {
+        const arrayOfElementToShow = []
+        const arrayOfElementToHide = []
+        files.forEach((file) => {
+          const fileLink = fileListElement.querySelector(
+            `a[data-relative-url="${file.relativeUrl}"]`,
+          )
+          const fileLi = fileLink.parentNode
+          if (file.meta[groupName]) {
+            arrayOfElementToShow.push(fileLi)
+          } else {
+            arrayOfElementToHide.push(fileLi)
+          }
+        })
+        arrayOfElementToShow.forEach((element) => {
+          element.removeAttribute("data-force-hide")
+        })
+        arrayOfElementToHide.forEach((element) => {
+          element.setAttribute("data-force-hide", "")
+        })
+
+        h4.innerHTML =
+          arrayOfElementToShow.length === 0
+            ? `No file found.
+      Config for this section: <pre>${JSON.stringify(
+        groups[groupName],
+        null,
+        "  ",
+      )}</pre>`
+            : `${arrayOfElementToShow.length} files found. Click on the one you want to execute`
+      }
+      enableGroup(currentGroup)
+
+      document.querySelector("main").appendChild(fileListElement)
+    

package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L482C5-L605C14.js

@@ -0,0 +1,124 @@
+
+      // make menu scrollable
+      const getMenuWrapperSize = () => {
+        return document.querySelector(".menu-wrapper").getBoundingClientRect()
+          .width
+      }
+      const getMenuSize = () => {
+        return document.querySelector(".menu").getBoundingClientRect().width
+      }
+      const getMenuPosition = () => {
+        return document.querySelector(".menu-wrapper").scrollLeft
+      }
+
+      let menuWrapperSize = getMenuWrapperSize()
+      let menuSize = getMenuSize()
+      const menuVisibleSize = menuWrapperSize
+      let menuInvisibleSize = menuSize - menuVisibleSize
+      const scrollDuration = 300
+      const leftPaddle = document.querySelector(".left-paddle")
+      const rightPaddle = document.querySelector(".right-paddle")
+
+      const handleMenuScroll = () => {
+        menuInvisibleSize = menuSize - menuWrapperSize
+        const menuPosition = getMenuPosition()
+        const menuEndOffset = menuInvisibleSize
+        // show & hide the paddles, depending on scroll position
+        if (menuPosition <= 0 && menuEndOffset <= 0) {
+          // hide both paddles if the window is large enough to display all tabs
+          leftPaddle.classList.add("hidden")
+          rightPaddle.classList.add("hidden")
+        } else if (menuPosition <= 0) {
+          leftPaddle.classList.add("hidden")
+          rightPaddle.classList.remove("hidden")
+        } else if (menuPosition < Math.floor(menuEndOffset)) {
+          // show both paddles in the middle
+          leftPaddle.classList.remove("hidden")
+          rightPaddle.classList.remove("hidden")
+        } else if (menuPosition >= Math.floor(menuEndOffset)) {
+          leftPaddle.classList.remove("hidden")
+          rightPaddle.classList.add("hidden")
+        }
+      }
+      handleMenuScroll()
+
+      window.onresize = () => {
+        menuWrapperSize = getMenuWrapperSize()
+        menuSize = getMenuSize()
+        handleMenuScroll()
+      }
+      // finally, what happens when we are actually scrolling the menu
+      document.querySelector(".menu-wrapper").onscroll = () => {
+        handleMenuScroll()
+      }
+
+      const startJavaScriptAnimation = ({
+        duration = 300,
+        timingFunction = (t) => t,
+        onProgress = () => {},
+        onCancel = () => {},
+        onComplete = () => {},
+      }) => {
+        duration = parseInt(duration, 10)
+        const startMs = performance.now()
+        let currentRequestAnimationFrameId
+        let done = false
+        let rawProgress = 0
+        let progress = 0
+        const handler = () => {
+          currentRequestAnimationFrameId = null
+          const nowMs = performance.now()
+          rawProgress = Math.min((nowMs - startMs) / duration, 1)
+          progress = timingFunction(rawProgress)
+          done = rawProgress === 1
+          onProgress({
+            done,
+            rawProgress,
+            progress,
+          })
+          if (done) {
+            onComplete()
+          } else {
+            currentRequestAnimationFrameId =
+              window.requestAnimationFrame(handler)
+          }
+        }
+        handler()
+        const stop = () => {
+          if (currentRequestAnimationFrameId) {
+            window.cancelAnimationFrame(currentRequestAnimationFrameId)
+            currentRequestAnimationFrameId = null
+          }
+          if (!done) {
+            done = true
+            onCancel({
+              rawProgress,
+              progress,
+            })
+          }
+        }
+        return stop
+      }
+      rightPaddle.onclick = () => {
+        const scrollStart = document.querySelector(".menu-wrapper").scrollLeft
+        const scrollEnd = scrollStart + menuWrapperSize
+        startJavaScriptAnimation({
+          duration: scrollDuration,
+          onProgress: ({ progress }) => {
+            document.querySelector(".menu-wrapper").scrollLeft =
+              scrollStart + (scrollEnd - scrollStart) * progress
+          },
+        })
+      }
+      leftPaddle.onclick = () => {
+        const scrollStart = document.querySelector(".menu-wrapper").scrollLeft
+        const scrollEnd = scrollStart - menuWrapperSize
+        startJavaScriptAnimation({
+          duration: scrollDuration,
+          onProgress: ({ progress }) => {
+            document.querySelector(".menu-wrapper").scrollLeft =
+              scrollStart + (scrollEnd - scrollStart) * progress
+          },
+        })
+      }
+    

package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L69C5-L299C13.css

@@ -0,0 +1,227 @@
+* {
+  box-sizing: border-box;
+}
+
+[data-force-hide] {
+  display: none !important;
+}
+
+html, body {
+  flex-direction: column;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+html {
+  height: 100%;
+  font-family: arial, sans;
+}
+
+main {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+main > * {
+  min-width: 100%;
+  flex: 1;
+}
+
+hr {
+  color: #000;
+  background-color: #000;
+  border-color: #000;
+  margin: 15px 0;
+}
+
+article[data-page="file-list"] {
+  color: #97a0a0;
+  background-color: #204143;
+}
+
+nav, #explorables-message {
+  background: #1f262c;
+}
+
+#explorables nav {
+  overflow: hidden;
+}
+
+#explorables-message {
+  overflow: auto;
+}
+
+article h2 {
+  margin: 0;
+  display: flex;
+}
+
+article h2 svg {
+  margin-right: 15px;
+}
+
+#main_html_file {
+  padding: 25px 25px 0;
+}
+
+#main_file_link {
+  color: #e7f2f3;
+}
+
+h2 {
+  color: #24b1b0;
+  margin: 20px 0;
+  display: inline-block;
+}
+
+h4 {
+  color: #97a0a0;
+  padding: 0 25px;
+  font-size: 15px;
+  font-weight: normal;
+}
+
+#explorables {
+  word-break: break-word;
+}
+
+#explorables-header {
+  width: 100%;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+
+#explorables_header_and_menu {
+  background-color: #204143;
+  padding-top: 25px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+#explorables_header_bottom_spacing {
+  height: 20px;
+  background: #1f262c;
+}
+
+#directory_relative_url {
+  color: orange;
+}
+
+#explorables ul {
+  margin: 0;
+  padding: 0 25px 25px;
+}
+
+#explorables li {
+  margin: 10px 0;
+  list-style-type: none;
+}
+
+#explorables li:first-child {
+  margin-top: 0;
+}
+
+#explorables li .execution-link {
+  width: 100%;
+  word-break: break-all;
+}
+
+.execution-link {
+  color: #e7f2f3;
+  -webkit-text-decoration: unset;
+  text-decoration: unset;
+  background: #204143;
+  padding: 6px 12px;
+  font-family: monospace;
+  font-size: 14px;
+  display: inline-block;
+}
+
+#main_file_icon {
+  fill: #24b1b0;
+}
+
+#fileIconSvgConfig {
+  width: 25px;
+  height: 25px;
+  stroke: none;
+  fill: #24b1b0;
+}
+
+#explorables fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+#explorables fieldset label {
+  padding: 0;
+  display: inline-block;
+}
+
+#explorables fieldset input {
+  opacity: 0;
+  position: absolute;
+}
+
+#explorables fieldset label input + * {
+  min-width: 8em;
+  text-align: center;
+  background-color: #204143;
+  border-radius: .1em;
+  padding: .7em 1em;
+  display: block;
+}
+
+#explorables fieldset input:checked + * {
+  color: orange;
+  background: #1f262c;
+}
+
+.menu-wrapper {
+  max-width: 100%;
+  margin-top: 25px;
+  transition: all .3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.menu {
+  box-sizing: border-box;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.menu .item {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 1em;
+  display: inline-block;
+}
+
+.paddle {
+  height: 36px;
+  color: #1f262c;
+  background: #24b1b0;
+  border: none;
+  position: absolute;
+  bottom: 0;
+}
+
+.left-paddle {
+  left: 0;
+}
+
+.right-paddle {
+  right: 0;
+}
+
+.hidden {
+  display: none;
+}

package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L8C5-L68C13.css

@@ -0,0 +1,28 @@
+button:focus, a:focus, input:focus, [data-contains-hidden-input] input:focus + * {
+  outline-offset: -2px;
+  outline-style: none;
+}
+
+[data-contains-hidden-input] input:focus + * {
+  outline-offset: -2px;
+  outline-width: 4px;
+}
+
+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: #0096ff;
+}
+
+@-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-offset: 0;
+    outline: 2px solid #0096ff;
+  }
+}
+
+::-moz-focus-inner {
+  border: 0;
+}

package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/import_meta_hot/client/import_meta_hot.js

@@ -0,0 +1,82 @@
+/*
+ * https://vitejs.dev/guide/api-hmr.html#hot-accept-deps-cb
+ * https://modern-web.dev/docs/dev-server/plugins/hmr/
+ */
+
+export const urlHotMetas = {}
+
+export const createImportMetaHot = (importMetaUrl) => {
+  const data = {}
+  const url = asUrlWithoutHmrQuery(importMetaUrl)
+
+  return {
+    data,
+    accept: (firstArg, secondArg) => {
+      if (!firstArg) {
+        addUrlMeta(url, {
+          dependencies: [url],
+          acceptCallback: () => {},
+        })
+        return
+      }
+      if (typeof firstArg === "function") {
+        addUrlMeta(url, {
+          dependencies: [url],
+          acceptCallback: firstArg,
+        })
+        return
+      }
+      if (typeof firstArg === "string") {
+        addUrlMeta(url, {
+          dependencies: [firstArg],
+          acceptCallback: secondArg,
+        })
+        return
+      }
+      if (Array.isArray(firstArg)) {
+        addUrlMeta(url, {
+          dependencies: firstArg,
+          acceptCallback: secondArg,
+        })
+        return
+      }
+      throw new Error(
+        `invalid call to import.meta.hot.accept(), received ${firstArg}`,
+      )
+    },
+    dispose: (callback) => {
+      addUrlMeta(url, {
+        disposeCallback: () => {
+          return callback(data)
+        },
+      })
+    },
+    decline: () => {
+      addUrlMeta(url, {
+        declined: true,
+      })
+    },
+    invalidate: () => {
+      addUrlMeta(url, {
+        invalidated: true,
+      })
+    },
+  }
+}
+
+const addUrlMeta = (url, meta) => {
+  urlHotMetas[url] = {
+    ...urlHotMetas[url],
+    ...meta,
+  }
+}
+
+const asUrlWithoutHmrQuery = (url) => {
+  const urlObject = new URL(url)
+  if (urlObject.searchParams.has("hmr")) {
+    urlObject.searchParams.delete("hmr")
+    urlObject.searchParams.delete("v")
+    return urlObject.href
+  }
+  return url
+}

package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/ribbon/client/ribbon.js

@@ -0,0 +1,51 @@
+export const injectRibbon = ({ text }) => {
+  const css = /* css */ `
+      #jsenv_ribbon_container {
+        position: absolute;
+        z-index: 1001;
+        top: 0;
+        right: 0;
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      #jsenv_ribbon {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        width: 100%;
+        height: 100%;
+      }
+      #jsenv_ribbon_text {
+        position: absolute;
+        left: 0px;
+        top: 20px;
+        transform: rotate(45deg);
+        display: block;
+        width: 125px;
+        line-height: 36px;
+        background-color: orange;
+        color: rgb(55, 7, 7);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+        font-weight: 700;
+        font-size: 16px;
+        font-family: "Lato", sans-serif;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        text-align: center;
+        user-select: none;
+      }
+    `
+
+  const html = /* html */ `<div id="jsenv_ribbon_container">
+      <style>${css}</style>
+      <div id="jsenv_ribbon">
+        <div id="jsenv_ribbon_text">${text}</div>
+      </div>
+    </div>`
+
+  const node = document.createElement("div")
+  node.innerHTML = html
+  document.body.appendChild(node.firstChild)
+}