viewy 2.0.6

A web UI toolkit that combine the advantages of a design system and an ui library.
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

function throttle(func, wait, leading, trailing, context) {
    var ctx, args, result;
    var timeout = null;
    var previous = 0;
    var later = function () {
        previous = new Date;
        timeout = null;
        result = func.apply(ctx, args);
    };
    return function () {
        var now = new Date;
        if (!previous && !leading) previous = now;
        var remaining = wait - (now - previous);
        ctx = context || this;
        args = arguments;
        // Si la période d'attente est écoulée
        if (remaining <= 0) {
            // Réinitialiser les compteurs
            clearTimeout(timeout);
            timeout = null;
            // Enregistrer le moment du dernier appel
            previous = now;
            // Appeler la fonction
            result = func.apply(ctx, args);
        } else if (!timeout && trailing) {
            // Sinon on s’endort pendant le temps restant
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};

window.addEventListener("startViewy", ({detail}) => {
    detail.root.querySelectorAll("[data-async-datalist]")
        .forEach(inputContainer => {
            let url = inputContainer.getAttribute("data-async-datalist");
            let datalist = document.createElement("datalist");
            let input = inputContainer.querySelector("input");
            input.setAttribute("autocomplete", "off");
            datalist.setAttribute("id", input.getAttribute("list"));
            inputContainer.appendChild(datalist);

            input.addEventListener("input", throttle(async e => {
                console.log(e.key, e.code);
                if (!e.isComposing && !["ArrowDown", "ArrowUp", "Enter"].includes(e.code)) {
                    const response = await fetch(`${url}${e.target.value}`);
                    const suggestions = await response.json();
                    datalist.innerText = "";
                    suggestions.forEach(suggestion => {
                        let option = document.createElement("option");
                        option.setAttribute("value", suggestion.value);
                        option.text = suggestion.label;
                        datalist.appendChild(option);
                    })
                }
            }, 300, false, true));
        });
});