How can you tell which element was selected with a crossrider contextMenu - javascript

The data returned by the callback for appAPI.contextMenu is currently only the following:
pageUrl
linkUrl
selectedText
srcUrl
There doesn't seem like there's a way to tell what was actualy right clicked on, only a little information about it. I could for example search all images and find the one with the matching srcUrl, but what if the same image appears multiple times?
I could try catching right click events in extension.js and try to match them with context menu events, but this seems quite round about.
What's the expected method to find the selected element (after receiving the event in the page)?
Lets say for example I want to be able to right click an image and display:none it.

Currently, the Crossrider platform does not support the feature you require and I think your workaround is reasonable. However, I have forwarded your suggestion to the Crossrider development team, who will consider it for future releases.
[Disclosure: I am a Crossrider employee]

As a workaround, this actually seems quite reliable although I haven't tested much. TBH I was expecting coherency issues:
//in extension.js (background.js just forward context menu events)
var lastRightClicked = null;
window.addEventListener("contextmenu", function(e) { //I guess a mousedown event would work here too
lastRightClicked = e.target;
}, true);
appAPI.message.addListener({channel:"contextmenu"}, function(message) {
if (message.menuitem == "Hide")
lastRightClicked.style.display = "none";
});

Related

Keybinding in Anki while reviewing

I use Anki, a software of flashcards to learn a new language.
What my card looks like :
I want to use a key on my (physical) keyboard to show/hide additional infos on my card to review my cards faster on iPad.
The problem is that the document element is not focused at first (it is the answer buttons that are), so the keyup event in JS/JQuery doesn't work. I need to touch the iPad screen first to then use my keyboard if I want it to work, which kind of defeats the whole point.
My code :
$(document).ready(function() {
$(document).on('keyup', function(e) {
var key = e.key;
if (key == "p") {
// My Code
}
});
});
I tried $(document).click(), $(document).trigger("click") and $(document).focus() without success. Other people (on Reddit) have had this problem but resolved it with add-ons for Anki − As I would like to make it work on iPad (so no add-on), this is not an option forme sadly.
Any help would be greatly appreciated.
Cheers!

How to Add Event Listeners to SVG Elements Loaded From File Dynamically?

Problem Statement
I'm trying to load an svg file dynamically, and then listen to click events on the individual svg elements. The svg loads fine, but I'm having trouble detecting /when/ it has loaded so that I can add the listeners.
Context
The svg is a map that will pop up when the user clicks on a field. They should then be able to select a country from the map. The svg needs to be loaded dynamically because the field can be parameterized with different maps.
What I've tried
It seems like the common recommendation is to listen for a "load" event on the dynamically created element and then access the actual svg elements through the element.contentDocument property or the element.getSVGDocument() function.
var element = document.createElement('embed');
element.src = this.mapSrc_;
element.type = 'image/svg+xml';
document.body.appendChild(element );
element.addEventListener('load', function() {
console.log(element.firstChild, element.contentDocument, element.getSVGDocument());
});
or:
var element = document.createElement('object');
element.setAttribute('data', this.mapSrc_);
element.setAttribute('type', 'image/svg+xml';
document.body.appendChild(element);
element.addEventListener('load', function() {
console.log(element.firstChild, element.contentDocument, element.getSVGDocument());
});
But in both cases I get a console log of:
null undefined null
What is the proper way to load an svg from a file and then add event listeners to it?
Thank you for taking the time to read this! I really appreciate any help :D
[EDIT: If you like you can view my actual code here, but be warned it is pretty thoroughly tied to the Blockly framework.]
After some trial and error it seems like this is a problem with running the page from file, specifically on Chrome and Firefox (works on Edge and IE11).
You can test this by downloading this example page. If you run it from file the icons stay orange, but the online page works.
I will continue with this by testing on Edge instead of Chrome, but other people may have different solutions for this problem.

Tampermonkey: Trigger event does not work for element

I'm trying to add some functionality using Tampermonkey on top of a providers angular application but I'm stuck at this simple thing. I can't replicate the issue using CodePen so we're going to have to go for theories and suggestions. I'll try to be as specific as I can.
Adding this interval when the page loads to check when an input with the id serialNumberInput is available. Then I'm adding a dropdown to the form, and attach an onChange event to it to update the serial input field with the value of the selected option. However, the trigger parts just never happens. It does work when I enter them manually, but not with the script.
var populateSerialNumbersTimer = setInterval(function(){
var serial = $("input#serialNumberInput");
if($(serial).length >= 1){
$(serial).css("display", "inline").css("width", "50%");
$(serial).after(deviceToSerialSelectionHTML);
$("select#deviceToSerial").on("change", function(){
$(serial).val($("select#deviceToSerial").val());
$(serial).trigger("change");
$(serial).trigger("blur");
});
clearInterval(populateSerialNumbersTimer);
}
}, 200);
I've thought about it and considering how the serial number ends up in the text field the field must be accessible. Maybe it's that the events that I'm trying to trigger has not been declared at the time of the function declaration?
Suggestions much appreciated.
It looks like jQuery tries to cache the event somehow. This is how I solved it with native javascript in case someone else is interested:
function triggerEvent(e, s){
"use strict";
var event = document.createEvent('HTMLEvents');
event.initEvent(e, true, true);
document.querySelector(s).dispatchEvent(event);
}
$("select#deviceToSerial").on("change", function(){
serialNumberInput.val($("select#deviceToSerial").val());
triggerEvent("change", "input#serialNumberInput");
triggerEvent("blur", "input#serialNumberInput");
}

Gracefully Handle Tel URL

I have a link on my website:
call me, maybe
That's great for browsers that can initiate calls but it degrades with the elegance of a hippopotamus. Something like:
<h1>The address wasn't understood</h1>
I thought of attaching on onclick listener and showing a popup with the number. However, although the listener runs, the browser still follows the url (and so shows the error) and I don't think there's a reliable way to detect whether there's a tel: protocol handler.
Is there a good solution to this?
I think something like this would work where you look to see if the device automatically wraps a telephone number.
<div id="testTel" style="display:none">+1 (111) 111-1111</div>
var isTelSupported = (function () {
var div = document.querySelector("#testTel"),
hasAnchor = document.getElementsByTagName("a").length > 0;
div.parentNode.removeChild(div);
return hasAnchor;
}());
alert(isTelSupported);

Manually trigger 'open file dialog' using plupload

I'm using plupload to client scaling of pictures before they are uploaded. I like the feature that it gracefully falls back to html4 if the user doesn't have flash, silverlight etc engines installed.
I want to be able to start the upload when the user clicks certain elements on the page and i want to handle the events (sometimes stopping a file dialog from opening). In fact i'd like to pop open the file dialog using javascript.
Ok, so HTML4 (or rather the browser, except chrome :P) won't let me do this, unless the user clicks a browse-button (or an overlay covering a browse-button), so when i get the fallback to HTML4 i'll accept that i can't do it, but most users will have flash or silverlight installed and they do not have this restriction. So my question is this:
How do i trigger the file open dialog in plupload (keeping in mind i only need the flash and silverlight engines to do this).
The former solutions not worked on iPhones with plupload 2.1.2.
The following code did the trick (jquery needed):
$("#id_of_the_second_button").click(function() {
$('div.moxie-shim input[type=file]').trigger('click');
});
Fallback runtimes will become irrelevant as times goes by. This means that sooner or later, we'll be all using HTML5 runtime. In case that you are using HTML5 runtime, but don't use pluploadQueue(), this will work as well:
// Set up and initialise uploader
var uploader = new plupload.Uploader({
'runtimes' : 'html5',
'browse_button' : 'id_of_the_first_button'
// Other options
});
uploader.init();
// Hook in the second button
plupload.addEvent(document.getElementById('id_of_the_second_button'), 'click', function(e) {
var input = document.getElementById(uploader.id + '_html5');
if (input && !input.disabled) {
input.click();
} // if
e.preventDefault();
});
If someone is searching for the HTML5 solution, here it is:
var up= $('#uploader').pluploadQueue();
if (up.features.triggerDialog) {
plupload.addEvent(document.getElementById('idOtherButton'), 'click', function(e) {
var input = document.getElementById(up.id + '_html5');
if (input && !input.disabled) { // for some reason FF (up to 8.0.1 so far) lets to click disabled input[type=file]
input.click();
}
e.preventDefault();
});
}
Ok. It doesn't seem possible to do this, so unless someone implements event handles for the silverlight and flash components i'm out of luck
I read your problem.
I found some articles that may help to figure this out. check them. It may help...!
01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e
02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript
#Per Hornshøj-Schierbeck
After uploader has been init. It take few time to render input file to select. So you need to wait like below:
this.uploader.init();
var task = new Ext.util.DelayedTask(function () {
var inputArray = $('div.moxie-shim input[type=file]');
var input = inputArray.length > 1 ? inputArray[inputArray.length - 1] :
inputArray[0];
$(input).trigger('click');
});
task.delay(100);
The code in javascript is similar. Worked for me with plupload 2.3.6
Hop this help!

Categories