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
75
76
77
78
79
80
81
82
83
84
85

window.addEventListener("startViewy", ({detail}) => {

    detail.root.querySelectorAll(".multiple-file-input")
        .forEach(fileInputComponent => {
            let triggerButton = fileInputComponent.querySelector(".multiple-file-input__button");
            if (triggerButton) {
                triggerButton.addEventListener("click", e => {
                    e.preventDefault();
                    fileInputComponent.querySelector("input[type='file']")
                        .click();
                });
            }
        });
    detail.root.querySelectorAll(".multiple-file-input")
        .forEach(fileInputComponent => {
            let input;
            if (fileInputComponent.classList.contains("multiple-file-input__input")) {
                input = fileInputComponent;
            } else {
                input = fileInputComponent.querySelector("input[type='file']");
            }

            let form = fileInputComponent.closest("form");

            async function uploadFile(files) {

                let formData = new FormData(form);
                formData.delete(input.name);

                await Promise.all(files.map(([id, file]) => new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action, true);
                    formData.set(input.name, file);

                    const progressBar = document.querySelector(`[data-file-id="${id}"] progress`);
                    progressBar.removeAttribute("value");
                    xhr.upload.addEventListener("progress", ({lengthComputable, loaded, total}) => {
                        console.log(lengthComputable, loaded, total);
                        if (lengthComputable) {

                            progressBar.max = total;
                            progressBar.value = loaded;
                        }
                    });
                    xhr.addEventListener("load", resolve);
                    xhr.addEventListener("error", reject);
                    xhr.send(formData);
                })));
                if (input.hasAttribute("data-redirect-uri")) {
                    window.location.replace(input.getAttribute("data-redirect-uri"));
                }

            }

            let instance_id = fileInputComponent.getAttribute("data-file-list");
            let fileInput;
            if (fileInputComponent.classList.contains("multiple-file-input--hidden")) {
                fileInput = fileInputComponent;
            } else {
                fileInput = fileInputComponent.querySelector("input[type='file']");
            }
            let file_list = document.getElementById(instance_id);
            file_list.querySelector(".multiple-file-input--hidden__file-list__control-bar__close-button").addEventListener("click", (e) => {
                file_list.style.display = "none";
            });
            let file_list_content = file_list.querySelector(".multiple-file-input__file-list__content");
            let template = file_list.querySelector("template").content;
            fileInput.addEventListener("change", e => {
                file_list_content.innerHTML = "";
                file_list.style.display = "flex";
                let files = [...e.target.files]
                    .map((file) => [crypto.randomUUID(), file]);

                files.forEach(([id, file]) => {
                    let template_instance = template.cloneNode(true);
                    template_instance.querySelector(".multiple-file-input__file-list__item").setAttribute("data-file-id", id);
                    template_instance.querySelector(".t-file-name").textContent = file.name;
                    file_list_content.appendChild(template_instance);
                });
                uploadFile(files);

            });
        });

});