Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-03 21:14:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of https://github.com/marcosmoura/vue-material into develop

Browse source 
* 'develop' of https://github.com/marcosmoura/vue-material:
  fix ripple effect on touchscreen desktops (#479)
This commit is contained in:
Marcos Moura 2017-02-13 00:17:17 -02:00
commit 911099bce3
1 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/core/components/mdInkRipple/mdInkRipple.vue
View file

@ -7,19 +7,23 @@
<style lang="scss" src="./mdInkRipple.scss"></style>
<script>
const hasTouch = 'ontouchstart' in document;
const getEventName = (type) => {
if (type === 'start') {
return hasTouch ? 'touchstart' : 'mousedown';
}
return hasTouch ? 'touchend' : 'mouseup';
};
const addEvent = (target, type, handler) => {
target.addEventListener(getEventName(type), handler);
if (type === 'start') {
target.addEventListener('mousedown', handler);
target.addEventListener('touchstart', handler);
} else {
target.addEventListener('mouseup', handler);
target.addEventListener('touchend', handler);
}
};
const removeEvent = (target, type, handler) => {
target.removeEventListener(getEventName(type), handler);
if (type === 'start') {
target.removeEventListener('mousedown', handler);
target.removeEventListener('touchstart', handler);
} else {
target.removeEventListener('mouseup', handler);
target.removeEventListener('touchend', handler);
}
};
export default {
@ -135,6 +139,18 @@
removeEvent(document.body, 'end', this.endRipple);
},
startRipple(event) {
if (event.type === 'touchstart') {
this.previous.push('touch');
} else {
this.previous.push('mouse');
}
this.previous = this.previous.splice(this.previous.length - 2, this.previous.length);
if (this.previous.length >= 2 && this.previous[1] === 'touch' && this.previous[0] === 'mouse') {
return;
}
this.clearState();
this.awaitingComplete = window.setTimeout(() => {
this.hasCompleted = true;
@ -169,6 +185,7 @@
init() {
this.rippleElement = this.$el;
this.parentElement = this.getClosestPositionedParent(this.$el.parentNode);
this.previous = ['mouse'];
if (!this.parentElement) {
this.$destroy();