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

SliderComponent code clean

Browse Source
This commit is contained in:
Patrick Haßel 2024-11-29 13:25:41 +01:00
parent 116158ab1f
commit 0936a7bc47
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
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)="change($event)" (mousemove)="change($event)" (mouseup)="end($event)" [style.background]="gradient()">
<div #slider class="slider" [style.left]="left(percent)" [style.border-color]="colorSlider" [style.opacity]="percent2 === null ? '100%': '20%'"></div> <div #slider class="slider" [style.left]="left(percent)" [style.border-color]="colorSlider" [class.ghost]="percentMouse !== null"></div>
<div class="slider" [style.left]="left(percent2 || percent)" [style.border-color]="colorSlider"></div> <div class="slider" [style.left]="left(percentMouse === null ? percent : percentMouse)" [style.border-color]="colorSlider"></div>
</div> </div>

5
src/main/angular/src/app/shared/slider/slider.component.less
View File

@ -15,4 +15,9 @@
border: @border solid black; border: @border solid black;
} }
.ghost {
opacity: 30%;
} }
}

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

@ -14,7 +14,7 @@ export class SliderComponent {
@Input() @Input()
percent!: number; percent!: number;
protected percent2: number | null = null; protected percentMouse: number | null = null;
@Input() @Input()
color0!: string; color0!: string;
@ -45,17 +45,20 @@ export class SliderComponent {
protected end($event: MouseEvent) { protected end($event: MouseEvent) {
this.apply($event, true); this.apply($event, true);
this.percent2 = null; this.percentMouse = null;
} }
private apply($event: MouseEvent, force: boolean) { private apply($event: MouseEvent, force: boolean) {
this.percent2 = Math.max(0, Math.min(100, Math.round(100 * ($event.clientX - this.slider.nativeElement.offsetWidth / 2) / this.outer.nativeElement.offsetWidth))); const sliderHalf = this.slider.nativeElement.offsetWidth / 2;
const offsetWidth = this.outer.nativeElement.offsetWidth;
const currentX = $event.clientX;
this.percentMouse = Math.max(0, Math.min(100, Math.round(100 * (currentX - sliderHalf) / offsetWidth)));
const now = new Date().getTime(); const now = new Date().getTime();
if (!force && this.last !== null && now - this.last < RATE_LIMIT_MS) { if (!force && this.last !== null && now - this.last < RATE_LIMIT_MS) {
return; return;
} }
this.last = now; this.last = now;
this.onChange.emit(this.percent2); this.onChange.emit(this.percentMouse);
} }
gradient(): string { gradient(): string {