Topic: Rotating / draging in timepicker on mobile devices

Felix Vanhoutte pro asked 4 years ago


Hello, We found that rotating / draging around in a timepicker on mobile devices does not work. I already looked into the code and created a working version which I will include. Is it possible to review this and include it in a new version of MDB Angular? We need it for our clients, but we are not allowed to make changes ourself to external libraries. Modifications made: variables:
touchSupported: any = ('ontouchstart' in window);
mousedownEvent: any = this.touchSupported ? 'touchstart' : 'mousedown';
mousemoveEvent: any = this.touchSupported ? 'touchmove' : 'mousemove';
mouseupEvent: any = this.touchSupported ? 'touchend' :'mouseup';
methods:
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 4 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 4 years ago

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

Felix Vanhoutte pro commented 4 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 4 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 4 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags