Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
68
rated 0 times [  71] [ 3]  / answers: 1 / hits: 44911  / 9 Years ago, thu, october 1, 2015, 12:00:00

I wish to catch the event of clicking the app window's close button in Electron app.



I'm trying to develope Electron app for Mac OSX.
I want to hide the app window, not to terminate the app when a user clicks the window's close button like other Mac apps.



However, I can not detect wether the system should be terminated or it should be hidden, because in any case, a close event of browser-window is called when a close button is clicked, the OS is shut down or the app is terminated with quit command, Cmd+Q.



Is there any way to catch the event of clicking the app window's close button in Electron app?



Thank you for your help.






Postscript



To detect the event of clicking a close button, I tried this code



var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');

var force_quit = false;

var menu = Menu.buildFromTemplate([
{
label: 'Sample',
submenu: [
{label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
{label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {force_quit=true; app.quit();}}
]
}]);

app.on('window-all-closed', function(){
if(process.platform != 'darwin')
app.quit();
});

app.on('ready', function(){

Menu.setApplicationMenu(menu);

mainWindow = new BrowserWindow({width:800, height:600});

mainWindow.on('close', function(e){
if(!force_quit){
e.preventDefault();
mainWindow.hide();
}
});

mainWindow.on('closed', function(){
console.log(closed);
mainWindow = null;
app.quit();
});

app.on('activate-with-no-open-windows', function(){
mainWindow.show();
});
});


With this code, the app is hidden when a close button of the app window is clicked, and the app is terminated when Cmd+Q is typed. However, when I try to shut down the OS, the shutdown event is prevented.


More From » electron

 Answers
13

You can catch it by using the close event of the browser-window api. You can try the following to verify this...



var app = require('app');

var force_quit = false;

app.on('ready', function () {
mainWindow = new BrowserWindow({ width: 800, height: 600 });

mainWindow.on('close', function() { // <---- Catch close event

// The dialog box below will open, instead of your app closing.
require('dialog').showMessageBox({
message: Close button has been pressed!,
buttons: [OK]
});
});
});


Update:



To separate functionality you can do the following...



var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');

var force_quit = false;
var menu = Menu.buildFromTemplate([
{
label: 'Sample',
submenu: [
{label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
{
label: 'Quit',
accelerator: 'CmdOrCtrl+Q',
click: function() {
force_quit=true; app.quit();
}
}
]
}]);

app.on('window-all-closed', function(){
if(process.platform != 'darwin')
app.quit();
});

app.on('ready', function(){

Menu.setApplicationMenu(menu);

mainWindow = new BrowserWindow({width:800, height:600});

// Continue to handle mainWindow close event here
mainWindow.on('close', function(e){
if(!force_quit){
e.preventDefault();
mainWindow.hide();
}
});

// You can use 'before-quit' instead of (or with) the close event
app.on('before-quit', function (e) {
// Handle menu-item or keyboard shortcut quit here
if(!force_quit){
e.preventDefault();
mainWindow.hide();
}
});

// Remove mainWindow.on('closed'), as it is redundant

app.on('activate-with-no-open-windows', function(){
mainWindow.show();
});
});

// This is another place to handle events after all windows are closed
app.on('will-quit', function () {
// This is a good place to add tests insuring the app is still
// responsive and all windows are closed.
console.log(will-quit);
mainWindow = null;
});


The above code uses the before-quit event handler to handle app close events on the app api. Browser-window close events are still handled on the browser-window api by mainWindow.on('close').



Additionally, the will-quit event is a better place to test for problems before the app closes completely.


[#64875] Tuesday, September 29, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
nestorjarettg

Total Points: 451
Total Questions: 108
Total Answers: 108

Location: Rwanda
Member since Thu, Feb 10, 2022
2 Years ago
;