Menu
I am trying to build a Simple App having Close, Maximize and Minimize buttons.
The problem with the application is that the Close, Maximize and Minimize are not working properly. The console.log() when the buttons are clicked, is functioning properly and displaying the proper messages, however, it is not performing the actual Close, Maximize and Minimize operations.
Also, not that in the CSS, I have added -webkit-app-region: drag; for the header but added -webkit-app-region: no-drag; for options, i.e., buttons.
Attaching a screenshot.
The content of driver index.js is:
const {app, BrowserWindow} = require('electron');
const url = require('url');
let win = null;
function boot() {
win = new BrowserWindow({
width: 640,
height: 480,
frame: false
});
win.loadURL(`file://${__dirname}/index.html`);
win.on('closed', () => {
win = null;
});
}
app.on('ready', boot);header {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
background: #353535;
color: black;
align-self: stretch;
-webkit-app-region: drag;
}
#content {
display: flex;
height: 100vh;
flex-direction: column;
background: black;
align-items: center;
}
.option {
color: white;
padding: 10px 25px;
font-size: 16px;
cursor: pointer;
-webkit-app-region: no-drag;
}
.option:hover {
background: red;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Sample App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<header>
<div class="option" id="close">X</div>
<div class="option" id="minimize">-</div>
<div class="option" id="maximize">=</div>
</header>
</div>
<script src="js/script.js"></script>
</body>
</html>Also, the contents of script.js is
const {remote} = require('electron');
document.getElementById('close').addEventListener('click', closeWindow);
document.getElementById('minimize').addEventListener('click', minimizeWindow);
document.getElementById('maximize').addEventListener('click', maximizeWindow);
function closeWindow () {
var window = remote.getCurrentWindow();
window.close();
}
function minimizeWindow () {
var window = remote.getCurrentWindow();
window.minmize();
}
function maximizeWindow () {
var window = remote.getCurrentWindow()
window.isMaximized() ? window.unmaximize() : window.maximize();
}
701
This can be fixed by using getFocusedWindow instead of getCurrentWindow.
In your script.js file, update the the functions, closeWindow(), minimizeWindow() and maximizeWindow(), as:
const {remote} = require('electron');
document.getElementById('close').addEventListener('click', closeWindow);
document.getElementById('minimize').addEventListener('click', minimizeWindow);
document.getElementById('maximize').addEventListener('click', maximizeWindow);
/*
getFocusedWindow() may return null.
If a user uses global keyboard shortcut to trigger
minimizeWindow, there may not be any window that
is focused right now
*/
const getWindow = () => remote.BrowserWindow.getFocusedWindow();
function closeWindow () {
getWindow().close();
}
function minimizeWindow () {
getWindow().minimize();
}
function maximizeWindow () {
const window = getWindow();
window.isMaximized() ? window.unmaximize() : window.maximize();
}
The reason why getFocusedWindow() works instead of getCurrentWindow() can be explained by an experienced developer.
187
If this didn't work for you:
window.isMaximized() ? window.unmaximize() : window.maximize();
Try this instead:
function maximizeWindow () {
var window = remote.BrowserWindow.getFocusedWindow();
window.setFullScreen(!window.isFullScreen());
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
