65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
|
|
import {Campaign} from '../../../models/model-interfaces';
|
|
|
|
@Component({
|
|
selector: 'campaign-navigation',
|
|
templateUrl: './campaign-navigation.component.html',
|
|
styleUrls: ['./campaign-navigation.component.css']
|
|
})
|
|
export class CampaignNavigationComponent implements OnChanges {
|
|
|
|
@Input() campaigns: Campaign[];
|
|
|
|
@Input() selectedCampaignId;
|
|
|
|
@Output() campaignSelect = new EventEmitter();
|
|
|
|
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
|
|
|
|
isLeftScrollVisible = false;
|
|
|
|
isRightScrollVisible = true;
|
|
|
|
repeater;
|
|
|
|
ngOnChanges() {
|
|
this.isRightScrollVisible = this.campaigns.length > 4;
|
|
}
|
|
|
|
select(campaign) {
|
|
this.selectedCampaignId = campaign._id;
|
|
this.campaignSelect.emit(campaign);
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|