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>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.minimize();
}
function maximizeWindow () {
var window = remote.getCurrentWindow()
window.isMaximized() ? window.unmaximize() : window.maximize();
}
-
1
Do you receive any error when you click the buttons? According to this answer
getFocusedWindowshould work, have you tried that? – kontrollanten Commented Oct 22, 2017 at 10:36 -
1
in a project am working on , i implemented something like this, but the way i did it, was whenever the user clicks the close button, it sends a message using ipc to the main process, the main process just have to call
window.maximize()– 0.sh Commented Oct 22, 2017 at 15:55 - @kontrollanten, That answer fixed my problem. Please write an answer on it so that it helps everyone. If you don't want to write. Please reply, I would write the answer myself. :) – abhijeetps Commented Oct 23, 2017 at 3:19
-
1
@0.sh The problem was solved when I used
var window = remote.BrowserWindow.getFocusedWindow();, followed by usingwindow.close();,window.minimize();, andwindow.isMaximized() ? window.unmaximize() : window.maximize();. Thanks for your help. :) – abhijeetps Commented Oct 23, 2017 at 3:22
2 Answers
Reset to default 12This 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.
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());
}