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'"
|
||||
[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>
|
||||
<div class="uk-container-large uk-container uk-margin-top">
|
||||
<div class="uk-width-1-1 uk-background-default uk-padding-small uk-padding-remove-horizontal"
|
||||
uk-slider="finite: true" uk-sticky="media: @m" [attr.offset]="offset">
|
||||
<div class="uk-position-relative">
|
||||
<div class="uk-container uk-container-large uk-margin-top uk-margin-bottom">
|
||||
<div class="uk-background-default uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom" uk-sticky="media: @m" [attr.offset]="offset">
|
||||
<slider-tabs type="dynamic" [flexPosition]="'center'" (activeEmitter)="entityChanged($event)">
|
||||
<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">
|
||||
<ul class="uk-slider-items uk-flex uk-flex-center" style="flex-wrap: nowrap !important;">
|
||||
<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-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,13 +22,14 @@ import {SearchOrganizationsModule} from "../searchOrganizations.module";
|
|||
import {SearchDataProvidersModule} from "../searchDataProviders.module";
|
||||
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
|
||||
import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
|
||||
import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule,
|
||||
DataProvidersServiceModule, ProjectsServiceModule,
|
||||
SearchResearchResultsServiceModule, OrganizationsServiceModule,
|
||||
SearchResultsModule, PiwikServiceModule, Schema2jsonldModule, SEOServiceModule, AdvancedSearchFormModule, SearchResearchResultsModule, SearchProjectsModule, SearchOrganizationsModule, SearchDataProvidersModule, BreadcrumbsModule
|
||||
SearchResultsModule, PiwikServiceModule, Schema2jsonldModule, SEOServiceModule, AdvancedSearchFormModule, SearchResearchResultsModule, SearchProjectsModule, SearchOrganizationsModule, SearchDataProvidersModule, BreadcrumbsModule, SliderTabsModule
|
||||
],
|
||||
declarations: [
|
||||
SearchAllComponent
|
||||
|
|
|
|||
|
|
@ -21,4 +21,5 @@ export class SliderTabComponent {
|
|||
public queryParams: any = null;
|
||||
@Input()
|
||||
public customClass: string = '';
|
||||
@Input() tabTemplate: any;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,34 +28,52 @@ declare var UIkit;
|
|||
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
|
||||
<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">
|
||||
<a>{{tab.title}}</a>
|
||||
<a>
|
||||
<span *ngIf="tab.title">{{tab.title}}</span>
|
||||
<ng-container *ngTemplateOutlet="tab.tabTemplate"></ng-container>
|
||||
</a>
|
||||
</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':''"
|
||||
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>
|
||||
</ng-container>
|
||||
<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">
|
||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
||||
(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 *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':''">
|
||||
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
|
||||
(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>
|
||||
</ng-container>
|
||||
<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">
|
||||
<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 *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':''"
|
||||
[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>
|
||||
</ng-container>
|
||||
</ul>
|
||||
|
|
@ -127,34 +145,36 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
|
|||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (typeof document !== 'undefined' && this.tabs.length > 0) {
|
||||
setTimeout(() => {
|
||||
if (this.position === 'horizontal') {
|
||||
this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
|
||||
this.slider.clsActive = 'uk-slider-active';
|
||||
this.slider.updateActiveClasses();
|
||||
this.slider.slides.forEach((item, index) => {
|
||||
if(!this.tabs.get(index).active) {
|
||||
item.classList.remove('uk-active');
|
||||
this.tabs.changes.subscribe(tabs => {
|
||||
if (typeof document !== 'undefined' && this.tabs.length > 0) {
|
||||
setTimeout(() => {
|
||||
if (this.position === 'horizontal') {
|
||||
this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
|
||||
this.slider.clsActive = 'uk-slider-active';
|
||||
this.slider.updateActiveClasses();
|
||||
this.slider.slides.forEach((item, index) => {
|
||||
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);
|
||||
}
|
||||
});
|
||||
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 {
|
||||
this.scrollable();
|
||||
}
|
||||
} else {
|
||||
this.scrollable();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private scrollToStart() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue