From c498d9d7da860d1bc3937ba7bafd5fa0698d65d9 Mon Sep 17 00:00:00 2001 From: Jason Frame Date: Mon, 21 Jul 2014 15:52:57 +0100 Subject: [PATCH] =?UTF-8?q?Implement=20=E2=80=98threshold=E2=80=99=20optio?= =?UTF-8?q?n.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Allows configuration of how much of the incoming slide must be dragged in before a transition is triggered on a “slow swipe” (i.e. > 250ms). Rationale for this addition is that requiring 50% coverage can lead to gestures that feel unnatural when using large, full-screen slideshows. --- README.md | 3 +++ swipe.js | 7 ++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b2bc04a..872fc7c 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ Swipe can take an optional second parameter– an object of key/value settings: - **continuous** Boolean *(default:true)* - create an infinite feel with no endpoints +- **threshold** Float *(default:0.5)* - proportion of next frame that must be dragged in before slow swipe will trigger + - **disableScroll** Boolean *(default:false)* - stop any touches on this container from scrolling the page - **stopPropagation** Boolean *(default:false)* - stop event propagation @@ -67,6 +69,7 @@ window.mySwipe = new Swipe(document.getElementById('slider'), { speed: 400, auto: 3000, continuous: true, + threshold: 0.25, disableScroll: false, stopPropagation: false, callback: function(index, elem) {}, diff --git a/swipe.js b/swipe.js index 8b29717..fb9ce16 100644 --- a/swipe.js +++ b/swipe.js @@ -33,6 +33,7 @@ function Swipe(container, options) { var index = parseInt(options.startSlide, 10) || 0; var speed = options.speed || 300; options.continuous = options.continuous !== undefined ? options.continuous : true; + options.threshold = options.threshold !== undefined ? parseFloat(options.threshold) : 0.5; function setup() { @@ -345,9 +346,9 @@ function Swipe(container, options) { // determine if slide attempt triggers next/prev slide var isValidSlide = - Number(duration) < 250 // if slide duration is less than 250ms - && Math.abs(delta.x) > 20 // and if slide amt is greater than 20px - || Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width + Number(duration) < 250 // if slide duration is less than 250ms + && Math.abs(delta.x) > 20 // and if slide amt is greater than 20px + || (Math.abs(delta.x) / width) > options.threshold; // or if slide amt is greater than threshold // determine if slide attempt is past start and end var isPastBounds =