dslak_website/src/app/home/home.component.ts

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