pinokiod 1.0.31 → 1.0.33

package/package.json

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

package/server/index.js

@@ -343,6 +343,7 @@ class Server {
     } else if (pathComponents.length === 0 && req.query.mode === "settings") {
       let configArray = [{
         key: "home",
+        description: "* Do NOT use exFAT drives",
         val: this.kernel.homedir,
         placeholder: "Enter the absolute path to use as your Pinokio home folder (D:\\pinokio, /Users/alice/pinokiofs, etc.)"
       }, {
@@ -351,6 +352,7 @@ class Server {
         options: ["light", "dark"]
       }]
       console.log("agent", this.agent)
+      console.log({ configArray })
       res.render("settings", {
         version: this.version,
         logo: this.logo,
@@ -1168,10 +1170,16 @@ class Server {
             }
           }
         }
+        config.menu[i].target = "@" + (config.menu[i].id || config.menu[i].src)
       }
+
+
       config.menu = config.menu.filter((item) => {
         return item.btn
       })
+
+        
+      
       console.log("config", JSON.stringify(config,null,2))
       return config
     } else {
@@ -1602,6 +1610,7 @@ class Server {
       if (req.query.mode === 'settings') {
         let configArray = [{
           key: "home",
+          description: "* Do NOT use exFAT drives",
           val: this.kernel.homedir ? this.kernel.homedir : path.resolve(os.homedir(), "pinokio"),
           placeholder: "Enter the absolute path to use as your Pinokio home folder (D:\\pinokio, /Users/alice/pinokiofs, etc.)"
         }, {

package/server/views/browser.ejs

@@ -99,6 +99,9 @@ body.dark .header-item .btn2 {
   color: var(--darkt-color);
   */
 }
+.bar .btn2 i {
+  display: block;
+}
 .header-item > * {
   display: block;
 }
@@ -315,7 +318,7 @@ nav .logo {
   padding: 10px;
 }
 #location {
-  padding: 5px;
+  padding: 5px 10px;
   font-size: 12px;
   font-family: verdana;
 }
@@ -428,9 +431,8 @@ body.dark .loader-container {
       <button class='btn2 logo' id='forward'><i class="fa-solid fa-arrow-right"></i></button>
       <button class='btn2 logo' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
       <div id='location'></div>
-      <div class='flexible'></div>
-      <a class='btn2' id='open-browser' target="_blank" href=""><i class="fa-solid fa-square-arrow-up-right"></i> External Browser</a>
       <button class='btn2' id='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
+      <a class='btn2' id='open-browser' target="_blank" href=""><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
     </div>
     <!--
     <div class='flexible'></div>
@@ -441,12 +443,14 @@ body.dark .loader-container {
     -->
   </nav>
   <main class='browserview'>
-    <% if (false && config.menu) { %>
-      <% config.menu.forEach((item) => { %>
-        <% if (item.btn && item.src) { %>
-          <iframe name='<%=item.src%>' class='hidden'></iframe>
-        <% } %>
-      <% }) %>
+    <% if (false) { %>
+      <% if (config.menu) { %>
+        <% config.menu.forEach((item) => { %>
+          <% if (item.btn && item.src) { %>
+            <iframe name='<%=item.src%>' class='hidden'></iframe>
+          <% } %>
+        <% }) %>
+      <% } %>
     <% } %>
   </main>
 </div>
@@ -467,6 +471,35 @@ const getTarget = (href) => {
     return u.pathname
   }
 }
+const subUrlOf = (s, f) => {
+  debugger
+
+  let subsetUrl = (s.startsWith("http") ? s : "http://localhost" + s)
+  let fullUrl = (f.startsWith("http") ? f: "http://localhost" + f)
+
+  const subsetParsed = new URL(subsetUrl)
+  const fullParsed = new URL(fullUrl)
+
+  if (subsetParsed.pathname !== fullParsed.pathname) {
+    return false;
+  }
+
+  // Check if all search parameters in the subset URL are present in the full URL
+  for (const [key, val] of subsetParsed.searchParams) {
+
+    if (!fullParsed.searchParams.has(key)) {
+      return false
+    }
+    console.log("key", key)
+    console.log("f", fullParsed.searchParams.get(key))
+    console.log("s", val)
+    if (fullParsed.searchParams.get(key) !== val) {
+      return false
+    }
+  }
+
+  return true;
+}
 const renderCursor = () => {
   document.querySelectorAll(".selectable").forEach((el) => {
     el.classList.remove("cursor")
@@ -504,10 +537,18 @@ const renderSelection = (e, force) => {
     document.querySelector(".bar").classList.remove("hidden")
     //let id = getTarget(location.hash.slice(1))
     let id = location.hash.slice(1)
-    let type = id[0]
-    let index = id.slice(1)
 
-    console.log({ type, index })
+
+    let selector
+    if (id.startsWith("@")) {
+      selector = `aside [target='${id.slice(1)}']`
+    } else {
+      let type = id[0]
+      let index = id.slice(1)
+      console.log({ type, index })
+      selector = `aside .${type} [data-index='${index}']`
+    }
+
 
     // select the selected link
 //    document.querySelectorAll(".frame-link").forEach((el) => {
@@ -529,7 +570,7 @@ const renderSelection = (e, force) => {
       }
     } else {
       // if not triggered by an event, look for the target from the location hash
-      target = document.querySelector(`aside .${type} [data-index='${index}']`)
+      target = document.querySelector(selector)
     }
 
 
@@ -560,6 +601,7 @@ const renderSelection = (e, force) => {
       })
 
 
+      debugger
 
       // Look for the frame
       // 1. if it's hard (".h")
@@ -568,7 +610,7 @@ const renderSelection = (e, force) => {
       //    find using the name attribute
       let targetFrame;
       if (target.closest(".h")) {
-        let hardFrames = document.querySelectorAll(".browserview iframe[name^=h]")
+        let hardFrames = document.querySelectorAll(".browserview iframe[name^='@']")
         let port = new URL(target.href).port
         for(let frame of hardFrames) {
           console.log({ src: frame.src, href: target.href, target: target.target })
@@ -633,22 +675,30 @@ const renderSelection = (e, force) => {
         } else {
           if (e) {
             if (target.closest(".h")) {
-              if (target.href === targetFrame.src) {
-                // same url. don't do anything 
-                e.preventDefault()
-                e.stopPropagation()
-              } else {
-                if (targetFrame.src.includes(target.href)) {
-                  // different url, but the frame's url contains the tab url => don't touch
-                  e.preventDefault()
-                  e.stopPropagation()
-                } else {
-                  // different url, and the frame's url does not contain the tab url => change the src of the frame and load
-                  targetFrame.src = target.href
-                  e.preventDefault()
-                  e.stopPropagation()
-                }
+              debugger
+              e.preventDefault()
+              e.stopPropagation()
+              let sub = subUrlOf(target.href, targetFrame.src)
+              console.log("issub", sub)
+              if (!sub) {
+                targetFrame.src = target.href
               }
+              //if (target.href === targetFrame.src) {
+              //  // same url. don't do anything 
+              //  e.preventDefault()
+              //  e.stopPropagation()
+              //} else {
+              //  if (targetFrame.src.includes(target.href)) {
+              //    // different url, but the frame's url contains the tab url => don't touch
+              //    e.preventDefault()
+              //    e.stopPropagation()
+              //  } else {
+              //    // different url, and the frame's url does not contain the tab url => change the src of the frame and load
+              //    targetFrame.src = target.href
+              //    e.preventDefault()
+              //    e.stopPropagation()
+              //  }
+              //}
             } else if (target.closest(".s")) {
               // load unconditionally => .s doesn't change
               e.preventDefault()
@@ -977,12 +1027,19 @@ document.querySelector("aside").addEventListener("click", async (e) => {
 //        location.hash = id
 
         //location.hash = target.getAttribute("href")
-        let index = target.getAttribute("data-index")
-        let type = target.closest(".m").getAttribute("data-type")
 
-        console.log({ type, index })
+        if (target.closest(".h")) {
+          location.hash = target.target
+        } else {
+          let index = target.getAttribute("data-index")
+          let type = target.closest(".m").getAttribute("data-type")
+
+          console.log({ type, index })
 
-        location.hash = type + index
+          debugger
+
+          location.hash = type + index
+        }
 
         document.querySelectorAll(".frame-link").forEach((el) => {
           el.classList.remove("selected")
@@ -1035,6 +1092,8 @@ const refresh = async () => {
 //    frame.removeAttribute("name")
 //    location.hash = ""
 //  }
+
+
   location.hash = ""
 
 
@@ -1049,13 +1108,21 @@ const refresh = async () => {
 }
 window.addEventListener('message', (event) => {
   console.log("Message received from the child: ", event.data); // Message received from child
-  if (event.data && event.data.action) {
-    if (event.data.action.type === "newtab") {
-      console.log("create tab", event.data.action.url) 
-      addTab(event.data.action.url)
+  if (event.data) {
+    if (event.data.action) {
+      if (event.data.action.type === "newtab") {
+        console.log("create tab", event.data.action.url) 
+        addTab(event.data.action.url)
+      }
+    } else if (event.data.type) {
+      if (event.data.type === 'disconnect') {
+//        location.hash = ""
+        refresh()
+      } else {
+        refresh()
+      }
     }
   } else {
-    console.log("data", event.data)
     refresh()
   }
 });

package/server/views/partials/menu.ejs

@@ -10,7 +10,10 @@
     </div>
   <% } else { %>
     <% if (item.btn) { %>
+      <!--
       <a data-index="<%=index%>" target="h<%=index%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
+      -->
+      <a data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
         <div class='tab'><%-item.btn%></div>
         <% if (item.running) { %>
           <div class='loader'>

package/server/views/settings.ejs

@@ -63,18 +63,28 @@
   border-top: 1px solid rgba(255,255,255,0.1);
   border-bottom: 1px solid rgba(255,255,255,0.1);
   */
-  padding: 15px 0;
+  padding: 20px 0;
+}
+.titleview h1 {
+  font-size: 40px;
+  text-transform: uppercase;
+  letter-spacing: 0;
 }
 .item button {
   padding: 10px 20px;
 }
 .item label {
   display: block;
-  font-weight: bold;
-  text-transform: capitalize;
-  font-size: 14px;
+  text-transform: uppercase;
+  font-size: 30px;
   padding-bottom: 5px;
 }
+.item .explanation {
+  padding-top: 5px;
+  color: brown;
+  font-size: 14px;
+  font-weight: bold;
+}
 body.dark .item input[type=text] {
   background: rgba(255,255,255,0.1);
   color: white;
@@ -228,6 +238,9 @@ header .home {
             <input class='homepath' name="<%=c.key%>" type='text' placeholder="<%=c.placeholder ? c.placeholder : ''%>">
           <% } %>
         <% } %>
+        <% if (c.description) { %>
+        <div class='explanation'><%=c.description%></div>
+        <% } %>
       </div>
     <% }) %>
     <br>