From a731461e0dc5992bfd086b345d4452c63922c4e8 Mon Sep 17 00:00:00 2001 From: Dslak Date: Tue, 8 Dec 2020 11:01:58 +0100 Subject: [PATCH] add swipe and url title --- src/app/detail/detail.component.html | 4 +-- src/app/detail/detail.component.ts | 4 +-- src/app/home/home.component.html | 2 +- src/app/home/home.component.scss | 16 +++++++-- src/app/home/home.component.ts | 39 ++++++++++++++++++++-- src/app/portfolio/portfolio.component.html | 2 +- src/app/portfolio/portfolio.component.ts | 4 +-- src/assets/scss/global.scss | 2 +- 8 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 929e85d..d15145a 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -51,13 +51,13 @@ Exhibitions: {{exhibition.title}} Works: {{work.title}} diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index f2d3553..23c6ba7 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -46,11 +46,11 @@ export class DetailComponent implements OnInit { this.showDetails(this.section, this.id) } - showDetails(section, id): void { + showDetails(section, id, title = ''): void { this.galleryImages = [] this.apisService.getDetails(section, id).toPromise().then((response) => { if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) { - this.history.push(`/detail/${section}/${id}`) + this.history.push(`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`) } const detail = response.item diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 65d7521..7ee6a34 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,7 @@
-
+
loading diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 718015a..8c0ef20 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -33,11 +33,11 @@ } .goto-prev { top: 60px; - left: 50px; + left: 20px; } .goto-next { top: calc(80vh + 10px); - right: 50px; + right: 20px; .icon { &:before { transform: translate(-50%, -50%) rotate(180deg); @@ -166,6 +166,18 @@ } +@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%;} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 6e95bbf..66c8994 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -19,6 +19,9 @@ export class HomeComponent implements OnInit { public paused: boolean = false private scrollPos: number = 0 + private swipeCoord?: [number, number] + private swipeTime?: number + constructor( private apisService: ApisService, private router: Router, @@ -69,9 +72,9 @@ export class HomeComponent implements OnInit { },2000) } - showDetails(id): void { + showDetails(id, title = ''): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' - this.router.navigate([`/detail/${section}/${id}`]) + this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) } onLoad(id): void { @@ -95,4 +98,36 @@ export class HomeComponent implements OnInit { 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' + } + } + } } diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index a8f57e1..c84d12b 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,7 +1,7 @@
-
+
loading
diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index 459219e..34dbbbf 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -65,9 +65,9 @@ export class PortfolioComponent implements OnInit { }) } - showDetails(id): void { + showDetails(id, title = ''): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' - this.router.navigate([`/detail/${section}/${id}`]) + this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) } onLoad(id): void { diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index cc49963..b39e98f 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -39,5 +39,5 @@ button { height: 100vh; width: 100vw; background: radial-gradient(circle, transparent 0%, transparent 85%, rgba(255,255,255,0.2) 95%, rgba(255,255,255,0.3) 100%); - z-index: 0; + z-index: -1; }