w0bm-stickers/flash.js at master · w0bm/w0bm-stickers · GitHub

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
function init_flash() {
    const cfg = {
        flash: {
            elem: document.querySelector("div#flash"),
            keyframe: [ { top: "-22px" }, { top: 0 } ],
            duration: 4000, // 4 seconds
            options: {
                duration: 400,
                fill: "both"
            },
            types: [
                "error",
                "success",
                "warn"
            ]
        }
    };
    let _tmp = {
        flash: false
    };
    return flash = ({ type, msg }) => {
        cfg.flash.elem.innerHTML = msg;
        if(cfg.flash.types.includes(type)) {
            cfg.flash.elem.className = "";
            cfg.flash.elem.classList.add(type);
        }
        if(_tmp.flash)
            return false;
        _tmp.flash = true;
        if(typeof cfg.flash.elem.animate !== "function") { // Edgy af
            const key = Object.keys(cfg.flash.keyframe[0])[0];
            cfg.flash.elem.style.top = cfg.flash.keyframe[1][key];
            setTimeout(() => {
                cfg.flash.elem.style.top = cfg.flash.keyframe[0][key];
                _tmp.flash = false;
            }, cfg.flash.duration);
            return false;
        }
        cfg.flash.elem.animate(
            cfg.flash.keyframe,
            cfg.flash.options
        ).onfinish = () => setTimeout(() => {
            cfg.flash.elem.animate(
                cfg.flash.keyframe,
                Object.assign({ direction: "reverse" }, cfg.flash.options)
            ).onfinish = () => _tmp.flash = false;
        }, cfg.flash.duration);
        return false;
    };
}