Neutralinojs : How to Maximize Neutralino Window when it is dragged off of a Maximized State

Question

I have made a custom title bar for a Neutralino Window.
It has 3 simple buttons for Close, Maximize, Minimize.
I Also made it so that when the title bar is dragged, it drags the whole window using Neutralino.window.setDraggableRegion<\/code> .But now the problem is that when I drag the title barafter the window has been maximized, it should be unmaximizing just like other Win32 Apps. But It doesn't ,it just moves the window. I did try to fix this by ondrag="dragMinimize()" draggable="true"<\/code> in the titlbar div<\/code> and function in js:

async function dragMinimize() {
  let isMaximized = await Neutralino.window.isMaximized();
  if(isMaximized) {
    Neutralino.window.unmaximize();
  }
}

Answer 1

In Simple words you'll need to run a function when mouse goes over the title bar and check if left mouse button was pressed or not and then you can use Neutralino.window.unmaximize()

Checkout this code:

async function initCustomWindowBar() {
    const closeBtn = document.getElementById("close");
    const minimizeBtn = document.getElementById("minimize");
    const maximizeBtn = document.getElementById("maximize");
    const draggableRegion = document.getElementById("draggableRegion");

    closeBtn.addEventListener("click", async () => {
        await Neutralino.app.exit(0);
    })

    minimizeBtn.addEventListener("click", async () => {
        await Neutralino.window.minimize();
    })

    maximizeBtn.addEventListener("click", async () => {
        await Neutralino.window.maximize();
    })

    draggableRegion.addEventListener("mousemove", async (event) => {
        if (event.buttons == 1 && await Neutralino.window.isMaximized()) {
            await Neutralino.window.unmaximize();
        }
    })

    await Neutralino.window.setDraggableRegion('draggableRegion');
}

Neutralino.init();
Neutralino.events.on("ready", initCustomWindowBar);

So here we are calling initCustomWindowBar function when everything is ready.

Inside our initCustomWindowBar function first we gather all the HTML Elements for minimizing, maximizing, closing and the window's draggable region.

Then we add event listeners to our 3 buttons which will run the respective function to minimize, maximize and close our window.

And finally we add a event listener on our draggable area, the event listener is mousemove this event listener will run our function everytime only if the mouse moved on our draggable area.

This event listener will also give us event object as a parameter which we can use to check if the left mouse button was pressed when the function was called.

Now When user moves his mouse over our window's draggable region a function will run, and this function will check if the left mouse button was pressed or not and if the window is maximized or not, if both of these conditions are true then we will run await Neutralino.window.unmaximize(); which will cause our window to unmaximize.

Here is the full code:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NeutralinoJs sample app</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="draggableRegion">
        <span class="title">My Window</span>
        <span class="windowButtons">
            <span id="minimize"></span>
            <span id="maximize"></span>
            <span id="close"></span>
        </span>
    </div>
    <div id="neutralinoapp">
        <h1>NeutralinoJs</h1>
        <div id="info"></div>
    </div>
    <script src="js/neutralino.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

CSS

#draggableRegion {
    display: block;
    text-align: center;
    user-select: none;
    background-color: #333;
    color: #fff;
    margin-bottom: 10px;
    padding: 20px;
    cursor: default;
}

#draggableRegion .windowButtons {
    user-select: none;
    float: right;
}

#draggableRegion .title {
    user-select: none;
}

.windowButtons span {
    display: inline-block;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    background-color: #E8E8E8;
    border-radius: 100%;
}

.windowButtons span#minimize {
    background-color: #eebc3c;
}

.windowButtons span#maximize {
    background-color: #7aca4f;
}

.windowButtons span#close {
    background-color: #df6158;
}

JavaScript

function onWindowClose() {
    Neutralino.app.exit();
}

async function initCustomWindowBar() {
    const closeBtn = document.getElementById("close");
    const minimizeBtn = document.getElementById("minimize");
    const maximizeBtn = document.getElementById("maximize");
    const draggableRegion = document.getElementById("draggableRegion");

    draggableRegion.addEventListener("mousemove", async (e) => {
        if (e.buttons == 1 && await Neutralino.window.isMaximized()) {
            await Neutralino.window.unmaximize();
        }
    })

    closeBtn.addEventListener("click", async () => {
        await Neutralino.app.exit(0);
    })

    minimizeBtn.addEventListener("click", async () => {
        await Neutralino.window.minimize();
    })

    maximizeBtn.addEventListener("click", async () => {
        await Neutralino.window.maximize();
    })

    await Neutralino.window.setDraggableRegion('draggableRegion');
}

Neutralino.init();
Neutralino.events.on("windowClose", onWindowClose);
Neutralino.events.on("ready", initCustomWindowBar);

Result:

Sorry for the bad quality, GIF doesn't do a good job.

Neutralinojs : How to Maximize Neutralino Window when it is dragged off of a Maximized State

Question

1 answers

solution1
0 2022-01-23 22:13:07

Neutralinojs : How to Maximize Neutralino Window when it is dragged off of a Maximized State

Question

1 answers

solution1 0 2022-01-23 22:13:07

solution1
0 2022-01-23 22:13:07