js/initImages.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function initImages() {
	let content = document.getElementById("content")!;

	let image_count = 0x0;
	let image_list  = Array.from(content.getElementsByTagName("x-image"));
	for (let image of image_list) {
		let file = image.getAttribute("data-file")!;
		console.log("initialising image that links to \"" + file + "\"");

		let source_url    = "/webp/source/" + file + ".webp";
		let thumbnail_url = "/webp/thumbnail/" + file + ".webp";

		let blur_element = document.createElement("img");
		blur_element.setAttribute("class", "blur");
		blur_element.setAttribute("src", thumbnail_url);

		image.appendChild(blur_element);

		let image_element = document.createElement("img");
		image_element.setAttribute("src", thumbnail_url);

		let hyperlink_element = document.createElement("a");
		hyperlink_element.setAttribute("href", source_url);
		hyperlink_element.setAttribute("rel", "noopener noreferrer");
		hyperlink_element.setAttribute("target", "_blank");
		hyperlink_element.appendChild(image_element);

		image.appendChild(hyperlink_element);

		++image_count;
	}

	console.log("initialised (" + image_count + ") image(s)");
}