mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
added basic gesture support...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
8197803dbe
commit
05ea6be1cf
@ -38,6 +38,7 @@ ISSUES:
|
||||
-->
|
||||
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.gestures.js"></script>
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
@ -50,7 +51,9 @@ $(document).ready(function() {
|
||||
}
|
||||
|
||||
// setup event handlers...
|
||||
$(document).keydown(handleKeys)
|
||||
$(document)
|
||||
.keydown(handleKeys)
|
||||
.gestures({eventHandler: handleGestures})
|
||||
$(".image").click(handleClick)
|
||||
|
||||
|
||||
@ -58,6 +61,23 @@ $(document).ready(function() {
|
||||
$('.current-image').click()
|
||||
});
|
||||
|
||||
function handleGestures(e){
|
||||
switch (e){
|
||||
case 'N':
|
||||
demoteImage()
|
||||
break
|
||||
case 'S':
|
||||
promoteImage()
|
||||
break
|
||||
case 'E':
|
||||
prevImage()
|
||||
break
|
||||
case 'W':
|
||||
nextImage()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleClick(e) {
|
||||
|
||||
|
||||
282
ui/jquery.gestures.js
Executable file
282
ui/jquery.gestures.js
Executable file
@ -0,0 +1,282 @@
|
||||
(function($)
|
||||
{
|
||||
// This script was written by Steve Fenton
|
||||
// http://www.stevefenton.co.uk/Content/Jquery-Gestures/
|
||||
// Feel free to use this jQuery Plugin
|
||||
// Version: 1.0.1
|
||||
// Contributions by:
|
||||
|
||||
var gesturesX = 0;
|
||||
var gesturesY = 0;
|
||||
|
||||
$(document).mousemove( function (e) {
|
||||
gesturesX = parseInt(e.pageX, 10);
|
||||
gesturesY = parseInt(e.pageY, 10);
|
||||
});
|
||||
|
||||
$.fn.gestures = function (settings) {
|
||||
|
||||
var config = {
|
||||
classModifier: "gestures",
|
||||
tolerance: 25,
|
||||
startEvent: "mousedown",
|
||||
endEvent: "mouseup",
|
||||
advancedShapes: false,
|
||||
shapeSpeed: 200,
|
||||
showTrail: false,
|
||||
trailSpeed: 50,
|
||||
eventLimit: 5000,
|
||||
eventHandler: function (eventName, compassPoint) {
|
||||
// Local variable eventName, uses eight point compass directions for the drag direction
|
||||
// Also, eventStartX, eventStaryY, eventEndX, eventEndY are all available with the details!
|
||||
$("#gestureoutput").attr("tabindex", "0").html("Event name '" + eventName + "'. Started at (" + eventStartX + ", " + eventStartY + ") Ended at (" + eventEndX + ", " + eventEndY + ")")[0].focus();
|
||||
if (eventName != "falsealarm") {
|
||||
$This.html(eventName);
|
||||
}
|
||||
},
|
||||
eventHandlerAdvanced: function (directions) {
|
||||
// Local variable directions, returns a list of direction objects to be used to form a "shape"
|
||||
var output = GetCombinedName(directions, false, false);
|
||||
|
||||
$("#gestureoutput").attr("tabindex", "0").html(output)[0].focus();
|
||||
}
|
||||
};
|
||||
|
||||
if (settings) {
|
||||
$.extend(config, settings);
|
||||
}
|
||||
|
||||
$This = null;
|
||||
$Body = null;
|
||||
var eventStartX = 0;
|
||||
var eventStartY = 0;
|
||||
var eventEndX = 0;
|
||||
var eventEndY = 0;
|
||||
var previousX = 0; // Advanced Tracking
|
||||
var previousY = 0; // Advanced Tracking
|
||||
var underEvent = false;
|
||||
|
||||
var trailTimer = null;
|
||||
var shapeTimer = null;
|
||||
var eventTimer = null;
|
||||
|
||||
// Determines the compass direction from a gesture
|
||||
function GetEvent(sx, sy, ex, ey) {
|
||||
|
||||
var eventName = "none";
|
||||
|
||||
var horizontalMovement = ex - sx;
|
||||
var verticalMovement = sy - ey;
|
||||
|
||||
// Discard horizontal movements below the tolerance threshold
|
||||
if (horizontalMovement < config.tolerance && horizontalMovement > (config.tolerance * -1)) {
|
||||
horizontalMovement = 0;
|
||||
}
|
||||
|
||||
// Discard vertical movements below the tolerance threshold
|
||||
if (verticalMovement < config.tolerance && verticalMovement > (config.tolerance * -1)) {
|
||||
verticalMovement = 0;
|
||||
}
|
||||
|
||||
// For a diagonal move, horizontal should be within 50% of vertical otherwise we assume not diagonal
|
||||
if (horizontalMovement != 0 && verticalMovement != 0) {
|
||||
var h = horizontalMovement;
|
||||
var v = verticalMovement;
|
||||
// Use positive numbers for calculations
|
||||
if (h < 0) {
|
||||
h = h * -1;
|
||||
}
|
||||
if (v < 0) {
|
||||
v = v * -1;
|
||||
}
|
||||
// Check "diagonality" - if it isn't diagonal enough, make it flat
|
||||
if (h > v) {
|
||||
if (v < (h * 0.5)) {
|
||||
verticalMovement = 0;
|
||||
}
|
||||
} else {
|
||||
if (h < (v * 0.5)) {
|
||||
horizontalMovement = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjustments are all made... lets get the event...
|
||||
if (horizontalMovement != 0 && verticalMovement != 0) {
|
||||
eventName = "diagonal - direction to follow";
|
||||
if (horizontalMovement > 0) {
|
||||
if (verticalMovement > 0) {
|
||||
eventName = "NE";
|
||||
} else {
|
||||
eventName = "SE";
|
||||
}
|
||||
} else {
|
||||
if (verticalMovement > 0) {
|
||||
eventName = "NW";
|
||||
} else {
|
||||
eventName = "SW";
|
||||
}
|
||||
}
|
||||
} else if (horizontalMovement != 0) {
|
||||
if (horizontalMovement > 0) {
|
||||
eventName = "E";
|
||||
} else {
|
||||
eventName = "W";
|
||||
}
|
||||
} else if (verticalMovement != 0) {
|
||||
if (verticalMovement > 0) {
|
||||
eventName = "N";
|
||||
} else {
|
||||
eventName = "S";
|
||||
}
|
||||
} else {
|
||||
eventName = "falsealarm";
|
||||
}
|
||||
|
||||
return eventName;
|
||||
}
|
||||
|
||||
function GetCombinedName(directions, dropDiagonals, dropNonDiagonals) {
|
||||
var output = "";
|
||||
for (var i = 0; i < directions.length; i++) {
|
||||
var show = true;
|
||||
|
||||
if (dropDiagonals) {
|
||||
if (directions[i].d.length == 2) {
|
||||
show = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (dropNonDiagonals) {
|
||||
if (directions[i].d.length == 1) {
|
||||
show = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (show) {
|
||||
output += directions[i].d + " ";
|
||||
}
|
||||
}
|
||||
return $.trim(output);
|
||||
}
|
||||
|
||||
// Displays a trail for the mouse movement
|
||||
function TrackTrail() {
|
||||
if (underEvent) {
|
||||
$Body.append("<div class=\"" + config.classModifier + "motion\" style=\"position: absolute; top: " + gesturesY + "px; left :" + gesturesX + "px;\">.</div>");
|
||||
trailTimer = window.setTimeout(TrackTrail, config.trailSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
// Clears any trail
|
||||
function ClearTrail() {
|
||||
$("." + config.classModifier + "motion").fadeOut(1000, function () { $(this).remove(); });
|
||||
}
|
||||
|
||||
var directionArray;
|
||||
|
||||
function TrackDirections() {
|
||||
if (underEvent) {
|
||||
|
||||
var xLength = gesturesX - previousX;
|
||||
var yLength = gesturesY - previousY;
|
||||
|
||||
if (xLength < 0) {
|
||||
xLength = xLength * -1;
|
||||
}
|
||||
|
||||
if (yLength < 0) {
|
||||
yLength = yLength * -1;
|
||||
}
|
||||
|
||||
// If the lengths are over the ignorable tolerance
|
||||
if (xLength > config.tolerance || yLength > config.tolerance) {
|
||||
|
||||
var direction = GetEvent(previousX, previousY, gesturesX, gesturesY);
|
||||
if (direction != "falsealarm") {
|
||||
previousX = gesturesX;
|
||||
previousY = gesturesY;
|
||||
if (directionArray.length == 0) {
|
||||
directionArray[directionArray.length] = { d: direction, lx: xLength, ly: yLength };
|
||||
config.eventHandler(direction);
|
||||
} else{
|
||||
if (direction != directionArray[directionArray.length - 1].d) {
|
||||
directionArray[directionArray.length] = { d: direction, lx: xLength, ly: yLength };
|
||||
config.eventHandler(direction);
|
||||
} else {
|
||||
directionArray[directionArray.length - 1].lx += xLength;
|
||||
directionArray[directionArray.length - 1].ly += yLength;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
shapeTimer = window.setTimeout(TrackDirections, config.shapeSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
// Starts tracking
|
||||
function StartTracking() {
|
||||
if (!underEvent) {
|
||||
underEvent = true;
|
||||
eventStartX = gesturesX;
|
||||
eventStartY = gesturesY;
|
||||
// In case the mouse up event is lost, this will force the stop event
|
||||
eventTimer = window.setTimeout(EndTracking, config.eventLimit);
|
||||
// Track Advanced Shapes
|
||||
if (config.advancedShapes) {
|
||||
previousX = gesturesX;
|
||||
previousY = gesturesY;
|
||||
directionArray = new Array();
|
||||
TrackDirections();
|
||||
}
|
||||
// Track Mouse Trail
|
||||
if (config.showTrail) {
|
||||
TrackTrail();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ends tracking
|
||||
function EndTracking() {
|
||||
window.clearTimeout(eventTimer);
|
||||
if (underEvent) {
|
||||
underEvent = false;
|
||||
eventEndX = gesturesX;
|
||||
eventEndY = gesturesY;
|
||||
// Track Advanced Shapes
|
||||
if (config.advancedShapes) {
|
||||
if (directionArray.length > 0) {
|
||||
config.eventHandlerAdvanced(directionArray);
|
||||
}
|
||||
} else {
|
||||
// Simple Event
|
||||
config.eventHandler(GetEvent(eventStartX, eventStartY, eventEndX, eventEndY));
|
||||
}
|
||||
// Track Mouse Trail
|
||||
if (config.showTrail) {
|
||||
ClearTrail();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return this.each( function () {
|
||||
$This = $(this);
|
||||
$Body = $("body").eq(0);
|
||||
|
||||
$This.bind(config.startEvent, function () {
|
||||
StartTracking();
|
||||
return false;
|
||||
});
|
||||
|
||||
$Body.bind(config.endEvent, function () {
|
||||
EndTracking();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
})(jQuery);
|
||||
Loading…
x
Reference in New Issue
Block a user