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

Remove animtation from slider and fix active for nav items on resize.

This commit is contained in:
Konstantinos Triantafyllou 2023-10-10 17:12:37 +03:00
parent 5a9237399e
commit dce6e17ea1
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
sharedComponents/slider-utils/slider-column.component.ts
View File

@ -17,7 +17,7 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
@Input()
type: 'slider' | 'nav' = null;
@Input()
animation = 'uk-animation-fade';
animation = null;
@ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>;
@ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>;
public isMobile: boolean;
@ -35,12 +35,14 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
}
ngAfterContentInit() {
this.slides.forEach(slide => {
slide.init(this.animation);
});
this.navItems.forEach(slide => {
slide.init(this.animation);
});
if (this.animation) {
this.slides.forEach(slide => {
slide.init(this.animation);
});
this.navItems.forEach(slide => {
slide.init(this.animation);
});
}
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
}));
@ -56,9 +58,7 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
if (this.type === 'nav') {
let slides = this.navItems;
for (let i = 0; i < slides.length; i++) {
if (this.isMobile) {
slides.get(i).setActive(slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time));
}
slides.get(i).setActive(!this.isMobile || (slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time)));
slides.get(i).active = slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time);
}
}

2
sharedComponents/slider-utils/slider-container.component.ts
View File

@ -18,7 +18,7 @@ export class Stage {
@Component({
selector: 'slider-container',
template: `
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-child-width-1-1" [ngClass]="'uk-child-width-1-' + sliders?.length + '@s'" uk-grid>
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-flex-between uk-child-width-1-1" [ngClass]="'uk-child-width-1-' + sliders?.length + '@m'" uk-grid>
<ng-content></ng-content>
</div>
<div *ngIf="navigation === 'progress' && stages.length > 0" class="uk-flex uk-flex-center uk-margin-large-top">