blob: a3d33c7d92fd5b1e6cd9293c93eb49e62d8f454f (
plain) (
blame)
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/// <reference path="theme.ts" />
namespace Ach {
export async function init(): Promise<void> {
Ach.loadTheme();
let glyph = Ach.getOnlyElementIn(document, "glyph");
let page = glyph.getAttribute("alt");
if (!page) {
throw new Error('glyph does not specify page in "alt" attribute');
}
let portrait = matchMedia("(orientation: portrait)");
let reducedMotion = matchMedia("(prefers-reduced-motion)");
let updateDynamicGlyph = (): void => {
console.log("updating dynamic glyph");
console.log(`note: configuration is { page: "${page}", portrait: ${portrait.matches}, reducedMotion: ${reducedMotion.matches} }`);
let newGlyphAddr: string | undefined = undefined;
switch (page) {
case "achernar":
switch (true) {
case portrait.matches && reducedMotion.matches:
newGlyphAddr = "/svg/glyph/achernarVertical.svg";
break;
case portrait.matches && !reducedMotion.matches:
newGlyphAddr = "/image/achernarVerticalAnimated.webp";
break;
case !portrait.matches && reducedMotion.matches:
newGlyphAddr = "/svg/glyph/achernar.svg";
break;
case !portrait.matches && !reducedMotion.matches:
newGlyphAddr = "/image/achernarAnimated.webp";
break;
}
break;
default:
break;
}
if (newGlyphAddr) {
console.log(`note: new glyph is at "${newGlyphAddr}"`);
glyph.setAttribute("src", newGlyphAddr);
} else {
console.log("note: no new glyph was found suitable");
}
};
updateDynamicGlyph();
portrait .addEventListener("change", updateDynamicGlyph);
reducedMotion.addEventListener("change", updateDynamicGlyph);
}
export function getFirstElementIn(dom: Document, tag: string): Element {
let elements = dom.getElementsByTagName(tag);
if (elements.length < 0x0) {
throw new Error(`unable to find <${tag}> element`);
}
return elements[0x0];
}
export function getOnlyElementIn(dom: Document, id: string): Element {
let element = dom.getElementById(id);
if (!element) {
throw new Error(`unable to find #${id} element`);
}
return element;
}
}
|
