Firefox extension: get click data when context menu - javascript

In my extension I want to hide/show items on the context menu based on the url I get:
from a link if the user opens the context menu over one,
from the text selected, also if the user opens the context menu over the text.
In the function to show/hide items in the context menu I do the following check:
if (gContextMenu.onLink) {
url = gContextMenu.target.href;
}
if (gContextMenu.isTextSelected) {
url = content.window.getSelection();
}
If some text is selected in the page, and the user opens the context menu over a link, both conditions are true. Also, if some text is selected, and the user opens the context menu anywhere in the page (over the selection or not), the isTextSelected flag is also true.
Is there a way I can detect what is the real element over which the user has used the right click? How can I know if the right click was over the selected text or not?

First of all, there is gContextMenu.target, which contains the Node which was under the cursor, if any (aka. it might be null in very rare cases).
The gContextMenu code actually uses gContextMenu.target to initialize things like .onLink
As for checking if the the focused node is actually contained within the current selection, you can use .getSelection().containsNode() on the focused document.
var isFocusedNodeInCurrentSelection = false;
var selection = gContextMenu.focusedWindow &&
gContextMenu.focusedWindow.getSelection();
if (selection) {
isFocusedNodeInCurrentSelection =
selection.containsNode(gContextMenu.target, true);
}
// Do something with that information.

Related

tympanus multi-level-menu - how to remember opened panel on page reload

I've started using this plugin for multilevel side menu:
https://tympanus.net/codrops/2015/11/17/multi-level-menu/
When i grabbed example code from this page i saw that plugin don't it my needs.
I mean, when i will reload page, everytime main panel is opened, and i'm looking for any solution, to keep track about last opened panel.
I can use localstorge or cookies, but i don't see any way how to select opened, store this info and then call function to open this saved panel.
I don't provide example code, as i'm using this code from link.
Thank you for any ideas !
In the tympanus code when you select an item in the menu, the current class is added to the selected item (for menuItem and menuLevel). It means that you can get the current selected menuItem and menuLevel by matching this class and then save it in a cookie.
function getCurrentMenuItemSelected() {
var currentMenuItem = $(".menu__item .menu__link--current");
console.log(currentMenuItem.html());
}
function getCurrentMenuLeveItemSelected() {
var currentMenuLevel = $(".menu__level.menu__level--current");
console.log(currentMenuLevel.data("menu"));
}
getCurrentMenuItemSelected();
getCurrentMenuLeveItemSelected();

Is there an event or another way to call a Javascript function when a Django Admin Popup (the green plus icon) completes?

Let's imagine we have those Django models:
class Band(models.Model):
name = models.CharField(max_length=256, default="Eagles of Death Metal")
class Song(models.Model):
band = models.ForeignKey(Band)
When using the admin to manage those models, the band field is associated to a Widget rendered by Django as a select html element.
Django's admin also adds a green plus icon next to the select, clicking it opens a pop-up window where the user is presented with the Form to add a new band. When clicking the save button in this pop-up window, the new band name is saved in the DB, and automatically assigned to the select value.
We rely on some javascript to be run each time a select value changes. It is currently listening to the change event of said element, which works fine when the user clicks a value directly in the menu proposed by the select.
Sadly, when this select is populated through the Admin Popup functionality, it seems the change event is not fired for the select, as our callback is not executed, even though the element's value is actually changed.
Is there another event we can listen to to get the same behaviour than when the user clicks a value directly from the list ?
Here is a Javascript snippet with the hackery we use to trigger a change event when the Django admin's add/change popup window is dismissed.
We use this with Django 1.7, so it works for this version at least.
Monkey-patching the Django admin's JS methods to achieve this isn't a very elegant way to do the job, but it was the least intrusive option we found. If anyone knows of a better way, let us all know.
/*
* Trigger change events when Django admin's popup window is dismissed
*/
(function($) {
$(document).ready(function() {
// HACK to override `dismissRelatedLookupPopup()` and
// `dismissAddAnotherPopup()` in Django's RelatedObjectLookups.js to
// trigger change event when an ID is selected or added via popup.
function triggerChangeOnField(win, chosenId) {
var name = windowname_to_id(win.name);
var elem = document.getElementById(name);
$(elem).change();
}
window.ORIGINAL_dismissRelatedLookupPopup = window.dismissRelatedLookupPopup
window.dismissRelatedLookupPopup = function(win, chosenId) {
ORIGINAL_dismissRelatedLookupPopup(win, chosenId);
triggerChangeOnField(win, chosenId);
}
window.ORIGINAL_dismissAddAnotherPopup = window.dismissAddAnotherPopup
window.dismissAddAnotherPopup = function(win, chosenId) {
ORIGINAL_dismissAddAnotherPopup(win, chosenId);
triggerChangeOnField(win, chosenId);
}
});
})(jQuery);

How to insert text when the user clicks a button on my extension?

I'm writing an extension that shows two items on a popup ("Hello" and "Goodbye").
What I want to do is, when the user click one of these items, insert the respective text.
For example: I'm on gedit and I want to insert "Hello". So I open the extension and then I click "Hello" and it appears on gedit.
Here's the current code:
this._menucontent = null;
this._mymenu = new PopupMenu.PopupMenuItem(this._menucontent, { reactive: true });
item = new PopupMenu.PopupMenuItem(_("Hello"));
this.menu.addMenuItem(item);
item = new PopupMenu.PopupMenuItem(_("Goodbye"));
this.menu.addMenuItem(item);
Could anybody help me?
First you would need to connect to an emit signal of your clickable menuitems, in this case the 'activate' signal:
item.connect('activate', _FunctionToCall);
Then in the Function you need to call some kind of 'paste' action to insert your text. The Gnome3 Extension 'Drop Down Terminal' has a function that pastes text from the clipboard so maybe a look at it's code will give you a hint:
github/dropdownterminal terminal.js
It is using gi.Gtk to interact with the Terminal Window.

Off-canvas panel closes when removing element

I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)
The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.

How to use JavaScript variable from popup window in code behind?

I have ASP.NET web application that contains master page. Master page contains content page. Content page contains user control. User control contains Telerik grid with its context menu.
I'd like to click the item in grid's context menu and open new popup modal window. In that window there's drop down list. I pick up some option from drop down list and click OK. I'd like to get the value selected from drop down list and use it in my ASP.NET code to proceed further.
I've tried to use hidden field to store the value from drop down list but it doesn't work because I'm not sure where hidden field should be placed.
This is my code:
Open popup window:
function ClientItemClicked(sender, eventArgs)
{
if (eventArgs.get_item().get_value() == "excel")
{
var retVal = window.showModalDialog("ExportToExcelChoice.aspx", null, "dialogWidth: 400; dialogHeight: 200; center: yes; resizable: no;");
}
}
Click "OK" to close popup window:
function ReturnValue() {
var choice = document.getElementById("DropDownList1").value;
if ((window.opener != null) && (!window.opener.closed)) {
window.opener.document.getElementById("HiddenField1").value = choice;
}
window.close();
}
It fails on this line:
window.opener.document.getElementById("HiddenField1").value = choice;
Because hidden field is placed in user control and the code can't get the reference to hidden field.
Could someone help me to make it work?
If you're using window.open(), you can see into the parent window via the property window.opener, which will let you communicate between your parent page and the popup.
If you're using window.showModalDialog(), see the second answer to this question: window.opener alternatives
Try this
window.opener.document.getElementById('<%= HiddenField1.ClientID %>').value = choice;

Categories

Resources