@ng-doc/app
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
88 lines (84 loc) • 6.21 kB
JavaScript
import { style, group, animate, query } from '@angular/animations';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, viewChild, TemplateRef, inject, ElementRef, ChangeDetectorRef, Component, ChangeDetectionStrategy, HostListener } from '@angular/core';
import { NgDocOverlayService, NgDocOverlayContainerComponent } from '@ng-doc/ui-kit';
class NgDocImageViewerComponent {
constructor() {
this.src = input.required();
this.alt = input.required();
this.image = viewChild('image', { read: TemplateRef });
this.overlay = inject(NgDocOverlayService);
this.element = inject((ElementRef)).nativeElement;
this.changeDetectorRef = inject(ChangeDetectorRef);
}
clickEvent() {
this.overlayRef?.close();
const { width, height, top, left } = this.element.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const ratio = Math.min(windowWidth / width, windowHeight / height);
const newWidth = width * ratio;
const newHeight = height * ratio;
this.overlayRef = this.overlay.open(this.image(), {
overlayContainer: NgDocOverlayContainerComponent,
positionStrategy: this.overlay
.globalPositionStrategy()
.centerHorizontally()
.centerVertically(),
scrollStrategy: this.overlay.scrollStrategy().block(),
hasBackdrop: true,
backdropClass: 'ng-doc-blur-backdrop',
openAnimation: [
style({ position: 'fixed', width, height, top, left, transform: 'translate(0%, 0)' }),
group([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
width: `${newWidth}px`,
height: `${newHeight}px`,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
})),
query('.ng-doc-image-container', [
style({ padding: 0 }),
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: '16px' })),
]),
]),
],
closeAnimation: [
style({
position: 'fixed',
width: `${newWidth}px`,
height: `${newHeight}px`,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}),
group([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ width, height, top, left, transform: 'translate(0%, 0)' })),
query('.ng-doc-image-container', animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: 0 }))),
]),
],
});
this.overlayRef.afterClose().subscribe(() => {
this.overlayRef = undefined;
this.changeDetectorRef.markForCheck();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: NgDocImageViewerComponent, isStandalone: true, selector: "ng-doc-image-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "clickEvent()" }, properties: { "attr.data-opened": "!!overlayRef" } }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #image>\n <div class=\"ng-doc-image-container\" (click)=\"overlayRef?.close()\">\n <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;cursor:zoom-in;transition:var(--ng-doc-transition)}:host[data-opened=true]>::ng-deep img{opacity:0}:host>::ng-deep img{max-width:100%;vertical-align:middle;border-radius:var(--ng-doc-base-gutter);overflow:hidden}.ng-doc-image-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2);width:100%;height:100%}.ng-doc-image-container .ng-doc-scaled-image{cursor:zoom-out;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocImageViewerComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-image-viewer', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-opened]': '!!overlayRef',
}, template: "<ng-content></ng-content>\n\n<ng-template #image>\n <div class=\"ng-doc-image-container\" (click)=\"overlayRef?.close()\">\n <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;cursor:zoom-in;transition:var(--ng-doc-transition)}:host[data-opened=true]>::ng-deep img{opacity:0}:host>::ng-deep img{max-width:100%;vertical-align:middle;border-radius:var(--ng-doc-base-gutter);overflow:hidden}.ng-doc-image-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--ng-doc-base-gutter) * 2);width:100%;height:100%}.ng-doc-image-container .ng-doc-scaled-image{cursor:zoom-out;width:100%;height:100%}\n"] }]
}], propDecorators: { clickEvent: [{
type: HostListener,
args: ['click']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocImageViewerComponent };
//# sourceMappingURL=ng-doc-app-components-image-viewer.mjs.map