From 0936a7bc47f03bea8e5e901d50a55e1d205a4964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Fri, 29 Nov 2024 13:25:41 +0100
Subject: [PATCH] SliderComponent code clean

---
 .../src/app/shared/slider/slider.component.html       |  4 ++--
 .../src/app/shared/slider/slider.component.less       |  5 +++++
 .../angular/src/app/shared/slider/slider.component.ts | 11 +++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/main/angular/src/app/shared/slider/slider.component.html b/src/main/angular/src/app/shared/slider/slider.component.html
index 66c9c22..ccb426e 100644
--- a/src/main/angular/src/app/shared/slider/slider.component.html
+++ b/src/main/angular/src/app/shared/slider/slider.component.html
@@ -1,4 +1,4 @@
 <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 class="slider" [style.left]="left(percent2 || percent)" [style.border-color]="colorSlider"></div>
+  <div #slider class="slider" [style.left]="left(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>
diff --git a/src/main/angular/src/app/shared/slider/slider.component.less b/src/main/angular/src/app/shared/slider/slider.component.less
index 91006d3..b27d2db 100644
--- a/src/main/angular/src/app/shared/slider/slider.component.less
+++ b/src/main/angular/src/app/shared/slider/slider.component.less
@@ -15,4 +15,9 @@
     border: @border solid black;
   }
 
+  .ghost {
+    opacity: 30%;
+  }
+
 }
+
diff --git a/src/main/angular/src/app/shared/slider/slider.component.ts b/src/main/angular/src/app/shared/slider/slider.component.ts
index 24233af..5728fed 100644
--- a/src/main/angular/src/app/shared/slider/slider.component.ts
+++ b/src/main/angular/src/app/shared/slider/slider.component.ts
@@ -14,7 +14,7 @@ export class SliderComponent {
   @Input()
   percent!: number;
 
-  protected percent2: number | null = null;
+  protected percentMouse: number | null = null;
 
   @Input()
   color0!: string;
@@ -45,17 +45,20 @@ export class SliderComponent {
 
   protected end($event: MouseEvent) {
     this.apply($event, true);
-    this.percent2 = null;
+    this.percentMouse = null;
   }
 
   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();
     if (!force && this.last !== null && now - this.last < RATE_LIMIT_MS) {
       return;
     }
     this.last = now;
-    this.onChange.emit(this.percent2);
+    this.onChange.emit(this.percentMouse);
   }
 
   gradient(): string {