From 8e8ae601e352c8f7ae5e9a227afc1bbba88e06ed Mon Sep 17 00:00:00 2001 From: Egor Date: Wed, 27 Dec 2017 19:36:01 -0800 Subject: [PATCH] better color selection for mobile --- .../lights-tab/color-picker/component.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/web/app/pods/components/lights-tab/color-picker/component.js b/web/app/pods/components/lights-tab/color-picker/component.js index 2545004..627bef2 100644 --- a/web/app/pods/components/lights-tab/color-picker/component.js +++ b/web/app/pods/components/lights-tab/color-picker/component.js @@ -9,6 +9,21 @@ export default Component.extend({ canvasContext: null, pressingDown: false, + // for mobile + touchStop() { + this.set('pressingDown', false); + }, + + touchMove(event) { + if (this.get('pressingDown')) { + this.mouseDown(event); + } + }, + + touchStart() { + this.set('pressingDown', true); + }, + mouseUp() { this.set('pressingDown', false); }, @@ -21,8 +36,10 @@ export default Component.extend({ mouseDown(event) { let canvasOffset = $(this.get('canvas')).offset(), - canvasX = Math.floor(event.pageX - canvasOffset.left), - canvasY = Math.floor(event.pageY - canvasOffset.top); + pageOffsetX = event.pageX === undefined ? event.originalEvent.touches[0].pageX : event.pageX, + pageOffsetY = event.pageY === undefined ? event.originalEvent.touches[0].pageY : event.pageY, + canvasX = Math.floor(pageOffsetX - canvasOffset.left), + canvasY = Math.floor(pageOffsetY - canvasOffset.top); // get current pixel let imageData = this.get('canvasContext').getImageData(canvasX, canvasY, 1, 1),