You are browsing as a guest. Sign up (or log in) to start making projects!

3h 43m 28s logged

WebOS 2 Devlog #5: File manager overhaul + custom dialog box

I realised that always having the custom browser alerts was kinda boring and interrupting so i made my own dialogue box. I also changed the file manager to include some essential functions that it was missing to make it more like an OS (see below). Here are the changes i made:

  • I abandoned the old array-based folders. I made it so that it now reads and writes directly to localStorage using stricter pathing (e.g., webos-file-Root/Documents/file.txt). I also built a native getUniqueName() function. If you create a duplicate file or folder, there’s no like a (1), (2), etc. at the end of it, which prevents data overwrites. This makes it more like a real OS

  • Drag-and-Drop: I alos removed the old custom JavaScript coordinate trackers for file movement. It now uses the native HTML5 Drag-and-Drop API. You can physically pick up a file from the Explorer window, drag it out, and drop it directly onto the visual Desktop wallpaper.

  • Custom Dialog Box: Native browser popups (alert(), confirm()) look hella ugly and break the flow so i built a custom dialog engine using JavaScript Promises. Now, when the system needs confirmation a custom window that fits with the theme appears. Because it uses async/await, the JavaScript pauses and waits for user acceoting or declining without freezing the browser.

  • List View & Item Properties: I introduced a hybrid Grid/List view (just like a real os like mac). Because tracking file metadata (like Date Modified) from the start would have been way to complicated, I just built this engine where when the File Explorer encounters a file without a timestamp, it instantly generates metadata key (os-meta-path) using Date.now() and saves it permanently, which means that it allows for Date sorting without breaking anything.

0
4

Comments 0

No comments yet. Be the first!