pinokiod 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -21,6 +21,8 @@ const http = require('isomorphic-git/http/node')
 const marked = require('marked')
 const multer = require('multer');
 const localtunnel = require('localtunnel');
+const ejs = require('ejs');
+
 
 
 
@@ -960,7 +962,6 @@ class Server {
       // items
 
 
-      console.log("ITEMS", items)
 
 
  //     let U = `${_p}/${pathComponents.join("/")}`
@@ -1029,115 +1030,133 @@ class Server {
     }
   }
   async renderMenu(uri, name, config, pathComponents) {
-    for(let i=0; i<config.menu.length; i++) {
-      let menuitem = config.menu[i]
+    if (config.menu) {
+      for(let i=0; i<config.menu.length; i++) {
+        let menuitem = config.menu[i]
 
-      if (menuitem.href && !menuitem.href.startsWith("http")) {
+        if (menuitem.menu) {
+          let m = await this.renderMenu(uri, name, { menu: menuitem.menu }, pathComponents)
+          menuitem.menu = m.menu
+        }
 
-        // href resolution
-        let absolute = path.resolve(__dirname, ...pathComponents, menuitem.href)
-        let seed = path.resolve(__dirname)
-        let p = absolute.replace(seed, "")
-        let link = p.split(/[\/\\]/).filter((x) => { return x }).join("/")
-        config.menu[i].href = "/api/" + name + "/" + link
-      }
 
+        if (menuitem.href && !menuitem.href.startsWith("http")) {
 
-      if (menuitem.href) {
-        let u
-        if (menuitem.href.startsWith("http")) {
-          menuitem.src = menuitem.href
-        } else if (menuitem.href.startsWith("/")) {
-          u = new URL("http://localhost" + menuitem.href)
-          u.search = ""
-          menuitem.src = u.pathname
-        } else {
-          u = new URL("http://localhost/" + menuitem.href)
-          u.search = ""
-          menuitem.src = u.pathname
+          // href resolution
+          let absolute = path.resolve(__dirname, ...pathComponents, menuitem.href)
+          let seed = path.resolve(__dirname)
+          let p = absolute.replace(seed, "")
+          let link = p.split(/[\/\\]/).filter((x) => { return x }).join("/")
+          config.menu[i].href = "/api/" + name + "/" + link
         }
 
-
-        // check running
-        let fullpath = this.kernel.path(menuitem.src.slice(1))
-        if (this.kernel.api.running[fullpath]) {
-          menuitem.running = true
+        if (menuitem.href && menuitem.params) {
+          menuitem.href = menuitem.href + "?" + new URLSearchParams(menuitem.params).toString();
         }
 
-      }
+        if (menuitem.href) {
+          let u
+          if (menuitem.href.startsWith("http")) {
+            menuitem.src = menuitem.href
+          } else if (menuitem.href.startsWith("/")) {
+            u = new URL("http://localhost" + menuitem.href)
+            u.search = ""
+            menuitem.src = u.pathname
+          } else {
+            u = new URL("http://localhost/" + menuitem.href)
+            u.search = ""
+            menuitem.src = u.pathname
+          }
 
 
+          // check running
+          let fullpath = this.kernel.path(menuitem.src.slice(1))
+          if (this.kernel.api.running[fullpath]) {
+            menuitem.running = true
+          }
 
-      if (menuitem.href && menuitem.params) {
-        menuitem.href = menuitem.href + "?" + new URLSearchParams(menuitem.params).toString();
-      }
+        }
 
 
 
-      // check on/off: if on/off exists => assume that it's a script
-      // 1. check if the script is running
-      if (menuitem.when) {
-        let scriptPath = path.resolve(uri, name, menuitem.when)
-        let filepath = scriptPath.replace(/\?.+/, "")
-        let check = this.kernel.status(filepath)
-        if (check) {
-          // 2. if it's running, display the "on" HTML. If "on" doesn't exist, don't display anything
-          if (menuitem.on) {
-            if (menuitem.type === "label") {
-              config.menu[i].label = menuitem.on
-            } else {
-              config.menu[i].btn = menuitem.on
+//        if (menuitem.href && menuitem.params) {
+//          menuitem.href = menuitem.href + "?" + new URLSearchParams(menuitem.params).toString();
+//        }
+
+
+
+        // check on/off: if on/off exists => assume that it's a script
+        // 1. check if the script is running
+        if (menuitem.when) {
+          let scriptPath = path.resolve(uri, name, menuitem.when)
+          let filepath = scriptPath.replace(/\?.+/, "")
+          let check = this.kernel.status(filepath)
+          if (check) {
+            // 2. if it's running, display the "on" HTML. If "on" doesn't exist, don't display anything
+            if (menuitem.on) {
+              if (menuitem.type === "label") {
+                config.menu[i].label = menuitem.on
+              } else {
+                config.menu[i].btn = menuitem.on
+              }
+            }
+          } else {
+            // 3. If it's NOT running, display the "off" HTML, If "off" doesn't exist, don't display anything
+            if (menuitem.off) {
+              if (menuitem.type === "label") {
+                config.menu[i].label = menuitem.off
+              } else {
+                config.menu[i].btn = menuitem.off
+              }
             }
           }
-        } else {
-          // 3. If it's NOT running, display the "off" HTML, If "off" doesn't exist, don't display anything
-          if (menuitem.off) {
-            if (menuitem.type === "label") {
-              config.menu[i].label = menuitem.off
-            } else {
-              config.menu[i].btn = menuitem.off
+        } else if (menuitem.filter) {
+          if (menuitem.filter()) {
+            if (menuitem.hasOwnProperty("html")) {
+              if (menuitem.type === "label") {
+                config.menu[i].label = menuitem.html
+              } else {
+                config.menu[i].btn = menuitem.html
+              }
             }
           }
-        }
-      } else if (menuitem.filter) {
-        if (menuitem.filter()) {
+        } else {
           if (menuitem.hasOwnProperty("html")) {
             if (menuitem.type === "label") {
               config.menu[i].label = menuitem.html
             } else {
               config.menu[i].btn = menuitem.html
             }
-          }
-        }
-      } else {
-        if (menuitem.hasOwnProperty("html")) {
-          if (menuitem.type === "label") {
-            config.menu[i].label = menuitem.html
-          } else {
-            config.menu[i].btn = menuitem.html
-          }
-        } else if (menuitem.hasOwnProperty("text")) {
+          } else if (menuitem.hasOwnProperty("text")) {
 
-          if (menuitem.hasOwnProperty("icon")) {
-            menuitem.html = `<i class="${menuitem.icon}"></i> ${menuitem.text}` 
-          } else {
-            menuitem.html = `${menuitem.text}` 
-          }
+            console.log("processing", menuitem)
 
-          if (menuitem.href) {
-            // button
-            config.menu[i].btn = menuitem.html
-          } else {
-            // label
-            config.menu[i].label = menuitem.html
+            if (menuitem.hasOwnProperty("icon")) {
+              menuitem.html = `<i class="${menuitem.icon}"></i> ${menuitem.text}` 
+            } else {
+              menuitem.html = `${menuitem.text}` 
+            }
+
+            if (menuitem.href) {
+              // button
+              config.menu[i].btn = menuitem.html
+            } else if (menuitem.menu) {
+              config.menu[i].btn = menuitem.html
+            } else {
+              // label
+              config.menu[i].label = menuitem.html
+            }
           }
         }
       }
+      config.menu = config.menu.filter((item) => {
+        return item.btn
+      })
+      console.log("config", JSON.stringify(config,null,2))
+      return config
+    } else {
+      return config
     }
-    config.menu = config.menu.filter((item) => {
-      return item.btn
-    })
-    return config
   }
   relevant(r) {
     /*
@@ -1653,6 +1672,15 @@ class Server {
 
         console.log({ config })
       }
+
+
+      ejs.renderFile(path.resolve(__dirname, "views/partials/menu.ejs"), { menu: config.menu }, (err, html) => {
+        console.log("html", html)
+        res.send(html)
+      })
+
+
+/*
       res.json({
         config,
         home: req.originalUrl,
@@ -1661,6 +1689,7 @@ class Server {
         agent: this.agent,
         rawpath
       })
+      */
 
     })
     this.app.get("/pinokio/memory", (req, res) => {

package/server/views/browser.ejs

@@ -96,8 +96,17 @@ body.dark .header-item .btn2 {
   display: block;
 }
 .header-item img {
+/*
   width: 60px;
+  */
+  height: 80px;
+  width: 80px;
+  border-radius: 10px;
+  object-fit: contain;
+  display: inline-block;
+  /*
   border-radius: 30px;
+  */
 }
 body.dark .header-item.btn {
 /*
@@ -187,16 +196,14 @@ body.dark .header-item.cursor {
   */
 }
 body .frame-link.selected {
-  border-left: 10px solid gold;
-  /*
-  background: rgba(0,0,200,0.1) !important;
+/*
+  border-right: 10px solid gold;
   */
+  background: rgba(0,0,200,0.1) !important;
 }
-/*
 body.dark .frame-link.selected {
   background: rgba(0,0,0,0.2) !important;
 }
-*/
 .frame-link .tab {
   flex-grow: 1;
   width: 100%;
@@ -300,6 +307,10 @@ body.dark .header-item.cursor.header-top {
 body.dark #new-tab {
   border-top: 1px solid rgba(255,255,255,0.04);
 }
+.submenu {
+  padding-left: 15px;
+  box-sizing: border-box;
+}
 </style>
 </head>
 <body class='<%=theme%>'>
@@ -311,11 +322,14 @@ body.dark #new-tab {
     </div>
   </div>
   <div class='system'>
-    <a data-index="0" target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>
+    <!--<a data-index="0" target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>-->
+    <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>
       <div class='tab'><i class="fa-regular fa-folder-open"></i> Files</div>
     </a>
   </div>
   <div class='menu'>
+    <%- include('./partials/menu', { menu: config.menu }) %>
+    <!--
     <% config.menu.forEach((item, index) => { %>
       <% if (item.btn) { %>
         <a data-index="<%=index+1%>" target="<%=item.src%>" href="<%=item.href%>" class='btn header-item frame-link'>
@@ -325,11 +339,10 @@ body.dark #new-tab {
           <% } %>
         </a>
       <% } else if (item.label) { %>
-      <!--
         <label class='btn label header-item'><%-item.label%></label>
-        -->
       <% } %>
     <% }) %>
+    -->
   </div>
   <div class='temp-menu'>
     <%tabs.forEach((tab) => { %>
@@ -376,12 +389,12 @@ body.dark #new-tab {
   <main class='browserview'>
     <!--
     <pre><%=JSON.stringify({ memory, running }, null, 2)%></pre>
-    -->
     <% config.menu.forEach((item) => { %>
       <% if (item.btn && item.src) { %>
         <iframe name='<%=item.src%>' class='hidden'></iframe>
       <% } %>
     <% }) %>
+    -->
   </main>
 </div>
 <script>
@@ -414,23 +427,35 @@ const renderSelection = (e, force) => {
   if (location.hash && location.hash.length > 0) {
     document.querySelector(".bar").classList.remove("hidden")
     let id = getTarget(location.hash.slice(1))
-    console.log("id", id)
-    console.log("#3", loaded)
 
-    document.querySelector("#location").innerHTML = id
+    //document.querySelector("#location").innerHTML = id
+    document.querySelector("#location").innerHTML = location.hash.slice(1)
 
     if (location.hash.slice(1).startsWith("/")) {
       document.querySelector("#open-browser").classList.add("hidden")
     } else {
       document.querySelector("#open-browser").classList.remove("hidden")
-      document.querySelector("#open-browser").href = id
+      //document.querySelector("#open-browser").href = id
+      document.querySelector("#open-browser").href = location.hash.slice(1)
     }
 
     // select the selected link
-    document.querySelectorAll(".frame-link").forEach((el) => {
-      el.classList.remove("selected")
-    })
-    const target = document.querySelector(`[target='${id}']`)
+//    document.querySelectorAll(".frame-link").forEach((el) => {
+//      el.classList.remove("selected")
+//    })
+
+
+
+//    const target = document.querySelector(`[target='${id}']`)
+    let target
+    if (e) {
+      if (e.target.classList.contains("frame-link")) {
+        target = e.target
+      } else {
+        target = e.target.closest(".frame-link")
+      }
+    }
+
     if (target) {
       target.classList.add("selected")
 
@@ -439,50 +464,49 @@ const renderSelection = (e, force) => {
         el.classList.add("hidden")
       })
       let targetFrame = document.querySelector(`iframe[name='${target.target}']`)
-      console.log("#4", loaded)
-      console.log("targetFrame", targetFrame)
+      debugger
       if (targetFrame) {
-        console.log("#5", loaded)
-        console.log({ loaded })
         targetFrame.classList.remove("hidden")
 
         // if the iframe already exists, do not 
         if (loaded[target.target]){
           if (e) {
-            e.preventDefault()
-            e.stopPropagation()
+            // triggered with a click
+            // do not reload iframe if the href and the src is the same
+            if (targetFrame.src === target.href) {
+              e.preventDefault()
+              e.stopPropagation()
+            }
           } else {
-            console.log("REFRESH")
             if (force) {
-              targetFrame.src = target.href
+              if (targetFrame.src !== target.href) {
+                targetFrame.src = target.href
+              }
             }
           }
         } else {
-          console.log("load")
           //targetFrame.contentWindow.addEventListener("load", () => {
-            console.log("#1")
             if (e) {
               // coming from a click => don't need to set the src
             } else {
               // load without click
-              targetFrame.src = target.href
+              if (targetFrame.src !== target.href) {
+                targetFrame.src = target.href
+              }
             }
             loaded[target.target] = true
           //});
         }
       } else {
-        console.log("#6", loaded)
         let frame = document.createElement("iframe")
         frame.name = target.target
         frame.src = target.href
         document.querySelector("main").appendChild(frame)
-        console.log("#2")
         loaded[target.target] = true
       }
     }
   } else {
     document.querySelector(".bar").classList.add("hidden")
-    
   }
 }
 console.log("loaded before", loaded)
@@ -552,6 +576,15 @@ const addTab = async (url) => {
 }
 
 
+
+
+document.querySelector(".app-info").addEventListener("click", async (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  location.hash = ""
+  renderSelection()
+
+})
 document.querySelector("aside").addEventListener("click", async (e) => {
   let target
 
@@ -592,12 +625,29 @@ document.querySelector("aside").addEventListener("click", async (e) => {
 
     if (target) {
 
-      //location.hash = target.target
-      let id = getTarget(target.getAttribute("href"))
-      console.log("ID", id, target.href)
-      location.hash = id
+      if (target.classList.contains("reveal")) {
+        // nested menu
+        target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
+        e.preventDefault()
+        e.stopPropagation()
+      } else {
+        //location.hash = target.target
+
+
+//        let id = getTarget(target.getAttribute("href"))
+//        console.log("ID", id, target.href)
+//        location.hash = id
+
+        location.hash = target.getAttribute("href")
+
+        document.querySelectorAll(".frame-link").forEach((el) => {
+          el.classList.remove("selected")
+        })
+        target.classList.add("selected")
+
+        renderSelection(e)
+      }
 
-      renderSelection(e)
 
     }
   }
@@ -606,6 +656,10 @@ document.querySelector("aside").addEventListener("click", async (e) => {
 
 })
 const refresh = async () => {
+  const html = await fetch("<%=sidebar%>").then((res) => {
+    return res.text()
+  })
+  /*
   const res = await fetch("<%=sidebar%>").then((res) => {
     return res.json()
   })
@@ -618,10 +672,10 @@ const refresh = async () => {
 </a>`
     } else if (item.label) {
       return ""
-//      return `<label class='btn label header-item'>${item.label}</label>`
     }
   }).join("")
   console.log("refresh", html)
+  */
   document.querySelector(".menu").innerHTML = html
   renderSelection()
 //  cursorIndex = 0

package/server/views/partials/menu.ejs

@@ -0,0 +1,21 @@
+<% menu.forEach((item, index) => { %>
+  <% if (item.menu) { %>
+    <div class='nested-menu'>
+      <div class='btn header-item frame-link reveal'>
+        <div class='tab'><%-item.btn%></div>
+      </div>
+      <div class='submenu hidden'>
+        <%- include('./menu', { menu: item.menu }) %>
+      </div>
+    </div>
+  <% } else { %>
+    <% if (item.btn) { %>
+      <a data-index="<%=index%>" target="<%=item.src%>" href="<%=item.href%>" class='btn header-item frame-link'>
+        <div class='tab'><%-item.btn%></div>
+        <% if (item.running) { %>
+          <i class='fa-solid fa-spin fa-circle-notch'></i>
+        <% } %>
+      </a>
+    <% } %>
+  <% } %>
+<% }) %>