53 lines
1.4 KiB
HTML
53 lines
1.4 KiB
HTML
<div class="image-modal">
|
|
<div
|
|
#viewport
|
|
class="image-modal__viewport"
|
|
[class.image-modal__viewport--zoomed]="zoom() > data.minZoom"
|
|
(wheel)="onWheel($event)"
|
|
(dblclick)="onDoubleClick($event)"
|
|
(pointerdown)="onPointerDown($event)"
|
|
(pointermove)="onPointerMove($event)"
|
|
(pointerup)="onPointerUp($event)"
|
|
(pointercancel)="onPointerUp($event)"
|
|
>
|
|
@if (!imageFailed()) {
|
|
<img
|
|
#image
|
|
class="image-modal__image"
|
|
[src]="data.src"
|
|
[alt]="data.alt"
|
|
[style.transform]="transform()"
|
|
draggable="false"
|
|
(load)="onImageLoad()"
|
|
(error)="imageFailed.set(true)"
|
|
/>
|
|
} @else {
|
|
<p class="image-modal__error" role="alert">No se pudo cargar la imagen.</p>
|
|
}
|
|
</div>
|
|
|
|
<div class="image-modal__controls" aria-label="Controles de zoom">
|
|
<button
|
|
type="button"
|
|
class="image-modal__control"
|
|
aria-label="Alejar"
|
|
[disabled]="zoom() <= data.minZoom"
|
|
(click)="zoomOut()"
|
|
>
|
|
−
|
|
</button>
|
|
<button type="button" class="image-modal__zoom" aria-label="Restablecer zoom" (click)="reset()">
|
|
{{ zoomLabel() }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="image-modal__control"
|
|
aria-label="Acercar"
|
|
[disabled]="zoom() >= data.maxZoom"
|
|
(click)="zoomIn()"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|