[44] - Unable to scroll past block on mobile

src/blocks/image-comparison/frontend.js

@@ -62,19 +62,15 @@ if (imageComparisonBlocks?.length > 0) {
       'wp-block-bigbite-image-comparison--horizontal',
     );
 
-    const client = hasHorizontalAxisDivider ? event?.clientY : event?.clientX;
-    const targetDOMRect = event?.target?.getBoundingClientRect();
-    const targetPositionOffset = hasHorizontalAxisDivider ? targetDOMRect?.y : targetDOMRect?.x;
-    let position =
-      ((client - targetPositionOffset) /
-        (hasHorizontalAxisDivider ? targetDOMRect?.height : targetDOMRect?.width)) *
-      100;
+    const containerRect = imageContainer.getBoundingClientRect();
+    const client = hasHorizontalAxisDivider ? event.clientY : event.clientX;
+    const offset = hasHorizontalAxisDivider ? containerRect.y : containerRect.x;
+    const size = hasHorizontalAxisDivider ? containerRect.height : containerRect.width;
 
-    if (position < 0) {
-      position = 0;
-    } else if (position > 100) {
-      position = 100;
-    }
+    let position = ((client - offset) / size) * 100;
+
+    if (position < 0) position = 0;
+    if (position > 100) position = 100;
 
     imageComparisonBlock.style.setProperty(
       '--bigbite-image-comparison-divider-initial-position',
@@ -145,13 +141,62 @@ if (imageComparisonBlocks?.length > 0) {
       '.wp-block-bigbite-image-comparison__divider button',
     );
 
-    imageContainer.addEventListener('pointerdown', (event) => activateIsPointerDownState(event));
-    imageContainer.addEventListener('pointermove', (event) =>
-      pointerController(event, imageComparisonBlock),
-    );
-    imageContainer.addEventListener('pointerleave', (event) =>
-      pointerController(event, imageComparisonBlock),
-    );
+    // Check if it's a touch device
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+    // If it's a touch device, only allow dragging from the divider button
+    if (isTouchDevice) {
+      dividerButton.addEventListener('pointerdown', (event) => {
+        activateIsPointerDownState(event);
+
+        /**
+         * Pointer move and up handlers
+         * @param {object} moveEvent pointermove event
+         * @param {object} upEvent pointerup event
+         *
+         */
+        const moveHandler = (moveEvent) => pointerController(moveEvent, imageComparisonBlock);
+
+        /**
+         * Pointer up handler
+         *
+         */
+        const upHandler = () => {
+          deactivateIsPointerDownState();
+          window.removeEventListener('pointermove', moveHandler);
+          window.removeEventListener('pointerup', upHandler);
+        };
+
+        window.addEventListener('pointermove', moveHandler);
+        window.addEventListener('pointerup', upHandler);
+      });
+    } else {
+      // If it's not a touch device, allow dragging from anywhere on the image
+      imageContainer.addEventListener('pointerdown', (event) => {
+        activateIsPointerDownState(event);
+
+        /**
+         * Pointer move and up handlers
+         * @param {object} moveEvent pointermove event
+         * @param {object} upEvent pointerup event
+         *
+         */
+        const moveHandler = (moveEvent) => pointerController(moveEvent, imageComparisonBlock);
+
+        /**
+         * Pointer up handler
+         *
+         */
+        const upHandler = () => {
+          deactivateIsPointerDownState();
+          window.removeEventListener('pointermove', moveHandler);
+          window.removeEventListener('pointerup', upHandler);
+        };
+
+        window.addEventListener('pointermove', moveHandler);
+        window.addEventListener('pointerup', upHandler);
+      });
+    }
 
     dividerButton.addEventListener('keydown', (event) =>
       keyboardController(event, imageComparisonBlock),

src/blocks/image-comparison/styles/frontend.scss

@@ -5,3 +5,11 @@
 .wp-block-bigbite-image-comparison--horizontal .wp-block-bigbite-image-comparison__container {
   cursor: row-resize;
 }
+
+.wp-block-bigbite-image-comparison__divider button {
+  touch-action: pan-y;
+}
+
+.wp-block-bigbite-image-comparison--horizontal .wp-block-bigbite-image-comparison__divider button {
+  touch-action: pan-x;
+}

src/blocks/image-comparison/styles/shared.scss

@@ -4,7 +4,6 @@
 
 .wp-block-bigbite-image-comparison__container {
   max-width: 100%;
-  touch-action: none;
   border: 0 !important;
   padding: 0 !important;
   line-height: 0 !important;
@@ -24,7 +23,6 @@
   display: inline-flex;
   position: absolute;
   align-items: center;
-  pointer-events: none;
   transform: translate(-50%, 0);
   left: calc(var(--bigbite-image-comparison-divider-initial-position) * 1%);
 
@@ -46,7 +44,6 @@
   padding: 8px;
   display: flex;
   align-items: center;
-  pointer-events: none;
   justify-content: center;
   background: var(--bigbite-image-comparison-divider-box-colour);
   gap: calc(var(--bigbite-image-comparison-divider-icon-gap) * 1px);