diff --git a/app.js b/app.js index 0f4b7b4..7b51a0b 100644 --- a/app.js +++ b/app.js @@ -1,5 +1,6 @@ import * as FSHandle from "./store-directory-handle.js"; +/** @type {(type:string, attributes?:Record, ...children:Array)=>HTMLElement} */ const H =(type, attributes={}, ...children)=> { const el =document.createElement(type); Object.entries(attributes).forEach(([name, data])=>{ @@ -23,22 +24,37 @@ const H =(type, attributes={}, ...children)=> { const button = H("button"); const listRoom = H("ul"); -/** @type {(handle:boolean)=>Promise} */ -async function ReloadAndRedraw(handle) +/** @type {(errorAction?:()=>void)=>Promise} */ +async function ReloadAndRedraw(errorAction = ()=>{}) { - if(handle) + listRoom.innerHTML = ""; + + try { + const handle = await FSHandle.getDirectoryHandle(); + if(!handle) + { + console.log("no fs handle") + throw new Error("no fs handle set yet") + } + button.setAttribute("disabled", true); + button.innerText = "loading..."; const module = await import("./data/room.js"+"?rand="+Math.random()); const rooms = module.default(); button.innerText = "change directory"; console.log("rooms loaded:", rooms); - listRoom.innerHTML = ""; + Object.entries(rooms).forEach(([roomID, roomData])=> { const listPass = H("ul"); Object.entries(roomData.Pass).forEach(([passID, passData])=>{ listPass.appendChild(H("li", {}, - H("button", { onclick(){ passData.load();console.log(roomData);globalThis.ROOM=roomData; } }, passData.name) + H("button", { onclick() + { + passData.load(); + console.log(roomData); + globalThis.ROOM=roomData; + } }, passData.name) )) }); @@ -50,24 +66,22 @@ async function ReloadAndRedraw(handle) ); }) } - else + catch(e) { + errorAction(); button.innerText = "select directory"; } + button.removeAttribute("disabled") } -let handle = false; -handle = await FSHandle.getDirectoryHandle(); -await ReloadAndRedraw(handle); +await ReloadAndRedraw(); button.addEventListener("click", async()=> { const directory = await globalThis.showDirectoryPicker(); await FSHandle.setDirectoryHandle(directory); - - handle = await FSHandle.getDirectoryHandle(); - await ReloadAndRedraw(handle); + await ReloadAndRedraw(()=>alert("Invalid directory")); }); document.body.appendChild(button); diff --git a/service-worker.js b/service-worker.js index 64fcdbd..5650b18 100644 --- a/service-worker.js +++ b/service-worker.js @@ -4,7 +4,6 @@ self.addEventListener('install', ()=> self.skipWaiting()); // Activate worker im self.addEventListener('activate', ()=> self.clients.claim()); // Become available to all pages); self.addEventListener('fetch', (event) =>event.respondWith(Interceptor(event))); -let handle = false; async function Interceptor(event) { const url = new URL(event.request.url); @@ -13,43 +12,25 @@ async function Interceptor(event) if(parts[0] == "data" || parts[0] == "room") { - console.log("intercept", pathname) - const extension = pathname.substring(pathname.lastIndexOf('.') + 1); - // Intercept only JavaScript files - if ( extension == "js" || extension == "json" ) + console.log("intercept:", pathname) + const handle = await FSAccess.getDirectoryHandle(); + if(handle) { - if(!handle) + const file = await FSAccess.drilldown(handle, parts); + if(file) { - handle = await FSAccess.getDirectoryHandle(); - } - if(handle) - { - try - { - let filePointer = handle; - for(let i=0; iPromise} */ function openDB() { return new Promise((resolve, reject) => { const request = indexedDB.open('directory-handle-db', 1); @@ -11,19 +12,21 @@ function openDB() { } // 💾 Store a directory handle +/** @type {(handle:FileSystemDirectoryHandle)=>Promise} */ export async function setDirectoryHandle(handle) { const db = await openDB(); const tx = db.transaction('handles', 'readwrite'); - tx.objectStore('handles').put(handle, 'my-folder'); + tx.objectStore('handles').put(handle, 'user-folder'); await tx.done; } // 📂 Retrieve a directory handle +/** @type {()=>Promise} */ export async function getDirectoryHandle() { const db = await openDB(); const tx = db.transaction('handles', 'readonly'); return new Promise((resolve, reject) => { - const getRequest = tx.objectStore('handles').get('my-folder'); + const getRequest = tx.objectStore('handles').get('user-folder'); getRequest.onsuccess = () => resolve(getRequest.result); getRequest.onerror = () => { console.error('Error retrieving directory handle:', getRequest.error); @@ -32,21 +35,40 @@ export async function getDirectoryHandle() { }); } -// 🔐 Check or request permission -async function verifyPermission(handle, mode = 'readwrite') { - const opts = { mode }; - if ((await handle.queryPermission(opts)) === 'granted') return true; - if ((await handle.requestPermission(opts)) === 'granted') return true; - return false; +/** @type {(handle:FileSystemDirectoryHandle, parts:string[])=>Promise} */ +export async function drilldown(handle, parts) +{ + try + { + let filePointer = handle; + for(let i=0; i