All files / app/components/projects/gallery gallery.component.ts

100% Statements 28/28
50% Branches 2/4
100% Functions 10/10
100% Lines 27/27

Kamil Chmielowski

Web / Angular

Jasmine code coverage report for cv app.

You can contact with me by email: kamilchmielowski94@gmail.com or my page.

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91                                                          1x     54x 54x   54x     54x 54x 54x       4x 4x 4x 4x   4x       2x 2x 2x 2x   2x       2x       2x       4x 4x   4x 16x   4x   4x 4x               1x      
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  HostBinding,
  HostListener,
  Input,
} from '@angular/core';
import { CommonModule } from '@angular/common';
 
import { SvgIconComponent } from 'angular-svg-icon';
import { TranslateModule } from '@ngx-translate/core';
 
import { DomService } from '../../../services/dom/dom.service';
import { GalleryModel } from './gallery.model';
 
@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [
    CommonModule,
    SvgIconComponent,
    TranslateModule,
  ],
})
export class GalleryComponent {
  @Input({ required: true }) images!: GalleryModel[];
 
  @HostBinding('class.displayed') private isDisplayed = false;
  @HostBinding('class.visible') private isVisible = false;
 
  protected slideIndex = 0;
 
  constructor(
    private cdr: ChangeDetectorRef,
    private domService: DomService,
    private elementRef: ElementRef<HTMLElement>,
  ) {}
 
  protected openModal(): void {
    this.isDisplayed = true;
    setTimeout(() => {
      this.isVisible = true;
      this.cdr.markForCheck();
    });
    this.domService.getWindow().document.body.classList.add('no-scroll');
  }
 
  protected closeModal(): void {
    this.isVisible = false;
    setTimeout(() => {
      this.isDisplayed = false;
      this.cdr.markForCheck();
    }, 450);
    this.domService.getWindow().document.body.classList.remove('no-scroll');
  }
 
  protected moveSlide(n: number): void {
    this.showSlide(this.slideIndex += n);
  }
 
  protected currentSlide(n: number): void {
    this.showSlide(this.slideIndex = n);
  }
 
  private showSlide(n: number): void {
    const slides = this.elementRef.nativeElement.getElementsByClassName('img-slides') as HTMLCollectionOf<HTMLElement>;
    this.slideIndex = n > slides.length ? 1 : n < 1 ? slides.length : this.slideIndex;
 
    for (let i = 0; i < slides.length; i++) {
      slides[i].classList.add('hide');
    }
    slides.item(this.slideIndex - 1)?.classList.remove('hide');
 
    setTimeout(() => {
      (slides.item(this.slideIndex - 1)
        ?.querySelector('.image-row')
        ?.children.item(n - 1) as HTMLButtonElement
      )?.focus();
    })
  }
 
  @HostListener('keydown.escape', ['$event']) private onKeydownHandler(): void {
    this.closeModal();
  }
}