I try to build a simple Text Editor using Electron. At the moment I want to add a custom title bar which doesn't really work as the buttons are not clickable...

I added an onclick tag to the buttons.

main.js:

//-- variables --\\

const { BrowserWindow, app, Menu, dialog, ipcMain } = require("electron")
let window
let filePath = null //currently opened file
let openFiles = []  //opened files



//-- startup --\\

app.whenReady().then(function()
{
    createWindow()
    createMenu()
})



//-- functions --\\

function createWindow()
{
    window = new BrowserWindow
    ({
        width: 1000,
        height: 600,
        frame: false,
        icon: "./assets/icon.png",
        darkTheme: true,
        autoHideMenuBar: true,
        webPreferences:
        {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    //window.maximize()
    window.loadFile("./frontend/index.html")
    window.webContents.openDevTools()
}

function createMenu()
{
    Menu.setApplicationMenu(Menu.buildFromTemplate
    ([
        {
            label: "File",
            submenu:
            [
                {
                    label: "Save",
                    click: saveFile,
                    accelerator: "CmdOrCtrl S"
                },
                {
                    label: "Open",
                    click: openFile,
                    accelerator: "CmdOrCtrl O"
                },
                {
                    label: "New",
                    click: newFile,
                    accelerator: "CmdOrCtrl N"
                }
            ]
        }
    ]))
}

async function promptFilePathOpen()
{
    await dialog.showOpenDialog
    ({ properties: ["openFile"] }).then(function(res)
    {
        if(res.canceled) return
        filePath = res.filePaths[0]
    })
}

async function promptFilePathSave()
{
    await dialog.showSaveDialog().then(function(res)
    {
        if(res.canceled) return
        filePath = res.filePath
    })
}

async function openFile()
{
    await promptFilePathOpen()
    //openFiles.push(filePath)
    window.webContents.send("crd-openFile", filePath)
}

async function saveFile()
{
    if(filePath == null || undefined) await promptFilePathSave()
    window.webContents.send("crd-saveFile", filePath)
}

async function newFile()
{
    filePath = null
    await promptFilePathSave()
    window.webContents.send("crd-resetEditor")
    window.webContents.send("crd-saveFile", filePath)
}



//-- listeners --\\

app.on("window-all-closed", function()
{
    if(process.platform != "darwin") app.quit()
})

ipcMain.on("crd-minimizeWindow", function() //does not get called by the renderer
{
    //coming soon
})

ipcMain.on("crd-toggleWindowSize", function() //does not get called by the renderer
{
    //coming soon
})

ipcMain.on("crd-closeWindow", function() //does not get called by the renderer
{
    console.log("quit")
})

renderer/script.js:

//-- imports --\\

const { ipcRenderer } = require("electron")
const fs = require("fs")

const editorElem = document.querySelector("textarea.editor")



//-- functions --\\

function minimizeWindow() // does not get called by the button (index.html)
{
    ipcRenderer.send("crd-minimizeWindow")
}

function toggleWindowSize() // does not get called by the button (index.html)
{
    ipcRenderer.send("crd-toggleWindowSize") 
}

function closeWindow() // does not get called by the button (index.html)
{
    ipcRenderer.send("crd-closeWindow")
}



//-- listeners --\\

ipcRenderer.on("crd-openFile", function(e, path)
{
    editorElem.value = fs.readFileSync(path, "utf-8")
})

ipcRenderer.on("crd-saveFile", function(e, path)
{
    fs.writeFile(path, editorElem.value , function(res, err)
    {
        if(err) throw err
    })
})

ipcRenderer.on("crd-resetEditor", function()
{
    editorElem.value = ""
})

The entire code is avalable on my GitHub, because I do not want the whole question consisting of code :)

CodePudding user response：

Two issues here:

1. You defined functions like closeWindow, but you didn't actually add an event listener for them. You mention onclick but I can't see that in your code. So the first step would be to add document.querySelector('.closeWindow').addEventListener('click', closeWindow) .

2. You made the whole title bar draggable, including the buttons. That means that the role of the buttons is also a draggable area, so when you click them, you start the drag operation instead of sending a click event. The solution is therefore to make sure the button area does not have the -webkit-app-region: drag style but only the area left to them has. This will probably require you to redesign the HTML layout for the title bar a bit, since this won't work well with the whole thing being a grid.

For more details, see this tutorial.