Rotating / draging in timepicker on mobile devices

touchSupported: any = ('ontouchstart' in window);
mousedownEvent: any = this.touchSupported ? 'touchstart' : 'mousedown';
mousemoveEvent: any = this.touchSupported ? 'touchmove' : 'mousemove';
mouseupEvent: any = this.touchSupported ? 'touchend' :'mouseup';

mousedown(e: any, space: any) {
 const offset = this.plate.nativeElement.getBoundingClientRect(),
 isTouch = /^touch/.test(e.type),
 x0 = offset.left + this.dialRadius,
 y0 = offset.top + this.dialRadius,
 dx = (isTouch ? e.touches[0] : e).clientX - x0,
 dy = (isTouch ? e.touches[0] : e).clientY - y0,
 z = Math.sqrt(dx * dx + dy * dy);
 let moved = false;

if (space && (z < this.outerRadius - this.tickRadius || z > this.outerRadius + this.tickRadius)) {
 return;
 }
 e.preventDefault();
 e.stopPropagation();


 if (this.showHours) {
 this.setHand(dx, dy, true);
 } else {
 this.setHand(dx, dy, false);
 }

const mousemoveEventMethod = (event: any) => {
 event.preventDefault();
 event.stopPropagation();
 let touch = /^touch/.test(e.type);

const x = touch ? (event.touches[0].clientX -x0) : (event.clientX - x0),
 y = touch ? (event.touches[0].clientY -y0) : (event.clientY - y0);
 if (!moved && x === dx && y === dy) {
 return;
 }
 moved = true;

this.setHand(x, y, false);
 };

const mouseupEventMethod = (event: any) => {
 this.plate.nativeElement.removeEventListener(this.mousemoveEvent, mousemoveEventMethod);
 e.preventDefault();
 const x = event.clientX - x0,
 y = event.clientX - y0;
 if ((space || moved) && x === dx && y === dy) {
 this.setHand(x, y, false);
 }
 this.showMinutesClock();
 this.plate.nativeElement.removeEventListener(this.mouseupEvent, mouseupEventMethod);
 };
 this.plate.nativeElement.addEventListener(this.mousemoveEvent, mousemoveEventMethod, {passive: false});
 this.plate.nativeElement.addEventListener(this.mouseupEvent, mouseupEventMethod, {passive: false});
 }

Damian Gemza staff commented 7 years ago

Dear Felix, Thanks for your sample code! We'll check it, and if it works fine, we'll implement this in next release of MDB Angular. Best Regards, Damian

---

Felix Vanhoutte pro commented 7 years ago

Hi Damian, We hope to see it soon in a release! :) Regards, Felix

---

Felix Vanhoutte pro commented 7 years ago

Hello again We saw there was a new release for mdb for angular, but we noticed this fix for timepickers on mobile devices was not included? Do you know when we could expect this fix? Thanks Felix

---

Damian Gemza staff commented 7 years ago

Dear Felix, We've tried to implement your solution, but there was some problems on Chrome. We'll try to adapt it, and implement it in future. Best Regards, Damian

---

Damian Gemza staff commented 7 years ago

Dear Felix, This problem will be fixed in next release of MDB Angular. Best Regards, Damian

---