We program gestures with the mouse

Many Opera and FireFox users are aware of the existence of so-called Mouse Gestures (for FF there is a plugin of the same name) - mouse gestures, to which the browser responds by performing various actions (such as opening a new window, bookmarks, backwards, forwards, etc.). P.), the only drawback of this feature is that there is no interaction with the site, and I decided to write a small library that will help developers to add similar functionality to their site ...

At the moment, the library understands only 8 simple gestures:

• Top - we hold down the mouse button and move the cursor upward by 50-200 pixels (by default) and release; the X-axis offset should be at least two times smaller. than y axis
• Bottom - keeping the cursor down
• Left
• Right

And their derivatives

• Top-Left - the offset along the X and Y axes should not differ more than twice
• Top right
• Bottom-left
• Bottom-right

To connect the library you need to add the following code to your page:

<script src = "javascript / navigation.js" type = "text / javascript"> </ script>

Next, copy the following code:

<script language = "JavaScript">
// use jQuery for bind function to event
$ (document) .mousedown (navigation.mousedown);
$ (document). mouseup (navigation.mouseup);

// set params
navigation.minX = 50;
navigation.minY = 50;
navigation.maxX = 300;
navigation.maxY = 300;
// callback functions
navigation.TopLeft = function (X, Y) {};
navigation.Top = function (X, Y) {};
navigation.TopRight = function (X, Y) {};
navigation.Left = function (X, Y) {};
navigation.Right = function (X, Y) {};
navigation.BottomLeft = function (X, Y) {};
navigation.Bottom = function (X, Y) {};
navigation.BottomRight = function (X, Y) {};
</ script>

This is a blank for our “gestures”, the first two lines are needed in order to hang up on our mousedown and mouseup global events our two functions (jQuery library is used). The next 4 lines indicate the parameters of gestures, i.e. limits in which they will be triggered. Next comes the declaration of the 8 callback functions, as parameters they take an absolute offset along the X and Y axis.

In order to eliminate the false positives of our functions, it is better to tie them to the pressed “Ctrl” key (the “Ctrl” key code is 17, if you want to change it - see all the codes on http://unixpapa.com/js/key.html ):

$ (window) .keydown (function (event) {
switch (event.keyCode) {
case 17:
$ (document) .mousedown (navigation.mousedown);
$ (document). mouseup (navigation.mouseup);
break;
}
});
$ (window) .keyup (function (event) {
switch (event.keyCode) {
case 17:
$ (document) .unbind ('mousedown');
$ (document) .unbind ('mouseup');
break;
}
});

')
And here is the code from my example :

function mouseGestures () {
$ (window) .keydown (function (event) {
switch (event.keyCode) {
// ...
// different keys do different things
// Different browsers provide different codes
// see here for details: unixpapa.com/js/key.html
// ...
case 17:
$ (document) .mousedown (navigation.mousedown);
$ (document). mouseup (navigation.mouseup);
break;
}
});
$ (window) .keyup (function (event) {
switch (event.keyCode) {
case 17:
$ (document) .unbind ('mousedown');
$ (document) .unbind ('mouseup');
break;
}
});

navigation.maxX = 300;
navigation.maxY = 300;
navigation.TopLeft = function (X, Y) {select ($ ('div # left div.top'), Math.abs (XY))};
navigation.Top = function (X, Y) {select ($ ('div # center div.top'), Y)};
navigation.TopRight = function (X, Y) {select ($ ('div # right div.top'), Math.abs (XY))};
navigation.Left = function (X, Y) {select ($ ('div # left div.middle'), X)};
navigation.Right = function (X, Y) {select ($ ('div # right div.middle'), X)};
navigation.BottomLeft = function (X, Y) {select ($ ('div # left div.bottom'), Math.abs (XY))};
navigation.Bottom = function (X, Y) {select ($ ('div # center div.bottom'), Y)};
navigation.BottomRight = function (X, Y) {select ($ ('div # right div.bottom'), Math.abs (XY))};
}
function select (el, k) {
var speed = 1500;
switch (true) {
case (k <50):
speed = 500;
break;
case (k <100):
speed = 1000;
break;
case (k <150):
speed = 1500;
break;
case (k <200):
speed = 2000;
break;
case (k> = 200):
speed = 2500;
break;
}
el.animate ({
opacity: 0.4,
backgroundColor: '# ffff00'
}, speed, "linear",
function () {
el.animate ({
opacity: 1,
backgroundColor: '#fffff'
}, speed)
});
}

Somehow everything is confusing, let's better try , how it all works (hold down "Ctrl" and try to activate the event - click on any area and hold the mouse button to move the cursor 50-300 pixels in the desired direction) ...

I will comment on the select function a little bit more, as the first parameter it accepts the DOM element which we will animate, the second parameter is the coefficient, the animation speed will depend on it, the coefficient is the amount of movement along the axis of interest (or the difference between them) ...

Why is it all on the site? As for me, it will be quite convenient if you hang up on the Left and Right events to go to the previous / next page in the forum, to the Top event - to return to the main page or to the top of the page, this may well be useful ...

Crosspost: JavaScript: we program gestures with the mouse