From 61efa75e846edbc617087ae8ca58b7c296036131 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Thu, 22 Feb 2024 17:02:28 +0100
Subject: [PATCH] fix js
---
assets/js/theme/blocks/blocksWithGrab.js | 57 ++++++++++--------------
assets/sass/_theme/_utils.sass | 3 +-
2 files changed, 26 insertions(+), 34 deletions(-)
diff --git a/assets/js/theme/blocks/blocksWithGrab.js b/assets/js/theme/blocks/blocksWithGrab.js
index 4b89ece5..fc0f094a 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 312329e7..31e3213d 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
--
GitLab