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

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

@ -17,7 +17,7 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
@Input() @Input()
type: 'slider' | 'nav' = null; type: 'slider' | 'nav' = null;
@Input() @Input()
animation = 'uk-animation-fade'; animation = null;
@ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>; @ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>;
@ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>; @ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>;
public isMobile: boolean; public isMobile: boolean;
@ -35,12 +35,14 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
} }
ngAfterContentInit() { ngAfterContentInit() {
if (this.animation) {
this.slides.forEach(slide => { this.slides.forEach(slide => {
slide.init(this.animation); slide.init(this.animation);
}); });
this.navItems.forEach(slide => { this.navItems.forEach(slide => {
slide.init(this.animation); slide.init(this.animation);
}); });
}
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => { this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile; this.isMobile = isMobile;
})); }));
@ -56,9 +58,7 @@ export class SliderColumnComponent implements AfterContentInit, OnDestroy {
if (this.type === 'nav') { if (this.type === 'nav') {
let slides = this.navItems; let slides = this.navItems;
for (let i = 0; i < slides.length; i++) { for (let i = 0; i < slides.length; i++) {
if (this.isMobile) { slides.get(i).setActive(!this.isMobile || (slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time)));
slides.get(i).setActive(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); 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({ @Component({
selector: 'slider-container', selector: 'slider-container',
template: ` 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> <ng-content></ng-content>
</div> </div>
<div *ngIf="navigation === 'progress' && stages.length > 0" class="uk-flex uk-flex-center uk-margin-large-top"> <div *ngIf="navigation === 'progress' && stages.length > 0" class="uk-flex uk-flex-center uk-margin-large-top">