Slider-tabs: Add template in slider-tab instead of title. Change tabs in search-all with slider-tabs.
This commit is contained in:
parent
4700cc82c8
commit
9855f5c179
|
@ -28,10 +28,57 @@
|
||||||
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
|
<schema2jsonld *ngIf="name && logoURL" [URL]="properties.domain+ properties.baseLink +'/search/find'"
|
||||||
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
|
[logoURL]="properties.domain + properties.baseLink+logoURL" type="search" [name]=name
|
||||||
description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Graph. "></schema2jsonld>
|
description="Search for {{openaireEntities.RESULTS}} ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}}), {{openaireEntities.PROJECTS}}, {{openaireEntities.ORGANIZATIONS}}, {{openaireEntities.DATASOURCES}} in the OpenAIRE Graph. "></schema2jsonld>
|
||||||
<div class="uk-container-large uk-container uk-margin-top">
|
<div class="uk-container uk-container-large uk-margin-top uk-margin-bottom">
|
||||||
<div class="uk-width-1-1 uk-background-default uk-padding-small uk-padding-remove-horizontal"
|
<div class="uk-background-default uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom" uk-sticky="media: @m" [attr.offset]="offset">
|
||||||
uk-slider="finite: true" uk-sticky="media: @m" [attr.offset]="offset">
|
<slider-tabs type="dynamic" [flexPosition]="'center'" (activeEmitter)="entityChanged($event)">
|
||||||
<div class="uk-position-relative">
|
<slider-tab *ngIf="showPublications || showDatasets || showOrps || showSoftware"
|
||||||
|
tabId="result" [tabTemplate]="result" [active]="activeEntity == 'result'">
|
||||||
|
<ng-template #result>
|
||||||
|
<span class="uk-text-uppercase">
|
||||||
|
{{resultsName}}
|
||||||
|
<span *ngIf=" fetchPublications.searchUtils.totalResults!=null" class="uk-visible@m">
|
||||||
|
({{fetchPublications.searchUtils.totalResults | number}})</span>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</slider-tab>
|
||||||
|
<slider-tab *ngIf="showProjects" tabId="projects" [tabTemplate]="projects" [active]="activeEntity == 'projects'">
|
||||||
|
<ng-template #projects>
|
||||||
|
<span class="uk-text-uppercase">
|
||||||
|
{{projectName}}
|
||||||
|
<span *ngIf="fetchProjects.searchUtils.totalResults!=null" class="uk-visible@m">
|
||||||
|
({{fetchProjects.searchUtils.totalResults | number}})</span>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</slider-tab>
|
||||||
|
<slider-tab *ngIf="showDataProviders" tabId="datasources" [tabTemplate]="datasources" [active]="activeEntity == 'datasources'">
|
||||||
|
<ng-template #datasources>
|
||||||
|
<span class="uk-text-uppercase">
|
||||||
|
{{dataSourcesName}}
|
||||||
|
<span *ngIf="fetchDataproviders.searchUtils.totalResults!=null" class="uk-visible@m">
|
||||||
|
({{fetchDataproviders.searchUtils.totalResults | number}})</span>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</slider-tab>
|
||||||
|
<slider-tab *ngIf="showServices" tabId="services" [tabTemplate]="services" [active]="activeEntity == 'services'">
|
||||||
|
<ng-template #services>
|
||||||
|
<span class="uk-text-uppercase">
|
||||||
|
{{servicesName}}
|
||||||
|
<span *ngIf="fetchServices.searchUtils.totalResults!=null" class="uk-visible@m">
|
||||||
|
({{fetchServices.searchUtils.totalResults | number}})</span>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</slider-tab>
|
||||||
|
<slider-tab *ngIf="showOrganizations" tabId="organizations" [tabTemplate]="organizations" [active]="activeEntity == 'organizations'">
|
||||||
|
<ng-template #organizations>
|
||||||
|
<span class="uk-text-uppercase">
|
||||||
|
{{organizationsName}}
|
||||||
|
<span *ngIf="fetchOrganizations.searchUtils.totalResults!=null" class="uk-visible@m">
|
||||||
|
({{fetchOrganizations.searchUtils.totalResults | number}})</span>
|
||||||
|
</span>
|
||||||
|
</ng-template>
|
||||||
|
</slider-tab>
|
||||||
|
</slider-tabs>
|
||||||
|
<!--<div class="uk-position-relative">
|
||||||
<div class="uk-slider-container">
|
<div class="uk-slider-container">
|
||||||
<ul class="uk-slider-items uk-flex uk-flex-center" style="flex-wrap: nowrap !important;">
|
<ul class="uk-slider-items uk-flex uk-flex-center" style="flex-wrap: nowrap !important;">
|
||||||
<li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')">
|
<li *ngIf="showPublications || showDatasets || showOrps || showSoftware" (click)="entityChanged('result')">
|
||||||
|
@ -95,7 +142,7 @@
|
||||||
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
||||||
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -22,13 +22,14 @@ import {SearchOrganizationsModule} from "../searchOrganizations.module";
|
||||||
import {SearchDataProvidersModule} from "../searchDataProviders.module";
|
import {SearchDataProvidersModule} from "../searchDataProviders.module";
|
||||||
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
|
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
|
||||||
import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
|
import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
|
||||||
|
import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule, FormsModule, RouterModule,
|
CommonModule, FormsModule, RouterModule,
|
||||||
DataProvidersServiceModule, ProjectsServiceModule,
|
DataProvidersServiceModule, ProjectsServiceModule,
|
||||||
SearchResearchResultsServiceModule, OrganizationsServiceModule,
|
SearchResearchResultsServiceModule, OrganizationsServiceModule,
|
||||||
SearchResultsModule, PiwikServiceModule, Schema2jsonldModule, SEOServiceModule, AdvancedSearchFormModule, SearchResearchResultsModule, SearchProjectsModule, SearchOrganizationsModule, SearchDataProvidersModule, BreadcrumbsModule
|
SearchResultsModule, PiwikServiceModule, Schema2jsonldModule, SEOServiceModule, AdvancedSearchFormModule, SearchResearchResultsModule, SearchProjectsModule, SearchOrganizationsModule, SearchDataProvidersModule, BreadcrumbsModule, SliderTabsModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
SearchAllComponent
|
SearchAllComponent
|
||||||
|
|
|
@ -21,4 +21,5 @@ export class SliderTabComponent {
|
||||||
public queryParams: any = null;
|
public queryParams: any = null;
|
||||||
@Input()
|
@Input()
|
||||||
public customClass: string = '';
|
public customClass: string = '';
|
||||||
|
@Input() tabTemplate: any;
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,34 +28,52 @@ declare var UIkit;
|
||||||
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
|
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
|
||||||
<ng-container *ngIf="type === 'static'">
|
<ng-container *ngIf="type === 'static'">
|
||||||
<li *ngFor="let tab of leftTabs" [ngStyle]="" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block">
|
<li *ngFor="let tab of leftTabs" [ngStyle]="" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block">
|
||||||
<a>{{tab.title}}</a>
|
<a>
|
||||||
|
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||||
|
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
||||||
class="uk-text-capitalize uk-text-truncate uk-display-block">
|
class="uk-text-capitalize uk-text-truncate uk-display-block">
|
||||||
<a [ngClass]="tab.customClass">{{tab.title}}</a>
|
<a [ngClass]="tab.customClass">
|
||||||
|
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||||
|
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="type === 'dynamic'">
|
<ng-container *ngIf="type === 'dynamic'">
|
||||||
<li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" [style.max-width]="(position === 'horizontal')?'50%':null">
|
<li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" [style.max-width]="(position === 'horizontal')?'50%':null">
|
||||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
||||||
(click)="showActive(i)"
|
(click)="showActive(i)"
|
||||||
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
|
class="uk-text-capitalize uk-text-truncate uk-display-block">
|
||||||
|
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||||
|
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [class.uk-active]="tab.active"
|
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" [class.uk-active]="tab.active"
|
||||||
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
|
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
|
||||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
||||||
(click)="showActive(i)"
|
(click)="showActive(i)"
|
||||||
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
|
class="uk-text-capitalize uk-text-truncate uk-display-block">
|
||||||
|
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||||
|
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="type === 'scrollable'">
|
<ng-container *ngIf="type === 'scrollable'">
|
||||||
<li *ngFor="let tab of leftTabs" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
|
<li *ngFor="let tab of leftTabs" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
|
||||||
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
|
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">
|
||||||
|
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||||
|
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block"
|
<li *ngFor="let tab of rightTabs; let i=index;" [style.max-width]="(position === 'horizontal')?'50%':null" class="uk-text-capitalize uk-text-truncate uk-display-block"
|
||||||
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
|
||||||
[class.uk-active]="tab.active">
|
[class.uk-active]="tab.active">
|
||||||
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
|
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">
|
||||||
|
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||||
|
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -127,34 +145,36 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
if (typeof document !== 'undefined' && this.tabs.length > 0) {
|
this.tabs.changes.subscribe(tabs => {
|
||||||
setTimeout(() => {
|
if (typeof document !== 'undefined' && this.tabs.length > 0) {
|
||||||
if (this.position === 'horizontal') {
|
setTimeout(() => {
|
||||||
this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
|
if (this.position === 'horizontal') {
|
||||||
this.slider.clsActive = 'uk-slider-active';
|
this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
|
||||||
this.slider.updateActiveClasses();
|
this.slider.clsActive = 'uk-slider-active';
|
||||||
this.slider.slides.forEach((item, index) => {
|
this.slider.updateActiveClasses();
|
||||||
if(!this.tabs.get(index).active) {
|
this.slider.slides.forEach((item, index) => {
|
||||||
item.classList.remove('uk-active');
|
if(!this.tabs.get(index).active) {
|
||||||
|
item.classList.remove('uk-active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
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 =='dynamic') {
|
||||||
|
this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
|
||||||
|
this.slider.show(this.activeIndex);
|
||||||
|
} else if (this.type === 'scrollable') {
|
||||||
|
this.scrollable(this.slider);
|
||||||
}
|
}
|
||||||
});
|
} else {
|
||||||
if (this.type === 'static') {
|
this.scrollable();
|
||||||
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
|
|
||||||
tabs.show(this.activeIndex);
|
|
||||||
if (this.connect.includes('#')) {
|
|
||||||
this.scrollToStart();
|
|
||||||
}
|
|
||||||
} else if(this.type =='dynamic') {
|
|
||||||
this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
|
|
||||||
this.slider.show(this.activeIndex);
|
|
||||||
} else if (this.type === 'scrollable') {
|
|
||||||
this.scrollable(this.slider);
|
|
||||||
}
|
}
|
||||||
} else {
|
});
|
||||||
this.scrollable();
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private scrollToStart() {
|
private scrollToStart() {
|
||||||
|
|
Loading…
Reference in New Issue