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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

function setErrorHandling(component_root, input) {
    if (input) {
        input.addEventListener("invalid", e => {
            e.preventDefault();
            let old_helper_text = component_root.querySelector(".file-input__helper-text");
            if (old_helper_text !== null) {
                old_helper_text.remove();
            }
            let helper_text = document.createElement("div");
            helper_text.classList.add("view", "text", "text--caption", "file-input__helper-text");
            helper_text.textContent = "Vous devez selectionner un fichier";
            component_root.appendChild(helper_text);
            component_root.classList.add("file-input--error");
            input.addEventListener("change", () => {
                component_root.classList.remove("file-input--error");
                if (old_helper_text !== null) {
                    helper_text.replaceWith(old_helper_text);
                } else {
                    helper_text.remove();
                }
            }, {once: true});
        });
    }
}

window.addEventListener("startViewy", ({detail}) => {
    detail.root.querySelectorAll("[data-input-file]")
        .forEach(fileInputOpener => {
                fileInputOpener.addEventListener("click", (e) => {
                    e.preventDefault();
                    e.stopPropagation();

                    let fileInput = document.getElementById(fileInputOpener.getAttribute("data-input-file"));

                    if (fileInput.hasAttribute("data-auto-submit")) {
                        fileInput.addEventListener("change", () => {
                            fileInput.closest("form").submit();
                        });
                    }

                    fileInput.click();
                });

        });
    detail.root.querySelectorAll(".file-input")
        .forEach(fileInputComponent => {
            let triggerButton = fileInputComponent.querySelector(".file-input__button");
            if (triggerButton) {
                triggerButton.addEventListener("click", e => {
                    e.preventDefault();
                    fileInputComponent.querySelector("input[type='file']")
                        .click();
                });
            }
        });
    detail.root.querySelectorAll(".file-input--simple")
        .forEach(fileInputComponent => {
            let fileInput = fileInputComponent.querySelector("input[type='file']");
            fileInput.addEventListener("change", e => {
                fileInputComponent.querySelector(".file-input__file-name").textContent = [...e.target.files].map(file => file.name).join(", ");
            });
            setErrorHandling(fileInputComponent, fileInput);
        });

    detail.root.querySelectorAll(".file-input--image")
        .forEach(fileInputComponent => {
            let fileInput = fileInputComponent.querySelector("input[type='file']");
            fileInput.addEventListener("change", e => {
                fileInputComponent.querySelector(".file-input__file-name").textContent = [...e.target.files].map(file => file.name).join(", ");
                fileInputComponent.querySelector(".file-input__image-preview").src = URL.createObjectURL(e.target.files[0]);
            });
            setErrorHandling(fileInputComponent, fileInput);
        });
});