-
Notifications
You must be signed in to change notification settings - Fork 27
/
declarations.ts
49 lines (45 loc) 路 1.52 KB
/
declarations.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import { Font } from "../types";
import { getFontId } from "../utils/ids";
const previewFontsStylesheet = document.createElement("style");
document.head.appendChild(previewFontsStylesheet);
/**
* Add declaration for applying the specified preview font
*/
export function applyFontPreview(previewFont: Font, selectorSuffix: string): void {
const fontId = getFontId(previewFont.family);
const style = `
#font-button-${fontId}${selectorSuffix} {
font-family: "${previewFont.family}";
}
`;
previewFontsStylesheet.appendChild(document.createTextNode(style));
}
/**
* Create/find and return the apply-font stylesheet for the provided selectorSuffix
*/
function getActiveFontStylesheet(selectorSuffix: string): HTMLStyleElement {
const stylesheetId = `active-font-${selectorSuffix}`;
let activeFontStylesheet = document.getElementById(stylesheetId) as HTMLStyleElement;
if (!activeFontStylesheet) {
activeFontStylesheet = document.createElement("style");
activeFontStylesheet.id = stylesheetId;
document.head.appendChild(activeFontStylesheet);
}
return activeFontStylesheet;
}
/**
* Add/update declaration for applying the current active font
*/
export function applyActiveFont(
activeFont: Font,
previousFontFamily: string,
selectorSuffix: string,
): void {
const style = `
.apply-font${selectorSuffix} {
font-family: "${activeFont.family}"${previousFontFamily ? `, "${previousFontFamily}"` : ""};
}
`;
const activeFontStylesheet = getActiveFontStylesheet(selectorSuffix);
activeFontStylesheet.innerHTML = style;
}