I have created an electron application that has multiple windows that can open ex. an about page and a preferences page. This is what my main.js looks like.
const {app, Tray, Menu, BrowserWindow} = require('electron');
//electron application stuff
const path = require('path'); //allows for use of path
const url = require('url'); //allows for loadURL and url.format
const iconPath = path.join(__dirname, 'icon.png'); //grab the icon
let tray = null; //set the tray to null
let win = null; //set the main window to null
app.on('ready', function(){
win = new BrowserWindow({width: 600, height: 400, resizable: false});
//create main window
win.setMenu(null); //the main window had no menu
win.loadURL(url.format({ //loads the webpage for the main window
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
win.openDevTools(); //starts the application with developer tools open
win.on('minimize',function(event){ //prevents standard minimize
function of a main window
event.preventDefault()
win.hide();
});
win.on('close', function (event) { //prevents the closing of the
aplication when the window closes
if( !app.isQuiting){
event.preventDefault()
win.hide();
}
return false;
});
tray = new Tray(iconPath); //create a new tray
var contextMenu = Menu.buildFromTemplate([ //start buliding out the
menu for the tray
{ label: 'Insomnia', click: function(){ //makes the main window reappear
win.show();
} },
{ label: 'About', click: function(){ //shows the about window
abt = new BrowserWindow({width: 400, height: 400, resizable: false});
abt.setMenu(null); //the about window has no menu
abt.loadURL(url.format({ //loads the webpage for the about window
pathname: path.join(__dirname, 'about.html'),
protocol: 'file:',
slashes: true
}))
} },
{
label: 'Preferences', click: function(){ //shows the about window
pref = new BrowserWindow({width: 400, height: 400, resizable: false});
pref.setMenu(null); //the about window has no menu
pref.loadURL(url.format({ //loads the webpage for the about window
pathname: path.join(__dirname, 'preferences.html'),
protocol: 'file:',
slashes: true
}))
}
},
{ label: 'Quit', click: function(){ //quit the application
app.isQuiting = true;
app.quit(); //quit called
} }
]);
tray.setToolTip('Insomnia'); //Honestly no clue but itll make the tray
say insomnia in some other place
tray.setContextMenu(contextMenu); //attach the menu to the tray
});
When the user opens the preferences window I have a button there that lets them store their preferences. When i use scripts from the java script file on win window they actually work. However using that same logic for the preferences window none of the java script functions actually run. This is what my preferences.html looks like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Preferences</title>
</head>
<body BGCOLOR="#02D9CC" >
</div>
<center> <img src="sleep.png" alt="sleep" style="width:100px;height:100px;"> </center>
<div style="position:absolute;bottom:250px;margin-left:110px">
<center>
<input onclick="storeTimePreference()" type="radio" id="timeType" name="timeType" value="Military"> Military </input>
<input onclick="storeTimePreference()" type="radio" id ="timeType2" name="timeType" value="Standard" checked="checked"> Standard </input>
</center>
</div>
<div style="position:absolute;bottom:150px;margin-left:110px">
<center><input type="time" id="defaultTime" /><br>
<button onlick="readFile()" >Set Default Wake Up Time</button>
</center>
</div>
<div class ="version" style="position:absolute;bottom:5px;color:white;margin-left:225px">
<center >
Insomnia Version 1.0.0
</center>
</div>
<script src="./js/script.js"></script>
</body>
</html>
Where the readFile() script and storeTimePreference() functions are both part of the script.js included at the bottom. Which is the same way i did it for the index.html however here it doesn't work and I'm not sure why. Can anyone explain what I'm doing wrong here or why this doesn't work and what a workaround would be?
via A. Epstein
No comments:
Post a Comment