26 changed files with 641 additions and 146 deletions
@ -1,5 +1,7 @@ |
|||
<main> |
|||
<app-header *ngIf="page != '/admin'"></app-header> |
|||
<router-outlet></router-outlet> |
|||
|
|||
<Particles class="particles" *ngIf="particlesEnabled && page != '/admin'" |
|||
[id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></Particles> |
|||
</main> |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
main { |
|||
overflow: hidden; |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
<div class="component-home"> |
|||
<button class="goto-prev" (click)="scroll('prev')" (mouseover)="paused=true"><span class="icon icon-back"></span></button> |
|||
<button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button> |
|||
<div class="content" #scrollContent (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')"> |
|||
<div [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems"> |
|||
<div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id, item.title)" (mouseover)="paused=true" (mouseout)="paused=false"> |
|||
<img class="image" *ngIf="item.loading" src="/assets/images/loader.svg" alt="loading"> |
|||
<img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image"> |
|||
<div class="text"> |
|||
<span class="title">{{item.title}}</span> |
|||
<span class="type" *ngIf="section != 'exhibitions'">{{item.type}}</span> |
|||
|
|||
<div class="date-container" *ngIf="section == 'exhibitions'"> |
|||
<div class="date-row"> |
|||
<span class="date-indication" *ngIf="item.date_from != item.date_to">from</span> |
|||
<span class="date-indication" *ngIf="item.date_from == item.date_to">on</span> |
|||
<span class="date">{{item.date_from | date}}</span> |
|||
</div> |
|||
<div class="date-row"> |
|||
<span class="date" *ngIf="item.date_from != item.date_to"> <span class="date-indication">to</span> {{item.date_to | date}}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<span class="tags">{{item.tags}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<app-spinner [show]="!loaded"></app-spinner> |
|||
@ -0,0 +1,185 @@ |
|||
@import "../../assets/scss/variables"; |
|||
|
|||
.component-home { |
|||
display: flex; |
|||
padding-top: 100px; |
|||
height: 100vh; |
|||
transform: skew(-15deg) rotate(-15deg); |
|||
z-index: 1; |
|||
|
|||
.goto-prev, |
|||
.goto-next { |
|||
position: absolute; |
|||
height: 40px; |
|||
width: 60px; |
|||
border: none; |
|||
background: none; |
|||
color: $black; |
|||
font-size: $font-40; |
|||
appearance: none; |
|||
margin: 0; |
|||
padding: 5px; |
|||
cursor: pointer; |
|||
z-index: 2; |
|||
|
|||
.icon { |
|||
&:before { |
|||
transform: translate(-50%, -50%); |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
} |
|||
} |
|||
} |
|||
.goto-prev { |
|||
top: 60px; |
|||
left: 20px; |
|||
} |
|||
.goto-next { |
|||
top: calc(80vh + 10px); |
|||
right: 20px; |
|||
.icon { |
|||
&:before { |
|||
transform: translate(-50%, -50%) rotate(180deg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
display: inline-flex; |
|||
margin: 0; |
|||
margin-left: -50px; |
|||
//animation: slide 150s linear infinite; |
|||
transition: margin-left .5s; |
|||
|
|||
@each $width in 1,2,3,4,5,6 { |
|||
.slide-#{$width} { |
|||
width: #{($width+2)*100}px; |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
position: relative; |
|||
display: flex; |
|||
background: $black-alpha2; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
margin: auto 0; |
|||
padding: 40px 20px; |
|||
height: calc(80vh - 90px); |
|||
min-height: 250px; |
|||
//max-height: 700px; |
|||
cursor: pointer; |
|||
transform: skew(-6deg, -6deg) rotate(6deg); |
|||
transition: transform .4s, background .4s, opacity .4s; |
|||
-webkit-backface-visibility: hidden; |
|||
|
|||
.image { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
height: 100%; |
|||
width: 100%; |
|||
object-fit: cover; |
|||
transform: translate(-50%, -50%); |
|||
opacity: .8; |
|||
filter: grayscale(100%) contrast(3); |
|||
transition: opacity .4s, filter .4s; |
|||
-webkit-backface-visibility: hidden; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.text { |
|||
display: block; |
|||
margin: auto; |
|||
text-align: center; |
|||
transform: translate(0%, 0%); |
|||
color: $yellow; |
|||
-webkit-backface-visibility: hidden; |
|||
z-index: 1; |
|||
|
|||
.title { |
|||
display: block; |
|||
font-size: $font-20; |
|||
text-transform: uppercase; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.type { |
|||
display: block; |
|||
font-size: $font-16; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.tags { |
|||
display: block; |
|||
font-size: $font-12; |
|||
text-transform: uppercase; |
|||
font-weight: bold; |
|||
padding-top: 10px; |
|||
} |
|||
|
|||
.date-container { |
|||
display: inline-flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.date-row { |
|||
display: block; |
|||
width: 100%; |
|||
|
|||
.date { |
|||
display: inline-flex; |
|||
margin: auto; |
|||
font-size: $font-20; |
|||
} |
|||
|
|||
.date-indication { |
|||
margin: 2px 5px auto 5px; |
|||
font-size: $font-12; |
|||
} |
|||
|
|||
&:nth-of-type(2) { |
|||
margin-top: -12px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
background: $black; |
|||
transform: scale(1.4) rotate(14deg) skew(14deg, 0deg); |
|||
z-index: 50; |
|||
|
|||
.image { |
|||
filter: grayscale(0%); |
|||
opacity: .5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover, |
|||
&.paused { |
|||
//animation: none; |
|||
animation-play-state: paused; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
@media (min-width: map-get($grid-breakpoints, 'md')) { |
|||
.component-home { |
|||
.goto-prev { |
|||
left: 50px; |
|||
} |
|||
.goto-next { |
|||
right: 50px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
@keyframes slide { |
|||
0% {margin-left: 0;} |
|||
50% {margin-left: -100%;} |
|||
100% {margin-left: 0;} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { HomeComponent } from './home.component'; |
|||
|
|||
describe('HomeComponent', () => { |
|||
let component: HomeComponent; |
|||
let fixture: ComponentFixture<HomeComponent>; |
|||
|
|||
beforeEach(async(() => { |
|||
TestBed.configureTestingModule({ |
|||
declarations: [ HomeComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
})); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(HomeComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,129 @@ |
|||
import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core' |
|||
import { Router, NavigationEnd } from '@angular/router' |
|||
import { ApisService } from '../services/apis.service' |
|||
import { environment } from '../../environments/environment' |
|||
|
|||
@Component({ |
|||
selector: 'app-home', |
|||
templateUrl: './home.component.html', |
|||
styleUrls: ['./home.component.scss'] |
|||
}) |
|||
export class HomeComponent implements OnInit { |
|||
|
|||
@ViewChild('scrollContent') scrollContent: ElementRef |
|||
|
|||
public basePath = `${environment.BASE_PATH}` |
|||
public loaded = false |
|||
public init = false |
|||
|
|||
public homeItems: any = [] |
|||
public section: string = 'portfolio' |
|||
public paused: boolean = false |
|||
private scrollPos: number = 0 |
|||
|
|||
private swipeCoord?: [number, number] |
|||
private swipeTime?: number |
|||
|
|||
constructor( |
|||
private apisService: ApisService, |
|||
private router: Router, |
|||
private renderer: Renderer2 |
|||
) { } |
|||
|
|||
ngOnInit(): void { |
|||
|
|||
this.apisService.getPortfolio(this.section, true).toPromise().then((response) => { |
|||
this.homeItems = response.items |
|||
|
|||
let cnt = 0 |
|||
let width = 0 |
|||
let tot = 0 |
|||
|
|||
this.homeItems.forEach((e) => { |
|||
e.loading = true |
|||
e.width = Math.floor(Math.random()*4)+1 |
|||
cnt++ |
|||
}) |
|||
|
|||
},(error) => { |
|||
console.error('getPortfolio ERROR', error) |
|||
}).catch((e) => { |
|||
console.error('getPortfolio CATCH', e) |
|||
}) |
|||
} |
|||
|
|||
ngAfterContentInit() { |
|||
|
|||
this.init = true |
|||
|
|||
setInterval( () => { |
|||
if(!this.paused) { |
|||
const scrollWidth = 300 |
|||
const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 |
|||
this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? |
|||
-(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth |
|||
this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' |
|||
} |
|||
},2000) |
|||
} |
|||
|
|||
showDetails(id, title = ''): void { |
|||
const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' |
|||
this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) |
|||
} |
|||
|
|||
onLoad(id): void { |
|||
this.homeItems.filter(item => item.id == id)[0].loading = false |
|||
this.loaded = this.init && this.homeItems.every( (val) => !val.loading) |
|||
} |
|||
|
|||
scroll(dir): void { |
|||
const scrollWidth = document.body.clientWidth / 3 |
|||
const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 |
|||
this.paused = true |
|||
|
|||
switch(dir) { |
|||
case 'prev': |
|||
this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth |
|||
break; |
|||
case 'next': |
|||
this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? |
|||
-(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth |
|||
break; |
|||
} |
|||
this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' |
|||
} |
|||
|
|||
swipe(e: TouchEvent, when: string): void { |
|||
const coord: [number, number] = [e.changedTouches[0].clientX, e.changedTouches[0].clientY] |
|||
const time = new Date().getTime() |
|||
const scrollWidth = document.body.clientWidth |
|||
const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 |
|||
|
|||
this.paused = true |
|||
|
|||
if (when === 'start') { |
|||
this.swipeCoord = coord |
|||
this.swipeTime = time |
|||
} else if (when === 'end') { |
|||
const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]] |
|||
const duration = time - this.swipeTime |
|||
|
|||
if (duration < 1000 |
|||
&& Math.abs(direction[0]) > 30 |
|||
&& Math.abs(direction[0]) > Math.abs(direction[1] * 3)) { |
|||
const swipe = direction[0] < 0 ? 'next' : 'prev' |
|||
switch(swipe) { |
|||
case 'prev': |
|||
this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth |
|||
break; |
|||
case 'next': |
|||
this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? |
|||
-(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth |
|||
break; |
|||
} |
|||
this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
|
|||
<div class="spinner" #spinner></div> |
|||
@ -0,0 +1,15 @@ |
|||
@import "../../assets/scss/variables"; |
|||
|
|||
.spinner { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
height: 100vh; |
|||
width: 100vw; |
|||
background: $yellow-alpha; |
|||
background-image: url('/assets/images/loader.svg'); |
|||
background-size: 200px 200px; |
|||
background-repeat: no-repeat; |
|||
background-position: center center; |
|||
z-index: 100; |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
import { Component, OnInit, Input, ViewChild, ElementRef, SimpleChanges } from '@angular/core' |
|||
|
|||
@Component({ |
|||
selector: 'app-spinner', |
|||
templateUrl: './spinner.component.html', |
|||
styleUrls: ['./spinner.component.scss'] |
|||
}) |
|||
|
|||
export class SpinnerComponent implements OnInit { |
|||
|
|||
@ViewChild('spinner') spinner: ElementRef |
|||
@Input() show: boolean = false |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges) { |
|||
if(changes.show && changes.show.firstChange) { |
|||
this.loader(changes.show.currentValue ? 'show' : 'hide') |
|||
} |
|||
} |
|||
|
|||
loader(action) { |
|||
let op = 0 |
|||
let timer = null |
|||
|
|||
switch(action) { |
|||
case 'show': |
|||
op = 1 |
|||
timer = setInterval(() => { |
|||
if(op <= 0.1){ |
|||
clearInterval(timer) |
|||
this.spinner.nativeElement.style.display = 'none' |
|||
} |
|||
this.spinner.nativeElement.style.opacity = op |
|||
this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")" |
|||
op -= op * 0.1 |
|||
}, 20) |
|||
|
|||
break |
|||
case 'hide': |
|||
op = 0.1 |
|||
this.spinner.nativeElement.style.display = 'block' |
|||
timer = setInterval(() => { |
|||
if(op >= 1){ |
|||
clearInterval(timer) |
|||
} |
|||
this.spinner.nativeElement.style.opacity = op |
|||
this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")" |
|||
op += op * 0.1 |
|||
}, 20) |
|||
|
|||
break |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in new issue