文件树目录

Posted 2020-11-23 kinder

var Tree = function (file) {
    this.clickedFileNode; //点击目录树中的文件时，将点击的div存储到该变量
    this.clickedFolderNode; //点击目录树中的文件夹时，将点击的div存储到该变量
    this.file = file;
}

Tree.prototype = {
    init: function (rootDirNode) {
        var self = this;
        this.clickedFolderNode = rootDirNode;
        this.file.openFolder(this.clickedFolderNode.title, function (data) {
            self.setChildrenNode(data);
        });
    },

    //树中文件夹展开收起的状态变化
    transformFolderNodeStatus: function () {
        var e = this.clickedFolderNode;
        if (e.getAttribute("childrenSum") > 0) {
            if (e.getAttribute("state") === "off") {
                e.firstElementChild.setAttribute("src", "WebRoot/image/dtri.png");
                e.nextElementSibling.style.display = "block";
                e.setAttribute("state", "on");
            } else {
                e.firstElementChild.setAttribute("src", "WebRoot/image/ztri.png");
                e.nextElementSibling.style.display = "none";
                e.setAttribute("state", "off");
            }
        }
    },

    //建立某文件夹下所有子文件夹结点
    setChildrenNode: function (data) {
        var self = this;
        var e = this.clickedFolderNode;
        data = JSON.parse(data);
        var ul = document.createElement("ul");
        for (var j = 0, len = data.files.length; j < len; j++) {
            if (data.files[j].directory == true)
                ul.appendChild(this.setNode(data.files[j]));
        }
        for (var j = 0, len = data.files.length; j < len; j++) {
            if (data.files[j].directory == false)
                ul.appendChild(this.setNode(data.files[j]));
        }
        e.parentNode.appendChild(ul);
        e.firstElementChild.setAttribute("src", "WebRoot/image/dtri.png");
        e.nextElementSibling.style.display = "block";
        e.setAttribute("state", "on");
        e.setAttribute("asked", "yes");
        e.setAttribute("state", "on");
        if (e.title == ".") {
            e.addEventListener("click", function (e) {
                self.clickedFolderNode = this;
                self.transformFolderNodeStatus();
                self.highlightNode(this);
            });
            this.file.openAddressBarFile(
                function (data) {
                    self.setAddressBarFileNode(data);
                });
        }
    },

    //建立具体的某个单个文件（夹）结点
    setNode: function (node) {
        var self = this;
        var li = document.createElement("li");
        var div = document.createElement("div");
        var img = document.createElement(‘img‘);
       
        if (node.directory == true) {
            if (node.childrenSum != 0) {
                img.setAttribute("src", "WebRoot/image/ztri.png");
            } else {
                div.style.marginLeft = "16px";
                img.setAttribute("src", "");
            } 
            div.setAttribute("asked", "no");
            div.appendChild(img);
            img = document.createElement(‘img‘);
            div.setAttribute("state", "off");
            img.setAttribute("src", "WebRoot/image/dir.png");
            div.setAttribute("childrenSum", node.childrenSum);
            div.addEventListener("click", function () {
                self.clickedFolderNode = this;
                if (this.getAttribute("asked") == "no" && this.getAttribute("childrenSum") != 0)
                    self.file.openFolder(self.clickedFolderNode.title, function (data) {
                        self.setChildrenNode(data);
                    });
                else {
                    self.transformFolderNodeStatus();
                }
                self.highlightNode(this);
                self.showRightClickMenu(this);
            });
        } else {
            div.style.marginLeft = "16px";
            img.setAttribute("src", "WebRoot/image/file.png");
            div.addEventListener("click", function () {
                self.clickedFileNode = this;
                self.clickedFolderNode = this.parentNode.parentNode.previousElementSibling;
                self.file.openFile(this.title);
                showFileContent(this);
                self.highlightNode(this);
            });
        }
        div.appendChild(img);
        var span = document.createElement("span");
        span.innerhtml = node.fileName;
        div.setAttribute("title", node.filePath);
        div.appendChild(span);
        li.appendChild(div);
        return li;
    },

    //  显示右键菜单
    showRightClickMenu: function (e1) {
        var self = this;
        document.oncontextmenu = function () {
            return false;
        }
        e1.oncontextmenu = function () {

            if (!document.getElementById("right_click_menu")){
            var div = document.createElement("div");
            div.setAttribute("id", "right_click_menu");
            var li;
            li = document.createElement("li");
            li.setAttribute("id", "right_click_menu_new_childdir");
            li.innerHTML = "新建子目录";
            div.appendChild(li);
            li = document.createElement("li");
            li.setAttribute("id", "right_click_menu_newfile");
            li.innerHTML = "新建文件";
            div.appendChild(li);
            li = document.createElement("li");
            li.setAttribute("id", "right_click_menu_deletedir");
            li.innerHTML = "删除目录";
            div.appendChild(li);
            document.body.appendChild(div);

            right_click_menu_new_childdir.addEventListener("click", function () {
                self.newFileInputNode(this);
            });
            right_click_menu_newfile.addEventListener("click", function () {
                self.newFileInputNode(this);
            });
            right_click_menu_deletedir.addEventListener("click", function () {
                self.file.deleteFolder(self.clickedFolderNode.title, self.deleteFolderNode());
                modifyAddressBarAddress(self.clickedFolderNode.parentNode.parentNode.previousElementSibling); ///////
            });
  }
            var e = event || window.event;
            document.getElementById("right_click_menu").style.left = e.clientX + "px";
            document.getElementById("right_click_menu").style.top = e.clientY + "px";
            document.getElementById("right_click_menu").style.display = "block";}
      
    },

    //建立新建文件（夹）时的输入框结点
    newFileInputNode: function (e) {
        var self = this;
        if (this.clickedFolderNode.getAttribute("state") == "off")
            this.transformFolderNodeStatus();
        var right_click_menu = document.getElementById("right_click_menu");
        right_click_menu.style.display = "none";
        var li = document.createElement("li");
        li.setAttribute("id", "temp_li");
        var input = document.createElement("input");
        input.setAttribute("id", "temp_input");
        var cancel_button = document.createElement("button");
        cancel_button.setAttribute("id", "cancel_button");
        cancel_button.innerHTML = "取消";
        var ensure_button = document.createElement("button");
        ensure_button.setAttribute("id", "ensure_button");
        ensure_button.innerHTML = "确定";
        li.appendChild(input);
        li.appendChild(ensure_button);
        li.appendChild(cancel_button);
        cancel_button.addEventListener("click", function () {
            this.parentNode.parentNode.removeChild(this.parentNode);
        });
        if (this.clickedFolderNode.getAttribute("childrenSum") != 0) {
            if (e.id == "right_click_menu_new_childdir") {

                ensure_button.addEventListener("click", function () {
                    self.file.newFolder(temp_input.value, self.clickedFolderNode.title, function (data) {
                        self.newFolderNode(data);
                    });
                });
                this.clickedFolderNode.nextElementSibling.insertBefore(li, this.clickedFolderNode.nextElementSibling.firstElementChild);
            } else {
                this.clickedFolderNode.nextElementSibling.appendChild(li);
                ensure_button.addEventListener("click", function () {
                    var newFile = document.getElementById("temp_input").value;
                    if (newFile.indexOf(".") == -1) {
                        newFile = newFile + ‘.txt‘;
                    }
                    self.file.newFile(newFile, self.clickedFolderNode.title,
                        function (data) {
                            tree.newFileNode(data);
                        });
                });
            }
        } else {
            var ul = document.createElement("ul");
            ul.appendChild(li);
            this.clickedFolderNode.parentNode.appendChild(ul);
            if (e.id == "right_click_menu_new_childdir") {
                ensure_button.setAttribute("aim", "newdir");
                ensure_button.addEventListener("click", function () {
                    self.file.newFolder(temp_input.value, self.clickedFolderNode.title, function (data) {
                        self.newFolderNode(data);
                    });
                });
            } else {
                ensure_button.setAttribute("aim", "newfile");
                ensure_button.addEventListener("click", function () {
                    var newFile = document.getElementById("temp_input").value;
                    if (newFile.indexOf(".") == -1) {
                        newFile = newFile + ‘.txt‘;
                    }
                    self.file.newFile(newFile, self.clickedFolderNode.title,
                        function (data) {
                            self.newFileNode(data);
                        });
                });
            }
        }
    },

    //新建文件夹结点
    newFolderNode: function (data) {
        var newChildDir = temp_input.value;
        data = JSON.parse(data);
        if (data.msg === true) {
            temp_li.parentNode.removeChild(temp_li);
            alert("成功新建文件夹：" + newChildDir);
            var li = this.setNode({
                directory: true,
                fileName: newChildDir,
                filePath: this.clickedFolderNode.getAttribute("title") + "\" + newChildDir,
                childrenSum: 0
            });
            this.clickedFolderNode.firstElementChild.src = "WebRoot/image/dtri.png";
            this.clickedFolderNode.style.marginLeft = "";
            this.clickedFolderNode.setAttribute("asked", "yes");
            this.clickedFolderNode.setAttribute("childrenSum",Number( this.clickedFolderNode.getAttribute("childrenSum") )+ 1);
            this.clickedFolderNode.nextElementSibling.insertBefore(li, this.clickedFolderNode.nextElementSibling.firstElementChild);
        } else {
            alert("新建文件夹失败：文件夹名重复，无效或者太长");
        }
    },

    //新建文件结点
    newFileNode: function (data) {
        var newFile = document.getElementById("temp_input").value;
        if (newFile.indexOf(".") == -1) {
            newFile = newFile + ‘.txt‘;
        }
        data = JSON.parse(data);
        if (data.msg === true) {
            temp_li.parentNode.removeChild(temp_li);
            alert("成功新建文件：" + newFile);
            var li = this.setNode({
                directory: false,
                fileName: newFile,
                filePath: this.clickedFolderNode.getAttribute("title") + "\" + newFile,
                childrenSum: 0
            });
            this.clickedFolderNode.firstElementChild.src = "WebRoot/image/dtri.png";
            this.clickedFolderNode.style.marginLeft = "";
            this.clickedFolderNode.setAttribute("asked", "yes");
            this.clickedFolderNode.setAttribute("childrenSum", Number(this.clickedFolderNode.getAttribute("childrenSum") )+ 1);
            this.clickedFolderNode.nextElementSibling.appendChild(li);
        } else {
            alert("新建文件失败：文件名重复，无效或者太长");
        }
    },

    //建立上传文件之后的结点
    setUploadFileNode: function (data) {
        if (this.clickedFolderNode.getAttribute("state") == "off")
            this.transformFolderNodeStatus(this.clickedFolderNode);
        data = JSON.parse(data);
        if (data.msg == true) {
            alert("上传文件成功！");
            var li = this.setNode({
                directory: false,
                fileName: data.fileName,
                filePath: this.clickedFolderNode.getAttribute("title") + "\" + data.fileName,
                childrenSum: 0
            });
            this.clickedFolderNode.setAttribute("state", "on");
            this.clickedFolderNode.firstElementChild.src = "WebRoot/image/dtri.png";
            this.clickedFolderNode.style.marginLeft = "";
            if (!this.clickedFolderNode.nextElementSibling) {
                var ul = document.createElement("ul");
                this.clickedFolderNode.parentNode.appendChild(ul);
                
            }
            this.clickedFolderNode.nextElementSibling.appendChild(li);
            this.clickedFolderNode.setAttribute("childrenSum", Number(this.clickedFolderNode.getAttribute("childrenSum")) + 1);
            this.clickedFileNode = li.firstElementChild;
            this.file.openFile(this.clickedFileNode.title);
            showFileContent(this.clickedFileNode);
            this.highlightNode(this.clickedFileNode);
        } else
            alert("重复！请重命名文件名");
    },

    //删除文件夹结点
    deleteFolderNode: function () {
        var self = this;
        return function () {
            var parentDir = self.clickedFolderNode.parentNode.parentNode.previousElementSibling;
            parentDir.style.background = "#6699FF";
            parentDir.setAttribute("childrenSum", parentDir.getAttribute("childrenSum") - 1);
            if (parentDir.getAttribute("childrenSum") == 0) {
                parentDir.firstElementChild.src = "";
                parentDir.style.marginLeft = "16px";
            }
            self.clickedFolderNode.parentNode.parentNode.removeChild(self.clickedFolderNode.parentNode);
            alert("成功删除文件夹：" + self.clickedFolderNode.getAttribute("title"));
        };
    },

    //删除文件结点
    deleteFileNode: function (data) {
        var delete_file = this.clickedFileNode.getAttribute("title");
        data = JSON.parse(data);
        if (data.msg == true) {
            var tools = document.getElementById("tools");
            tools.style.display = "none";
            var show_img_div = document.getElementById("show_img_div");
            show_img_div.style.display = "none";
            var show_text = document.getElementById("show_text");
            show_text.style.display = "none";
            var welcome_div = document.getElementById("welcome_div");
            welcome_div.innerHTML = "欢迎访问赛思文件管理系统";
            welcome_div.style.display = "block";
            var fileparentdiv = this.clickedFileNode.parentNode.parentNode.previousElementSibling;
            fileparentdiv.setAttribute("childrenSum", fileparentdiv.getAttribute("childrenSum") - 1);
            if (fileparentdiv.getAttribute("childrenSum") == 0) {
                fileparentdiv.firstElementChild.src = "";
                fileparentdiv.style.marginLeft = "16px";
            }
            this.clickedFileNode.parentNode.parentNode.removeChild(this.clickedFileNode.parentNode);
            alert("成功删除文件：" + delete_file);
            this.highlightNode(fileparentdiv);
            modifyAddressBarAddress(fileparentdiv);
        }
    },

    //高亮被点击的结点
    highlightNode: function (e) {
        document.getElementById("rootDirNode").style.background = "";
        var div = result.getElementsByTagName("div");
        for (var i = 0; i < div.length; i++)
            div[i].style.background = "";
        e.style.background = "#6699FF";
    },

    //建立地址栏上文件在树中的结点
    setAddressBarFileNode: function (data) {
        data = JSON.parse(data);
        var result = document.getElementById("result");
        for (var i = data.dirs.length - 1; i >= 0; i--) {
            var div = result.getElementsByTagName("div");
            for (var j = 0; j < div.length; j++) {
                if (div[j].getAttribute("title") == (data.dirs[i].replace(new RegExp("/", "g"), "\"))) {
                    if ((i == 0 && div[j].getAttribute("state")) || i > 0) {
                        var ul = document.createElement("ul");
                        div[j].setAttribute("asked", "yes");
                        div[j].setAttribute("state", "on");
                        if (div[j].getAttribute("childrenSum") != 0)
                            div[j].firstElementChild.setAttribute("src", "WebRoot/image/dtri.png");
                        for (var k = 0; k < data.filess[i].length; k++) {
                            if (data.filess[i][k].directory === true) {
                                ul.appendChild(this.setNode(data.filess[i][k]));
                            }
                        }
                        for (var k = 0; k < data.filess[i].length; k++) {
                            if (data.filess[i][k].directory === false) {
                                ul.appendChild(this.setNode(data.filess[i][k]));
                            }
                        }
                        div[j].parentNode.appendChild(ul);
                    } else if (i == 0) {
                        this.clickedFileNode = div[j];
                        this.clickedFolderNode = div[j].parentNode.parentNode.previousElementSibling;
                        this.file.openFile(this.clickedFileNode.title);
                        showFileContent(this.clickedFileNode);
                        this.highlightNode(this.clickedFileNode);
                    }
                    if (div[j].getAttribute("state")) {
                        this.highlightNode(div[j]);
                        this.clickedFolderNode = div[j];
                    }
                    result = div[j].nextElementSibling;
                }
            }
        }
    }
}