Website: https://mako-s.netlify.app. "I PREVIOUSLY HAD A TYPO IN WEB ADDRESS IT IS 'mako-s.netlify.app' not 'makos.netlify.app' I am Updating this project to align with the goals of WebOS Mission, as it was previously worthless, i am updating to something polished and adding required features.
.png)
.png)
That’s It! The Project is finally completed!
Try it now at: https://mako-s.netlify.app
Now I am just going to Ship this Project! Yippee!
.png)
I finally managed to be successful in implementing the Window Grabbing System via JS without weird errors. It was extremely difficult to solve the issue of the settings window shooting down as soon as grabbed etc.
Initially, the window-dragging function relied on JS Mouseup, Mousedrag and Mousedown events. However, this caused the settings window card to jump wildly. After spending more than one and a half hour figuring out the problem i finally found the solution which was using CSS’ translate being edited while grabbing the windows with mouse events in JS. The following is the JS code for window grabbing.
function makeWindowDraggable(windowEl) {
const header = windowEl.querySelector('.window-header');
if (!header) return;
let currentX = windowEl.id === 'settings' ? 420 : 100;
let currentY = 100;
let startX = 0;
let startY = 0;
windowEl.style.transform = `translate(${currentX}px, ${currentY}px)`;
header.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
if (e.target.closest('.close')) return;
e.preventDefault();
highestZIndex++;
windowEl.style.zIndex = highestZIndex;
startX = e.clientX;
startY = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
let deltaX = e.clientX - startX;
let deltaY = e.clientY - startY;
startX = e.clientX;
startY = e.clientY;
currentX += deltaX;
currentY += deltaY;
windowEl.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
I had less time left after all time dumped into mostly fixing a weirdly acting window grabbing system which had no sense that why is that even happening😖. So another thing I added is a line in Taskbar Buttons to show window status. It is inspired from Windows11, when in focus it is wide and blue, when out of focus it is small and grey, and when closed, the line goes out too. Subtle but nice and smooth effect. The CSS was simple not-worth of code but JS played the real affect:
Destroyed all HTML and CSS and recreated from Scratch!
I realized my UI was tooo Cartoonished so i abondoned all my code, except Script.js file since it had all functions. then i remade the whole thing with Bootstrap with minimal CSS code so i can spend less time on styling and more on making the Apps and functions as well as i will get a more professional UI.
I also changed the name from CatOS to MAK_OS.
Link: https://mako-s.netlify.app
Try and review!
Built a real desktop-style window system in the Web based OS.
I added a fully interactive window dragging system, making the web OS feel like a real operating system.
Try now at “https://catos.netlify.app”
v1.3 Updates:
-> Implemented mouse down / move / up event system
-> Added z-index management for active windows
-> Smooth dragging using JS click mouse events
-> Fixed broken mobile UI.
Next Steps:
-> Add minimize window option
-> Add Apps icon to appear at the tasbar
