Atom Electron - Chiudi la finestra con javascript

Question

Sto usando Electron (precedentemente atom-shell) e vorrei avere una cornice minimalista in modo che i tre pulsanti della finestra OSX (chiudi, ingrandisci, riduci) siano visibili da all'interno la pagina html.

Impostare l'opzione di elettrone frame su false quando si definisce BrowserWindow per avere una finestra senza cornice senza cornice.

e pensavo di poter gestire il pulsante di chiusura con qualcosa di simile:

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

senza fortuna, purtroppo. Qualche idea su come ottenere questo?

Answer 1

È necessario accedere all'oggetto BrowserWindow creato dal processo principale e chiamare i metodi minimize, maximize e close su quello. È possibile accedervi utilizzando il modulo remote. Ecco un esempio di legare tutti i tre pulsanti:

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(); 
    }); 

supponendo che il min, max, pulsanti di chiusura hanno ID di rispettivamente min-btn, max-btn e close-btn,.

È possibile visualizzare la documentazione completa per BrowserWindow insieme ad altre funzionalità che potrebbero essere necessarie qui: http://electron.atom.io/docs/v0.28.0/api/browser-window/.

Potrebbe anche aiutare a dare un'occhiata a un tutorial che ho scritto sulla creazione di una finestra chromeless che assomiglia a Visual Studio qui: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell. La tua domanda è trattata insieme ad alcuni css per posizionare correttamente i pulsanti.