64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
|
|
|
|
import {Decoration} from '../../../models/model-interfaces';
|
|
|
|
|
|
@Component({
|
|
selector: 'cc-decoration-navigation',
|
|
templateUrl: './decoration-navigation.component.html',
|
|
styleUrls: ['./decoration-navigation.component.css']
|
|
})
|
|
export class DecorationNavigationComponent implements OnChanges {
|
|
|
|
@Input() decorations: Decoration[];
|
|
|
|
@Output() select = new EventEmitter();
|
|
|
|
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
|
|
|
|
isLeftScrollVisible = false;
|
|
|
|
isRightScrollVisible = true;
|
|
|
|
repeater;
|
|
|
|
ngOnChanges() {
|
|
this.isRightScrollVisible = this.decorations.length > 6;
|
|
}
|
|
|
|
public scrollList(scrollValue: number): void {
|
|
const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;
|
|
|
|
this.panel.nativeElement.scrollLeft += scrollValue;
|
|
|
|
const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;
|
|
|
|
if (scrollValue < 0) {
|
|
this.isRightScrollVisible = true;
|
|
}
|
|
|
|
if (updatedScrollLeftValue > 0) {
|
|
if (prevScrollLeftValue === updatedScrollLeftValue) {
|
|
this.isRightScrollVisible = false;
|
|
this.clearRepeater();
|
|
}
|
|
this.isLeftScrollVisible = true;
|
|
} else {
|
|
this.isLeftScrollVisible = false;
|
|
this.clearRepeater();
|
|
}
|
|
}
|
|
|
|
setRepeater(value: number) {
|
|
this.repeater = setInterval(() => this.scrollList(value), 20);
|
|
}
|
|
|
|
clearRepeater() {
|
|
clearInterval(this.repeater)
|
|
}
|
|
|
|
selectDecoration($event) {
|
|
this.select.emit($event);
|
|
}
|
|
}
|