Categories
css function jquery

How to create custom animation from longpress jQuery function

Updated (with additions from answer)

(function($) {
$.fn.longpress = function(longCallback, duration) {
// set some defaults
let defaults = {
click: function(el, e) {},
start: function(el, e) { el.css("color", "#000"); },
complete: function(el, e) { el.css("color", "#FFF"); },
cancel: function(el, e) { el.css("color", "#F00"); },
duration: 1000
};
// extend the options
let options = $.extend({}, defaults);
return this.each(function() {
var $this = $(this);
// to keep track of how long something was pressed
var mouse_down_time;
var timeout;
$this.data("clicked", "false");
// mousedown or touchstart callback
function mousedown_callback(e) {
// start callback
options.start($this, e);
$this.data("clicked", "true");
mouse_down_time = new Date().getTime();
var context = $(this);
// set a timeout to call the longpress callback when time elapses
timeout = setTimeout(function() {
if (typeof longCallback === "function") {
longCallback.call(context, e);
options.complete($this, e);
$this.data("clicked", "false");
} else {
$.error('Callback required for long press. You provided: ' + typeof longCallback);
}
}, options.duration);
}
// mouseup or touchend callback
function mouseup_callback(e) {
var press_time = new Date().getTime() - mouse_down_time;
if (press_time < options.duration) {
// cancel the timeout
clearTimeout(timeout);
$this.data("clicked", "false");
// call the click if provided
options.click($this, e);
}
}
// cancel long press event if the finger or mouse was moved
function move_callback(e) {
let isClicked = $this.data("clicked");
if (isClicked == "false")
return;
// call the cancel callback
options.cancel($this, e);
clearTimeout(timeout);
$this.data("clicked", "false");
}
// Browser Support
$this.on('mousedown', mousedown_callback);
$this.on('mouseup', mouseup_callback);
$this.on('mousemove', move_callback);
// Mobile Support
$this.on('touchstart', mousedown_callback);
$this.on('touchend', mouseup_callback);
$this.on('touchmove', move_callback);
});
};
}(jQuery));


I have a jQuery plugin that I found a while ago (cant remember the source) which allowed me to have long press features on a website:

(function(b) {
b.fn.longpress = function(e, c, d) {
"undefined" === typeof d && (d = 1000);
return this.each(function() {
function g(a) {
h = (new Date).getTime();
var c = b(this);
f = setTimeout(function() {
"function" === typeof e ? e.call(c, a) : b.error("Callback required for long press. You provided: " + typeof e)
}, d)
}
function k(a) {
(new Date).getTime() - h < d && (clearTimeout(f), "function" === typeof c ? c.call(b(this), a) : "undefined" !== typeof c && b.error("Optional callback for short press should be a function."))
}
function l(a) {
clearTimeout(f)
}
var a = b(this),
h, f;
a.on("mousedown", g);
a.on("mouseup", k);
a.on("mousemove", l);
a.on("touchstart", g);
a.on("touchend", k);
a.on("touchmove", l)
})
}
})(jQuery);

It works great, but I was wondering if there was a way to have say the background go from #fff to #000 or make any other custom animation based on the duration of the long press.

I was toying around, but couldn’t figure it out. I was trying to add a class for every second the long press was held, then have a CSS rule for each. I then tried using steps in CSS to make it time too, but couldn’t get that to work as the classes would only add when the long press was successful not loading.