Gmail had this awesome feature and it was discontinued for some reason. Nowadays I have installed a nice google chromeGoogle Chrome plugin for this job.
A couple of months ago I had to develop a similar feature for a project and I think that could be improved but I don't know how..
So I'm here askingA couple of months ago I had to develop a similar feature for a code review or suggestions.project and I think that could be improved but I don't know how.
Here is theI'm here asking for a code: review or suggestions.
(function($, undefined) {
$.fn.mousePointer = function(options) {
var settings = $.extend({}, {
size : 95,
bgColor : "#000",
arrColor : "#FFF",
btnLeft : null,
btnRight : null,
btnUp : null,
btnDown : null,
className : "p_c_arr_" + new Date().getTime()
}, options);
var fncCreateButton = function(target, degrees, left, top) {
var r = settings.size, w = r / 5;
var c = document.createElement("canvas");
c.className = settings.className;
c.height = r, c.width = r;
var ctx = c.getContext("2d");
// CREATE THE BACKGROUND BUTTON
ctx.beginPath();
ctx.arc(r, r, r, Math.PI, 1.5 * Math.PI);
ctx.arc(r, r, w * 2, 1.5 * Math.PI, Math.PI, true);
ctx.closePath();
ctx.strokeStyle = settings.bgColor;
ctx.stroke();
ctx.fillStyle = settings.bgColor;
ctx.fill();
// CREATE THE ARROW INSIDE THE BUTTON
ctx.beginPath();
ctx.moveTo(r / 2 - w / 2, r / 2 - w / 2);
ctx.lineTo(r / 2, r / 2 + w);
ctx.lineTo(r / 2 + w, r / 2);
ctx.closePath();
ctx.strokeStyle = settings.arrColor;
ctx.stroke();
ctx.fillStyle = settings.arrColor;
ctx.fill();
// SET THE ANGLE AND POSITION
var canvas = $(c);
canvas.css({
"-webkit-transform" : 'rotate(' + degrees + 'deg)',
"-moz-transform" : 'rotate(' + degrees + 'deg)',
"-ms-transform" : 'rotate(' + degrees + 'deg)',
"transform" : 'rotate(' + degrees + 'deg)',
"position" : 'absolute',
"opacity" : 0,
"left" : left,
"top" : top
}).data("target", target);
$("body").append(c);
return canvas;
}
var fncRemoveButtons = function() {
$("." + settings.className).remove();
$(document).off("mousemove.mousePointer");
$(document).off("mouseup.mousePointer");
}
var fncDoAction = function(button, opacity) {
if ( target = button.data("target")) {
button.css("opacity", opacity);
if (opacity >= 1) {
fncRemoveButtons();
var target = $(target);
var events = $._data(target[0], "events");
if (events && typeof events.click == "object") {
target.trigger("click");
} else if ( typeof target[0].onclick == "function") {
target[0].onclick();
} else {
window.location = target.attr("href");
}
}
}
}
$(document).on("mousedown.mousePointer", function(e) {
if (e.which == 3) {
$(document).on("contextmenu", function(e) {
e.preventDefault();
});
$(document).on("selectstart.mousePointer", function(e) {
e.preventDefault();
});
$(document).on("mouseup.mousePointer", function(e) {
fncRemoveButtons();
});
var x = e.clientX, y = e.clientY, r = settings.size * 0.75, degrees = 45;
var btnUp = fncCreateButton(settings.btnUp, (degrees), (x - r / 2), (y - r * 1.5));
var btnRight = fncCreateButton(settings.btnRight, (degrees * 3), (x + r / 2), (y - r / 2));
var btnDown = fncCreateButton(settings.btnDown, (degrees * 5), (x - r / 2), (y + r / 2));
var btnLeft = fncCreateButton(settings.btnLeft, (degrees * 7), (x - r * 1.5), (y - r / 2));
$(document).on("mousemove.mousePointer", function(e) {
var _x = e.clientX, _y = e.clientY;
fncDoAction(btnLeft, (1 - (_x - (x - r)) / r));
fncDoAction(btnRight, (1 - ((x + r) - _x ) / r));
fncDoAction(btnUp, (1 - (_y - (y - r)) / r));
fncDoAction(btnDown, (1 - ((y + r) - _y ) / r));
});
}
});
}
})(jQuery);
And if you want to contribute, you can find it here: https://github.com/quantodaniel/mouse-pointerhere.
