/* PH9 SWIPE ========= PH9's in-house dwipe detection for mobile devices, this is so we can easily detect swipe input from users for any jquery object! WHY CREATE OUR OWN? =================== I hate having to install jQuery plugins just when you want to use one simple feature, especially since swipe detection is so easy to do without. So I decided to create one to be used within PH9, ensuring it is lightweight and doesn't require adding a ton of other useless features. */ /* KEY NOTES ========= - Requires JQuery (1.9+) - Call by $("#MyID").onSwipe( function(){} ); */ /* LOG === 05/11/2019 at 15:34 - Jed Merrington * All Code created and developed! */ /* FUNCTIONS ========= onSwipe(oCallback) ================== Called to detect a swipe on any given jQuery object This function has some more functions inside! ------------------------------------------ fOnTouchStart( oEvent ) ====================== Called when the touch event is first called (When the user taps the object) Param 1 : The input event (Object) Returns : Nothing! (Void) fOnTouchMove( oEvent ) ====================== Called when the touch event detects movement (When the user moves their finger) Param 1 : The input event (Object) Returns : Nothing! (Void) fOnTouchEnd( oEvent ) ===================== Called when the touch event has finished (When the user lifts their finger) Param 1 : The input event (Object) Returns : Nothing! (Void) ------------------------------------------ */ /* TODO : - Support Desktop (Allow it so it takes onmousedown as well as touch inputs )! - Ensure support for IE11+ - Support touch cancellation */ /* CREATE GLOBAL VARIABLES ======================= */ /* DEFINE SWIPE CONSTANT TYPES */ // Swipe Left var PH9_SWIPE_LEFT = 0; // Swipe Right var PH9_SWIPE_RIGHT = 1; // Swipe Up var PH9_SWIPE_UP = 2; // Swipe Down var PH9_SWIPE_DOWN = 3; /* DEFINE THRESHOLD VARIABLES */ // The minimum amount of pixels in the X axis that a swipe left/right is detected var nSwipeThresholdX = 75; // The minimum amount of pixels in the Y axis that a swipe up/down is detected var nSwipeThresholdY = 75; // Wrap the object to execute on it's own passing Jquery object (function($) { /* onSwipe(oCallback) ================= This is the main function exposed to users through Jquery, here we simply assign a new function to this instance of jquery object. The function created simply is called when users want to recieve a swipe callback. The callback is then passed into the initial function. Param 1 : The function called when a swipe is detected Returns : False if there is an error, otherwise nothing!(Bool/VOID) Example usage : $("#myIdOfDOMObject").onSwipe( function(nSwipeDirection) { alert(nSwipeDirection); }); */ $.fn.onSwipe = function( oCallback ) { // If there isn't an instance of this if (!this) { // Return false, as we need a JQuery Object! return false; } // Loop through each object return $(this).each( function() { // Store this instance of the JQuery object var oThis = $(this); // Store the start location of the swipe var oStartLocation = { nX : 0, nY : 0 }; // Store the end location of the JQuery object var oEndLocation = { nX : 0, nY : 0 }; /* fOnTouchStart( oEvent ) ======================= Called when the touch event is first called (When the user taps the object) Param 1 : The input event (Object) Returns : Nothing! (Void) */ function fOnTouchStart(oEvent) { // Assign the touch start to the x position from this Page Event Object oStartLocation.nX = oEvent.targetTouches[0].pageX; // Assign the touch start to the Y position from this Page Event Object oStartLocation.nY = oEvent.targetTouches[0].pageY; } /* fOnTouchMove( oEvent ) ====================== Called when the touch event detects movement (When the user moves their finger) Param 1 : The input event (Object) Returns : Nothing! (Void) */ function fOnTouchMove(oEvent) { // Assign the touch end to the X position from this Page Event Object oEndLocation.nX = oEvent.targetTouches[0].pageX; // Assign the touch end to the Y position from this Page Event Object oEndLocation.nY = oEvent.targetTouches[0].pageY; } /* fOnTouchEnd( oEvent ) ===================== Called when the touch event has finished (When the user lifts their finger) Param 1 : The input event (Object) Returns : Nothing! (Void) FLOW ==== 1) INITIALISE REQUIRED VARIABLES 2) DETECT IF WE HAVE SWIPED! */ function fOnTouchEnd(oEvent) { /* 1) INITIALISE REQUIRED VARIABLES ================================ */ // Store the difference between the X start location and the X end location var nXDifference = oStartLocation.nX - oEndLocation.nX; // Store the difference between the Y start location and the Y end location var nYDifference = oStartLocation.nY - oEndLocation.nY; /* 2) DETECT IF WE HAVE SWIPED! ============================ */ // If the x difference is beyond the x swipe threshold and is less than 0 if( nXDifference <= (nSwipeThresholdX * -1) && nXDifference < 0 ) { // Then we must of swiped right, so call the callback with the swipe right constant! oCallback( PH9_SWIPE_RIGHT ); } // Else If the x difference is above the x swipe threshold else if( nXDifference >= nSwipeThresholdX ) { // Then we must of swiped left, so call the callback with the swipe left constant! oCallback( PH9_SWIPE_LEFT ); } // If the y difference is beyond the y swipe threshold and is less than 0 if( nYDifference <= (nSwipeThresholdY * -1) && nYDifference < 0 ) { // Then we must of swiped down, so call the callback with the swipe down constant! oCallback( PH9_SWIPE_DOWN ); } // Else If the y difference is above the y swipe threshold else if( nYDifference >= nSwipeThresholdY ) { // Then we must of swiped up, so call the callback with the swipe up constant! oCallback( PH9_SWIPE_UP ); } } // Add all the event listeners calling the required function this.addEventListener("touchstart" , fOnTouchStart , false); this.addEventListener("touchmove" , fOnTouchMove , false); this.addEventListener("touchend" , fOnTouchEnd , false); }); }; })(jQuery);