TODO:
- Add ability to close/hide/minimize/maximize our windows(pages).
Of course you can simply use the standard buttons (behaviour) by adding the following line of code:
electron-app/windows/AboutWindow.js
...
this.window = new BrowserWindow({
...
frame: true,
...
})
...
Applying of this line - we will receive next result:
VIDEO: Default window buttons
However, this functionality does not suit us because it has a few drawbacks.
- These keys are not very easy to customize
- We can't change design of this buttons.
- We can't add some additional button or field ( for example search field to header )
- The behavior of these keys is strictly declared. By clicking on the close button - we'll get
destroyof the window (which is unacceptable in our case. Because for more rapid opening, we will simply hide pages/windows)
Lets remove this line of code frame: true and do a custom implementation of this buttons:
We should add three new buttons and add three new events to them. Also lets add draggable zone to emulate default header.
electron-app/pages/about_page.html
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.shell = require('electron').shell;
// Add remote module - because we will use main process modules from the renderer process.
window.remote = require('electron').remote;
</script>
</head>
// Make this page fully undraggable.
<body style='-webkit-app-region: no-drag'>
<style type="text/css">
#header {
// Make only header is draggable
-webkit-user-select: none;
-webkit-app-region: drag;
background-color: blue;
}
</style>
<div id='header'>
<button id='close'>X</button>
<button id='hide'>-</button>
<button id='maximize'><></button>
</div>
...
<script type='text/javascript'>
...
document.getElementById("close").addEventListener("click", function (e) {
// We trying to emulate native behavior, so we should hide the window ( also we should hide it in doc-bar too )
remote.app.dock.hide();
// getCurrentWindow - Returns the BrowserWindow object to which this web page belongs.
remote.getCurrentWindow().hide();
});
document.getElementById("hide").addEventListener("click", function (e) {
// Emulate minimize to tray effect.
remote.getCurrentWindow().minimize();
});
document.getElementById("maximize").addEventListener("click", function (e) {
// Emulate maximize-minimize effect
if (remote.getCurrentWindow().isMaximized()) {
remote.getCurrentWindow().unmaximize();
} else {
remote.getCurrentWindow().maximize();
}
})
</script>
</body>
</html>
We will receive next result: