Disable or customize Context menu

[jdounivers]

Hello,

I'm trying to disable or change the context menu but everything i saw on tutoriel doesn't seems to work.
Is there a specific way to change it with this template ?

[mubaidr]

You mean context menu or application menu? Also which tutorial please?

[jdounivers]

I mean the context menu, this :

And i tried differents tutorials.
Doing this (as i saw in off doc) :

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup({ window: remote.getCurrentWindow() })
}, false)

or using electron-context-menu dependency

[mubaidr]

This should work as expected. Can you share your complete code, please?

[jdounivers]

I didn't change a lot of things.
Here is my src/renderer/main.js :

import Vue from 'vue'
import App from './App.vue'
import './assets/style/main.scss'
import router from './router/index'
import store from './store/index'

const { remote } = require('electron')
const { Menu, MenuItem } = remote

const isDev = process.env.NODE_ENV === 'development'

Vue.config.devtools = isDev
Vue.config.performance = isDev
Vue.config.productionTip = isDev

// tslint:disable-next-line: no-unused-expression
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
})

const menu = new Menu()
menu.append(new MenuItem({ type: 'separator' }))

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup({ window: remote.getCurrentWindow() })
}, false)

// to avoild accesing electorn api from web app build
if (window && window.process && window.process.type === 'renderer') {
  const { ipcRenderer } = require('electron')

  // handle menu event updates from main script
  ipcRenderer.on('change-view', (event, data) => {
    if (data.route) {
      router.push(data.route)
    }
  })
}

[mubaidr]

Looks good to me, I will check and update you.

[jdounivers]

Thanks
and thanks for your quick answers

[mubaidr]

It works as expected for me.

Code sample used:

const { remote } = require('electron')
const { Menu, MenuItem } = remote
const menu = new Menu()
menu.append(new MenuItem({ label: 'Home' }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'Other' }))

window.addEventListener(
  'contextmenu',
  (e) => {
    e.preventDefault()
    menu.popup({ window: remote.getCurrentWindow() })
  },
  false
)

[jdounivers]

I saw where is the difference :

  mainWindow = new BrowserWindow({
    backgroundColor: '#fff',
    width: 960,
    height: 540,
    minWidth: 960,
    minHeight: 540,
    // useContentSize: true,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: false,
      webSecurity: false,
    },
    frame: false,
    show: false,
    resizable: false
  })

[jdounivers]

With frame : false the contextmenu doesn't work anymore

[mubaidr]

Then it must be electronjs implementation,nothing to do with this template.