@obliczeniowo/elementary
Version:
Library made in Angular version 20
103 lines (97 loc) • 6.43 kB
JavaScript
import * as i0 from '@angular/core';
import { input, model, effect, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
const loadImage = async (src) => {
return new Promise((res, rej) => {
const image = document.createElement('img');
image.onload = () => {
res(image);
};
image.src = src;
});
};
/* eslint-disable @typescript-eslint/no-unsafe-argument */
class PreviewComponent {
src = input.required();
width = input(320);
height = input(240);
columns = input(5);
rows = input(2);
current = model(1);
starting = input(1);
image;
timeout;
constructor() {
effect(() => {
this.image = undefined;
loadImage(this.src()).then((image) => (this.image = image));
});
}
imgCropWidth() {
const { image, columns, width } = this;
return image ? image.width / (columns() || 1) : width();
}
imgCropHeight() {
const { image, rows, height } = this;
return image ? image.height / (rows() || 1) : height();
}
scale() {
const cw = this.imgCropWidth();
const ch = this.imgCropHeight();
const xs = this.width() / cw;
const ys = this.height() / ch;
return Math.abs(xs) < Math.abs(ys) ? xs : ys;
}
y() {
if (this.image) {
return (-this.imgCropHeight() *
this.scale() *
Math.floor(this.current() / this.columns()));
}
return 0;
}
over(over) {
if (over && !this.timeout) {
const anim = () => {
this.current.set((this.current() + 1) % (this.columns() * this.rows()));
if (over) {
this.timeout = setTimeout(anim, 500);
}
else {
this.timeout = undefined;
}
};
anim();
}
else {
clearTimeout(this.timeout);
this.timeout = undefined;
this.current.set(this.starting());
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PreviewComponent, isStandalone: false, selector: "obl-preview", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, starting: { classPropertyName: "starting", publicName: "starting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, ngImport: i0, template: "<div [ngStyle]=\"{ 'width.px': width(), 'height.px': height() }\">\n @if (image) {\n <div\n class=\"crop\"\n [ngStyle]=\"{\n 'height.px': imgCropHeight() * scale(),\n 'width.px': imgCropWidth() * scale()\n }\"\n (mouseover)=\"over(true)\"\n (mouseleave)=\"over(false)\"\n >\n <img\n draggable=\"false\"\n [src]=\"src()\"\n [ngStyle]=\"{\n 'width.px': scale() * image.width,\n 'top.px': y(),\n 'left.px': -imgCropWidth() * scale() * (current() % columns())\n }\"\n />\n </div>\n }\n</div>\n", styles: [".crop{overflow:hidden;position:relative}.crop img{position:absolute}:host>div{display:flex;justify-content:center;align-items:center;background-color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-preview', standalone: false, template: "<div [ngStyle]=\"{ 'width.px': width(), 'height.px': height() }\">\n @if (image) {\n <div\n class=\"crop\"\n [ngStyle]=\"{\n 'height.px': imgCropHeight() * scale(),\n 'width.px': imgCropWidth() * scale()\n }\"\n (mouseover)=\"over(true)\"\n (mouseleave)=\"over(false)\"\n >\n <img\n draggable=\"false\"\n [src]=\"src()\"\n [ngStyle]=\"{\n 'width.px': scale() * image.width,\n 'top.px': y(),\n 'left.px': -imgCropWidth() * scale() * (current() % columns())\n }\"\n />\n </div>\n }\n</div>\n", styles: [".crop{overflow:hidden;position:relative}.crop img{position:absolute}:host>div{display:flex;justify-content:center;align-items:center;background-color:#000}\n"] }]
}], ctorParameters: () => [] });
class ImageModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ImageModule, declarations: [PreviewComponent], imports: [CommonModule], exports: [PreviewComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ImageModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ImageModule, decorators: [{
type: NgModule,
args: [{
declarations: [PreviewComponent],
imports: [CommonModule],
exports: [PreviewComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ImageModule, PreviewComponent, loadImage };
//# sourceMappingURL=obliczeniowo-elementary-image.mjs.map