LED brightness UI (#520)

* Add nouislider * Add LEDBrightnessComponent * Move LEDBrightnessComponent to correct folder * Add LED brightness page to side menu and device routes * Add LEDBrightnessComponent to device index file * Add LEDBrightnessComponent and NouisliderModule to shared module * Remove ngModelChange from LEDBrightnessComponent until onChange is implemented * Fix stylelint issue in led brightness component * Add nouislider files to webpack.config.js * Add adjusting LED brightness sliders with arrow keys * Various tweaks to LEDBrightnessComponent * Fix linting issues in LEDBrightnessComponent * Allow "::ng-deep" pseudo element in stylelint config * Add reading LED brightness settings from user configuration * led-brightness save * Move slider to its own wrapper component, add debounce for slider change events * Small fixes to imports and exports of SliderWrapperComponent * Fix slide component making change event when initial value is set * Export SliderPips interface * Fix LED Brightness slider pips * Add support for value unit in SliderWrapperComponent * Add a bit of space before LED brightness sliders so the slider handle doesn't go beyond the page in the min position * Implement onDestroy, fix slider pip values and imports in LEDBrightnessComponent * Fix imports, implement onDestroy in SliderWrapperComponent * Move fix for slider pip value style to global styles file * Reorder stylelint rules
2017-12-27 21:10:55 +02:00
parent 5ceca41e0f
commit 90f56c350e
19 changed files with 2098 additions and 557 deletions
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
+++ b/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
@@ -0,0 +1,83 @@
+import { AfterViewInit, Component, EventEmitter, forwardRef, Input, Output, OnDestroy, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NouisliderComponent } from 'ng2-nouislider/src/nouislider';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+export interface SliderPips {
+    mode: string;
+    values: number[];
+    density: number;
+    stepped?: boolean;
+}
+
+@Component({
+    selector: 'slider-wrapper',
+    templateUrl: './slider-wrapper.component.html',
+    styleUrls: ['./slider-wrapper.component.scss'],
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderWrapperComponent), multi: true }
+    ]
+})
+export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
+    @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @Input() min: number;
+    @Input() max: number;
+    @Input() step: number;
+    @Input() pips: SliderPips;
+    @Input() valueUnit: string;
+    @Output() onChange = new EventEmitter<number>();
+
+    public value: number;
+    private changeObserver$: Observer<number>;
+    private changeDebounceTime: number = 300;
+
+    ngAfterViewInit(): void {
+        if (this.pips) {
+            this.slider.slider.pips(this.pips);
+        }
+
+        // Hide tooltips and show them when dragging slider handle
+        this.slider.slider.target.querySelector('.noUi-tooltip').style.display = 'none';
+
+        this.slider.slider.on('start', function() {
+            this.target.querySelector('.noUi-tooltip').style.display = 'block';
+        });
+        this.slider.slider.on('end', function() {
+            this.target.querySelector('.noUi-tooltip').style.display = 'none';
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.changeObserver$) {
+            this.changeObserver$.complete();
+        }
+    }
+
+    writeValue(value: number): void {
+        this.value = value || this.min;
+    }
+
+    registerOnChange(fn: any): void {
+        this.propagateChange = fn;
+    }
+
+    registerOnTouched() {}
+
+    onSliderChange(value: number): void {
+        if (!this.changeObserver$) {
+            Observable.create(observer => {
+                this.changeObserver$ = observer;
+            }).debounceTime(this.changeDebounceTime)
+            .distinctUntilChanged()
+            .subscribe(this.propagateChange);
+
+            return; // No change event on first change as the value is just being set
+        }
+        this.changeObserver$.next(value);
+    }
+
+    private propagateChange: any = () => {};
+}