4 files changed, 105 insertions, 0 deletions
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css
new file mode 100644
index 00000000..3d4a2432
--- /dev/null
+++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css
@@ -0,0 +1,3 @@
+.carousel {
+    overscroll-behavior: contain;
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html
new file mode 100644
index 00000000..f52aee12
--- /dev/null
+++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html
@@ -0,0 +1,12 @@
+<h1>
+    {{scroll}}
+</h1>
+<div #wrapper class="carousel position-relative" style="overflow-y: scroll;" [style]="'height:'+ shownElements * height+'rem;'">
+    <div class="my-2" *ngFor="let item of itemsToShow; let i = index;" [style]="'height:'+ height+'rem; width: 90%; margin: auto;'">
+        <div class="position-absolute text-dark bg-white" [style]="calcStyle(i)">
+            <a class="stretched-link" (click)="clickItem">
+                <p class="title">{{item.name}}</p>
+            </a>
+        </div>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts
new file mode 100644
index 00000000..0c736e90
--- /dev/null
+++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarouselVerticalComponent } from './carousel-vertical.component';
+
+describe('CarouselVerticalComponent', () => {
+  let component: CarouselVerticalComponent;
+  let fixture: ComponentFixture<CarouselVerticalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CarouselVerticalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CarouselVerticalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts
new file mode 100644
index 00000000..d8849ea6
--- /dev/null
+++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts
@@ -0,0 +1,65 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-carousel-vertical',
+  templateUrl: './carousel-vertical.component.html',
+  styleUrls: ['./carousel-vertical.component.css']
+})
+export class CarouselVerticalComponent implements OnInit, AfterViewInit {
+
+  @ViewChild('wrapper') wrapper!: ElementRef;
+
+  @Input() items!: any[];
+
+  itemsToShow: any[] = [];
+
+  @Input() type: string = "Object";
+
+  scroll = 0;
+  height = 9; //rem
+
+  currentIndex = 0;
+
+  @Input() shownElements: number = 5;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.itemsToShow = [...this.items.slice(0, this.shownElements)];
+    console.log('0', this.itemsToShow);
+  }
+
+  ngAfterViewInit(): void {
+    const container = this.wrapper.nativeElement
+
+    container.addEventListener('scroll', (event: Event) => {
+      this.scroll = (container.scrollTop / (container.scrollHeight - container.clientHeight));
+      if (this.scroll == 1.0) {
+        //console.log('removed', this.itemsToShow.splice(0, 1)[0].name);
+        const itemToAdd = this.items[(this.currentIndex + this.shownElements) % (this.items.length - 1)];
+        this.itemsToShow.push(itemToAdd);
+        //console.log('added', itemToAdd.name);
+        this.currentIndex = (this.currentIndex + 1);
+        container.scrollTop = (container.scrollHeight - container.clientHeight) / 2;
+      }
+    });
+  }
+
+  clickItem(index: number) {
+  }
+
+  calcVisibility(i: number) {
+    //return ((Math.sin((((i) / this.shownElements) - this.scroll) * Math.PI) + 1) / 2)
+    const iPercent = (i + 1 - this.scroll) / this.shownElements;
+    return iPercent;
+  }
+
+  calcStyle(i: number) {
+    const a = this.calcVisibility(i)
+    const v = (Math.sin(a * Math.PI) + 1) / 2;
+    return `transform: translateY(${v * 100}%) scale(${v}) perspective(${v * 200}em) rotateX(${(1 - a) * 180 - 90}deg);
+            opacity: ${v};
+            height: ${this.height}rem;`;
+  }
+}