electron: How to remove a menu item from the default menu? - javascript

Goal
I'm trying to remove the Help menu from Electron app's menu.
I don't want to setApplicationMenu of my own because it's fine to use the default menu except for the help, which points to Electron's own help pages.
Attempts
I've tried the following ways and failed in each case:
Remove the tail item, i.e., the Help
var menu = Menu.getApplicationMenu();
menu.items.pop();
Make it invisible
var menu = Menu.getApplicationMenu();
for(var i=0; i<menu.items.length; i++) {
if (menu.items[i].role == 'help') {
menu.items[i].visible = false;
break;
}
}
Remove the menu
mainWindow.removeMenu();
This just doesn't work on macOS with my electron version: 10.1.0.
Question
What's wrong? Should I create a template instead?

You must use Menu.setApplicationMenu after you modify the default menu
const menu = Menu.getApplicationMenu(); // get default menu
menu.items.find((item) => item.role === "help").visible = false; // modify it
Menu.setApplicationMenu(menu); // set the modified menu
Note: From my experience, Menu.getApplicationMenu() will return null if it's called before the app ready event

menuItem.visible does not work in Electron 13. Instead, I build a new menu without the Help item.
const menu = Menu.getApplicationMenu()
const items = menu?.items.filter((item) => item.role !== 'help')
Menu.setApplicationMenu(Menu.buildFromTemplate(items))

Related

I want to create custom menu & also add submenu in it. In sub menu, I want to add my all sheet name automatically in google sheet

I'm trying to all sheet name add automatically in sub menu of my custom menu. Please solve this. I tried too many times.
installFunctions(); // This is required to run the function. So please don't remove this.
function onOpen_panda() {} // This can be used as the simple trigger.
function installFunctions() {
const menu = SpreadsheetApp.getUi().createMenu('sample menu').addSubMenu('Sheet List');
const ss = SpreadsheetApp.getActiveSpreadsheet();
ss.getSheets().forEach(s => {
if (!s.isSheetHidden()) {
const name = s.getSheetName();
const functionName = `sample${Utilities.base64Encode(name).replace(/[=+\/]/g, "")}`;
this[functionName] = () => ss.getSheetByName(name).activate();
menu.addItem(name, functionName);
}
})
menu.addToUi();
}

Reusable javascript component issue

I have a woking accessible responsive navigation which for DEMO perpuses I have to make it reusable so I can show different sort of senarios. However tho, the click burger menu is not working.
This header with responsive navigation should work indipenently multiple times.
On click and matchMedia
typial responsive nav behavious with an extra touch of matchMedia in case user moves the window.
open navigation on click and remove navigation if > 900
navigation remove Attribute hidden on desktop and on click.
All of this should work multiple times.
if (navBlocks.length > 0){
Array.prototype.forEach.call(navBlocks, function(el) {
the forEach function shoud do the work right? how come is not really working?
DEMO HERE
const navBlocks = document.querySelectorAll('.nav-container');
const nav = document.querySelector('.sliding-nav');
const menu = document.querySelector(".sliding-nav ul");
const toggleMenu = document.querySelector(".nav-container .nav-cta");
const mediaQuery = window.matchMedia('(min-width: 900px)');
let isMenuOpen = false;
if (navBlocks.length > 0) {
Array.prototype.forEach.call(navBlocks, function(el) {
el.addEventListener('click', e => {
e.preventDefault();
isMenuOpen = !isMenuOpen;
toggleMenu.setAttribute('aria-expanded', String(isMenuOpen));
menu.hidden = !isMenuOpen;
if (isMenuOpen) {
nav.classList.add('is-open');
document.body.classList.add("is-no-scroll", "is-fixed");
//console.log(isMenuOpen);
} else {
nav.classList.remove('is-open');
document.body.classList.remove("is-no-scroll", "is-fixed");
//console.log(!isMenuOpen);
}
});
function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
toggleMenu.setAttribute("aria-expanded", false);
menu.removeAttribute("hidden");
nav.classList.remove('is-open');
document.body.classList.remove("is-no-scroll", "is-fixed");
} else {
toggleMenu.setAttribute("aria-expanded", false);
//nav.removeAttribute("aria-expanded");
}
}
// Register event listener
mediaQuery.addListener(handleTabletChange);
// Initial check
handleTabletChange(mediaQuery);
});
}
I think you should do something like this,
add event listener on burger menu icon to toggle an active class in nav bar and you should write css for that active class that if nav contains "active" class it should be set to display or else it should display none!

Power BI Embedded & JavaScript - How can I apply an action afterf a slicerState change on a particular visual?

I have a report that contains a custom toggle visual. The toggle has two possible values, "OFF" (by default) or "ON"
What I would like to do is link that toggle value to a report theme change. So when the value of that toggle value changes, the report theme will update to either light or dark mode.
I'm at a stage where I can get the slicerState of the particular visual and determine it's value as being on or off. However, when trying to apply a report theme update, it appears to loop endlessly ( (see recording here))
My feeling is that it's related to the report.on('rendered'....... function but I'm looking to get a bit of help if possible. With it being a custom visual, I'm unable to listen to a buttonClick or dataSelection (as far as i'm aware), so i guess the only way I can detect that the toggle has been used is to track the slicerState function?
here's is the block of code relating to what i'm trying to do:
// Get a reference to the embedded dashboard HTML element
var $embedContainer = $("#embedContainer");
//define report embed
var report = powerbi.embed($embedContainer.get(0), config);
//when report renders
report.on('rendered', async () => {
//get all pages
const pages = await report.getPages()
//get active page
let activePage = pages.filter(function(page) {
return page.isActive
})[0];
//get visuals on active page
let visuals = await activePage.getVisuals();
//find target visual
const TargetVisual = visuals.filter(function(visual) {
return visual.name === "259fea6751434e7910b4"
})[0];
//get current state of visual
const state = await TargetVisual.getSlicerState();
//get current state value (on or off )
let filteredValue = state.filters[0].values
console.log(filteredValue)
//when the toggle is switched ON, apply the light theme.
if (filteredValue == "ON") {
/*
//when clickon on
report.applyTheme({
themeJson: themes.find(theme => theme.name === "dark")
}); } else {
//when the toggle is switched OFF, apply the dark theme.
//when clickon off
report.applyTheme({
themeJson: themes.find(theme => theme.name === "light")
});
*/
}
........
var themes = [
{
"name": "light",
"dataColors": ["#93A299", "#CF543F", "#B5AE53", "#848058", "#E8B54D", "#786C71", "#93A2A0", "#CF9A3F", "#8CB553", "#728458", "#D0E84D", "#786D6C"],
"background": "#FFFFFF",
"foreground": "#CF543F",
"tableAccent": "#93A299"
},
{
"name": "dark",
"dataColors": ["#31B6FD", "#4584D3", "#5BD078", "#A5D028", "#F5C040", "#05E0DB", "#3153FD", "#4C45D3", "#5BD0B0", "#54D028", "#D0F540", "#057BE0"],
"background": "#000000",
"foreground": "#4584D3",
"tableAccent": "#31B6FD"
}
]
It is not possible to track the slicer state which is applied at the runtime in Power BI embed. getSlicerState will give you an empty array of filters if you change the state of slicer at runtime. If you set the slicer state at compile time using setSlicerState then getslicerState will give you an array of filters and using that you can apply the theme.
if (state.filters.length > 0) {
report.applyTheme({
themeJson: themes.find(theme => theme.name === "dark")
});
Please find the references:
https://community.powerbi.com/t5/Developer/Power-BI-Embedded-Tracking-visual-filters-slicers/m-p/802196
https://learn.microsoft.com/javascript/api/overview/powerbi/control-report-slicers

JavaScript active class on menu items

I have the following html and JavaScript to add an active class called is-active to a menu item onClick. When you click on another item it gets removed from the previous one and gets added to the current one. My code is as follows which I got from W3Schools. I wanted to know if there is a better and more modern way of writing the JavaScript. (NO jQuery) only plain vanilla JavaScript
HTML:
<div class="our-clients__categories">
<h4>Technology</h4>
<h4>Retail</h4>
<h4>Finance</h4>
<h4>Consumer</h4>
<h4>Hospitality</h4>
</div>
JavaScript:
export default function () {
const clientCategoryButtons = document.querySelectorAll('.our-clients__categories--category')
clientCategoryButtons.forEach((categorybtn) => {
categorybtn.addEventListener('click', function (e) {
e.preventDefault()
const current = document.getElementsByClassName('is-active')
current[0].className = current[0].className.replace('is-active', '')
this.className += ' is-active'
})
})
}
Any and all help is appreciated! :)

Showing context menu for kendo UI treewiew by condition

I have a kendo UI treewiew, which represents some directory structure and context menu:
#(Html.Kendo().ContextMenu()
.Name("menu")
.Target("#treeview")
.Orientation(ContextMenuOrientation.Horizontal)
.Animation(animation => animation.Open(open =>
{
open.Fade(FadeDirection.In);
open.Duration(500);
}))
.Items(items =>
{
items.Add()
.Text("Test");
})
//.Events(e=>e.Open("contextOpen"))
)
<div class="treeview-back">
#(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.Events(events => events
.Check("onCheck")
)
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Model(m => m.Id("Path").HasChildren("HasChildren"))
.Read("ReadDirectory", "Download"))
)
I need to show context menu only for elements that represent folders. But I can't find the way to show kendo context menu by condition. I added right click capturing method, which looks like this:
$("#treeview").on('mousedown', '.k-item', function (event) {
var treeView = $('#treeview').data('kendoTreeView');
var dataSource = treeView.dataSource;
var itemUId = $(this).attr("data-uid");
var node = dataSource.getByUid(itemUId);
if (event.which === 3 && node.hasChildren) {
event.stopPropagation(); // to avoid propagation of this event to the root of the treeview
$('#treeview').data('kendoTreeView').select(this);
...//here I should prevent context menu from showing somehow
}
});
but I can't find the way to cancel context menu showing. I also tried to add open event to context menu, but I can't get selected item there.
Thanks in advance.
To show menu due to the condition use filter property of ContextMenu object:
#(Html.Kendo().ContextMenu()
.Name("menu")
.Filter(".menu-on")
)
It only shows menu for items that has class menu-on.
Secondly you have to add this class to all your folders. You should find by javascript all <span class="k-in"> elements in your tree and add menu-on class to all elements associated with folders.

Categories

Resources