MAK OS Development Log: Desktop Environments & Taskbar Design Completed!

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.

✅ Key Updates:

• Added Window Grabbing System (took 80% of time!)
• Added subtle taskbar lines like windows11 to show active windows status

🎉🎉Window Grabbing Fix:✨

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;
    }
}

TaskBar Indicators:

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:

🎯Next Goals:

• Add more and more apps
• Add Taskbar clock
  -Add welcome screen
  -Make the Start Menu actually worth-it to open it.

---

Feel Free to Reply the project or check it out now here:

https://mako-s.netlify.app