I'm trying to develop a simple Firefox extension. I want the user to right click and the extension to save what element was clicked on (paragraph, image, etc.) in a variable. Then there will be a context menu item "Item A". When the user clicks on "Item A", it will call a function which will take into consideration which element the user has right clicked on.
This is the only code I have so far for the Menu Item:
var contextMenu = require("sdk/context-menu");
var menuItem = contextMenu.Item({
label: "Menu Item A",
contentScript: 'self.on("click", function () {'
+ 'Do something'
+ '});'
});
Thank you!
var contextMenu = require("sdk/context-menu");
var menuItem = contextMenu.Item({
label: "Menu Item A",
contentScript: 'self.on("click", function (node) {console.log("node is = ",node);});'
});
you were basically there, see the node argument in function, it console.logs it on click, so go to browser console and check the message there for details on what node is
Related
I have created a simple plugin to move some of the formatting buttons to a dropdown button. The dropdown button has both an icon and a label. The plugin works as intended except that when clicked on the label shows both the intended text as well as adding "(selected)" to the end.
Here is the button default view (the formatting button):
And here is how it looks when clicked on:
Here is the code for the plugin:
CKEDITOR.plugins.add( 'sf_formatting', {
init: function( editor ) {
var format = {};
editor.addMenuGroup( 'format_group' );
format.indent = {
label: 'Increase Indent',
group: 'format_group',
command: 'indent',
order: 6
};
format.outdent = {
label: 'Decrease Indent',
group: 'format_group',
command: 'outdent',
order: 7
};
editor.addMenuItems( format );
editor.ui.add( 'Formatting', CKEDITOR.UI_MENUBUTTON, {
label: 'Formatting',
// Disable in source mode.
modes: {
wysiwyg: 1
},
icon: 'dropdown',
onMenu: function() {
var active = {};
// Make all items active.
for ( var p in format )
active[ p ] = CKEDITOR.TRISTATE_OFF;
return active;
}
} );
}
});
I have a second issue
The outdent (decrease indent) only appears when the text has been indented. In the main menu it is always there but greyed out. How can I force the outdent button to always be visible in the dropdown box but not accessible.
Here is a screenshot of the dropdown when the text has been indented:
I'd be really grateful for any help.
I managed to create a hack to make this work as no one seems to know the answer.
In the language file, the relevant entry is "%s (Selected)". %s is replaced by the menu title in the plugin code.
I just removed the "(Selected") and now it works fine FOR MY USE.
It may break other things I am unaware of, but it works for me
Hey UI5 is a framework which has many possibilities but sometimes I crush with ideas (which would be probably easier in normal HTML) against the walls.
That's what I want: A List with ListItems displaying Cities for example Berlin, Los Angeles, Moskau etc. On this listen you then can click on an icon (preferred but can be a button too). If clicked Icon displays then another ListItem so it displays an address. If you then lick that ListItem you get a map -the map part is working and it would work with the list if it would have one StandardListItem. The problem? It's bad for displaying things like I want!
Example:
Berlin -> click -> show -> 123456 Example Street
Moskau
Los Angeles
or:
Berlin
Moskau
Los Angeles -> click -> show -> 654321 Example Adress
code I have :
NOTE: I deleted some of the code so you get only the necessary part of it
view:
<List id="campusList"
items="{
path: '/',
sorter: {
path: 'city',
descending: false
}
}"
mode="SingleSelectMaster"
itemPress="handleListItemPress"
growing="true">
<InputListItem label="{city}" >
<core:Icon src="sap-icon://navigation-down-arrow" press="showDetails" />
<StandardListItem type="Navigation" title="{buildingName}" description="{buildingDesc}" />
</InputListItem>
</List>
controller:
jQuery.sap.require("www.adress.com.GeneralHelper");
sap.ui.controller("www.adress.com.LocationList", {
onInit: function() {
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("content", "updateSuccess", this.updateSuccess, this);
sap.ui.getCore().getEventBus().publish("content", "update", {
id : "Location"
});
},
updateSuccess: function (channelID , eventID, data) {
if (data.id === "Location") {
var oModel = sap.ui.getCore().getModel("LocationModel");
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
this.getView().setModel(oModel);
if (!jQuery.device.is.phone) {
//preselect entry
var self = this;
var oList = this.byId("campusList");
oList.attachUpdateFinished(function(evt) {
if (oList.getItems().length > 0) {
var oContext = new sap.ui.model.Context(self.getView().getModel(), "/0");
oList.setSelectedItem(oList.getItems()[0], true);
sap.ui.getCore().getEventBus().publish("nav", "to", {
id: "LocationDetail",
data : oContext
});
}
});
}
}
},
handleListItemPress : function (evt) {
sap.ui.getCore().getEventBus().publish("nav", "to", {
id : "LocationDetail",
data : evt.getParameters().listItem.getBindingContext()
});
}
});
and I also have a local-demo-data-json wich is loaded from a UpdateHelper.
PS:I would like to not use $().hide, $().show and other jquery things i would prefer UI5.
If you want to show or hide a list item you can use
myListItem.setVisible(true) //or
myListItem.setVisible(false)
but what you can also do is use a custom list item, put all the extra information into a new sap.m.Panel(), and add that Panel into your custom list item on click (and destroy it/set it to invisible to hide the extra information).
What i am trying to do is dynamically add container to panel on click of button.
1st instance of container gets added and can be seen in the panel.items.length
2nd instance onwards the panel.items.length doesn't change. but the panel can be seen in dom and on screen.
Just wanted to know why the panel.items.length is not increasing. Is it a bug?
Fiddler link https://fiddle.sencha.com/#fiddle/p3u
Check for the line :
console.log(qitems);
below debugger; it is set to questionsblock.items.length that i am talking about.
Remove the itemId from QuestionTemplate and remove renderTo from the new instance.
Your click handler should look like this:
listeners: {
'click': function(button) {
var questionPanel = button.up('form').down('#questionsblock'),
qitems = questionPanel.items.length,
questiontemplate = Ext.create('QuestionTemplate', {
qid: qitems,
questiontype: 'text'
});
console.log(qitems);
questionPanel.add(questiontemplate);
questionPanel.doLayout();
}
}
Check this fiddle: https://fiddle.sencha.com/#fiddle/p47
We develop extensions for Chrome, Firefox and Safari. We want to add context menus to our extensions that will show when right clicking on any form element which is editable. I tried to add an editable context menu to Chrome:
chrome.contextMenus.create({
"title": "Test editable menu item",
"contexts": ["editable"],
"onclick": function(info, tab) {
console.log("item " + info.menuItemId + " was clicked");
console.log("info: " + JSON.stringify(info));
console.log("tab: " + JSON.stringify(tab));
}
});
But I need to know which element the user clicked on, and info and tab don't contain the element. How do I know which element the user clicked? I would like to have a jQuery object containing the element.
The info object contains the following attributes:
"editable": true
"menuItemId"
"pageUrl"
One of the best workarounds I know of is to follow the advice given in this thread to use content scripts to inject a listener in the target page for the 'contextmenu' event.
I know that is to late for you but I answer here for anyone else who's google it.
My solution was to create a mapping between created menu items and the business model (in this case a "data" array):
var itemsDic = {};
function onClickHandler(info) {
alert(itemsDic[info.menuItemId]);
};
for(i in data) {
var currentItem = chrome.contextMenus.create({
parentId: item,
title: data[i].ItemName,
type: data[i].ItemType,
contexts: ["editable"],
onclick : onClickHandler
});
itemsDic[currentItem] = data[i];
}
In short, how can I show a drop down menu floating over a table and not rendered inside the table cell?
I am using this example code to show a drop down menu inside a table cell:
window.someObj.showSocs = function(index){
var pSubMenu = new DropDownMenu({});
pSubMenu.addChild(new MenuItem({
label: "Cut",
iconClass: "dijitEditorIcon dijitEditorIconCut"
}));
pSubMenu.addChild(new MenuItem({
label: "Copy",
iconClass: "dijitEditorIcon dijitEditorIconCopy"
}));
pSubMenu.addChild(new MenuItem({
label: "Paste",
iconClass: "dijitEditorIcon dijitEditorIconPaste"
}));
pSubMenu.placeAt("socs-" + index.toString());
pSubMenu.startup();
}
where DropDownMenu is "dijit/DropDownMenu" and MenuItem is "dijit/MenuItem".
Then I am using this code to add a link to a table cell (it's executed inside a dgrid renderCell function but I believe it is not relevant for this problem):
var link = document.createElement("a");
var linkText = "javascript:someObj.showSocs(" + index + ")";
link.setAttribute("href", linkText);
link.innerHTML = "DropNew";
td.appendChild(link);
td.setAttribute("id", "socs-" + index.toString());
Now when I click the link the dropdown is being rendered but inside the table cell, not over it. This causes the current table row to expand. I guess it's down to some CSS properties that I can't figure out. I am not overriding any CSS properties so I would expect the dropdown to be placed over the table instead of inside a cell automatically?
You place menu's DOM node into the cell, so it stretches the cell. You can place the menu into <body> and position it absolutely with the help of dijit/place around the required node.
I would use built-in functionality for context menus, e.g.:
// var Menu = require("dijit/Menu");
var menu = new Menu({
leftClickToOpen: true,
targetNodeIds: ["table1"],
selector: "a.dropNew"
});
See it in action: http://jsfiddle.net/phusick/TBWXL/