I created a context menu in my chome extension as a checkbox, I am successfull to create the menu which will be visible only for editable field.
The problem is I need to display menu as checked, according to a data attribute in the textfield(focused element). With the following code, it is displaying checked in a global level(means if i checked the menu in one page/elemebt is will remains checked for other page/elements as well.)
How can I make it checked/unchecked according to the element's data attribute ?
var addinMenu = chrome.contextMenus.create({
"title": "My Addin Menu",
"contexts": ["editable"]
});
var disableOrEnable = chrome.contextMenus.create({
"type": "checkbox",
"title": "Disable",
"parentId": addinMenu,
"id": "myaddin_disable",
"checked": true,
"contexts": ["editable"],
"onclick": disableOrEnableMyAddin
});
Call chrome.contextMenus.update() when the menu properties should change, e.g.:
chrome.contextMenus.update(
disableOrEnable,
{ type: 'checkbox', checked: false });
It looks like you can catch the oncontextmenu event and make changes that are immediately reflected in the posted menu (but I see from Rob W's comment there may be a race condition with that). This works for me:
var contextMenu = chrome.contextMenus.create(
{
type: 'checkbox',
title: 'how now brown cow',
checked: false,
contexts: ['all']
});
var element = document.getElementById('hello');
element.addEventListener(
'mouseover',
function(e) {
element.setAttribute('underMouse', 'true');
});
element.addEventListener(
'mouseout',
function(e) {
element.setAttribute('underMouse', '');
});
window.oncontextmenu = function(e) {
chrome.contextMenus.update(
contextMenu,
{
type: 'checkbox',
checked: element.getAttribute('underMouse') == 'true'
});
}
If you're just interested in the currently focused textfield you could also just change your menu in focus and blur events. You may also want to check out the 'editable' option to the contexts menu property (not sure what that does but sounds like it might restrict the menu to text input elements).
Related
I am trying to display different contextMenus in my chrome extension based on whether or not text selection has been made. Any ideas on how to do this?
I want this code when no text is selected
chrome.contextMenus.create({
title: "Not selected",
contexts:["all"], // ContextType
onclick: search // A callback function
});
I want this code when text IS selected
chrome.contextMenus.create({
title: "Selected",
contexts:["all"], // ContextType
onclick: search // A callback function
});
If I have a Chrome Extension context menu with a submenu, how can I disable the parent so the submenu items are not accessible until the parent is enabled?
chrome.contextMenus.create({
id: "parentMenu",
title: "Parent Menu",
contexts: ["browser_action"],
enabled: false
});
// Create a submenu with two radio buttons
chrome.contextMenus.create({
parentId: "parentMenu",
title: "Submenu1",
contexts: ["browser_action"],
type: "radio",
checked: true,
onclick: function (evt) {}
});
chrome.contextMenus.create({
parentId: "parentMenu",
title: "Submenu2",
contexts: ["browser_action"],
type: "radio",
onclick: function (evt) {}
});
Even though the parentMenu is marked disabled, it is not disabling. When I disable the submenus, those do disable as expected.
I'm guessing it's impossible with a submenu.
A workaround solution would be to remove all submenu items, making the root menu item a normal entry, and disabling it. You lose the arrow, but achieve the disabled state.
Consider some other UI approach though; this seems somewhat clunky.
Is there a way to display a modal dialog when user selects a tab in TabStrip component? The code below displays window.confirm, can not get modal dialog to display.
onTabSelected(e : any){
if (!window.confirm("Continue with navigation?")) {
e.prevented = true;
}
}
The dialog is not a direct substitute for window.confirm, because it cannot block the UI thread. To substitute the window.confirm with the Kendo UI dialog, you can prevent all tab selection, and wait for the dialog result:
onTabSelected(e: any) {
e.prevented = true;
this.dialogService.open({
content: "Continue with navigation?",
actions: [
{ text: "No" },
{ text: "Yes", primary: true }
]
}).result.subscribe((result) => {
if (result.primary) {
// change tab through code
this.tabStrip.selectTab(e.index);
}
});
}
See this plunkr for a working demo.
Ended up canceling the tab selection event, showing modal dialog, and resubmitting event based on the user answer.
Is it possible to create a item in a tabbar-ed card layout, that has no tab?
I want to create a message overlay that stretches from screen top to the tab bar and doesn't cover the tab bar. When i do this by adding an item to the panel everything works fine except a blank icon is created on the tabbar. Is there a way to prevent this icon from being created?
you can create the new item with hidden: true config option
Ext.define('App.view.settings.SettingsContainer', {
extend: 'Ext.tab.Panel',
xtype: 'settingsContainer',
requires : [
...
],
config: {
tabBar: {
docked: 'top'
},
tab: {
title: 'Settings',
iconCls: 'user'
},
items: [{
xtype: 'settingsAccountContainer'
}
, {
xtype: 'changeCompanyView',
hidden: true
}]
}
});
changeCompanyView is created, but no tab icon is visible.
It could be activated by
settingsContainer.setActiveItem(1);
Cheers, Oleg
This should work. Add the overlay to the child item and not the tab panel.
childPanelItem.add(
Ext.create('Ext.Panel',
{
xtype:'panel',
html:'Demo',
top:0,
left:0,
right:0,
bottom:0
}
)
);
If you add to the child panel the icon will not appear on the tab bar.
Using jquery qTip2 for tooltips.
I have a tooltip with a link in it. I want the tip to stay open if the user's mouse enters the tip (not the trigger). Can't seem to figure out how to do that in the documentation....
If you want it to remain visible when you mouse over and into the tip, but still want it to dismiss on mouseout, use the fixed and delay options as described in the documentation here:
$('.selector').qtip({
content: {
text: 'I hide on mouseout, but you can mouse into me within 500ms',
},
hide: {
fixed: true,
delay: 500
}
});
The hide parameter has many options. For example, if you just want to not hide it indefinitely, simply set hide to false:
$('.selector').qtip({
content: {
text: 'I never hide',
},
hide: false
});
If you want it to hide on a different event, such as clicking anywhere outside the tip, set the event explicitly:
$('.selector').qtip({
content: {
text: 'I hide when you click anywhere else on the document',
},
hide: {
event: 'unfocus'
}
});
If you want it to hide when the trigger is clicked, specify the click event:
$('.selector').qtip({
content: {
text: 'I hide when you click the tooltip trigger',
},
hide: {
event: 'click'
}
});
See specifically the "hide" options documentation for more info.
If you want the tip to stay open and then hide it when the user clicks outside the target or leaves the target:
show: {
event: 'mouseover'
},
hide: {
event: 'click mouseleave'
}