ngx-picture
Version:
An Angular library to properly size, lazy load images, and use next generation formats
163 lines (152 loc) • 10 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, EventEmitter, PLATFORM_ID, Component, ChangeDetectionStrategy, Inject, Optional, ContentChild, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { isPlatformServer, CommonModule } from '@angular/common';
import { WINDOW } from 'ngx-window-token';
const DEFAULT_BREAKPOINTS = {
'(min-width: 1280px) and (max-width: 1919.99px)': 1280,
'(max-width: 599.99px)': 300,
'(min-width: 600px) and (max-width: 959.99px)': 600,
'(min-width: 960px) and (max-width: 1279.99px)': 960,
'(min-width: 1920px)': 1920
};
function cloudinarySrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
return url
? `${url.replace('upload/', 'upload/w_' + breakpointValue + '/f_' + imageFormat + '/')}`
: undefined;
}
const CLOUDINARY_CONFIG = {
breakpoints: DEFAULT_BREAKPOINTS,
imageFormats: ['webp', 'jpg'],
srcInterpolator: cloudinarySrcInterpolator,
};
function graphCmsSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
return url
? `https://media.graphcms.com/resize=w:${breakpointValue},fit:scale/output=format:${imageFormat === 'jpeg' ? 'jpg' : 'webp'}/${url.replace('https://media.graphcms.com/', '')}`
: undefined;
}
const GRAPH_CMS_CONFIG = {
breakpoints: DEFAULT_BREAKPOINTS,
imageFormats: ['webp', 'jpg'],
srcInterpolator: graphCmsSrcInterpolator,
};
function imagekitSrcInterpolator(url, imageFormat, breakpoint, breakpointValue) {
const fileName = url?.substring(url.lastIndexOf('/'));
return url && fileName
? `${url.replace(fileName, '/tr:w-' + breakpointValue + ',f-' + imageFormat + fileName)}`
: undefined;
}
const IMAGEKIT_CONFIG = {
breakpoints: DEFAULT_BREAKPOINTS,
imageFormats: ['webp', 'jpg'],
srcInterpolator: imagekitSrcInterpolator,
};
const NGX_PICTURE_CONFIG = new InjectionToken('NGX_PICTURE_CONFIG');
class PictureComponent {
constructor(platformId, ngxPictureConfig, window, elementRef, changeDetectorRef) {
this.platformId = platformId;
this.ngxPictureConfig = ngxPictureConfig;
this.window = window;
this.elementRef = elementRef;
this.changeDetectorRef = changeDetectorRef;
this.imageFormats = this.ngxPictureConfig.imageFormats;
this.breakpoints = this.ngxPictureConfig.breakpoints;
this.lazyLoad = false;
this.srcInterpolator = this.ngxPictureConfig.srcInterpolator;
this.loaded = new EventEmitter();
this.show = false;
}
ngOnInit() {
if (isPlatformServer(this.platformId)) {
this.show = true;
}
}
ngAfterViewInit() {
if (this.lazyLoad && this.window && 'IntersectionObserver' in this.window) {
this.intersectionObserver = new IntersectionObserver((entries) => {
if (entries.find((entry) => {
return (entry.isIntersecting &&
entry.target === this.elementRef.nativeElement);
})) {
this.showLazyPicture();
}
}, {});
this.intersectionObserver.observe(this.elementRef.nativeElement);
}
else {
this.show = true;
this.changeDetectorRef.detectChanges();
}
}
showLazyPicture() {
this.intersectionObserver?.unobserve(this.elementRef.nativeElement);
this.show = true;
this.changeDetectorRef.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PictureComponent, deps: [{ token: PLATFORM_ID }, { token: NGX_PICTURE_CONFIG }, { token: WINDOW, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PictureComponent, selector: "ngx-picture", inputs: { src: "src", imageFormats: "imageFormats", breakpoints: "breakpoints", alt: "alt", lazyLoad: "lazyLoad", srcInterpolator: "srcInterpolator" }, outputs: { loaded: "loaded" }, queries: [{ propertyName: "imgTemplate", first: true, predicate: ["imgTemplate"], descendants: true }], ngImport: i0, template: "<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n <source\r\n *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n [srcset]=\"\r\n srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n \"\r\n [media]=\"breakpoint.key\"\r\n type=\"image/{{ imageFormat }}\"\r\n />\r\n </ng-container>\r\n <ng-container\r\n [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n >\r\n </ng-container>\r\n <ng-template #defaultImageTemplate>\r\n <img\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n (load)=\"loaded.emit($event)\"\r\n class=\"ngx-picture__picture__img\"\r\n loading=\"lazy\"\r\n #img\r\n />\r\n </ng-template>\r\n</picture>\r\n", styles: [":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PictureComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-picture', changeDetection: ChangeDetectionStrategy.OnPush, template: "<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n <source\r\n *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n [srcset]=\"\r\n srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n \"\r\n [media]=\"breakpoint.key\"\r\n type=\"image/{{ imageFormat }}\"\r\n />\r\n </ng-container>\r\n <ng-container\r\n [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n >\r\n </ng-container>\r\n <ng-template #defaultImageTemplate>\r\n <img\r\n [src]=\"src\"\r\n [alt]=\"alt\"\r\n (load)=\"loaded.emit($event)\"\r\n class=\"ngx-picture__picture__img\"\r\n loading=\"lazy\"\r\n #img\r\n />\r\n </ng-template>\r\n</picture>\r\n", styles: [":host{width:100%;height:inherit;display:block;min-height:1px}.ngx-picture__picture,.ngx-picture__picture .ngx-picture__picture__img{width:100%;height:inherit}\n"] }]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [NGX_PICTURE_CONFIG]
}] }, { type: Window, decorators: [{
type: Optional
}, {
type: Inject,
args: [WINDOW]
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { imgTemplate: [{
type: ContentChild,
args: ['imgTemplate']
}], src: [{
type: Input
}], imageFormats: [{
type: Input
}], breakpoints: [{
type: Input
}], alt: [{
type: Input
}], lazyLoad: [{
type: Input
}], srcInterpolator: [{
type: Input
}], loaded: [{
type: Output
}] } });
class NgxPictureModule {
static forRoot(config) {
return {
ngModule: NgxPictureModule,
providers: [
{
provide: NGX_PICTURE_CONFIG,
useValue: config,
},
],
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgxPictureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: NgxPictureModule, declarations: [PictureComponent], imports: [CommonModule], exports: [PictureComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgxPictureModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgxPictureModule, decorators: [{
type: NgModule,
args: [{
declarations: [PictureComponent],
imports: [CommonModule],
exports: [PictureComponent],
}]
}] });
/*
* Public API Surface of ngx-picture
*/
/**
* Generated bundle index. Do not edit.
*/
export { CLOUDINARY_CONFIG, DEFAULT_BREAKPOINTS, GRAPH_CMS_CONFIG, IMAGEKIT_CONFIG, NGX_PICTURE_CONFIG, NgxPictureModule, PictureComponent, cloudinarySrcInterpolator, graphCmsSrcInterpolator, imagekitSrcInterpolator };
//# sourceMappingURL=ngx-picture.mjs.map