Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Commit

Permalink
fix(swipe): Mouse enable swipe
Browse files Browse the repository at this point in the history 
And fix #37 Consider marking event handler as 'passive'?
  • Loading branch information
@Wikiki
Wikiki committed May 14, 2018
1 parent 7b71e73 commit 51ed4f9
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 24 deletions.
38 changes: 27 additions & 11 deletions dist/bulma-carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,17 @@ class EventEmitter {
}
}

var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}

class Carousel extends EventEmitter {
constructor(selector) {
super();
Expand Down Expand Up @@ -281,7 +292,7 @@ class Carousel extends EventEmitter {
clearInterval(this._autoPlayInterval);
this._autoPlay(this.carousel.dataset.delay || 5000);
}
});
}, supportsPassive ? { passive: true } : false);
});
}

Expand All @@ -294,20 +305,22 @@ class Carousel extends EventEmitter {
clearInterval(this._autoPlayInterval);
this._autoPlay(this.carousel.dataset.delay || 5000);
}
});
}, supportsPassive ? { passive: true } : false);
});
}

// Bind swipe events
this.carousel.addEventListener('touchstart', e => {
this._swipeStart(e);
});
}, supportsPassive ? { passive: true } : false);
this.carousel.addEventListener('touchmove', e => {
e.preventDefault();
});
if (!supportsPassive) {
e.preventDefault();
}
}, supportsPassive ? { passive: true } : false);
this.carousel.addEventListener('touchend', e => {
this._swipeEnd(e);
});
}, supportsPassive ? { passive: true } : false);
}

/**
Expand Down Expand Up @@ -371,11 +384,13 @@ class Carousel extends EventEmitter {
_swipeStart(e) {
e.preventDefault();

e = e ? e : window.event;
e = ('changedTouches' in e) ? e.changedTouches[0] : e;
this._touch = {
start: {
time: new Date().getTime(), // record time when finger first makes contact with surface
x: touchObj.pageX,
y: touchObj.pageY
x: e.pageX,
y: e.pageY
},
dist: {
x: 0,
Expand All @@ -393,10 +408,11 @@ class Carousel extends EventEmitter {
_swipeEnd(e) {
e.preventDefault();

const touchObj = e.changedTouches[0];
e = e ? e : window.event;
e = ('changedTouches' in e) ? e.changedTouches[0] : e;
this._touch.dist = {
x: touchObj.pageX - this._touch.start.x, // get horizontal dist traveled by finger while in contact with surface
y: touchObj.pageY - this._touch.start.y // get vertical dist traveled by finger while in contact with surface
x: e.pageX - this._touch.start.x, // get horizontal dist traveled by finger while in contact with surface
y: e.pageY - this._touch.start.y // get vertical dist traveled by finger while in contact with surface
};

this._handleGesture();
Expand Down
2 changes: 1 addition & 1 deletion dist/bulma-carousel.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 27 additions & 12 deletions src/extension.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import EventEmitter from './events';

var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}

export default class Carousel extends EventEmitter {
constructor(selector) {
super();
Expand Down Expand Up @@ -152,7 +163,7 @@ export default class Carousel extends EventEmitter {
clearInterval(this._autoPlayInterval);
this._autoPlay(this.carousel.dataset.delay || 5000);
}
});
}, supportsPassive ? { passive: true } : false);
});
}

Expand All @@ -165,20 +176,22 @@ export default class Carousel extends EventEmitter {
clearInterval(this._autoPlayInterval);
this._autoPlay(this.carousel.dataset.delay || 5000);
}
});
}, supportsPassive ? { passive: true } : false);
});
}

// Bind swipe events
this.carousel.addEventListener('touchstart', e => {
this._swipeStart(e);
});
}, supportsPassive ? { passive: true } : false);
this.carousel.addEventListener('touchmove', e => {
e.preventDefault();
});
if (!supportsPassive) {
e.preventDefault();
}
}, supportsPassive ? { passive: true } : false);
this.carousel.addEventListener('touchend', e => {
this._swipeEnd(e);
});
}, supportsPassive ? { passive: true } : false);
}

/**
Expand Down Expand Up @@ -242,12 +255,13 @@ export default class Carousel extends EventEmitter {
_swipeStart(e) {
e.preventDefault();

const touchobj = e.changedTouches[0];
e = e ? e : window.event;
e = ('changedTouches' in e) ? e.changedTouches[0] : e;
this._touch = {
start: {
time: new Date().getTime(), // record time when finger first makes contact with surface
x: touchObj.pageX,
y: touchObj.pageY
x: e.pageX,
y: e.pageY
},
dist: {
x: 0,
Expand All @@ -265,10 +279,11 @@ export default class Carousel extends EventEmitter {
_swipeEnd(e) {
e.preventDefault();

const touchObj = e.changedTouches[0];
e = e ? e : window.event;
e = ('changedTouches' in e) ? e.changedTouches[0] : e;
this._touch.dist = {
x: touchObj.pageX - this._touch.start.x, // get horizontal dist traveled by finger while in contact with surface
y: touchObj.pageY - this._touch.start.y // get vertical dist traveled by finger while in contact with surface
x: e.pageX - this._touch.start.x, // get horizontal dist traveled by finger while in contact with surface
y: e.pageY - this._touch.start.y // get vertical dist traveled by finger while in contact with surface
};

this._handleGesture();
Expand Down

0 comments on commit 51ed4f9

Please sign in to comment.