All files / app/layout/picture-lightbox picture-lightbox.component.html

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
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (lightboxService.isOpen()) {
    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
    <div
        #backdropEl
        class="lightbox__backdrop"
        [class.lightbox__backdrop--zoomed]="lightboxService.isZoomed()"
        role="dialog"
        aria-modal="true"
        (click)="onBackdropClick($event)"
        data-testid="lightbox-backdrop"
    >
        <ui-icon-button
            class="lightbox__close"
            [class.lightbox__close--hidden]="lightboxService.isZoomed()"
            icon="close"
            aria-label="Закрыть"
            (click)="lightboxService.close()"
            data-testid="lightbox-close"
        />
 
        @if (lightboxService.isLoading()) {
            <div class="lightbox__loading">
                <ui-spinner />
            </div>
        } @else {
            @if (lightboxService.currentPicture(); as picture) {
                <div
                    class="lightbox__content"
                    [class.lightbox__content--zoomed]="lightboxService.isZoomed()"
                >
                    <img
                        class="lightbox__image"
                        [src]="picture.imageUrl"
                        [alt]="picture.title"
                        tabindex="0"
                        role="button"
                        (click)="onImageClick(); $event.stopPropagation()"
                        (keydown.enter)="onImageClick()"
                        data-testid="lightbox-image"
                    />
                </div>
 
                <div
                    class="lightbox__footer"
                    [class.lightbox__footer--hidden]="lightboxService.isZoomed()"
                    data-testid="lightbox-footer"
                >
                    <span class="lightbox__title">{{ picture.title }}</span>
                    <a
                        class="lightbox__detail-link"
                        [routerLink]="['/pictures', picture.id]"
                        (click)="onDetailLinkClick(); $event.stopPropagation()"
                        data-testid="lightbox-detail-link"
                    >
                        Открыть страницу иллюстрации
                    </a>
                </div>
            }
        }
    </div>
}