TODO:
- Add dynamic changes into tray bar of the screen.
Lets add random words into the tray bar on button click.
In HTML file we should add one more listener:
electron-app/pages/tray_page.html
<!DOCTYPE html>
...
<body style='-webkit-app-region: no-drag'>
<button id='my-button'>X</button>
<button id='my-second-button'>Set rundom!</button>
<script type='text/javascript'>
document.getElementById("my-button").addEventListener("click", function (e) {
ipcRenderer.send('quit-app');
});
var textArray = ['First', 'Second', 'Third'];
document.getElementById('my-second-button').addEventListener("click", function (e) {
var randomIndex = Math.floor(Math.random() * textArray.length);
var randomString = textArray[randomIndex];
// On click we sends event to Main Process (Index.js file) with random string.
ipcRenderer.send('update-title-tray-window-event', randomString);
});
</script>
</body>
</html>
Add additional Event:
electon-app/js/index.js
ipcMain.on('update-title-tray-window-event', function(event, title) {
trayIcon.updateTitle(title);
});
Now we should add updateTitle function that will update our tray bar:
electron-app/js/TrayIcon.js
class TrayIcon {
constructor(trayWindow) {
...
},
updateTitle(title) {
this.trayIcon.setTitle(title)
}
}
module.exports = TrayIcon;