web-dev-qa-db-fra.com

Atom Electron - Fermez la fenêtre avec javascript.

J'utilise Electron (anciennement atom-Shell) et aimerais avoir une fenêtre de cadre minimaliste afin que les trois boutons de la fenêtre OSX (fermer, agrandir, réduire) soient visibles depuis dans la page HTML.

Je règle l'option Electron frame sur false lors de la définition de BrowserWindow pour avoir une fenêtre sans chrome ni cadre.

Et je pensais que je pouvais gérer le bouton de fermeture avec quelque chose comme ceci:

<a btn href="#" id="close" onclick="window.top.close(); return false"></a>

Malheureusement, malheureusement. Une idée comment y parvenir?

javascriptelectron
36
Arnaud Leymet

Vous devez accéder à l'objet BrowserWindow créé par votre processus principal et appeler les méthodes minimize, maximize et close. Vous pouvez y accéder en utilisant le module remote. Voici un exemple de liaison des trois boutons:

  const remote = require('electron').remote;

  document.getElementById("min-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.minimize(); 
  });

  document.getElementById("max-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       if (!window.isMaximized()) {
           window.maximize();          
       } else {
           window.unmaximize();
       }
  });

  document.getElementById("close-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.close();
  });

en supposant que vos boutons min, max, close ont des identifiants de min-btn, max-btn, et close-btn, respectivement.

Vous pouvez afficher la documentation complète de BrowserWindow ainsi que les autres fonctionnalités dont vous pourriez avoir besoin ici: http://electron.atom.io/docs/v0.28.0/api/browser-window/ .

Cela pourrait également vous aider à jeter un coup d'œil au tutoriel que j'ai écrit sur la construction d'une fenêtre sans chrome qui ressemble à Visual Studio ici: http://www.mylifeforthecode.com/making-the-electron-Shell-as- joli-comme-le-studio-visuel-Shell . Votre question est couverte avec quelques CSS pour positionner correctement les boutons.

115
Shawn Rakowski