diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3394457..280bb3a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,15 +1,19 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRouting } from './app.routing'; +import {BannerComponent} from './components/banner/banner.component'; import {FooterComponent} from './components/footer/footer.component'; import {NavbarComponent} from './components/navbar/navbar.component'; import { AppComponent } from './containers/app/app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {MaterialModule} from './material.module'; +import {GalleryComponent} from './views/gallery/gallery.component'; import {HomeComponent} from './views/home/home.component'; export const APP_COMPONENTS = [ AppComponent, + BannerComponent, + GalleryComponent, HomeComponent, FooterComponent, NavbarComponent diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index ff4e4f0..c66fd13 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -1,9 +1,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import {GalleryComponent} from './views/gallery/gallery.component'; import {HomeComponent} from './views/home/home.component'; const routes: Routes = [ - {path: '', pathMatch: 'full', component: HomeComponent} + {path: '', pathMatch: 'full', component: HomeComponent}, + {path: 'gallery', component: GalleryComponent} ]; @NgModule({ diff --git a/src/app/components/banner/banner.component.html b/src/app/components/banner/banner.component.html index e69de29..e0ac6aa 100644 --- a/src/app/components/banner/banner.component.html +++ b/src/app/components/banner/banner.component.html @@ -0,0 +1,22 @@ + diff --git a/src/app/components/banner/banner.component.scss b/src/app/components/banner/banner.component.scss new file mode 100644 index 0000000..b18ffe7 --- /dev/null +++ b/src/app/components/banner/banner.component.scss @@ -0,0 +1,49 @@ +.banner-container { + position: relative; + width: 100%; + height: 100%; +} + +.banner-background { + width: 100%; + height: 100%; + filter: blur(10px); + -webkit-filter: blur(10px); +} + +.banner-image { + position: absolute; + height: 90%; + width: auto; + top: 5%; + left: 50%; + transform: translateX(-50%); +} + +.banner-next { + position: absolute; + top: 50%; + right: 50px; + transform: translate(-50%, -50%); +} + +.banner-previous { + position: absolute; + top: 50%; + left: 50px; + transform: translate(-50%, -50%); +} + +.banner-seal { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.banner-pause { + position: absolute; + bottom: 25px; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/src/app/components/banner/banner.component.ts b/src/app/components/banner/banner.component.ts index e69de29..de017cd 100644 --- a/src/app/components/banner/banner.component.ts +++ b/src/app/components/banner/banner.component.ts @@ -0,0 +1,70 @@ +import { + AfterViewInit, + Component, + ElementRef, + Host, + HostListener, + Input, + OnDestroy, + OnInit, + ViewChild +} from '@angular/core'; +import {interval, Subscription} from 'rxjs'; +import {shuffle} from '../../misc/utils'; + +@Component({ + selector: 'xxx-banner', + templateUrl: './banner.component.html', + styleUrls: ['./banner.component.scss'] +}) +export class BannerComponent implements AfterViewInit, OnDestroy, OnInit { + private container!: HTMLDivElement; + private dimmensions!: [number, number]; + private sub?: Subscription; + + images = [ + '/assets/img/banner/aquilifer.jpg', + '/assets/img/banner/castra.jpg', + '/assets/img/banner/ROM.jpg', + '/assets/img/banner/shield.jpg', + '/assets/img/banner/tripod.jpg', + ]; + selected = 0; + + @Input() speed = 5000; + @Input() manual = false; + + constructor() { + this.images = shuffle(this.images); + } + + ngOnInit() { + this.sub = interval(this.speed) + .subscribe( i => { + if(this.manual) return; + this.selected = i % this.images.length + }); + } + + @HostListener('window:resize') + ngAfterViewInit() { + this.container = document.getElementsByClassName('banner-container')[0]; + this.dimmensions = [this.container.clientWidth, this.container.clientHeight]; + } + + ngOnDestroy() { + if(this.sub) this.sub.unsubscribe(); + } + + next() { + this.manual = true; + this.selected++; + if(this.selected >= this.images.length) this.selected = 0; + } + + previous() { + this.manual = true; + this.selected--; + if(this.selected < 0) this.selected = this.images.length - 1; + } +} diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 6db0b0c..017d5bc 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -1,16 +1,25 @@