@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>
124 lines (120 loc) • 7.8 kB
JavaScript
import * as i0 from '@angular/core';
import { input, viewChild, TemplateRef, inject, ElementRef, ChangeDetectorRef, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocOverlayService, NgDocOverlayContainerComponent } from '@ng-doc/ui-kit';
class NgDocImageViewerComponent {
constructor() {
this.src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : []));
this.image = viewChild('image', { ...(ngDevMode ? { debugName: "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: [
[
{
position: 'fixed',
width: `${width}px`,
height: `${height}px`,
top: `${top}px`,
left: `${left}px`,
transform: 'translate(0%, 0)',
},
{
position: 'fixed',
width: `${newWidth}px`,
height: `${newHeight}px`,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
},
],
{
duration: 300,
easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
},
//
// 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();
});
}
enterContainer(element) {
console.log('enterContainer');
element.animate([{ padding: 0 }, { padding: '16px' }], {
duration: 300,
easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocImageViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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\n class=\"ng-doc-image-container\"\n (click)=\"overlayRef?.close()\"\n (animate.enter)=\"enterContainer(element)\"\n #element>\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: "21.0.6", ngImport: i0, type: NgDocImageViewerComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-image-viewer', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-opened]': '!!overlayRef',
}, template: "<ng-content></ng-content>\n\n<ng-template #image>\n <div\n class=\"ng-doc-image-container\"\n (click)=\"overlayRef?.close()\"\n (animate.enter)=\"enterContainer(element)\"\n #element>\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: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], image: [{ type: i0.ViewChild, args: ['image', { ...{ read: TemplateRef }, isSignal: true }] }], clickEvent: [{
type: HostListener,
args: ['click']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocImageViewerComponent };
//# sourceMappingURL=ng-doc-app-components-image-viewer.mjs.map