multiple-photos.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

multiple-photos.ts
View Options

	import { File as SealiousFile, CollectionItem } from "sealious";
	import { FlatTemplatable, tempstream } from "tempstream";
	import { MultipleFiles, MultipleFilesOptions } from "./multiple-files";
	import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
	import KoaResponsiveImageRouter from "koa-responsive-image-router";

	export class MultiplePhotos extends MultipleFiles {
	constructor(
	public field: MultipleFilesField,
	public imageRouter: KoaResponsiveImageRouter,
	options?: Partial<MultipleFilesOptions>
	) {
	super(field, options);
	}

	getClassModifiers() {
	return ["multiple-files--photos"];
	}

	getInputAttributes() {
	return { ...super.getInputAttributes(), accept: "image/*" };
	}

	async renderFileItem(
	fileItem: CollectionItem,
	file: SealiousFile
	): Promise<FlatTemplatable> {
	const path = file.getDataPath();
	if (!path) {
	return "missing file";
	}
	return tempstream/* HTML */ `<li>
	<a href="${file.getURL()}" data-turbo="false">
	${this.imageRouter.image({
	path,
	resolutions: [150, 300],
	sizes_attr: "150px",
	})}
	</a>
	<span class="filename"> ${file.filename \|\| "no filename"}</span>
	${this.renderFileRemoveButton(fileItem)}
	</li>`;
	}
	}