CODEWITHSUNDEEP
javascriptelectron
MΛRTIN N
MΛRTIN N

Reputation: 123

electron custom Close, Maximize and Maximize doesn´t work

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!

Upvotes: 2

Views: 1543

Answers (2)

Visual Studio
Visual Studio

Reputation: 1

I can solve it in the following way. in my main file where is the configuration of the application. Import the following const { ipcMain } = require('electron'); Then inside my createWindow function at the end after loading my //html element add this other.

ipcMain.on('minimize', () => {
   win. minimize();
});

ipcMain.on('close', () => {
   win. close();
});

in my separate js file, that is, my render.js I added the events, when the dom is loaded, to be able to find the ids well

const { ipcRenderer } = require('electron');

document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('minimizeBtn').addEventListener('click', () => {
     ipcRenderer.send('minimize');
   });

   document.getElementById('closeBtn').addEventListener('click', () => {
     ipcRenderer.send('close');
   });
});

This selects the html elements and applies the minimize and maximize function to them

Upvotes: 0

snwflk
snwflk

Reputation: 3517

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.

Upvotes: 2

Related Questions