npm - @jsenv/core - Versions diffs - 27.0.0-alpha.64 → 27.0.0-alpha.67 - Mend

@jsenv/core 27.0.0-alpha.64 → 27.0.0-alpha.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/dist/html/explorer.html ADDED Viewed

@@ -0,0 +1,557 @@
+<!DOCTYPE html><html><head>
+    <title>Exploring</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <link rel="icon" href="virtual:FAVICON_HREF">
+    <style>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: none;
+}
+</style>
+    <style>* {
+  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: 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;
+  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: auto 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;
+}
+</style>
+  </head>
+  <body>
+    <main></main>
+    <div style="display: none">
+      <article data-page="file-list">
+        <!--
+        <section id="main_html_file">
+          <h2>
+            <svg id="main_file_icon" viewBox="0 0 16 16" width="25px" height="25px">
+              <path
+                d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555  L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3  c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"
+              />
+            </svg>
+            <span
+              >Main html file:
+              <a id="main_file_link" href="javascript:void(0)">${mainFileRelativeUrl}</a></span
+            >
+          </h2>
+          <div>
+            <iframe id="main_file_iframe" src="about:blank"></iframe>
+          </div>
+        </section>
+        <hr />
+        !-->
+        <section id="explorables">
+          <div id="explorables-header">
+            <div id="explorables_header_and_menu">
+              <h2 style="white-space: nowrap">
+                <svg id="fileIconSvgConfig" viewBox="0 0 24 24" width="32" height="32">
+                  <path d="M0 0h24v24H0V0z" fill="none"></path>
+                  <path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"></path>
+                </svg>
+                <span>File(s) to explore in
+                  <span id="directory_relative_url" title="${directoryUrl}">${directoryName}</span></span>
+              </h2>
+              <div class="menu-wrapper">
+                <fieldset id="filter-group-set" class="menu"></fieldset>
+              </div>
+              <div class="paddles">
+                <button class="left-paddle paddle hidden">&lt;</button>
+                <button class="right-paddle paddle">&gt;</button>
+              </div>
+            </div>
+            <div id="explorables_header_bottom_spacing"></div>
+          </div>
+          <div>
+            <div id="explorables-message">
+              <h4 style="margin-top: 0">${message}</h4>
+            </div>
+            <nav>
+              <ul></ul>
+            </nav>
+          </div>
+        </section>
+      </article>
+    </div>
+    <script>
+      // 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)
+    </script>
+    <script>
+      // 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
+          },
+        })
+      }
+    </script>
+</body></html>