From eb0030b474f691894ea24634e471ffb088423a40 Mon Sep 17 00:00:00 2001 From: Gentyspun Date: Tue, 30 Sep 2025 10:30:41 +0100 Subject: [PATCH 1/2] Fix: fixes issue with block not being scrollable on touch devices --- src/blocks/image-comparison/frontend.js | 83 ++++++++++++++----- .../image-comparison/styles/frontend.scss | 8 ++ .../image-comparison/styles/shared.scss | 6 +- 3 files changed, 75 insertions(+), 22 deletions(-) diff --git a/src/blocks/image-comparison/frontend.js b/src/blocks/image-comparison/frontend.js index 62b9eea..26e264a 100644 --- a/src/blocks/image-comparison/frontend.js +++ b/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), diff --git a/src/blocks/image-comparison/styles/frontend.scss b/src/blocks/image-comparison/styles/frontend.scss index 3dea0b4..eab0dbe 100644 --- a/src/blocks/image-comparison/styles/frontend.scss +++ b/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; +} diff --git a/src/blocks/image-comparison/styles/shared.scss b/src/blocks/image-comparison/styles/shared.scss index 135ba5a..c106e5d 100644 --- a/src/blocks/image-comparison/styles/shared.scss +++ b/src/blocks/image-comparison/styles/shared.scss @@ -4,7 +4,7 @@ .wp-block-bigbite-image-comparison__container { max-width: 100%; - touch-action: none; + // touch-action: none; border: 0 !important; padding: 0 !important; line-height: 0 !important; @@ -24,7 +24,7 @@ display: inline-flex; position: absolute; align-items: center; - pointer-events: none; + // pointer-events: none; transform: translate(-50%, 0); left: calc(var(--bigbite-image-comparison-divider-initial-position) * 1%); @@ -46,7 +46,7 @@ padding: 8px; display: flex; align-items: center; - pointer-events: none; + // pointer-events: none; justify-content: center; background: var(--bigbite-image-comparison-divider-box-colour); gap: calc(var(--bigbite-image-comparison-divider-icon-gap) * 1px); From 8052ddba592794ef118d7ab50179131c7625eb91 Mon Sep 17 00:00:00 2001 From: Gentyspun Date: Tue, 30 Sep 2025 10:40:07 +0100 Subject: [PATCH 2/2] Styles: removes comments --- src/blocks/image-comparison/styles/shared.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/blocks/image-comparison/styles/shared.scss b/src/blocks/image-comparison/styles/shared.scss index c106e5d..5291c13 100644 --- a/src/blocks/image-comparison/styles/shared.scss +++ b/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);