MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into angular-14

This commit is contained in:
Konstantinos Triantafyllou 2022-10-24 16:37:14 +03:00
parent 84911550be b0e77b17a9
commit cdffb018b6
5 changed files with 53 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
monitor/methodology/methodology.module.ts
View File

@ -1,7 +1,6 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {TerminologyComponent} from "./terminology.component";
import {SeeHowItWorksComponent} from "./see-how-it-works.component";
import {MethodolocigalApproachComponent} from "./methodological-approach.component";
import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
@ -15,7 +14,7 @@ import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
import {HelperModule} from "../../utils/helper/helper.module";
@NgModule({
declarations: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent],
declarations: [TerminologyComponent, MethodolocigalApproachComponent],
imports: [CommonModule, RouterModule.forChild([
{
path: '',
@ -27,11 +26,6 @@ import {HelperModule} from "../../utils/helper/helper.module";
path: 'terminology',
component: TerminologyComponent,
canDeactivate: [PreviousRouteRecorder]
},
{
path: 'how',
component: SeeHowItWorksComponent,
canDeactivate: [PreviousRouteRecorder]
},
{
path: 'methodological-approach',
@ -39,7 +33,7 @@ import {HelperModule} from "../../utils/helper/helper.module";
canDeactivate: [PreviousRouteRecorder]
}
]), PageContentModule, HowModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
exports: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent]
exports: [TerminologyComponent, MethodolocigalApproachComponent]
})
export class MethodologyModule {
constructor(private iconsService: IconsService) {

107
monitor/methodology/see-how-it-works.component.ts
View File

@ -1,107 +0,0 @@
import {Component, OnDestroy, OnInit} from "@angular/core";
import {Subscription} from "rxjs";
import {Meta, Title} from "@angular/platform-browser";
import {ActivatedRoute, Router} from "@angular/router";
import {Stakeholder} from "../entities/stakeholder";
import {OpenaireEntities} from "../../utils/properties/searchFields";
import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {properties} from "../../../../environments/environment";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
@Component({
selector: 'see-how-it-works',
template: `
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div id="how" class="uk-container uk-container-large">
<h2 class="uk-h1" uk-scrollspy-class>
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h2>
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class>
<p class="uk-margin-top">Our methodological approach is based on the following operational quality
criteria:</p>
<ul>
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and
clearly presented.
</li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent
possible, in order to provide meaningful indicators.
</li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
detail, so that
it can be verified and used by the scholarly communication community to create ongoing updates to our
proposed statistics and indicators.
</li>
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around
well-established open databases
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning
(ML) - using operational
workflows in OpenAIRE to warrant timely results.
</li>
<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable,
robust, and aligned
to other assessment methods so that it can be operationalized, used and reused, in conjunction with other
assessment methods.
</li>
</ul>
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a
href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
target="_blank">this report</a> (DOI: 10.2777/268348).
</div>
</div>
<div class="uk-margin-large-top uk-padding-small" uk-scrollspy-class>
<h3 class="uk-h4">Step-by-step</h3>
<how></how>
</div>
</div>
</div>
`
})
export class SeeHowItWorksComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
public tab: 'entities' | 'attributes' = 'entities';
private subscriptions: any[] = [];
public openaireEntities = OpenaireEntities;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources - See how it works', keepFormat: true}];
constructor(private seoService: SEOService,
private meta: Meta,
private router: Router,
private route: ActivatedRoute,
private title: Title) {
}
ngOnInit() {
this.subscriptions.push(this.route.params.subscribe(params => {
const description = "Monitor | See how it works";
const title = "Monitor | See how it works";
this.metaTags(title, description);
this.breadcrumbs[0].route = '/' + (params['stakeholder']?params['stakeholder']:'');
this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
metaTags(title, description) {
const url = properties.domain + properties.baseLink + this.router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this.meta.updateTag({content: url}, "property='og:url'");
this.meta.updateTag({content: description}, "name='description'");
this.meta.updateTag({content: description}, "property='og:description'");
this.meta.updateTag({content: title}, "property='og:title'");
this.title.setTitle(title);
}
}

8
monitor/services/resources.service.ts
View File

@ -30,12 +30,12 @@ export class ResourcesService {
let items = [
new MenuItem("methodology", "Methodology", "", "", false, [],
null, {}, null, null, null, null, '_self'),
ResourcesService.setLink(new MenuItem("methodology", "Terminology and construction",
ResourcesService.setLink(new MenuItem("methodological-approach", "Methodological Approach",
"", "", false, [], null, {}, null, null, null, null, '_self'),
prefix + "/methodology/terminology", portal),
ResourcesService.setLink(new MenuItem("methodology", "See how it works",
prefix + "/methodology/methodological-approach", portal),
ResourcesService.setLink(new MenuItem("terminology", "Terminology and construction",
"", "", false, [], null, {}, null, null, null, null, '_self'),
prefix + "/methodology/how", portal)];
prefix + "/methodology/terminology", portal)];
items.push(new MenuItem("indicators-page", "Indicators",
"", "", false, [], null, {}));
items.push(ResourcesService.setLink(new MenuItem("indicator-themes", "Indicator Themes",

53
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -18,46 +18,47 @@ declare var UIkit;
@Component({
selector: 'slider-tabs',
template: `
<div #tabsElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
<div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
[ngClass]="customClass">
<div [class.uk-slider-container-tabs]="position === 'horizontal'">
<ul class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
<ul #tabsElement class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
[class.uk-slider-items]="position === 'horizontal'"
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
[attr.uk-tab]="type === 'static'?('connect: .' + connect):null"
[attr.uk-tab]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition">
<ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id">{{tab.title}}</a>
</li>
</ng-container>
<ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize">
<a>{{tab.title}}</a>
</li>
</ng-container>
<ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id">{{tab.title}}</a>
</li>
</ng-container>
</ul>
</div>
<a *ngIf="position === 'horizontal'" class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span
uk-icon="chevron-left"></span></a>
<a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
<a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background"
uk-slider-item="next"><span
uk-icon="chevron-right"></span></a>
</div>
`,
})
export class SliderTabsComponent implements AfterViewInit, OnDestroy {
//TODO now it works only for scrollable, to be extended
//TODO now it works only for scrollable and static, to be extended for dynamic
/**
* Type of tabs: Static = Uikit tabs with @connect class, Dynamic = Active is defined by tabComponent.active input,
* Type of tabs: Static = Uikit tabs with @connect class or selector, Dynamic = Active is defined by tabComponent.active input,
* Scrollable = Active is defined by the active fragment of URL and position of scroll
* */
@Input()
public type: 'static' | 'dynamic' | 'scrollable' = 'static';
/**
* Connect class in static type. Default: uk-switcher
* Connect selector in static type. Default: .uk-switcher
* */
@Input()
public connect = 'uk-switcher';
public connect = '.uk-switcher';
/**
* Threshold between 0.0 to 1.0 for Intersection Observer
* */
@ -79,12 +80,13 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
@Input()
public customClass: string;
@ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
@ViewChild('sliderElement') sliderElement: ElementRef;
@ViewChild('tabsElement') tabsElement: ElementRef;
/**
* Notify regarding new active element
* */
@Output() activeEmitter: EventEmitter<string> = new EventEmitter<string>();
public init: boolean = false;
private activeIndex: number = 0;
private subscriptions: any[] = [];
private observer: IntersectionObserver;
private timeout: Timeout;
@ -98,14 +100,19 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
if (typeof document !== 'undefined' && this.tabs.length > 0) {
setTimeout(() => {
if (this.position === 'horizontal') {
let slider = UIkit.slider(this.tabsElement.nativeElement, {finite: true});
let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses();
this.init = true;
slider.slides.forEach(item => {
item.classList.remove('uk-active');
});
if (this.type === 'scrollable') {
if (this.type === 'static') {
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
tabs.show(this.activeIndex);
if (this.connect.includes('#')) {
this.scrollToStart();
}
} else if (this.type === 'scrollable') {
this.scrollable(slider);
}
} else {
@ -115,6 +122,16 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
}
}
private scrollToStart() {
this.subscriptions.push(UIkit.util.on(this.connect, 'shown', (event): void => {
let index = event.detail[0].index();
if (index !== this.activeIndex) {
this.activeIndex = index;
this.router.navigate(['./'], {relativeTo: this.route, fragment: this.connect.replace('#', '')});
}
}));
}
private scrollable(slider = null) {
this.activeFragment(this.route.snapshot.fragment, slider);
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
@ -174,6 +191,8 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
} else if (subscription instanceof Function) {
subscription();
}
});
if (this.observer) {

3
utils/smooth-scroll.ts
View File

@ -21,6 +21,7 @@ export class SmoothScroll {
this.currentComponent = event.snapshot.component.name;
}
} else if (event instanceof NavigationEnd) {
let headerOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) + 35;
if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) {
if (this.interval) {
clearInterval(this.interval);
@ -38,7 +39,7 @@ export class SmoothScroll {
if (this.interval) {
clearInterval(this.interval);
}
const yOffset = -100 - this.extraOffset;
const yOffset = -headerOffset - this.extraOffset;
let position = 0;
let interval = setInterval(() => {
if (position !== element.getBoundingClientRect().top) {