How to detect a double-click-drag in Javascript/jQuery - javascript

I'd like to detect in a web page when the user selects some text by dragging. However, there's one scenario in Windows which I'm calling a "double-click-drag" (sorry if there's already a better name I don't know) and I can't figure out how to detect it. It goes like this:
press mouse button
quickly release mouse button
quickly press mouse button again
drag with the button held down
This causes the dragging to select whole Words. It's quite a useful technique from the user perspective.
What I'm trying to do is tell the difference between a double-click-drag and a click followed by a separate drag. So when I get to step 2 I will get a click event but I don't want to treat it as a click yet; I want to see if they're about to immediately do step 3.
Presumably Windows detects this on the basis of the timing and how much the mouse has moved between step 2 and 3, but I don't know the parameters it uses so I can't replicate the windows logic. note that even if the mouse doesn't move at all between step 2 and 3, I still get a mousemove event.
I realise that I should be designing interfaces that are touch-friendly and device-neutral, and I have every intention of supporting other devices, but this is an enterprise application aimed at users on windows PCs so I want to optimize this case if I can.

We've done something similar. Our final solution was to create a click handler that suppressed the default response, and then set a global variable to the current date/time. We then set another function to fire in some 200ms or so that would handle the "click" event. That was our base function.
We then modified it to look at the global variable to determine when the last click occured. If it's been less than 200ms (modify based on your needs) we set a flag that would cause the click handler to fizzle and called a double click handler.
You could extend that approach by having your click and double click handlers manually fire the drag functionality.
I don't have access to the aforementioned code right now, but here is an example of that framework being used to track keyboard clicks to determine if a scanner or user has finished typing in a field:
var lastKeyPress = loadTime.getTime();
// This function fires on each keypress while the cursor is in the field. It checks the field value for preceding and trailing asterisks, which
// denote use of a scanner. If these are found it cleans the input and clicks the add button. This function also watches for rapid entry of keyup events, which
// also would denote a scanner, possibly one that does not use asterisks as control characters.
function checkForScanKeypress() {
var iVal = document.getElementById('field_id').value;
var currentTime = new Date()
var temp = currentTime.getTime();
if (temp - lastKeyPress < 80) {
scanCountCheck = scanCountCheck + 1;
} else {
scanCountCheck = 0;
}
lastKeyPress = currentTime.getTime();
}
// The script above tracks how many successive times two keyup events have occurred within 80 milliseconds of one another. The count is reset
// if any keypress occurs more than 80 milliseconds after the last (preventing false positives from manual entry). The script below runs
// every 200 milliseconds and looks to see if more than 3 keystrokes have occurred in such rapid succession. If so, it is assumed that a scanner
// was used for this entry. It then waits until at least 200 milliseconds after the last event and then triggers the next function.
// The 200ms buffer after the last keyup event insures the function is not called before the scanner completes part number entry.
function checkForScan() {
var currentTime = new Date();
var temp = currentTime.getTime();
if (temp - lastKeyPress > 200 && scanCountCheck > 3) {
FiredWhenUserStopsTyping();
scanCountCheck = 0;
}
setTimeout(checkForScan, 200);
}
Here is some code that I just wrote up based upon the above ideas. It's not tested and doesn't contain the actual drag events, but should give you a good starting point:
var lastClick = loadTime.getTime();
function fireOnClickEvent(event) {
event.preventDefault;
var currentTime = new Date()
var temp = currentTime.getTime();
if (temp - lastClick < 80) {
clearTimeout(tf);
doubleClickHandler();
} else {
tf = setTimeout(singleClickHandler, 100);
}
lastClick = currentTime.getTime();
}
function singleClickHandler() {
// Begin normal drag function
}
function doubleClickHandler() {
// Begin alternate drag function
}

A single double-click-drag action involves the following events in sequence:
mousedown -> mouseup -> click -> mousedown -> mousemove
With that in mind, I came up with this simple solution:
let maybeDoubleClickDragging = false;
let maybeDoubleClickDraggingTimeout;
const element = document.querySelector('#container');
element.addEventListener("click", function (e) {
maybeDoubleClickDragging = true;
element.removeEventListener("mousemove", handleMousemove);
});
element.addEventListener("mousedown", (e) => {
element.addEventListener("mousemove", handleMousemove);
if (maybeDoubleClickDragging) {
clearTimeout(maybeDoubleClickDraggingTimeout);
return;
}
});
element.addEventListener("mouseup", (event) => {
maybeDoubleClickDraggingTimeout = setTimeout(() => {
maybeDoubleClickDragging = false;
}, 200);
});
function handleMousemove(e) {
if(maybeDoubleClickDragging) {
element.textContent = 'you are double-click-dragging'
}
}
#container {
width: 300px;
height: 300px;
background: yellow;
}
<div id="container"></div>

Related

click event - how to make click event revert back to original gradually

So I have worked hard to get this code correct thus far. Basically my click event makes my shapes DECAY gradually start being affected. It works perfectly as I wanted. But my question is when I let go of holding down my mouse or finger it automatically jumps back to the original frame. Can I please get some help on how to make it gradually go back (or gradually end) like how it starts? that way its a fluid animation from start to finish.
Here's my Click event code
decaybackup = config.shader.decay;
world.resize()
});
let interval='';
let myshape = document.getElementById('shapeId');
myshape.addEventListener('pointerdown', function(event) {
interval = setInterval(()=>{
config.shader.decay += .001;
},1)
});
myshape.addEventListener('pointerup', function(event) {
config.shader.decay = decaybackup;
clearInterval(interval)
interval = '';
});
also here is a read only link to my site if you need a visual of what im talking about and can also see any code I have added...
enter link description here
THANK YOU!!!
Use setInterval() to decrement decay back to decaybackup similar to the way you increment it during pointerdown.
let undecayInterval;
myshape.addEventListener('pointerup', function(event) {
config.shader.decay = decaybackup;
clearInterval(interval);
clearInterval(undecayInterval);
undecayInterval = setInterval(() => {
config.shader.decay -= 0.001;
if (config.share.decay <= decaybackup) {
clearInterval(undecayInterval);
}, 1);
}
});

HTML Canvas: Controlling keydown registry when key is held down

I'm looking for a way to control how many keydown events are registered in a given period of time when a key is held down. I have two animation functions, collapse() and expand() which collapse and expand a box when the down key is pressed. I've got it rigged so that the second animation is kicked off after the first. However, I have a timer, hovering(t) set within the first animation that is reset with every keypress so that the second animation doesn't begin until the key is released and the timer expires.
function collapse(){
if(h > 1 && arrayCount < myArray.length){
reqAnimFrame(collapse);
h -= 10;
clear();
draw();
} else {
arrayCount += 1;
h = 0;
clearHoverTimer();
hovering(250);
}
}
function expand(){
if(h < 100){
reqAnimFrame(expand);
h += 10;
clear();
draw();
} else {
h = 100;
clear();
draw();
}
}
Here's where my problem is: the first animation function also cycles through an array of strings via the arrayCount variable. When collapse() fires, the arrayCount increments by one. Unfortunately, when the key is held down, it fires off the collapse function in quick succession and the array is cycled through way too quickly.
Is it possible to restrict the key event timing so that say half the keys are registered?
I tried setting a variable heldDown to false, which would allow the keyEvent to register. The keyEvent would call collapse and start heldDownTimer. Once heldDownTimer expires, heldDown would be reset to false and the cycle would start over.
Set flags indicating the current state of your collapsing & expanding animation.
var doCollapsing indicates if the collapsing code should animate.
var doExpanding indicates if the expanding code should animate.
In your keydown handler, you can ignore 'extra' keydown by only setting the flags when they indicate the animation loop is idle.
// listen for keydown and doCollapsing only if the animation is currently idle
if(!doCollapsing && !doExpanding){
doCollapsing=true; // start collapsing
doExpanding=false; // don't expand until a keyup fires
}
This will cause collapse+expand to execute once instead of being triggered with every keydown.
// variables indicating the state of the animation
var doCollapsing=false;
var doExpanding=false;
// listen for keydown events
document.addEventListener("keydown",handleKeydown,false);
// listen for keyup events
document.addEventListener("keyup",handleKeyup,false);
// start the animation loop
requestAnimationFrame(animate);
// handle keydown events
function handleKeydown(e){
// listen for keydown
// doCollapsing only if the animation is idle
if(!doCollapsing && !doExpanding){
doCollapsing=true;
doExpanding=false;
}
}
// handle keyup events
function handleKeyup(e){
doExpanding=true;
}
// the animation loop
function animate(time){
requestAnimationFrame(animate);
if(doCollapsing){
// Do collapsing until done
// When done: doCollapsing=false;
}else if(doExpanding && hoveringTimerHasExpired){
// Do expanding until done
// When done: doExpanding=false;
}
}

Detect whether the intent of a user is to tap or to scroll up/down the page on tactile device

If a user taps (touchstart) outside a popup-div, I want to hide the popup.
But if the user's intent is to scroll/swipe (touchmove), I don't want to hide the popup.
How could the code look like to detect and respond to those two actions (with or without jQuery)?
Here is a basic example of how you could do this:
http://jsfiddle.net/4CrES/2/
The logic behind it involves detecting the initial touch time and saving it to a var
touchTime = new Date();
In the touchend handler subtract this time from the current time to get the difference:
var diff = new Date() - touchTime;
Use an if statement to decide whether the touch duration was short enough to consider it a tap, or long enough to consider it a drag.
if (diff < 100){
//It's a tap
}
else {
//Not a quick tap
}
You could write a more robust implementation by doing a similar difference of the initial touch y position to the final touch y position in the handlers. Another option is to compare the scrollTop of the scrolling area to see if it has been scrolled.
Since click events do not bubble up the DOM on mobile Safari while touch events and custom events do, I recently wrote some code to detect a quick-tap.
It's a quick-tap when
The touch event starts and ends without any movement along the screen
No scrolling occurrs
It all happens in less than 200ms.
If the touch is determined to be a 'quickTap', the TouchManager causes the touched element in the DOM to emit a custom "quickTap" event which then bubbles up the DOM to any other elements that happen to be listening for it. This code defines and creates the touch manager and it will be ready to go immediately
Drawbacks:
Uses jQuery
Only designed with one finger in mind.
also borrowed some code from modernizr. (You can omit that bit if you already include Modernizr.)
Maybe this is overkill, but it's part of a larger codebase I'm working on.
/**
* Click events do not bubble up the DOM on mobile Safari unless the click happens on a link or form input, but other events do bubble up.
* The quick-tap detects the touch-screen equivalent of a click and triggers a custom event on the target of the tap which will bubble up the DOM.
* A touch is considered a click if there is a touch and release without any movement along the screen or any scrolling.
*/
var qt = (function ($) {
/**
* Modernizr 3.0.0pre (Custom Build) | MIT
* Modernizr's touchevent test
*/
var touchSupport = (function() {
var bool,
prefixes = ' -webkit- -moz- -o- -ms- '.split(' ')
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
bool = true;
} else {
var query = ['#media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
testStyles(query, function( node ) {
bool = node.offsetTop === 9;
});
}
return bool;
}()),
MobileTapEvent = 'tapEvent';
if(touchSupport) {
/* Create a new qt (constructor)*/
var startTime = null,
startTouch = null,
isActive = false,
scrolled = false;
/* Constructor */
function qt() {
var _qt = this,
context = $(document);
context.on("touchstart", function (evt) {
startTime = evt.timeStamp;
startTouch = evt.originalEvent.touches.item(0);
isActive = true;
scrolled = false;
})
context.on("touchend", function (evt) {
window.ct = evt.originalEvent['changedTouches'];
// Get the distance between the initial touch and the point where the touch stopped.
var duration = evt.timeStamp - startTime,
movement = _qt.getMovement(startTouch, evt.originalEvent['changedTouches'].item(0)),
isTap = !scrolled && movement < 5 && duration < 200;
if (isTap) {
$(evt.target).trigger('quickTap', evt);
}
})
context.on('scroll mousemove touchmove', function (evt) {
if ((evt.type === "scroll" || evt.type === 'mousemove' || evt.type === 'touchmove') && isActive && !scrolled) {
scrolled = true;
}
});
}
/* Calculate the movement during the touch event(s)*/
qt.prototype.getMovement = function (s, e) {
if(!s || !e) return 0;
var dx = e.screenX - s.screenX,
dy = e.screenY - s.screenY;
return Math.sqrt((dx * dx) + (dy * dy));
};
return new qt();
}
}(jQuery));
To use the code you would add it to your page then just listen for the quickTap event.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="quick-tap.js"></script>
<script type="text/javascript">
$(document).on('quickTap', function(evt, originalEvent) {
console.log('tap event detected on: ', evt.target.nodeName, 'tag');
});
</script>
evt is the quickTap event.
evt.target is the tapped DOM element (not the jQuery object).
originalEvent is the touchend event where qt determines whether it was a tap or not.
You can hide the popup-div on touchend event.
In touchstart event you remember window.scrollY.
In touchend event, if scrollY positions differ the user has scrolled.

Same function repeatedly called resets the setTimeout inner function

All,
I have a 'credit module' (similar to credit system in games), which when a user performs an action, creates an inner div with the cost to be added or substracted so user can see what the cost of the last action was.
Problem: Everything works fine as long as the function is called once, if the user performs multiple actions quickly, the setTimeout functions (which are suppose to animate & then delete the cost div) donot get executed. It seems the second instance of the function resets the setTimeout function of the first.
(function()
{
$("#press").on("click", function(){creditCost(50)});
function creditCost(x)
{
var eParent = document.getElementById("creditModule");
// following code creates the div with the cost
eParent.innerHTML += '<div class="cCCost"><p class="cCostNo"></p></div>';
var aCostNo = document.getElementsByClassName("cCostNo");
var eLatestCost = aCostNo[aCostNo.length - 1];
// following line assigns variable to above created div '.cCCost'
var eCCost = eLatestCost.parentNode;
// cost being assigned
eLatestCost.innerHTML = x;
$(eCCost).animate ({"left":"-=50px", "opacity":"1"}, 250, "swing");
// following code needs review... not executing if action is performed multiple times quickly
setTimeout(function()
{
$(eCCost).animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function ()
{
$(eCCost).remove();
})
}, 1000);
}
})();
jsfiddle, excuse the CSS
eParent.innerHTML += '<div class="cCCost"><p class="cCostNo"></p></div>';
is the bad line. This resets the innerHTML of your element, recreating the whole DOM and destroying the elements which were referenced in the previous invocations - letting their timeouts fail. See "innerHTML += ..." vs "appendChild(txtNode)" for details. Why don't you use jQuery when you have it available?
function creditCost(x) {
var eParent = $("#creditModule");
// Create a DOM node on the fly - without any innerHTML
var eCCost = $('<div class="cCCost"><p class="cCostNo"></p></div>');
eCCost.find("p").text(x); // don't set the HTML if you only want text
eParent.append(eCCost); // don't throw over all the other children
eCCost.animate ({"left":"-=50px", "opacity":"1"}, 250, "swing")
.delay(1000) // of course the setTimeout would have worked as well
.animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function() {
eCCost.remove();
});
}
You are starting an animation and scheduling a timeout to work on DOM elements that will get modified in the middle of that operation if the user clicks quickly. You have two options for fixing this:
Make the adding of new items upon a second click to be safe so that it doesn't mess up the previous animations.
Stop the previous animations and clean them up before starting a new one.
You can implement either behavior with the following rewrite and simplification of your code. You control whether you get behavior #1 or #2 by whether you include the first line of code or not.
function creditCost(x) {
// This first line of code is optional depending upon what you want to happen when the
// user clicks rapid fire. With this line in place, any previous animations will
// be stopped and their objects will be removed immediately
// Without this line of code, previous objects will continue to animate and will then
// clean remove themselves when the animation is done
$("#creditModule .cCCost").stop(true, false).remove();
// create HTML objects for cCCost
var cCCost = $('<div class="cCCost"><p class="cCostNo">' + x + '</p></div>');
// add these objects onto end of creditModule
$("#creditModule").append(cCCost);
cCCost
.animate ({"left":"-=50px", "opacity":"1"}, 250, "swing")
.delay(750)
.animate({"left":"+=50px", "opacity":"0"}, 250, "swing", function () {
cCCost.remove();
});
}
})();
Note, I changed from setTimeout() to .delay() to make it easier to stop all future actions. If you stayed with setTimeout(), then you would need to save the timerID returned from that so that you could call clearTimeout(). Using .delay(), jQuery does this for us.
Updated code for anyone who might want to do with mostly javascript. Jsfiddle, excuse the CSS.
function creditCost(x)
{
var eParent = document.getElementById("creditModule");
var eCCost = document.createElement("div");
var eCostNo = document.createElement("p");
var sCostNoTxt = document.createTextNode(x);
eCCost.setAttribute("class","cCCost");
eCostNo.setAttribute("class","cCostNo");
eCostNo.appendChild(sCostNoTxt);
eCCost.appendChild(eCostNo);
eParent.insertBefore(eCCost, document.getElementById("creditSystem").nextSibling);
$(eCCost).animate ({"left":"-=50px", "opacity":"1"}, 250, "swing");
setTimeout(function()
{
$(eCCost).animate ({"left":"+=50px", "opacity":"0"}, 250, "swing", function ()
{
$(eCCost).remove();
})
}, 1000);
}

how to do parallel animation on same element

Here is code in jsfiddle !
Here is the actual site !
Problem 1: It seem's that when I call functions when clicking enter they don't execute on after each other , it sometimes works if it goe's in parallel and does everything at once! But this isn't the actual problem, it's something I would love some advice!
Problem Actual: When I call enter I switch all the clases and then do a parallel animation on div.third(making background green or red and then fading out), problem is, when I do fast enough it doesn't resize div.fourth untill background animation finished. So I thought solution for this would be a parallel animation witch doesn't interact with main animation thus switchClases().
Code where all the magic happens:
// Do everytime we press a key
$(document).keydown(function(){
// By presing 'Enter' we call exec.
$("#wraper input.third").bind('keydown',function(e){
// Make key variable by phrasing the event
var keyPresed = (e.keyCode ? e.keyCode : e.which);
// Allow only backspace, delete and enter
if (keyPresed == 46 || keyPresed == 8 || keyPresed == 13){
// If this is true animation is still in progress
if (transAct) {
// OBLIVION
}
// Or else start another animation and execution
else{
// If 'enter' is pressed then and new row and execute everything
if((keyPresed == 13) && $("input.third").val()){
//Set the new uniqueId
uniqueId++;
$("div.second").addClass("class"+uniqueId);
//Get result number because it will not be his name anymore
result = $("input.third").val();
//Switch clases
SwitchClases(_this);
transAct = true;
// Her we actualy insert the new line
$("<div class='first'>9 x 8 = <input class='first' type='text' disabled='true' maxlength='2'/></div>").css("opacity", "0").hide().prependTo(_this).slideDown().animate({opacity: 0.1},function(){
transAct = false;
})
$("div.third").append(" "+result) // Write down inputed result
$("input.third").fadeOut().remove() // Drop input box into black hole
$("div.fifth").fadeOut().remove(); // Do same thing to last division
// Check if answer was correct!
// Here are two examples with whom you can play as much as you like
//$(".leftSide div.class"+(uniqueId-1)).stop().animate({backgroundColor: '#00DD00'},100).animate({backgroundColor: 'white'},900);
// $(".leftSide").stop().animate({backgroundColor: '#DD0000'},100).animate({backgroundColor: 'white'},900);
//Now set focus to next input area , so we can continue and be lazy by not clicking on new input box!
$('.newEleCont input.second').focus();
}
}
}
// Restrict inputing any other character besides a number
else {
// Ensure that it is a number and stop the keypress
if ((keyPresed < 48 || keyPresed > 57) && (keyPresed < 96 || keyPresed > 105 )) {
e.preventDefault();
}
}
});
});
1) How could I find solution for double animation?
2) How could I improve this code?(that is , using less jquery)
EDIT: As you can see I added additional uniqueID class to every new div.third. And what I want to do is to cast backgroundColor animation only on given uniqueID BUT not interacing with basic third>fourth>fifth class animations, like if they did there own separate things!
Parallel Animation in jQuery : You can do parallel animation by passing the properties object to animate function. For example:
var animateProperties = {
top:50px,
left:100px,
width:300px,
}
object.animate(animateProperties);
and you can use stop function to stop the animation in progress. I have modified your code, the code that calls animate function is given below.
var style = {
"opacity": opacity,
"font-size": fontSize + "px"
}
if(animate){
if(index == config.activeIndex + 1){
style.backgroundColor = '#00EE00';
$(row).stop(true, true).animate(style, 100)
.animate({backgroundColor: 'white'}, 1200);
}else{
$(row).stop(true, true).animate(style, 100);
}
}else{
$(row).css(style);
}
You can find the final version of code here http://jsfiddle.net/diode/rBqVE/6/
I have made this configurable using a config object. You can find it in the code, but to get the best result you will have to modify css also.
See the function dequeue
http://api.jquery.com/jQuery.dequeue/
jQuery adds each animate call to a queue. Using dequeue you can invoke next animate call in the queue.
Here dequeue demo you can see a simple demonstration.
Also see jQuery effect http://jqueryui.com/demos/effect/. Its not for this purpose, but might be useful.

Categories