diff --git a/assets/js/theme/blocks/blocksWithGrab.js b/assets/js/theme/blocks/blocksWithGrab.js index 4b89ece5e4575023cdaff84a8c0c6bc4a25c4aa4..fc0f094a4fbcdddad2a4610e0a37a15c9d0ebd33 100644 --- a/assets/js/theme/blocks/blocksWithGrab.js +++ b/assets/js/theme/blocks/blocksWithGrab.js @@ -8,7 +8,6 @@ class BlockWithGrab { this.items = this.list.querySelectorAll('.grab-item'); this.previous = this.block.querySelector('.previous'); this.next = this.block.querySelector('.next'); - this.links = this.list.querySelectorAll('a'); this.index = 0; @@ -62,44 +61,36 @@ class BlockWithGrab { } handlePointers () { - let startX, + let endEvents = ['pointerup'], + startX, endX, threshold = 30, - isPointerDown = false, - hasMoved = false; + isPointerDown = false; this.content.style.touchAction = 'pan-y'; - const handlePointerMove = (event) => { - // console.log('pointermove') - this.isManipulated = isPointerDown; - endX = event.clientX; - hasMoved = true; - - if (isPointerDown && hasMoved) { - event.preventDefault(); - this.links.forEach((link) => { - link.style.pointerEvents = "none"; - }); - } - }; - this.content.addEventListener('pointerdown', (event) => { - // console.log('pointerdown') + this.block.addEventListener('pointerdown', (event) => { + this.content.classList.add('is-grabbing'); + + this.items.forEach((item) => { + item.style.pointerEvents = "none"; + }); + startX = event.clientX; isPointerDown = true; - hasMoved = false; - - window.addEventListener('pointermove', handlePointerMove); - window.addEventListener('pointerup', handlePointerUp); }); - - const handlePointerUp = (event) => { - // console.log('pointerup') - window.removeEventListener('pointermove', handlePointerMove); - window.removeEventListener('pointerup', handlePointerUp); - - this.onManipulationEnd(startX, endX, threshold); - }; + + this.block.addEventListener('pointermove', (event) => { + this.isManipulated = isPointerDown; + endX = event.clientX; + }); + + endEvents.forEach(event => { + this.block.addEventListener(event, (event) => { + isPointerDown = false; + this.onManipulationEnd(startX, endX, threshold); + }); + }); } onManipulationEnd (start, end, threshold) { @@ -110,8 +101,8 @@ class BlockWithGrab { } this.content.classList.remove('is-grabbing'); - this.links.forEach((link) => { - link.style.pointerEvents = "all"; + this.items.forEach((item) => { + item.style.pointerEvents = "all"; }); setTimeout(() => { diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index 312329e7a443746849a5e27f293037e5d3a0da2f..31e3213d9a055de44967646be0825a70d5f5fed1 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -33,4 +33,5 @@ scroll-snap-align: start transition: 0.3s opacity &.is-passed - opacity: 0.15 \ No newline at end of file + opacity: 0.15 + pointer-events: none \ No newline at end of file