Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 4x 4x 4x 4x 4x 10x 10x 10x 2x 10x 2x 10x 2x 10x 2x 10x 2x 10x 5x 5x 5x |
window.customElements.define('touch-swipe', class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
.appendChild(this._generateTemplate().content.cloneNode(true))
this._onStartBind = this._onStart.bind(this)
this._onEndBind = this._onEnd.bind(this)
this._threshold = 30
this._coords = {
endX: 0,
endY: 0,
startX: 0,
startY: 0,
}
}
_generateTemplate() {
const template = document.createElement('template')
template.innerHTML = '<slot></slot>'
return template
}
connectedCallback() {
this.$slotElement = this.firstElementChild
Eif (this.$slotElement) {
this.$slotElement.addEventListener('touchstart', this._onStartBind, {passive: true})
this.$slotElement.addEventListener('touchend', this._onEndBind)
}
}
disconnectedCallback() {
Eif (this.$slotElement) {
this.$slotElement.removeEventListener('touchstart', this._onStartBind)
this.$slotElement.removeEventListener('touchend', this._onEndBind)
}
}
_onStart(event) {
this._coords.startX = event.changedTouches[0].clientX
this._coords.startY = event.changedTouches[0].clientY
}
_onEnd(event) {
this._coords.endX = event.changedTouches[0].clientX
this._coords.endY = event.changedTouches[0].clientY
this._dispatch()
}
_getEventName() {
const threshold = this._threshold
const { startX, startY, endX, endY } = this._coords
let eventName
if (endX < startX && Math.abs(endY - startY) < threshold) {
eventName = 'left'
}
if (endX > startX && Math.abs(endX - startX) > threshold) {
eventName = 'right'
}
if (endY < startY && Math.abs(endX - startX) < threshold) {
eventName = 'up'
}
if (endY > startY && Math.abs(endY - startY) > threshold) {
eventName = 'down'
}
if (endY === startY && endX === startX) {
eventName = 'tap'
}
return eventName
}
_dispatch() {
const eventName = this._getEventName()
Eif (eventName && this.$slotElement) {
this.$slotElement.dispatchEvent(new CustomEvent('touch-swipe', { detail: eventName }))
}
}
})
|