IntenseWebs/gantry5
3
0
Fork 0
mirror of https://github.com/gantry/gantry5.git synced 2026-08-19 01:15:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source 
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.
This commit is contained in:
Djamil Legato
2015-04-19 19:09:10 -07:00
parent 3e042de86d
commit c83f6b6a91
2 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/common/application/offcanvas/index.js
+24 -11
View File
@@ -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) {
assets/common/js/main.js
+24 -11
View File
@@ -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) {