I am attempting to use module.exports from a JS file ito my index.js file, however when i do this i get a “Uncaught Exception: Reference Error: document is not defined”
How can i avoid this?
function I’m exporting from sidebar.js file:
function openHorizontalWindow()
{
document.getElementById('notready-reasons').style.animation = "moveright 0.45s ease 0s forwards"
}
code in index.js file:
ipcMain.on('StateOfAgent', (event, data) => {
horizontalWindow();
openHorizontalWindow();
event.returnValue = "toggle not ready test";
})
If this is a bad way of doing this, Is there a way to load or have access to all of the id elements in my index.html file when focussed on another window in electron?
At the moment I have a div element in my index.html file and when i click this it opens up a new window which loads in my sidebar.html file. i Have done this by using the ipcRenderer and then calling it within the index.js file - this is what im trying to accomplish with my JS function to get the animation working but its giving me an error. I would like to generate the openHorizontalWindow() function inside of my sidebar.js file, so when the Browserwindow opens it slides in from the left, and doesn’t just “pop up”.
index.html file with div element - this is the icon i click to have the window appear.
<div class="agent">
<div id="stateOfAgent" class="agentstate-icon" onclick=""><img height="100%" width="100%">
</div>
</div>
sidebar.html file - this is the file that is loaded in when the div id (stateOfAgent) is clicked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="sidebar.css">
<script type="module" src="commands.js"></script>
<title>Document</title>
</head>
<body>
<div id="notready-reasons">
<div style="display: grid; grid-template-columns: repeat(8,1fr); margin-left:-20px; width:100px; text-align: center; color:#FFFFFF; height:60px;">
<div id="btnReady" class="overlay-state" onclick="closeHorizontalWindow()" ><img height="100%" width="100%">
<div id="btnNotReady" class="overlay-state" onclick="stateNotReady() " ><img height="100%" width="100%">
<div id="btnBreak" class="overlay-state" onclick=""><img height="100%" width="100%">
</div>
</div>
<script src="sidebar.js"></script>
</body>
</html>
The electron browser window which is being opened when div stateOfAgent is being clicked:
function horizontalWindow()
{
sidebar = new BrowserWindow({height:80, width:1300, transparent:true, frame:false, titleBarStyle: 'none', resizable: false, webPreferences: { nodeIntegration: true,
contextIsolation: false, enableRemoteModule: true}})
sidebar.loadFile('sidebar.html')
sidebar.setPosition(0, 100, true)
sidebar.setMenuBarVisibility(false)
sidebar.setAlwaysOnTop(true, 'floating')
}
horizontalWindow function being called in index.js:
ipcMain.on('StateOfAgent', (event, data) => {
horizontalWindow();
//openHorizontalWindow();
event.returnValue = "toggle not ready test";
})
Can anyone help? ive been stuck on this for three days now 
Thankyou.