From c83f6b6a917c764b6c3d19927963150b871c4fc0 Mon Sep 17 00:00:00 2001 From: Djamil Legato Date: Sun, 19 Apr 2015 19:09:10 -0700 Subject: [PATCH] Tweaked swipe tolerance to take into account the Y axis while scrolling. This should make it harder to trigger the offcanvas open/close while scrolling and expects more of a horizontal swipe with little tolerance on the Y axis. Tweaked swipe tolerance to take into account the Y axis. This should make the trigger smarter about understanding if the intention is to scroll or open the offcanvas. It expects more of an horizontal swipe with little tolerance on the Y axis , else it scrolls. --- assets/common/application/offcanvas/index.js | 35 ++++++++++++++------ assets/common/js/main.js | 35 ++++++++++++++------ 2 files changed, 48 insertions(+), 22 deletions(-) diff --git a/assets/common/application/offcanvas/index.js b/assets/common/application/offcanvas/index.js index 54a540572..98e786f0a 100644 --- a/assets/common/application/offcanvas/index.js +++ b/assets/common/application/offcanvas/index.js @@ -61,9 +61,15 @@ var Offcanvas = new prime({ this.dragging = false; this.opened = false; this.preventOpen = false; - this.offsetX = { - start: 0, - current: 0 + this.offset = { + x: { + start: 0, + current: 0 + }, + y: { + start: 0, + current: 0 + } }; this.bodyEl = $('body'); @@ -121,7 +127,7 @@ var Offcanvas = new prime({ end: msPointerSupported ? 'MSPointerUp' : 'touchend' }; - this._scrollBound = decouple(this.htmlEl, 'scroll', this.bound('_bodyScroll')); + this._scrollBound = decouple(window, 'scroll', this.bound('_bodyScroll')); this.bodyEl.on(touch.move, this.bound('_bodyMove')); this.panel.on(touch.start, this.bound('_touchStart')); this.panel.on('touchcancel', this.bound('_touchCancel')); @@ -160,7 +166,7 @@ var Offcanvas = new prime({ end: msPointerSupported ? 'MSPointerUp' : 'touchend' }; - this.htmlEl[0].removeEventListener('scroll', this._scrollBound); + window.removeEventListener('scroll', this._scrollBound); this.bodyEl.off(touch.move, this.bound('_bodyMove')); this.panel.off(touch.start, this.bound('_touchStart')); this.panel.off('touchcancel', this.bound('_touchCancel')); @@ -235,7 +241,7 @@ var Offcanvas = new prime({ _translateXTo: function(x) { var panel = this.panel[0]; - this.offsetX.current = x; + this.offset.x.current = x; panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)'; }, @@ -253,6 +259,8 @@ var Offcanvas = new prime({ _bodyMove: function() { if (this.moved) { event.preventDefault(); } this.dragging = true; + + return false; }, _touchStart: function(event) { @@ -261,7 +269,8 @@ var Offcanvas = new prime({ this.moved = false; this.opening = false; this.dragging = false; - this.offsetX.start = event.touches[0].pageX; + this.offset.x.start = event.touches[0].pageX; + this.offset.y.start = event.touches[0].pageY; this.preventOpen = (!this.opened && this.offcanvas[0].clientWidth !== 0); }, @@ -275,11 +284,13 @@ var Offcanvas = new prime({ var placement = (this.bodyEl.hasClass('g-offcanvas-right') ? -1 : 1), // 1: left, -1: right place = placement < 0 ? 'right' : 'left', - diffX = clamp(event.touches[0].clientX - this.offsetX.start, -this.options.padding, this.options.padding), - translateX = this.offsetX.current = diffX, + diffX = clamp(event.touches[0].clientX - this.offset.x.start, -this.options.padding, this.options.padding), + translateX = this.offset.x.current = diffX, + diffY = Math.abs(event.touches[0].pageY - this.offset.y.start), overlayOpacity; if (Math.abs(translateX) > this.options.padding) { return; } + if (diffY > 5 && !this.moved) { return; } if (Math.abs(diffX) > 0) { this.opening = true; @@ -309,9 +320,9 @@ var Offcanvas = new prime({ _touchEnd: function(event) { if (this.moved) { - var tolerance = Math.abs(this.offsetX.current) > this.tolerance, + var tolerance = Math.abs(this.offset.x.current) > this.tolerance, placement = this.bodyEl.hasClass('g-offcanvas-right') ? true : false, - direction = !placement ? (this.offsetX.current < 0) : (this.offsetX.current > 0); + direction = !placement ? (this.offset.x.current < 0) : (this.offset.x.current > 0); this.opening = tolerance ? !direction : direction; this.opened = !this.opening; @@ -319,6 +330,8 @@ var Offcanvas = new prime({ } this.moved = false; + + return true; }, _checkTogglers: function(mutator) { diff --git a/assets/common/js/main.js b/assets/common/js/main.js index dd110c299..03d70a713 100644 --- a/assets/common/js/main.js +++ b/assets/common/js/main.js @@ -331,9 +331,15 @@ var Offcanvas = new prime({ this.dragging = false; this.opened = false; this.preventOpen = false; - this.offsetX = { - start: 0, - current: 0 + this.offset = { + x: { + start: 0, + current: 0 + }, + y: { + start: 0, + current: 0 + } }; this.bodyEl = $('body'); @@ -391,7 +397,7 @@ var Offcanvas = new prime({ end: msPointerSupported ? 'MSPointerUp' : 'touchend' }; - this._scrollBound = decouple(this.htmlEl, 'scroll', this.bound('_bodyScroll')); + this._scrollBound = decouple(window, 'scroll', this.bound('_bodyScroll')); this.bodyEl.on(touch.move, this.bound('_bodyMove')); this.panel.on(touch.start, this.bound('_touchStart')); this.panel.on('touchcancel', this.bound('_touchCancel')); @@ -430,7 +436,7 @@ var Offcanvas = new prime({ end: msPointerSupported ? 'MSPointerUp' : 'touchend' }; - this.htmlEl[0].removeEventListener('scroll', this._scrollBound); + window.removeEventListener('scroll', this._scrollBound); this.bodyEl.off(touch.move, this.bound('_bodyMove')); this.panel.off(touch.start, this.bound('_touchStart')); this.panel.off('touchcancel', this.bound('_touchCancel')); @@ -505,7 +511,7 @@ var Offcanvas = new prime({ _translateXTo: function(x) { var panel = this.panel[0]; - this.offsetX.current = x; + this.offset.x.current = x; panel.style[prefix.css + 'transform'] = panel.style.transform = 'translate3d(' + x + 'px, 0, 0)'; }, @@ -523,6 +529,8 @@ var Offcanvas = new prime({ _bodyMove: function() { if (this.moved) { event.preventDefault(); } this.dragging = true; + + return false; }, _touchStart: function(event) { @@ -531,7 +539,8 @@ var Offcanvas = new prime({ this.moved = false; this.opening = false; this.dragging = false; - this.offsetX.start = event.touches[0].pageX; + this.offset.x.start = event.touches[0].pageX; + this.offset.y.start = event.touches[0].pageY; this.preventOpen = (!this.opened && this.offcanvas[0].clientWidth !== 0); }, @@ -545,11 +554,13 @@ var Offcanvas = new prime({ var placement = (this.bodyEl.hasClass('g-offcanvas-right') ? -1 : 1), // 1: left, -1: right place = placement < 0 ? 'right' : 'left', - diffX = clamp(event.touches[0].clientX - this.offsetX.start, -this.options.padding, this.options.padding), - translateX = this.offsetX.current = diffX, + diffX = clamp(event.touches[0].clientX - this.offset.x.start, -this.options.padding, this.options.padding), + translateX = this.offset.x.current = diffX, + diffY = Math.abs(event.touches[0].pageY - this.offset.y.start), overlayOpacity; if (Math.abs(translateX) > this.options.padding) { return; } + if (diffY > 5 && !this.moved) { return; } if (Math.abs(diffX) > 0) { this.opening = true; @@ -579,9 +590,9 @@ var Offcanvas = new prime({ _touchEnd: function(event) { if (this.moved) { - var tolerance = Math.abs(this.offsetX.current) > this.tolerance, + var tolerance = Math.abs(this.offset.x.current) > this.tolerance, placement = this.bodyEl.hasClass('g-offcanvas-right') ? true : false, - direction = !placement ? (this.offsetX.current < 0) : (this.offsetX.current > 0); + direction = !placement ? (this.offset.x.current < 0) : (this.offset.x.current > 0); this.opening = tolerance ? !direction : direction; this.opened = !this.opening; @@ -589,6 +600,8 @@ var Offcanvas = new prime({ } this.moved = false; + + return true; }, _checkTogglers: function(mutator) {