From 6b15c61e0c8668ea439ee5df462da5d67525bc09 Mon Sep 17 00:00:00 2001 From: Mathieu D'Amours Date: Tue, 10 Jan 2012 14:38:19 -0500 Subject: [PATCH 1/5] Enable horizontal swiping gesture on compatible iOS devices. --- demo/demo.html | 4 +-- jquery.orbit-1.3.0.js | 59 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 2 deletions(-) diff --git a/demo/demo.html b/demo/demo.html index 25bdbdd..94e0db1 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -34,8 +34,8 @@ diff --git a/jquery.orbit-1.3.0.js b/jquery.orbit-1.3.0.js index 16c5195..a5d74da 100644 --- a/jquery.orbit-1.3.0.js +++ b/jquery.orbit-1.3.0.js @@ -13,6 +13,7 @@ defaults: { animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push, vertical-push + swipe: false, // Enable horizontal swipe gesture between slides animationSpeed: 600, // how fast animtions are timer: true, // true or false to have the timer advanceSpeed: 4000, // if timer is enabled, time between transitions @@ -333,6 +334,64 @@ self.stopClock(); self.$element.trigger('orbit.next'); }); + + if (this.options.swipe) this.setupSwipe(); + }, + + setupSwipe: function() { + var self = this, touch = {}; + if (/(iPad|iPhone|iPod)/i.test(navigator.userAgent) == false) return; + this.$wrapper[0].addEventListener('touchstart', function(e) { + if (e.touches.length == 1 && touch.touching === undefined) { + self.stopClock(); + touch.touching = true; + touch.start = e.touches[0].pageX; + touch.deltaX = 0; + touch.t = new Date(); + } + }, false); + this.$wrapper[0].addEventListener('touchmove', function(e) { + var active = self.activeSlide, deltaX; + if (touch.touching) { + e.stopPropagation(); + e.preventDefault(); + + deltaX = e.touches[0].pageX - touch.start; + + if (touch.$active == undefined) touch.$active = self.$slides.eq(active); + if (deltaX < 0 && touch.deltaX >= 0) { + if (touch.$other !== undefined) touch.$other.css({"z-index": 1}); + touch.other = active == self.$slides.length - 1 ? 0 : active + 1; + touch.$other = self.$slides.eq(touch.other); + touch.otherOffsetX = self.orbitWidth; + } else if (deltaX > 0 && touch.deltaX <= 0) { + if (touch.$other !== undefined) touch.$other.css({"z-index": 1}); + touch.other = active == 0 ? self.$slides.length - 1 : active - 1; + touch.$other = self.$slides.eq(touch.other); + touch.otherOffsetX = -self.orbitWidth; + } + touch.deltaX = deltaX; + touch.$other.css({"left": (touch.otherOffsetX+deltaX)+"px", "z-index": 3}); + touch.$active.css({"left": deltaX+"px", "z-index" : 3}); + } + }, false); + this.$wrapper[0].addEventListener('touchend', function(e) { + if (touch.touching) { + var speed = self.options.animationSpeed * (self.orbitWidth - Math.abs(touch.deltaX)) / self.orbitWidth, + direction = touch.deltaX > 0 ? 1 : -1; + + touch.$other.animate({"left": 0}, speed); + touch.$active.animate({"left": (direction*self.orbitWidth)+"px"}, speed, function() { + self.prevActiveSlide = self.activeSlide; + self.activeSlide = touch.other; + self.setActiveBullet(); + self.setCaption(); + self.resetAndUnlock(); + touch = {}; + }); + touch.touching = false; + } + }, false); }, setupBulletNav: function () { From 9a4f2eacf707597902d809c5dddc7513404f9d83 Mon Sep 17 00:00:00 2001 From: Mathieu D'Amours Date: Tue, 10 Jan 2012 14:40:31 -0500 Subject: [PATCH 2/5] Removed unnecessary comments --- demo/demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/demo.html b/demo/demo.html index 94e0db1..c82e316 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -35,7 +35,7 @@ From 8c076d791d91b5b384a135b0a265298bdb2d3383 Mon Sep 17 00:00:00 2001 From: Mathieu D'Amours Date: Tue, 10 Jan 2012 15:11:38 -0500 Subject: [PATCH 3/5] Detect `deltaX < deltaY` Added a detection for the direction of greatest amplitude (X or Y) to allow Y scrolling and X swiping --- jquery.orbit-1.3.0.js | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/jquery.orbit-1.3.0.js b/jquery.orbit-1.3.0.js index a5d74da..1102403 100644 --- a/jquery.orbit-1.3.0.js +++ b/jquery.orbit-1.3.0.js @@ -345,18 +345,24 @@ if (e.touches.length == 1 && touch.touching === undefined) { self.stopClock(); touch.touching = true; - touch.start = e.touches[0].pageX; + touch.startX = e.touches[0].pageX; + touch.startY = e.touches[0].pageY; touch.deltaX = 0; + touch.deltaY = 0; touch.t = new Date(); } }, false); this.$wrapper[0].addEventListener('touchmove', function(e) { - var active = self.activeSlide, deltaX; + var active = self.activeSlide, deltaX, deltaY; if (touch.touching) { + + deltaX = e.touches[0].pageX - touch.startX; + deltaY = e.touches[0].pageY - touch.startY; + + if (Math.abs(deltaY - touch.deltaY) > Math.abs(deltaX - touch.deltaX)*2) return; + e.stopPropagation(); e.preventDefault(); - - deltaX = e.touches[0].pageX - touch.start; if (touch.$active == undefined) touch.$active = self.$slides.eq(active); if (deltaX < 0 && touch.deltaX >= 0) { @@ -371,6 +377,7 @@ touch.otherOffsetX = -self.orbitWidth; } touch.deltaX = deltaX; + touch.deltaY = deltaY; touch.$other.css({"left": (touch.otherOffsetX+deltaX)+"px", "z-index": 3}); touch.$active.css({"left": deltaX+"px", "z-index" : 3}); } @@ -380,16 +387,22 @@ var speed = self.options.animationSpeed * (self.orbitWidth - Math.abs(touch.deltaX)) / self.orbitWidth, direction = touch.deltaX > 0 ? 1 : -1; - touch.$other.animate({"left": 0}, speed); - touch.$active.animate({"left": (direction*self.orbitWidth)+"px"}, speed, function() { - self.prevActiveSlide = self.activeSlide; - self.activeSlide = touch.other; - self.setActiveBullet(); - self.setCaption(); - self.resetAndUnlock(); + if (Math.abs(touch.deltaX) < Math.abs(touch.deltaY)) { + touch.$other.css({"z-index": 1}); + touch.$active.css({"left": 0}); touch = {}; - }); - touch.touching = false; + } else { + touch.$other.animate({"left": 0}, speed); + touch.$active.animate({"left": (direction*self.orbitWidth)+"px"}, speed, function() { + self.prevActiveSlide = self.activeSlide; + self.activeSlide = touch.other; + self.setActiveBullet(); + self.setCaption(); + self.resetAndUnlock(); + touch = {}; + }); + touch.touching = false; + } } }, false); }, From 14cc0a398e351f2c50ff7c8261b89cd2a695ec5d Mon Sep 17 00:00:00 2001 From: Mathieu D'Amours Date: Tue, 10 Jan 2012 15:52:29 -0500 Subject: [PATCH 4/5] Detect rollback swipe gesture Detect the case when swipe begins in one direction, but reverses before ending, indicating a desire to return to the original slide. --- jquery.orbit-1.3.0.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/jquery.orbit-1.3.0.js b/jquery.orbit-1.3.0.js index 1102403..822fb1a 100644 --- a/jquery.orbit-1.3.0.js +++ b/jquery.orbit-1.3.0.js @@ -359,7 +359,10 @@ deltaX = e.touches[0].pageX - touch.startX; deltaY = e.touches[0].pageY - touch.startY; - if (Math.abs(deltaY - touch.deltaY) > Math.abs(deltaX - touch.deltaX)*2) return; + dx = deltaX - touch.deltaX; + dy = deltaY - touch.deltaY; + + if (Math.abs(dy) > Math.abs(dx)*2) return; e.stopPropagation(); e.preventDefault(); @@ -377,6 +380,7 @@ touch.otherOffsetX = -self.orbitWidth; } touch.deltaX = deltaX; + touch.dx = dx; touch.deltaY = deltaY; touch.$other.css({"left": (touch.otherOffsetX+deltaX)+"px", "z-index": 3}); touch.$active.css({"left": deltaX+"px", "z-index" : 3}); @@ -384,13 +388,18 @@ }, false); this.$wrapper[0].addEventListener('touchend', function(e) { if (touch.touching) { - var speed = self.options.animationSpeed * (self.orbitWidth - Math.abs(touch.deltaX)) / self.orbitWidth, - direction = touch.deltaX > 0 ? 1 : -1; + var direction = touch.deltaX > 0 ? 1 : -1, + rollback = direction != (touch.dx / Math.abs(touch.dx)); + speed = self.options.animationSpeed * + (rollback ? Math.abs(touch.deltaX) : self.orbitWidth - Math.abs(touch.deltaX)) / + self.orbitWidth; - if (Math.abs(touch.deltaX) < Math.abs(touch.deltaY)) { - touch.$other.css({"z-index": 1}); - touch.$active.css({"left": 0}); - touch = {}; + if (rollback || Math.abs(touch.deltaX) < Math.abs(touch.deltaY)) { + touch.$active.animate({"left": 0}, speed); + touch.$other.animate({"left": touch.otherOffsetX+"px"}, speed, function() { + touch.$other.css({"z-index": 1}); + touch = {}; + }); } else { touch.$other.animate({"left": 0}, speed); touch.$active.animate({"left": (direction*self.orbitWidth)+"px"}, speed, function() { From 0b7380f6595b7edc6e1a325de051100c7bfa2f28 Mon Sep 17 00:00:00 2001 From: Mathieu D'Amours Date: Wed, 25 Jan 2012 08:07:16 -0500 Subject: [PATCH 5/5] Made sure the sliding gesture is not activated when the number of slides is not sufficient Thanks to @gvandenb for pointing out this case --- jquery.orbit-1.3.0.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jquery.orbit-1.3.0.js b/jquery.orbit-1.3.0.js index 822fb1a..5e1505c 100644 --- a/jquery.orbit-1.3.0.js +++ b/jquery.orbit-1.3.0.js @@ -340,7 +340,9 @@ setupSwipe: function() { var self = this, touch = {}; - if (/(iPad|iPhone|iPod)/i.test(navigator.userAgent) == false) return; + if (/(iPad|iPhone|iPod)/i.test(navigator.userAgent) == false + || this.$slides.length < 2) return; + this.$wrapper[0].addEventListener('touchstart', function(e) { if (e.touches.length == 1 && touch.touching === undefined) { self.stopClock();