« get me outta code hell

html.js « util « src - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/util/html.js
blob: 94756984bc446920aa8f08d321d082b9e909ceb2 (plain)
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
83
84
85
86
87
88
89
90
91
92
93
94
// Some really simple functions for formatting HTML content.

// Non-comprehensive. ::::P
export const selfClosingTags = ['br', 'img'];

// Pass to tag() as an attri8utes key to make tag() return a 8lank string
// if the provided content is empty. Useful for when you'll only 8e showing
// an element according to the presence of content that would 8elong there.
export const onlyIfContent = Symbol();

export function tag(tagName, ...args) {
    const selfClosing = selfClosingTags.includes(tagName);

    let openTag;
    let content;
    let attrs;

    if (typeof args[0] === 'object' && !Array.isArray(args[0])) {
        attrs = args[0];
        content = args[1];
    } else {
        content = args[0];
    }

    if (selfClosing && content) {
        throw new Error(`Tag <${tagName}> is self-closing but got content!`);
    }

    if (attrs?.[onlyIfContent] && !content) {
        return '';
    }

    if (attrs) {
        const attrString = attributes(args[0]);
        if (attrString) {
            openTag = `${tagName} ${attrString}`;
        }
    }

    if (!openTag) {
        openTag = tagName;
    }

    if (Array.isArray(content)) {
        content = content.filter(Boolean).join('\n');
    }

    if (content) {
        if (content.includes('\n')) {
            return (
                `<${openTag}>\n` +
                content.split('\n').map(line => '    ' + line + '\n').join('') +
                `</${tagName}>`
            );
        } else {
            return `<${openTag}>${content}</${tagName}>`;
        }
    } else {
        if (selfClosing) {
            return `<${openTag}>`;
        } else {
            return `<${openTag}></${tagName}>`;
        }
    }
}

export function escapeAttributeValue(value) {
    return value
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&apos;');
}

export function attributes(attribs) {
    return Object.entries(attribs)
        .map(([ key, val ]) => {
            if (typeof val === 'undefined' || val === null)
                return [key, val, false];
            else if (typeof val === 'string')
                return [key, val, true];
            else if (typeof val === 'boolean')
                return [key, val, val];
            else if (typeof val === 'number')
                return [key, val.toString(), true];
            else if (Array.isArray(val))
                return [key, val.filter(Boolean).join(' '), val.length > 0];
            else
                throw new Error(`Attribute value for ${key} should be primitive or array, got ${typeof val}`);
        })
        .filter(([ key, val, keep ]) => keep)
        .map(([ key, val ]) => (typeof val === 'boolean'
            ? `${key}`
            : `${key}="${escapeAttributeValue(val)}"`))
        .join(' ');
}