patrick/Home4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SliderComponent code clean 2

Browse Source
This commit is contained in:
Patrick Haßel 2024-11-29 14:40:47 +01:00
parent 0936a7bc47
commit 63830cd58d
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/angular/src/app/shared/slider/slider.component.html
View File

@ -1,4 +1,4 @@
<div #outer class="outer" (mousedown)="change($event)" (mousemove)="change($event)" (mouseup)="end($event)" [style.background]="gradient()"> <div #outer class="outer" (mousedown)="mouseDown(slider, outer, $event)" (mousemove)="mouseMove(slider, outer, $event)" (mouseup)="mouseUp(slider, outer, $event)" [style.background]="gradient()">
<div #slider class="slider" [style.left]="left(percent)" [style.border-color]="colorSlider" [class.ghost]="percentMouse !== null"></div> <div #slider class="slider" [style.left]="left(slider, percent)" [style.border-color]="colorSlider" [class.ghost]="percentMouse !== null"></div>
<div class="slider" [style.left]="left(percentMouse === null ? percent : percentMouse)" [style.border-color]="colorSlider"></div> <div class="slider" [style.left]="left(slider, percentMouse === null ? percent : percentMouse)" [style.border-color]="colorSlider"></div>
</div> </div>

39
src/main/angular/src/app/shared/slider/slider.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core'; import {Component, EventEmitter, Input, Output} from '@angular/core';
const RATE_LIMIT_MS = 300; const RATE_LIMIT_MS = 300;
@ -28,29 +28,34 @@ export class SliderComponent {
@Output() @Output()
onChange = new EventEmitter<number>(); onChange = new EventEmitter<number>();
@ViewChild('outer')
outer!: ElementRef;
@ViewChild('slider')
slider!: ElementRef;
private last: number | null = null; private last: number | null = null;
protected change($event: MouseEvent) { private drag: boolean = false;
protected mouseDown(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent) {
if ($event.buttons !== 1) { if ($event.buttons !== 1) {
return; return;
} }
this.apply($event, false); this.drag = true;
this.apply(slider, outer, $event, false);
} }
protected end($event: MouseEvent) { protected mouseMove(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent) {
this.apply($event, true); this.apply(slider, outer, $event, false);
}
protected mouseUp(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent) {
this.apply(slider, outer, $event, true);
this.drag = false;
this.percentMouse = null; this.percentMouse = null;
} }
private apply($event: MouseEvent, force: boolean) { private apply(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent, force: boolean) {
const sliderHalf = this.slider.nativeElement.offsetWidth / 2; if (!this.drag) {
const offsetWidth = this.outer.nativeElement.offsetWidth; return;
}
const sliderHalf = slider.offsetWidth / 2;
const offsetWidth = outer.offsetWidth;
const currentX = $event.clientX; const currentX = $event.clientX;
this.percentMouse = Math.max(0, Math.min(100, Math.round(100 * (currentX - sliderHalf) / offsetWidth))); this.percentMouse = Math.max(0, Math.min(100, Math.round(100 * (currentX - sliderHalf) / offsetWidth)));
const now = new Date().getTime(); const now = new Date().getTime();
@ -65,11 +70,11 @@ export class SliderComponent {
return `linear-gradient(to right, ${this.color0}, ${this.color1})`; return `linear-gradient(to right, ${this.color0}, ${this.color1})`;
} }
left(percent: number): string { left(slider: HTMLElement, percent: number): string {
if (!this.slider) { if (!slider) {
return "0%"; return "0%";
} }
return `calc(${percent}% - ${this.slider.nativeElement.offsetWidth / 2}px)`; return `calc(${percent}% - ${slider.offsetWidth / 2}px)`;
} }
} }