add swipe and url title

src/app/detail/detail.component.html

@@ -51,13 +51,13 @@
 
       <span class="links" *ngIf="details.exhibitions && details.exhibitions.length"><b>Exhibitions:</b>
         <span class="link" *ngFor="let exhibition of details.exhibitions"
-              (click)="showDetails('exhibitions', exhibition.id)"
+              (click)="showDetails('exhibitions', exhibition.id, exhibition.title)"
               routerLink="/detail/exhibitions/{{exhibition.id}}">{{exhibition.title}} </span>
       </span>
 
       <span class="links" *ngIf="details.works && details.works.length"><b>Works:</b>
         <span class="link" *ngFor="let work of details.works"
-              (click)="showDetails('works', work.id)"
+              (click)="showDetails('works', work.id, work.title)"
               routerLink="/detail/works/{{work.id}}">{{work.title}} </span>
       </span>
   </div>

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

src/app/home/home.component.html

@@ -1,7 +1,7 @@
 <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>
+  <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)" (mouseover)="paused=true" (mouseout)="paused=false">
         <img class="image" *ngIf="item.loading" src="/assets/images/loader.webp" alt="loading">

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%;}

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'
+      }
+    }
+  }
 }

src/app/portfolio/portfolio.component.html

@@ -1,7 +1,7 @@
 <div class="component-portfolio">
   <div class="row no-gutters row-container">
     <div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + item.width" *ngFor="let item of portfolioItems">
-      <div class="box" (click)="showDetails(item.id)">
+      <div class="box" (click)="showDetails(item.id, item.title)">
         <img class="loader" *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">

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 {

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;
 }