From 2302d90336d18901fec4a3d271f7ab98d23e0322 Mon Sep 17 00:00:00 2001 From: Valexr Date: Wed, 18 Sep 2024 11:51:36 +0200 Subject: [PATCH] rm: os --- src/lib/images.ts | 161 +++++++++++++++++++++++----------------------- 1 file changed, 80 insertions(+), 81 deletions(-) diff --git a/src/lib/images.ts b/src/lib/images.ts index aae2980..abbb97b 100644 --- a/src/lib/images.ts +++ b/src/lib/images.ts @@ -1,108 +1,107 @@ -import { type } from "os"; import { cacheable } from "./cacheable"; type Size = { - width: number; - height: number; + width: number; + height: number; }; type ImageSchema = { - id: number; - alt: string; - src: string; - width: number; - height: number; + id: number; + alt: string; + src: string; + width: number; + height: number; }; type Slide = { - id?: string | number; - src?: string; - alt?: string; - width?: string | number; - height?: string | number; - [key: string]: unknown; + id?: string | number; + src?: string; + alt?: string; + width?: string | number; + height?: string | number; + [key: string]: unknown; }; export const images = createImages(); function createImages() { - type API = [string, number, string]; - const { subscribe, set, get, update } = cacheable>( - "County_Images", - [], - true, - ); + type API = [string, number, string]; + const { subscribe, set, get, update } = cacheable>( + "County_Images", + [], + true, + ); - async function load() { - if (!get().length) { - const url = "./assets/photos.json"; - const res = await fetch(url); - set(await res.json()); + async function load() { + if (!get().length) { + const url = "./assets/photos.json"; + const res = await fetch(url); + set(await res.json()); + } + back(); } - back(); - } - function back() { - const [{ src, alt }] = prepare(); - // await addImageProcess(src) - // const img = new Image(); - // img.src = src - // await img.decode(); - document.documentElement.style.cssText = ` + function back() { + const [{ src, alt }] = prepare(); + // await addImageProcess(src) + // const img = new Image(); + // img.src = src + // await img.decode(); + document.documentElement.style.cssText = ` background: url(${src}) center no-repeat; background-size: cover; `; - document.documentElement.title = alt; - } + document.documentElement.title = alt; + } - function prepare( - limit = 1, - size = { width: window.innerWidth, height: window.innerHeight }, - ) { - const indexes = Array.from({ length: limit }, () => - Math.floor(Math.random() * 24644), - ); - return get().reduce( - (acc: ImageSchema[], [src, aspectRatio, author], id) => { - if (indexes.includes(id)) { - const source = { - width: size.height * (aspectRatio / 10), - height: size.height, - }; - const max = { width: size.width, height: size.height }; - const query = `?w=${ratio(applyRatio(source, max).width)}`; + function prepare( + limit = 1, + size = { width: window.innerWidth, height: window.innerHeight }, + ) { + const indexes = Array.from({ length: limit }, () => + Math.floor(Math.random() * 24644), + ); + return get().reduce( + (acc: ImageSchema[], [src, aspectRatio, author], id) => { + if (indexes.includes(id)) { + const source = { + width: size.height * (aspectRatio / 10), + height: size.height, + }; + const max = { width: size.width, height: size.height }; + const query = `?w=${ratio(applyRatio(source, max).width)}`; - acc.push({ - id, - src: `https://images.unsplash.com/photo-${src}${query}`, - alt: `Image by ${author} from Unsplash`, - ...applyRatio(source, max), - }); - } - return acc; - }, - [], - ); + acc.push({ + id, + src: `https://images.unsplash.com/photo-${src}${query}`, + alt: `Image by ${author} from Unsplash`, + ...applyRatio(source, max), + }); + } + return acc; + }, + [], + ); - function ratio(size: number) { - return size * devicePixelRatio; - } + function ratio(size: number) { + return size * devicePixelRatio; + } - function applyRatio(src: Size, size: Size): Size { - const ratio = Math.min(size.width / src.width, size.height, src.height); - return { - width: Math.round(src.width * ratio), - height: Math.round(src.height * ratio), - }; + function applyRatio(src: Size, size: Size): Size { + const ratio = Math.min(size.width / src.width, size.height, src.height); + return { + width: Math.round(src.width * ratio), + height: Math.round(src.height * ratio), + }; + } } - } - return { - subscribe, - set, - update, - load, - prepare, - back, - }; + return { + subscribe, + set, + update, + load, + prepare, + back, + }; }