AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Angular Upgrade (#1059)

Browse source 
* Upgraded to Angular 12

* Bump ng-bootstrap for upgrade

* Angular 13 upgrade, ng-bootstrap bump

* Angular 13 upgrade (broken)

* Angular 13 upgrade. CSS is broken completely

* Angular 13 upgrade is complete.
This commit is contained in:
Joseph Milazzo 2022-02-11 15:23:26 -08:00 • committed by GitHub
parent d7450497a6
commit 97b1249a0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 4993 additions and 8937 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.html
View file

@ -2,14 +2,14 @@
<div>
<h2 style="display: inline-block;"><a href="javascript:void(0)" (click)="sectionClicked($event)" class="section-title">{{title}}</a></h2>
<div class="float-right">
<button class="btn btn-icon" [disabled]="swiper?.isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
<button class="btn btn-icon" [disabled]="swiper?.isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
<button class="btn btn-icon" [disabled]="isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
<button class="btn btn-icon" [disabled]="isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
</div>
</div>
<div>
<swiper
#swiper
[slidesPerView]="'auto'"
(swiper)="onSwiper($event)"
[freeMode]="true">
<ng-template *ngFor="let item of items; index as i;" swiperSlide>
<ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>

35
UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts
View file

@ -1,5 +1,7 @@
import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
import Swiper from 'swiper';
import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
import { SwiperComponent } from 'swiper/angular';
//import Swiper from 'swiper';
//import { SwiperEvents, Swiper } from 'swiper/types';
@Component({
selector: 'app-carousel-reel',
@ -13,10 +15,20 @@ export class CarouselReelComponent implements OnInit {
@Input() title = '';
@Output() sectionClick = new EventEmitter<string>();
@ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
swiper!: Swiper;
//swiper!: Swiper;
trackByIdentity: (index: number, item: any) => string;
get isEnd() {
return this.swiper?.swiperRef.isEnd;
}
get isBeginning() {
return this.swiper?.swiperRef.isBeginning;
}
constructor() {
this.trackByIdentity = (index: number, item: any) => `${this.title}_${item.id}_${item?.name}_${item?.pagesRead}_${index}`;
}
@ -25,13 +37,13 @@ export class CarouselReelComponent implements OnInit {
nextPage() {
if (this.swiper) {
this.swiper.setProgress(this.swiper.progress + 0.25, 600);
this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress + 0.25, 600);
}
}
prevPage() {
if (this.swiper) {
this.swiper.setProgress(this.swiper.progress - 0.25, 600);
this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress - 0.25, 600);
}
}
@ -39,7 +51,14 @@ export class CarouselReelComponent implements OnInit {
this.sectionClick.emit(this.title);
}
onSwiper(swiper: any) {
this.swiper = swiper;
}
// onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
// console.log('swiper: ', eventParams);
// [this.swiper] = eventParams;
// }
// onSwiper(params: Swiper) {
// // const [swiper] = params;
// // console.log(swiper);
// // return params;
// }
}