From 0e2eb26f95ec706ae4d7d68b9453e37fdf977594 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 2 Dec 2020 11:05:13 +0000 Subject: [PATCH 1/7] Accept `TouchEvent` events in event handlers --- src/index.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/index.ts b/src/index.ts index 9902720..e73ef92 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,7 +18,7 @@ const startPositions: WeakMap = new WeakMap() const constructedElements: WeakMap = new WeakMap() -function moveCropArea(event: MouseEvent | KeyboardEvent) { +function moveCropArea(event: TouchEvent | MouseEvent | KeyboardEvent) { const el = event.currentTarget if (!(el instanceof ImageCropElement)) return const {box, image} = constructedElements.get(el) || {} @@ -57,10 +57,17 @@ function moveCropArea(event: MouseEvent | KeyboardEvent) { dragStartX: event.pageX, dragStartY: event.pageY }) + } else if (event instanceof TouchEvent) { + // Only support a single touch at a time + const {pageX, pageY} = event.changedTouches[0] + dragStartPositions.set(el, { + dragStartX: pageX, + dragStartY: pageY + }) } } -function updateCropArea(event: MouseEvent | KeyboardEvent) { +function updateCropArea(event: TouchEvent | MouseEvent | KeyboardEvent) { const target = event.target if (!(target instanceof HTMLElement)) return @@ -89,7 +96,7 @@ function updateCropArea(event: MouseEvent | KeyboardEvent) { if (deltaX && deltaY) updateDimensions(el, deltaX, deltaY, !(event instanceof KeyboardEvent)) } -function startUpdate(event: MouseEvent) { +function startUpdate(event: TouchEvent | MouseEvent) { const currentTarget = event.currentTarget if (!(currentTarget instanceof HTMLElement)) return @@ -164,7 +171,7 @@ function setInitialPosition(el: ImageCropElement) { updateDimensions(el, side, side) } -function stopUpdate(event: MouseEvent) { +function stopUpdate(event: TouchEvent | MouseEvent) { const el = event.currentTarget if (!(el instanceof ImageCropElement)) return From d6f233d17d16207408cdd629771064372b3b5c42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 2 Dec 2020 11:06:03 +0000 Subject: [PATCH 2/7] Remove unnecessary early return --- src/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index e73ef92..eb26101 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,8 +37,7 @@ function moveCropArea(event: TouchEvent | MouseEvent | KeyboardEvent) { deltaX = 1 } } else if (dragStartPositions.has(el) && event instanceof MouseEvent) { - const pos = dragStartPositions.get(el) - if (!pos) return + const pos = dragStartPositions.get(el)! deltaX = event.pageX - pos.dragStartX deltaY = event.pageY - pos.dragStartY } From a812cac8f0ab04ee3b265d7017beea7773e7e546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 2 Dec 2020 11:07:12 +0000 Subject: [PATCH 3/7] Implement touch event handlers --- src/index.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/index.ts b/src/index.ts index eb26101..197d299 100644 --- a/src/index.ts +++ b/src/index.ts @@ -40,6 +40,13 @@ function moveCropArea(event: TouchEvent | MouseEvent | KeyboardEvent) { const pos = dragStartPositions.get(el)! deltaX = event.pageX - pos.dragStartX deltaY = event.pageY - pos.dragStartY + } else if (dragStartPositions.has(el) && event instanceof TouchEvent) { + // Only support a single touch at a time + const {pageX, pageY} = event.changedTouches[0] + + const {dragStartX, dragStartY} = dragStartPositions.get(el)! + deltaX = pageX - dragStartX + deltaY = pageY - dragStartY } if (deltaX !== 0 || deltaY !== 0) { @@ -90,6 +97,11 @@ function updateCropArea(event: TouchEvent | MouseEvent | KeyboardEvent) { if (!pos) return deltaX = event.pageX - pos.startX - rect.left - window.pageXOffset deltaY = event.pageY - pos.startY - rect.top - window.pageYOffset + } else if (event instanceof TouchEvent) { + const pos = startPositions.get(el) + if (!pos) return + deltaX = event.changedTouches[0].pageX - pos.startX - rect.left - window.pageXOffset + deltaY = event.changedTouches[0].pageY - pos.startY - rect.top - window.pageYOffset } if (deltaX && deltaY) updateDimensions(el, deltaX, deltaY, !(event instanceof KeyboardEvent)) @@ -111,6 +123,7 @@ function startUpdate(event: TouchEvent | MouseEvent) { const direction = target.getAttribute('data-direction') || '' // Change crop area el.addEventListener('mousemove', updateCropArea) + el.addEventListener('touchmove', updateCropArea) if (['nw', 'se'].indexOf(direction) >= 0) el.classList.add('nwse') if (['ne', 'sw'].indexOf(direction) >= 0) el.classList.add('nesw') startPositions.set(el, { @@ -121,6 +134,7 @@ function startUpdate(event: TouchEvent | MouseEvent) { } else { // Move crop area el.addEventListener('mousemove', moveCropArea) + el.addEventListener('touchmove', moveCropArea) } } @@ -178,6 +192,8 @@ function stopUpdate(event: TouchEvent | MouseEvent) { el.classList.remove('nwse', 'nesw') el.removeEventListener('mousemove', updateCropArea) el.removeEventListener('mousemove', moveCropArea) + el.removeEventListener('touchmove', updateCropArea) + el.removeEventListener('touchmove', moveCropArea) } interface Result { @@ -214,8 +230,10 @@ class ImageCropElement extends HTMLElement { image.addEventListener('load', imageReady) this.addEventListener('mouseleave', stopUpdate) + this.addEventListener('touchend', stopUpdate) this.addEventListener('mouseup', stopUpdate) box.addEventListener('mousedown', startUpdate) + box.addEventListener('touchstart', startUpdate) this.addEventListener('keydown', moveCropArea) this.addEventListener('keydown', updateCropArea) From 38679c1197db0e3bd1a8c6ff6a1f4ce1c31ebe41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 2 Dec 2020 11:51:52 +0000 Subject: [PATCH 4/7] Prevent scrolling while touching image-crop --- src/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 87567ae..0700161 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,7 @@ -image-crop { display: block; } +image-crop { + touch-action: none; + display: block; +} image-crop.nesw { cursor: nesw-resize; } image-crop.nwse { cursor: nwse-resize; } image-crop.nesw .crop-box, From 7af61389b3c0bc6c540d8058fc1e17d7b3498339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 2 Dec 2020 11:54:02 +0000 Subject: [PATCH 5/7] Set mobile meta tag on example page --- examples/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/index.html b/examples/index.html index c6f715f..bef74c3 100644 --- a/examples/index.html +++ b/examples/index.html @@ -13,6 +13,7 @@ } + From ac2faee2f66b90ebd2910383a65ae000628ed4e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 2 Dec 2020 12:51:58 +0000 Subject: [PATCH 6/7] Remove wrapper width in example --- examples/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/index.html b/examples/index.html index bef74c3..77b82d0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -3,7 +3,6 @@