Clean up
|
|
@ -1,22 +0,0 @@
|
|||
import { ResponsiveImage } from '../model/responsive-image';
|
||||
import { last } from './last';
|
||||
|
||||
export const createImage = (
|
||||
image: ResponsiveImage,
|
||||
alt: string,
|
||||
tabIndex: number,
|
||||
imageScreenRatio = 0.25
|
||||
): HTMLImageElement => {
|
||||
const img = new Image(image.width, image.height);
|
||||
|
||||
img.tabIndex = tabIndex;
|
||||
img.srcset = image.srcSet;
|
||||
img.sizes =
|
||||
image.images
|
||||
.map(d => `(max-width: ${d.width / imageScreenRatio}px) ${d.width}px,`)
|
||||
.join('\n') + `\n${last(image.images).width}px`;
|
||||
img.src = last(image.images)?.path;
|
||||
img.alt = alt;
|
||||
|
||||
return img;
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export const last = <T>(list: ArrayLike<T>): T =>
|
||||
list.length >= 1 ? list[list.length - 1] : undefined;
|
||||
44
src/index.ts
|
|
@ -1,35 +1,19 @@
|
|||
import './index.scss';
|
||||
import './no-change/404.html';
|
||||
import './no-change/robots.txt';
|
||||
import { Photos } from './photos';
|
||||
import { photos } from './generated/photos';
|
||||
import { PhotoGallery, requiredElement } from './photos';
|
||||
|
||||
// @ts-ignore
|
||||
const images = require.context('./pictures', true, /.jpg$/);
|
||||
const imagePath = name => images(name, true);
|
||||
document.documentElement.classList.add('js');
|
||||
|
||||
const addSupportForTabNavigation = () =>
|
||||
(document.onkeydown = e => {
|
||||
if (e.key === ' ') {
|
||||
(document.activeElement as HTMLElement)?.click();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
const sizeFrame = () => {
|
||||
const container = document.querySelector('#frame-container') as HTMLElement;
|
||||
const image = container.querySelector('img');
|
||||
|
||||
image.style.maxWidth = container.clientWidth + 'px';
|
||||
image.style.left = container.offsetLeft + container.clientWidth / 2 + 'px';
|
||||
};
|
||||
|
||||
new Photos(
|
||||
images.keys().map(k => imagePath(k)),
|
||||
document.querySelector('#landscapes'),
|
||||
document.querySelector('#portraits'),
|
||||
document.querySelector('#frame-image')
|
||||
const gallery = requiredElement<HTMLElement>('#gallery', HTMLElement);
|
||||
const frame = requiredElement<HTMLElement>('#frame-content', HTMLElement);
|
||||
const toggle = requiredElement<HTMLButtonElement>(
|
||||
'#slideshow-toggle',
|
||||
HTMLButtonElement
|
||||
);
|
||||
|
||||
addSupportForTabNavigation();
|
||||
window.addEventListener('resize', sizeFrame);
|
||||
sizeFrame();
|
||||
new PhotoGallery({
|
||||
photos,
|
||||
gallery,
|
||||
frame,
|
||||
toggle,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
export type ResponsiveImage = {
|
||||
srcSet: string;
|
||||
src: string;
|
||||
placeholder: string;
|
||||
width: number;
|
||||
height: number;
|
||||
images: Array<{
|
||||
path: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}>;
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<title>Not found</title>
|
||||
<meta name="theme-color" content="#b7455e" />
|
||||
<meta name="viewport" content="initial-scale=1.0" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #b7455e;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Roboto", "Helvetica Neue", sans-serif;
|
||||
font-weight: 100;
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The requested resource cannot be found.</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
User-agent: *
|
||||
Allow: /
|
||||
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 3 MiB After Width: | Height: | Size: 3 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 9.6 MiB After Width: | Height: | Size: 7.4 MiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 6.7 MiB After Width: | Height: | Size: 4.5 MiB |
|
Before Width: | Height: | Size: 279 KiB After Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 6.5 MiB After Width: | Height: | Size: 2 MiB |
|
Before Width: | Height: | Size: 7.6 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 381 KiB After Width: | Height: | Size: 482 KiB |
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 288 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 215 KiB |
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 184 KiB After Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 307 KiB After Width: | Height: | Size: 368 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 274 KiB |
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 308 KiB |
|
Before Width: | Height: | Size: 321 KiB After Width: | Height: | Size: 346 KiB |
|
Before Width: | Height: | Size: 413 KiB After Width: | Height: | Size: 462 KiB |
|
Before Width: | Height: | Size: 353 KiB After Width: | Height: | Size: 429 KiB |
|
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 246 KiB |
|
Before Width: | Height: | Size: 381 KiB After Width: | Height: | Size: 436 KiB |
|
Before Width: | Height: | Size: 356 KiB After Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 224 KiB After Width: | Height: | Size: 264 KiB |
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 406 KiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 203 KiB |
|
Before Width: | Height: | Size: 369 KiB After Width: | Height: | Size: 437 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 820 KiB |
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 465 KiB After Width: | Height: | Size: 572 KiB |
|
Before Width: | Height: | Size: 670 KiB After Width: | Height: | Size: 691 KiB |
|
Before Width: | Height: | Size: 810 KiB After Width: | Height: | Size: 920 KiB |