alpinejs/packages/alpinejs/src/utils/classes.js


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


export function setClasses(el, value) {
    if (Array.isArray(value)) {
        return setClassesFromString(el, value.join(' '))
    } else if (typeof value === 'object' && value !== null) {
        return setClassesFromObject(el, value)
    } else if (typeof value === 'function') {
        return setClasses(el, value())
    }

    return setClassesFromString(el, value)
}

function setClassesFromString(el, classString) {
    let split = classString => classString.split(' ').filter(Boolean)

    let missingClasses = classString => classString.split(' ').filter(i => ! el.classList.contains(i)).filter(Boolean)

    let addClassesAndReturnUndo = classes => {
        el.classList.add(...classes)

        return () => { el.classList.remove(...classes) }
    }

    // This is to allow short-circuit expressions like: :class="show || 'hidden'" && "show && 'block'"
    classString = (classString === true) ? classString = '' : (classString || '')

    return addClassesAndReturnUndo(missingClasses(classString))
}

function setClassesFromObject(el, classObject) {
    let split = classString => classString.split(' ').filter(Boolean)

    let forAdd = Object.entries(classObject).flatMap(([classString, bool]) => bool ? split(classString) : false).filter(Boolean)
    let forRemove = Object.entries(classObject).flatMap(([classString, bool]) => ! bool ? split(classString) : false).filter(Boolean)

    let added = []
    let removed = []

    forRemove.forEach(i => {
        if (el.classList.contains(i)) {
            el.classList.remove(i)
            removed.push(i)
        }
    })

    forAdd.forEach(i => {
        if (! el.classList.contains(i)) {
            el.classList.add(i)
            added.push(i)
        }
    })

    return () => {
        removed.forEach(i => el.classList.add(i))
        added.forEach(i => el.classList.remove(i))
    }
}