217 lines
6.3 KiB
TypeScript
217 lines
6.3 KiB
TypeScript
import {HttpClient} from "@angular/common/http";
|
|
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
|
|
import {FormBuilder, FormControl} from "@angular/forms";
|
|
import {ActivatedRoute, Router} from "@angular/router";
|
|
import {Subscription} from "rxjs";
|
|
import {EnvProperties} from "../../utils/properties/env-properties";
|
|
import {properties} from "../../../../environments/environment";
|
|
import {StringUtils} from "../../utils/string-utils.class";
|
|
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
|
|
import {HelperFunctions} from "../../utils/HelperFunctions.class";
|
|
import Timeout = NodeJS.Timeout;
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'fos-selection',
|
|
templateUrl: 'fos-selection.component.html',
|
|
styleUrls: ['fos-selection.component.less']
|
|
})
|
|
export class FosSelectionComponent {
|
|
public properties: EnvProperties = properties;
|
|
@Input() subjects: string[];
|
|
@Input() inModal: boolean = false;
|
|
@Input() contentHeight: number = 0;
|
|
@ViewChild("searchElement") searchElement: ElementRef;
|
|
|
|
public loading: boolean;
|
|
public fos: any[] = [];
|
|
public fosOptions: Map<string, boolean>;
|
|
public activeSection: string;
|
|
|
|
public keywordControl: FormControl;
|
|
public keyword: string;
|
|
|
|
public viewResults = [];
|
|
|
|
public result = [];
|
|
|
|
private subscriptions: Subscription[] = [];
|
|
private observer: IntersectionObserver;
|
|
private timeout: Timeout;
|
|
@ViewChild('tabs') tabs: ElementRef;
|
|
public sliderInit: boolean = false;
|
|
|
|
constructor(
|
|
private httpClient: HttpClient,
|
|
private fb: FormBuilder,
|
|
private cdr: ChangeDetectorRef,
|
|
private route: ActivatedRoute,
|
|
private _router: Router
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.loading = true;
|
|
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
|
|
this.fos = data['fos'];
|
|
this.convertFosToOptions();
|
|
this.convertFosToOptions();
|
|
if (typeof document !== 'undefined') {
|
|
setTimeout(()=> {
|
|
let slider = UIkit.slider(this.tabs.nativeElement);
|
|
slider.clsActive = 'uk-slider-active';
|
|
slider.updateActiveClasses();
|
|
this.sliderInit = true;
|
|
slider.slides.forEach(item => {
|
|
item.classList.remove('uk-active');
|
|
});
|
|
if (this.route.snapshot.fragment) {
|
|
this.activeSection = this.route.snapshot.fragment;
|
|
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
|
|
slider.show(i);
|
|
} else {
|
|
this.activeSection = this.fos[0].id;
|
|
}
|
|
|
|
this.setObserver();
|
|
this.cdr.detectChanges();
|
|
});
|
|
}
|
|
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
|
|
if(fragment) {
|
|
this.activeSection = fragment;
|
|
if(this.tabs) {
|
|
let slider = UIkit.slider(this.tabs.nativeElement);
|
|
let i = this.fos.findIndex(item => item.id == fragment);
|
|
slider.show(i);
|
|
}
|
|
} else {
|
|
this.activeSection = this.fos[0].id;
|
|
}
|
|
}));
|
|
this.keywordControl = this.fb.control('');
|
|
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
|
this.keyword = value;
|
|
this.findMatches(this.keyword);
|
|
if (typeof document !== 'undefined') {
|
|
setTimeout(() => {
|
|
this.setObserver();
|
|
});
|
|
}
|
|
}));
|
|
this.loading = false;
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
for (let sub of this.subscriptions) {
|
|
sub.unsubscribe();
|
|
}
|
|
if(this.observer) {
|
|
this.observer.disconnect();
|
|
}
|
|
}
|
|
|
|
private setObserver() {
|
|
if(this.observer) {
|
|
this.observer.disconnect();
|
|
}
|
|
this.observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if(entry.isIntersecting) {
|
|
if(this.timeout) {
|
|
clearTimeout(this.timeout);
|
|
}
|
|
this.timeout = setTimeout(() => {
|
|
if(!this.inModal) {
|
|
this._router.navigate(['./'], {
|
|
fragment: entry.target.id,
|
|
relativeTo: this.route,
|
|
state: {disableScroll: true}
|
|
});
|
|
} else {
|
|
this.activeSection = entry.target.id;
|
|
}
|
|
}, 200);
|
|
}
|
|
});
|
|
}, {threshold: 0.1, rootMargin: '-100px'});
|
|
this.fos.forEach(fos => {
|
|
let element = document.getElementById(fos.id);
|
|
if(element) {
|
|
this.observer.observe(element);
|
|
}
|
|
});
|
|
}
|
|
|
|
convertFosToOptions() {
|
|
this.fosOptions = new Map<string, boolean>();
|
|
this.fos.forEach(fos => {
|
|
this.fosOptions.set(fos.id, false);
|
|
if(fos.children) {
|
|
fos.children.forEach(child => {
|
|
this.fosOptions.set(child.id, false);
|
|
if(child.children) {
|
|
child.children.forEach(child2 => {
|
|
this.fosOptions.set(child2.id, this.subjects?.includes(child2.id));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
findMatches(value: string) {
|
|
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
|
let matchLevel1: boolean = false;
|
|
let matchLevel2: boolean = false;
|
|
// 1st level search
|
|
if(this.viewResults.length) {
|
|
this.viewResults = this.viewResults.filter(item => {
|
|
matchLevel1 = !!item.id.includes(value?.toLowerCase());
|
|
// // 2nd level search
|
|
if(item.children?.length && !matchLevel1) {
|
|
item.children = item.children.filter(subItem => {
|
|
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
|
|
// 3rd level search
|
|
if(subItem.children?.length && !matchLevel2) {
|
|
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
|
}
|
|
return subItem.children?.length > 0 || matchLevel2;
|
|
});
|
|
}
|
|
return item.children?.length > 0;
|
|
});
|
|
}
|
|
}
|
|
|
|
highlightKeyword(name) {
|
|
if(name.includes(this.keyword.toLowerCase())) {
|
|
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
|
} else {
|
|
return name;
|
|
}
|
|
}
|
|
|
|
public urlEncodeAndQuote(str: string): string {
|
|
return StringUtils.quote(StringUtils.URIEncode(str));
|
|
}
|
|
|
|
public scrollToId(value: string) {
|
|
HelperFunctions.scrollToId(value);
|
|
this.activeSection = value;
|
|
}
|
|
|
|
public getSelectedSubjects() {
|
|
let checked = Array.from(this.fosOptions, function (entry) {
|
|
return {id: entry[0], checked: entry[1]};
|
|
});
|
|
return checked.filter(sub => sub.checked == true);
|
|
}
|
|
|
|
get calculatedHeight(): number {
|
|
if(this.contentHeight && this.searchElement) {
|
|
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
|
|
}
|
|
}
|
|
} |