We Keep Coding

Keypress Gestures using Tampermonkey for Chrome

I'm working on a tampermonkey userscript to replace a feature that existed with FireGestures back in Pre-Quantum Firefox. The ability to open all hovered links into new background tabs. So having a combination keypress, which in FG was Ctrl + Right Click and drawing a gesture trail though every link you wanted open. Everything I have so far has been written for me by somebody else so I'm not trying to take credit and I in am way over my head. I don't have the know-how to edit and fix what is needed. This is what I have so far.
(function(delay, t, lnk, clicked) {
//config: delay before click. mouse movement will reset the delay timer.
delay = 1000; //in milliseconds. 1sec = 1000ms
t = 0;
function mousemove() {
clearTimeout(t);
if (lnk) t = setTimeout(clickLink, delay);
}
function clickLink() {
removeEventListener("mousemove", mousemove);
clearTimeout(t);
if (lnk) {
lnk.target = "_blank";
lnk.click();
lnk.target = "";
clicked = true;
}
}
addEventListener("mouseover", function(ev, el, el2) {
el = ev.target;
removeEventListener("mousemove", mousemove);
clearTimeout(t);
while (el) {
if (el.tagName === "A") {
el2 = el;
if (el !== lnk) {
lnk = el;
clicked = false;
addEventListener("mousemove", mousemove);
clearTimeout(t);
t = setTimeout(clickLink, delay);
}
return;
}
el = el.parentNode;
}
if (!el2) {
lnk = null;
clicked = false;
removeEventListener("mousemove", mousemove);
clearTimeout(t);
}
});
})();
There is a couple issues I face.
1. This doesn't require any sort of button combination. It is continually active and will click any link that is hovered over for the specified length of time. I would prefer it to only function when a button combination is pressed, ideally Ctrl + Rightclick. I found a thread dealing with combination keypresses but wouldn't know how to edit it and insert it into the existing script to fit my needs.
document.addEventListener ("keydown", function (zEvent) {
if (zEvent.ctrlKey && zEvent.altKey && zEvent.code === "KeyE") {
// DO YOUR STUFF HERE
}
} );
2. The pop-up blocker in chrome actually prevents these tabs from opening. I don't know if there is any way of remedying this other than turning off the pop-up blocker, but if there was I'd appreciate the help
3. This script opens up tabs in the foreground rather than the background. So opening up a bunch of links on a page wouldn't be possible because it would navigate to the new tab as soon as the first link is clicked. My original idea for fixing this was to just have the script just do a middle-click mouse event over every link it passed over, but I don't even know if that is something that is possible or practical.
I know I am asking a lot but I was just hoping that someone out there that knows what they are doing could help me out by either editing what I already have or writing something out themselves. I appreciate any help provided.

here's my spin on it. This is toggled rather than going on while you are holding onto the keys.
you could had the following to your TamperMonkey script, and when you press "Ctrl + Alt + S", the links on the page are modified and appended a onmouseover event. when you hit the key combination again, the event gets removed from the link. Short and simple.
document.addEventListener('keydown', function (zEvent) {
if (zEvent.ctrlKey && zEvent.altKey && zEvent.code === 'KeyS') {
var links = document.getElementsByTagName('a');
console.log(links.length);//how many links have been grabbed
for (var i = 0; i < links.length; i++) {
if (links[i].onmouseover !== null && links[i].onmouseover.toString().indexOf('function openit') > -1)
{
//toggling the funcitonality off
//remove it
links[i].setAttribute('target', '');
links[i].setAttribute('onmouseover', '');
}
else
{
//toggling the funcitonality on
//add it
links[i].setAttribute('target', 'blank');
links[i].setAttribute('onmouseover', 'function openit(elem){console.log(\'userScript will click on the link\');elem.click();};openit(this);');
}
}
}
}
);
As for popup blocking... I don't know.

js mousedown with touch

is there a way to detect whether a 'mousedown' is a touch right click (hold the finger about 1 sec in place) or just a normal right click?
I think chrome can do this with "ev.originalEvent.sourceCapabilities.firesTouchEvents". But only chrome.
$('#container').mousedown(function(ev) {
if (ev.button === 2 && ev.comesFromTouch) return false
//...
}
edit:
current situation: after about one second after I pressed down my left mouse button, the browser automaticly triggers a 'mousedown' event with button = 2 (tested in the 'device toolbar' mode in chrome). I want to cancel this.
SOLUTION
If a right mousedown appears between a touchstart and touchend it is a right click on a touch screen.
it works something like this.
function onPcRight() { console.log(1);}
function onTouchRight() { console.log(2);}
$('#container').mousedown(function(ev) {
if (ev.button === BUTTON_RIGHT) {
if ($(this).prop('touchdown')) onTouchRight();
else onPcRight();
}
})
.on('touchstart', function() {
$(this).prop('touchdown', true);
})
.on('touchend', function() {
$(this).prop('touchdown', false);
});

I think you can use setTimeout/clearTimeout to count 1s. The pseudo code:
var global_timer = null;
$('#container').mousedown(function(ev) {
if (ev.button === 2) {
global_timer = setTimeout(fireTouchRightClick, 1000);
}
});
$('#container').mousemove(function(ev) {
cancelTouchRightClick();
});
$('#container').mouseleave(function(ev) {
cancelTouchRightClick();
});
$('#container').mouseup(function(ev) {
if (cancelTouchRightClick() && ev.button === 2) {
fireNormalRightClick();
}
});
function cancelTouchRightClick () {
if (global_timer) {
clearTimeout(global_timer);
global_timer = null;
return true;
}
return false;
}
function fireTouchRightClick () {
global_timer = null;
// TODO touch right click
}
I also found a repo to do mouse holding on Github: https://github.com/dna2github/dna2petal/tree/master/visualization
https://github.com/dna2github/dna2petal/blob/master/samples/visualization.html
Maybe you need to pass button type to the mousehold event callback

Using shift key and click to go to the next slide

Hei guys, i added these lines of code as javascript on succes of a click box in captivate :
document.onkeydown = function (e) {
if (e.keyCode == 16) {
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', 5);
}
};
It does good what it does but after first atempt even if im on another slide and i press shift key it goes to slide 5 :( Another question is, how to set an mousedown and onkeyup event on same button. What i try to achieve is to jump to next slide if i press shift key and i click on a click box.
EDIT: new code:
document.onmousedown = function (e) {
var currentSlide = document.Captivate.cpEIGetValue('m_VarHandle.cpInfoCurrentSlide');
if(currentSlide == 5 && e.keyCode == 16){
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide' , 5);
}
};
As i think it, should fire the function when i click on it, BUUUT , unfortunately it doesnt work... seems like Captivate doesnt recognize onmousedown event :|
RE-EDIT : i figurate out how to make it work. Here's the code :
document.onkeydown = function(e) {
var currentFrame = document.Captivate.cpEIGetValue('m_VarHandle.rdinfoCurrentFrame');
var currentSlide = document.Captivate.cpEIGetValue('m_VarHandle.cpInfoCurrentSlide');
if(currentSlide == 5 && e.keyCode == 16){
document.Captivate.cpEISetValue('m_VarHandle.rdcmndGotoFrameAndResume' , 491);
}
};
document.onkeyup = function(e) {
var currentSlide = document.Captivate.cpEIGetValue('m_VarHandle.cpInfoCurrentSlide');
if(currentSlide == 5){
document.Captivate.cpEISetValue('m_VarHandle.rdcmndGotoFrameAndResume' , 485);
}
};
Now everything's just PERFECT! its exactly what i wanted to do... but it works only on localhost... only when i press F12 in Captivate :( if i try to run exported swf or html from captivate it crush :((( Any ideea ?

var slide = 4;
document.onkeydown = function (e) {
if (e.keyCode == 16) {
slide++;
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', slide);
}
};
Bassically you want to increment the position (second argument of cpEISetValue), in your code, you always set it to 5. Also make sure to reset it when it reaches the max slider position.

You can check the SHIFT key inside the click:
var slide = 4;
$('body').click( function (e) {
if (e.shiftKey) {
slide++;
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', slide);
}
});
check here

If you want to set a click with a shift key you can use this:
$(document).click(
function(e){
if(e.shiftKey){
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', 5);
}
}
);
the same works with ctrlKey, and altKey
And to change the page fine you need a control variable like this:
var current_page = 1;
$(document).click(
function(e){
if(e.shiftKey){
current_page++
document.Captivate.cpEISetValue('m_VarHandle.cpCmndGotoSlide', current_page);
}
}
);
I think this is the final code that you need (you maybe need to change document to an id or class that you are using like "#element_id" or ".element_class")

Jquery keydown event only working every second press?

Essentially I've created a thumbnail gallery which you can scroll through using the left and right arrows. The right arrow event works perfectly fine, so I assumed that the left arrow event would be the same except with a (-) value. However when I press the left key it only goes to the previous thumbnail every SECOND time.
Can somebody take a look at my code and let me know what I'm missing? Thanks!
$(document).bind("keydown", function(event) {
if (event.keyCode == 39)
{
$("#thumbnail img").each(function(i) {
if ($(this).hasClass("currentThumb"))
{
currentSelectionIndex = i;
$("#thumbnail img").removeClass("currentThumb").addClass("thumb");
if (currentSelectionIndex == 14 && parseInt($('#end').text()) < parseInt($('#total').text()))
{
nextImages(currentCategory.value);
}
}
if(i == currentSelectionIndex + 1)
{
$(this).removeClass("thumb").addClass("currentThumb");
$(this).parent().click();
}
});
}
if (event.keyCode == 37)
{
$("#thumbnail img").each(function(i) {
if ($(this).hasClass("currentThumb"))
{
currentSelectionIndex = i;
$("#thumbnail img").removeClass("currentThumb");
$("#thumbnail img").addClass("thumb");
if (currentSelectionIndex == 0 && parseInt($('#start').text()) > 1)
{
prevImages(currentCategory.value);
}
}
if(i == currentSelectionIndex - 1)
{
$(this).removeClass("thumb").addClass("currentThumb");
$(this).parent().click();
}
});
}
});

Reversing your selection should be enough to make it go in reverse.
$.fn.reverse = [].reverse; // at the top of your code
// in the event handler for left arrow
$("#thumbnail img").reverse().each(function(i) {
don't forget to change back to +

It may works using keyup instead of keydown. I had some issues with it. If it doesn't work use http://jsfiddle.net so that we can easier solve it.

Check if the spacebar is being pressed and the mouse is moving at the same time with jQuery?

Is there a way to check if the space bar and at the same time track what direction the mouse is moving and how far etc.
Point of this is that I want to replicate how Photoshop scrolls when you hold the space bar, left mouse button and you move the mouse, but without having to hold down the left mouse button.

You can use keydown() and keyup() to track if the space bar is pressed or not and look at that state in your mousemove() event handler. For example:
var space = false;
$(function() {
$(document).keyup(function(evt) {
if (evt.keyCode == 32) {
space = false;
}
}).keydown(function(evt) {
if (evt.keyCode == 32) {
space = true;
console.log('space')
}
});
});
And then your mousemove() handler can see if it's pressed or not.

you will probably have to be watching for the keydown event, check to see that it's the spacebar, set a variable saying it's down, unset it when the keyup event is seen.
so, then you would look for mouse movements when that variable was set indicating the spacebar was pressed.

This is my solution:
var allowed = true;
$(document).ready(
function () {
$(document).bind('keydown', 'space', function () {
if (!allowed) return;
allowed = false;
$('#viewport').
dragscrollable();
});
$(document).bind('keyup', 'space', function () {
allowed = true;
$('#base').off('mousedown');
return false;
});
});
Works with jQuery and the Dragscrollable Plugin.