electron custom Close, Maximize and Maximize doesn´t work

user_13389322 0
Viewed 753

Im new in this electron space, and have a problem. i didn´t manage to get my custom buttons to work. This drives me crazy. Anyone an idea what i´m doing wrong? the Buttons do simply nothing when i click. My code is an example from an older youtube Tutorial, and i think things have changed since then.

Here is my code:

menuHandler.js

    const $ = require('jquery');
const { remote } = require('electron');
var win = remote.getCurrentWindow();

$('#minimize').click(function () {
    win.minimize();
});

$('#close').click(function () {
    win.close();
});

$('#maximize').click(function () {
    if (win.isMaximized()) {
        win.unmaximize();
    } else {
        win.maximize();
    }
    console.log(win.isMaximized());
});

my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/menu.css" rel="stylesheet">
    <script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
</head>

<body>
 
    <div id="container">
      <nav>
          
          <div id="buttons">
              <div id="minimize">
                <span id="minimize-font">&mdash;</span>
              </div>
                
              <div id="maximize">
                <span id="size-font">&#9723;</span>
              </div>
                    
              <div id="close">
                 <span id="close-font" >&#10005;</span>
              </div>
          </div>
       </nav>

    </div> 
    
    </html>
 
</body>
</html>

and my app.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let win;

var IMG_DIR = '/img/';
var APP_DIR = '/src/';

function createWindow() {
    win = new BrowserWindow({
    width: 1100,
    height: 750,
    minWidth: 930,
    minHeight: 650,
    frame: false,
    /*title: "Nader | Initio",
    resizable: true, */
    backgroundColor: '#1A373E',
    icon: path.join(__dirname, IMG_DIR, 'icon.png'),
    webPreferences: {
        nodeIntegration: true
        }
    
  });

  win.openDevTools()

  win.loadURL(url.format({
      pathname: path.join(__dirname, APP_DIR, 'index.html'),
      protocol: 'file:',
      slashes: true
  }))
} 
app.on('ready', createWindow);

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

thank you for your help!

electron javascript
1 Answers

Several small things are needed to make your code work:

  • <script type ="text/javascript"> src="/src/js/menuHandler.js"</script> needs to be <script type="text/javascript" src="/src/js/menuHandler.js"></script>
  • Since Electron 10, released in August 2020, you need to set enableRemoteModule: true in the webPreferences if you want to use remote in the renderer process.
  • Lastly, you should register the button click event handlers after the page is loaded. Otherwise, chances are the elements don't exist yet. 
    $(window).on("load", function() {
    console.log("loaded");

    $("#minimize").click(function () {
        console.log("minimize");
        win.minimize();
    });

    // etc. 

});

As a general tip I'd advise to make use of the DevTools, which you already activate in your code. There, in the Console tab, you can see JavaScript errors happening in the renderer process.

user_13352370
Related