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

Slider-tabs: Add align left and right and merge query params on navigate to other fragment

This commit is contained in:
Konstantinos Triantafyllou 2023-01-27 13:54:40 +02:00
parent 3acd9a6c29
commit ccab3d0847
2 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sharedComponents/tabs/slider-tab.component.ts
View File

@ -13,4 +13,6 @@ export class SliderTabComponent {
public active: boolean = false; public active: boolean = false;
@Input() @Input()
public disabled: boolean = false; public disabled: boolean = false;
@Input()
public align: 'left' | 'right' = 'left';
} }

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

@ -27,13 +27,23 @@ declare var UIkit;
[attr.uk-tab]="type === 'static'?('connect:' + connect):null" [attr.uk-tab]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition"> [ngClass]="'uk-flex-' + flexPosition">
<ng-container *ngIf="type === 'static'"> <ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize"> <li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
<a>{{tab.title}}</a>
</li>
<li *ngFor="let tab of rightTabs; let i=index;"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
class="uk-text-capitalize">
<a>{{tab.title}}</a> <a>{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'scrollable'"> <ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active"> <li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a>
</li>
<li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
</ul> </ul>
@ -126,7 +136,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
let index = event.detail[0].index(); let index = event.detail[0].index();
if (index !== this.activeIndex) { if (index !== this.activeIndex) {
this.activeIndex = index; this.activeIndex = index;
this.router.navigate(['./'], {relativeTo: this.route, fragment: this.connect.replace('#', '')}); this.router.navigate(['./'], {relativeTo: this.route, fragment: this.connect.replace('#', ''), queryParamsHandling: "merge"});
} }
})); }));
} }
@ -153,7 +163,8 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
this.router.navigate(['./'], { this.router.navigate(['./'], {
fragment: entry.target.id, fragment: entry.target.id,
relativeTo: this.route, relativeTo: this.route,
state: {disableScroll: true} state: {disableScroll: true},
queryParamsHandling: 'merge'
}); });
}, 200); }, 200);
} }
@ -186,6 +197,14 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
this.cdr.detectChanges(); this.cdr.detectChanges();
} }
get leftTabs(): SliderTabComponent[] {
return this.tabs.toArray().filter(tab => tab.align === 'left');
}
get rightTabs(): SliderTabComponent[] {
return this.tabs.toArray().filter(tab => tab.align === 'right');
}
ngOnDestroy() { ngOnDestroy() {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) { if (subscription instanceof Subscription) {