잡다한 배똥월드

- index.js

new App(document.querySelector(".App"));

- App.js

class App {
    
    target = null;
    
    constructor(target) {
        this.target = target;

        this.Breadcrumb = new Breadcrumb({
            target,
            onLoad: async () => {
                const result = await api.fetchRoot();
                this.setState(result);
            },
            openDir: async data => {
                const result = await api.fetchFolder(data.id);
                this.setState(result);
            }
        });

        this.Nodes = new Nodes({
            target,
            onClick: data => {
                this.openDirectory(data);
            },
            onPrev: data => {
                this.clickPrev();
                this.setState(data);
            },
            onImage: data => {
                this.ImageViewer.setState({
                    visible: true,
                    image: data
                });
            }
        });

        this.ImageViewer = new ImageViewer({
            target,
            data: {
                visible: false,
                image: null
            },
            onClick: () => {
                this.ImageViewer.setState({
                    visible: false,
                    image: null
                });
            }
        });
    }

    setState(data) {
        this.Nodes.setState(data);
    }

    openDirectory(data) {
        this.Breadcrumb.open(data);
    }

    clickPrev() {
        this.Breadcrumb.clickPrev();
    }
}

- api.js

const URL = "https://zl3m4qq0l9.execute-api.ap-northeast-2.amazonaws.com/dev";

const api = {
    fetchRoot: async () => {
        const result = await fetch(`${URL}`);
        return result.json();
    },

    fetchFolder: async id => {
        const result = await fetch(`${URL}/${id}`);
        return result.json();
    }
}

- Breadcrumb.js

class Breadcrumb {

    target = null;
    onLoad = null;
    openDir = null;
    roots = [];

    constructor({ target, onLoad, openDir }) {
        this.target = target;
        this.onLoad = onLoad;
        this.openDir = openDir;

        const breadcrumb = document.createElement("nav");
        breadcrumb.classList.add("Breadcrumb");

        const root = document.createElement("div");
        root.innerText = "root";

        breadcrumb.appendChild(root);
        target.appendChild(breadcrumb);

        onLoad();
    }

    open(data) {
        this.openDir(data);
        this.render(data.name);
    }

    render(name) {
        const breadcrumb = document.querySelector(".Breadcrumb");

        const root = document.createElement("div");
        root.innerText = name;

        breadcrumb.appendChild(root);
        this.roots.push(root);
    }

    clickPrev() {
        const breadcrumb = document.querySelector(".Breadcrumb");
        var root = this.roots.pop();
        breadcrumb.removeChild(root);
    }
}

- Nodes.js

class Nodes {

    target = null;
    data = [];
    onClick = null;
    onPrev = null;
    onImage = null;

    constructor({ target, onClick, onPrev, onImage }) {
        this.target = target;
        this.onClick = onClick;
        this.onPrev = onPrev;
        this.onImage = onImage;

        const nodes = document.createElement("div");
        nodes.classList.add("Nodes");

        target.appendChild(nodes);
    }

    setState(data) {
        this.data.push(data);
        this.render();
    }

    render() {
        const nodes = document.querySelector(".Nodes");
        const data = this.data[this.data.length - 1];

        nodes.innerHTML = "";

        if (this.data.length > 1) {
            const node = document.createElement("div");
            node.classList.add("Node");
            node.classList.add("prev");

            const image = document.createElement("img");
            image.src = "./assets/prev.png";

            node.appendChild(image);
            nodes.appendChild(node);

            node.addEventListener("click", () => {
                this.data.pop();
                this.onPrev(this.data.pop());
            });
        }

        data.map(
            list => {
                const node = document.createElement("div");
                node.classList.add("Node");
                node.classList.add("Path");

                const image = document.createElement("img");
                if (list.type == "DIRECTORY") {
                    image.src = "./assets/directory.png";
                } else {
                    image.src = "./assets/file.png";
                }

                const name = document.createElement("div");
                name.innerText = list.name;

                node.appendChild(image);
                node.appendChild(name);

                nodes.appendChild(node);
            }
        )

        this.target.querySelectorAll(".Path").forEach((item, index) => {
            item.addEventListener("click", () => {
                if (!item.classList.contains("prev")) {
                    if (data[index].type == "DIRECTORY"){
                        nodes.innerHTML = "";
                        this.onClick(data[index]);
                    } else {
                        this.onImage(data[index]);
                    }
                }
            });
        });
    }
}

- ImageViewer.js

class ImageViewer {
    
    target = null;
    data = null;
    onClick = null;

    constructor({ target, data, onClick }) {
        this.target = target;
        this.data = data;
        this.onClick = onClick;

        const viewer = document.createElement("div");
        viewer.classList.add("ImageViewer");
        viewer.classList.add("Modal");

        target.appendChild(viewer);

        this.setState(data);
    }

    setState(data) {
        this.data = data;
        this.render();
    }

    render() {
        const viewer = document.querySelector(".ImageViewer");
        const IMAGE_URL = "https://fe-dev-matching-2021-03-serverlessdeploymentbuck-t3kpj3way537.s3.ap-northeast-2.amazonaws.com/public";
        
        if (this.data.visible) {
            viewer.style.display = "block";
            viewer.innerHTML = "";

            const content = document.createElement("div");
            content.classList.add("content");

            var src = this.data.image.filePath;
            if (src.substring(0, 1) == "/") {
                src = src.substring(1, src.length);
            }
            const image = document.createElement("img");
            image.src = `${IMAGE_URL}/${src}`;

            content.appendChild(image);
            viewer.appendChild(content);
        } else {
            viewer.style.display = "none";
        }

        viewer.addEventListener("click", (e) => {
            if (e.target == viewer &&  viewer.style.display != "none") {
                this.onClick();
            }
        });

        window.addEventListener("keyup", (e) => {
            if (e.keyCode == 27 &&  viewer.style.display != "none") {
                this.onClick();
            }
        });


    }
}