MWF.require("MWF.xApplication.File.Actions.RestActions", null, false); MWF.require("MWF.xApplication.File.AttachmentController", null, false); MWF.xApplication.File.Main = new Class({ Extends: MWF.xApplication.Common.Main, Implements: [Options, Events], options: { "style": "default", "name": "File", "icon": "icon.png", "width": "1000", "height": "600", "title": MWF.xApplication.File.LP.title }, onQueryLoad: function(){ this.lp = MWF.xApplication.File.LP; }, loadApplication: function(callback){ this.history = []; this.currentHistory = 1; this.currentFolder = null; this.restActions = new MWF.xApplication.File.Actions.RestActions(); MWF.getJSON("/x_component_File/$Main/icon.json", function(json){ this.icons = json; }.bind(this), false); this.createNode(); this.loadApplicationContent(); if (callback) callback(); }, createNode: function(){ this.content.setStyle("overflow", "hidden"); this.node = new Element("div", { "styles": {"width": "100%", "height": "100%", "overflow": "hidden"} }).inject(this.content); }, loadApplicationContent: function(){ this.loadTop(); // this.loadTools(); this.fileContentNode = new Element("div", {"styles": this.css.fileContentNode}).inject(this.node); this.folderContentNode = new Element("div", {"styles": this.css.folderContentNode}).inject(this.fileContentNode); this.attachmentContentNode = new Element("div", {"styles": this.css.attachmentContentNode}).inject(this.fileContentNode); this.resizeContentNode = new Element("div", {"styles": this.css.resizeContentNode}).inject(this.folderContentNode); this.folderTreeAreaNode = new Element("div", { "styles": this.css.folderTreeAreaNode }).inject(this.folderContentNode); this.folderTreeAreaScrollNode = new Element("div", { "styles": this.css.folderTreeAreaScrollNode }).inject(this.folderContentNode); this.shareTreeAreaScrollNode = new Element("div", { "styles": this.css.folderTreeAreaScrollNode }).inject(this.folderContentNode); this.loadFileContentAreaNode(); this.loadFolderTreeNode(); // this.loadShareTreeNode(); this.treeResize = new Drag(this.resizeContentNode,{ "snap": 1, "onStart": function(el, e){ var x = e.event.clientX; var y = e.event.clientY; el.store("position", {"x": x, "y": y}); var size = this.folderContentNode.getSize(); el.store("initialWidth", size.x); }.bind(this), "onDrag": function(el, e){ var x = e.event.clientX; // var y = e.event.y; var bodySize = this.content.getSize(); var position = el.retrieve("position"); var initialWidth = el.retrieve("initialWidth").toFloat(); var dx = x.toFloat() - position.x.toFloat(); var width = initialWidth+dx; if (width> bodySize.x/2) width = bodySize.x/2; if (width<160) width = 160; this.attachmentContentNode.setStyle("margin-left", width); this.folderContentNode.setStyle("width", width); }.bind(this) }); MWF.require("MWF.widget.Tab", function(){ this.treeTab = new MWF.widget.Tab(this.folderTreeAreaNode, {"style": "processlayout"}); this.treeTab.load(); this.fileTabe = this.treeTab.addTab(this.folderTreeAreaScrollNode, this.lp.myFiles, false); this.shareTab = this.treeTab.addTab(this.shareTreeAreaScrollNode, this.lp.shareFiles, false); this.fileTabe.showIm(); this.setContentHeight(); this.addEvent("resize", function(){this.setContentHeight();}.bind(this)); }.bind(this)); MWF.require("MWF.widget.ScrollBar", function(){ new MWF.widget.ScrollBar(this.folderTreeAreaScrollNode, { "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true} }); new MWF.widget.ScrollBar(this.shareTreeAreaScrollNode, { "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true} }); //new MWF.widget.ScrollBar(this.fileContentAreaScrollNode, { // "style":"xApp_Organization_Explorer", "where": "before", "distance": 100, "friction": 4, "axis": {"x": false, "y": true} //}); }.bind(this)); }, loadTop: function(){ this.topNode = new Element("div", {"styles": this.css.topNode}).inject(this.node); this.leftNode = new Element("div", {"styles": this.css.leftNode}).inject(this.topNode); this.leftNode.addEvent("click", function(){ this.leftPath(); }.bind(this)); this.rightNode = new Element("div", {"styles": this.css.rightNode}).inject(this.topNode); this.rightNode.addEvent("click", function(){ this.rightPath(); }.bind(this)); this.refreshNode = new Element("div", {"styles": this.css.refreshNode}).inject(this.topNode); this.searchNode = new Element("div", {"styles": this.css.searchNode}).inject(this.topNode); this.pathNode = new Element("div", {"styles": this.css.pathNode}).inject(this.topNode); }, loadTools: function(){ this.toolsNode = new Element("div", {"styles": this.css.toolsNode}).inject(this.node); this.uploadNode = new Element("div", {"styles": this.css.toolsActionNode, "text": this.lp.upload}).inject(this.toolsNode); this.createFolderNode = new Element("div", {"styles": this.css.toolsActionNode, "text": this.lp.createFolder}).inject(this.toolsNode); this.operationNode = new Element("div", {"styles": this.css.toolsMenuActionNode}).inject(this.toolsNode); var downTextNode = new Element("div", {"styles": this.css.downTextNode, "text": this.lp.operation}).inject(this.operationNode); var downIconNode = new Element("div", {"styles": this.css.downIconNode}).inject(this.operationNode); this.uploadNode.addEvents({ "mouseover": function(){this.uploadNode.setStyles(this.css.toolsActionNode_over);}.bind(this), "mouseout": function(){this.uploadNode.setStyles(this.css.toolsActionNode);}.bind(this), "click": function(){this.createUploadFile();}.bind(this) }); this.createFolderNode.addEvents({ "mouseover": function(){this.createFolderNode.setStyles(this.css.toolsActionNode_over);}.bind(this), "mouseout": function(){this.createFolderNode.setStyles(this.css.toolsActionNode);}.bind(this), "click": function(){this.createFolder();}.bind(this) }); this.operationNode.addEvents({ "mouseover": function(){this.operationNode.setStyles(this.css.toolsMenuActionNode_over);}.bind(this), "mouseout": function(){this.operationNode.setStyles(this.css.toolsMenuActionNode);}.bind(this), "click": function(){}.bind(this) }); this.operationMenu = new MWF.xDesktop.Menu(this.operationNode, { "event": "click", "style": "fileOperation", "offsetX": -4, "offsetY": 4, "onQueryShow": function(){ this.operationMenu.items.each(function(item){item.setDisable(true);}); if (this.selectedItem){ if (this.selectedItem.type=="folder"){ this.operationMenu.items[0].setText(this.lp.uploadTo+" "+this.selectedItem.data.name+"..."); this.operationMenu.items[0].setDisable(false); this.operationMenu.items[3].setDisable(false); this.operationMenu.items[4].setDisable(false); this.operationMenu.items[7].setDisable(false); } if (this.selectedItem.type=="file"){ this.operationMenu.items[0].setText(this.lp.uploadTo); this.operationMenu.items[0].setDisable(true); this.operationMenu.items[1].setDisable(false); this.operationMenu.items[3].setDisable(false); this.operationMenu.items[4].setDisable(false); this.operationMenu.items[5].setDisable(false); this.operationMenu.items[7].setDisable(false); } } }.bind(this) }); this.operationMenu.load(); var img = this.path+this.options.style+"/operation/upload.png"; this.operationMenu.addMenuItem(this.lp.uploadTo, "click", function(){this.createUploadFile(this.selectedItem);}.bind(this), img); var img = this.path+this.options.style+"/operation/download.png"; this.operationMenu.addMenuItem(this.lp.download, "click", function(){this.downloadCurrentFile();}.bind(this), img); this.operationMenu.addMenuLine(); var img = this.path+this.options.style+"/operation/move.png"; this.operationMenu.addMenuItem(this.lp.move, "click", function(){this.moveFileFolder();}.bind(this), img); var img = this.path+this.options.style+"/operation/rename.png"; this.operationMenu.addMenuItem(this.lp.rename, "click", function(){this.renameFileFolder();}.bind(this), img); var img = this.path+this.options.style+"/operation/share.png"; this.operationMenu.addMenuItem(this.lp.share, "click", function(){this.shareFile();}.bind(this), img); this.operationMenu.addMenuLine(); var img = this.path+this.options.style+"/operation/delete.png"; this.operationMenu.addMenuItem(this.lp["delete"], "click", function(e){this.deleteFileFolder(e);}.bind(this), img); }, downloadCurrentFile: function(){ if (this.selectedItem){ if (this.selectedItem.type=="file"){ this.selectedItem.open(); } } }, moveFileFolder: function(){ //move---------- //move---------- //move---------- //move---------- }, renameFileFolder: function(){ this.content.mask({ "style": { "opacity": 0.7, "background-color": "#999" } }); var renameNode = new Element("div", {"styles": this.css.createFolderNode}).inject(this.content); renameNode.position({ relativeTo: this.node, position: "center" }); var titleNode = new Element("div", {"styles": this.css.createFolderTitleNode, "text": this.lp.rename}).inject(renameNode); var inforNode = new Element("div", {"styles": this.css.createFolderInforNode, "text": this.lp.inputName}).inject(renameNode); var inputAreaNode = new Element("div", {"styles": this.css.createFolderInputAreaNode}).inject(renameNode); var inputNode = new Element("input", {"type": "text", "styles": this.css.createFolderInputNode, "value": this.selectedItem.data.name}).inject(inputAreaNode); var actionNode = new Element("div", {"styles": this.css.createFolderActionNode}).inject(renameNode); var cancelButton = new Element("button", {"styles": this.css.createFolderCancelButton, "text": this.lp.cancel}).inject(actionNode); var okButton = new Element("button", {"styles": this.css.createFolderOkButton, "text": this.lp.ok}).inject(actionNode); cancelButton.addEvent("click", function(){ this.content.unmask(); renameNode.destroy(); }.bind(this)); okButton.addEvent("click", function(){ if (inputNode.get("value")){ this.selectedItem.data.name = inputNode.get("value"); if (this.selectedItem.type=="folder"){ this.restActions.saveFolder(this.selectedItem.data, function(json){ if (this.currentFolder){ this.currentFolder.clickNode(); }else{ this.topTreeNode.clickNode(); } this.selectedItem.treeNode.setText(this.selectedItem.data.name); }.bind(this)); }else{ this.restActions.updateAttachment(this.selectedItem.data, function(json){ if (this.currentFolder){ this.currentFolder.clickNode(); }else{ this.topTreeNode.clickNode(); } }.bind(this)); } renameNode.destroy(); this.content.unmask(); }else{ this.notice(this.lp.nameNotEmpty, "error", renameNode); } }.bind(this)); }, deleteFileFolder: function(e){ if (this.selectedItem){ var _self = this; var title = (this.selectedItem.type=="folder") ? this.lp.deleteFolderTitle : this.lp.deleteFileTitle; var content = (this.selectedItem.type=="folder") ? this.lp.deleteFolder : this.lp.deleteFile; var size = this.node.getSize(); // var position = this.operationMenu.items[7].item.getPosition(this.operationMenu.items[7].item.getOffsetParent()); var ep = {"event": {"x": (size.x-300)/2, "y": (size.y-120)/2}}; this.confirm("infor", ep, title, content+"("+this.selectedItem.data.name+")", 300, 120, function(){ var callback = function(){ if (this.currentFolder){ this.currentFolder.clickNode(); }else{ this.topTreeNode.clickNode(); } }; if (_self.selectedItem.type=="folder"){ _self.selectedItem.treeNode.destroy(); _self.restActions.deleteFolder(_self.selectedItem.data.id, callback.bind(_self)); }else{ _self.restActions.deleteFile(_self.selectedItem.data.id, callback.bind(_self)); } this.close(); }, function(){ this.close(); }); } }, shareFile: function(){ this.content.mask({ "style": { "opacity": 0.7, "background-color": "#999" } }); var shareNode = new Element("div", {"styles": this.css.createFolderNode}).inject(this.content); shareNode.position({ relativeTo: this.node, position: "center" }); var titleNode = new Element("div", {"styles": this.css.createFolderTitleNode, "text": this.lp.shareFile}).inject(shareNode); var inforNode = new Element("div", {"styles": this.css.createFolderInforNode, "text": this.lp.selectShareUser}).inject(shareNode); var inputAreaNode = new Element("div", {"styles": this.css.createFolderInputAreaNode}).inject(shareNode); var inputNode = new Element("input", {"type": "text", "readonly": true, "styles": this.css.shareFileInputNode, "value": this.selectedItem.data.shareList.join(", ")}).inject(inputAreaNode); inputNode.addEvent("click", function(){ MWF.require("MWF.xApplication.Organization.Selector.Person", function(){ var selector = new MWF.xApplication.Organization.Selector.Person(this.node,{ "names": this.selectedItem.data.shareList, "onComplete": function(items){ var names = []; items.each(function(item){ names.push(item.data.name); }); inputNode.set("value", names.join(", ")); }.bind(this) }); selector.load(); }.bind(this)); }.bind(this)); var actionNode = new Element("div", {"styles": this.css.createFolderActionNode}).inject(shareNode); var cancelButton = new Element("button", {"styles": this.css.createFolderCancelButton, "text": this.lp.cancel}).inject(actionNode); var okButton = new Element("button", {"styles": this.css.createFolderOkButton, "text": this.lp.ok}).inject(actionNode); cancelButton.addEvent("click", function(){ this.content.unmask(); shareNode.destroy(); }.bind(this)); okButton.addEvent("click", function(){ this.selectedItem.data.shareList = inputNode.get("value").split(/,\s*/g); this.restActions.updateAttachment(this.selectedItem.data, function(json){ if (inputNode.get("value")) this.notice(this.lp.fileShareSuccess+inputNode.get("value"), "success", this.content); }.bind(this)); shareNode.destroy(); this.content.unmask(); }.bind(this)); }, createUploadFile: function(folder){ if (!this.uploadFileAreaNode){ this.uploadFileAreaNode = new Element("div"); var html = ""; this.uploadFileAreaNode.set("html", html); this.fileUploadNode = this.uploadFileAreaNode.getFirst(); this.fileUploadNode.addEvent("change", function(){ var folderId = ""; if (folder){ folderId = folder.data.id; }else{ folderId = (this.currentFolder && this.currentFolder.data) ? this.currentFolder.data.id : ""; } var files = fileNode.files; if (files.length){ for (var i = 0; i < files.length; i++) { var file = files.item(i); var formData = new FormData(); formData.append('file', file); formData.append('name', file.name); formData.append('folder', folderId); this.restActions.addAttachment(function(){ if (this.currentFolder){ this.currentFolder.clickNode(); }else{ this.topTreeNode.clickNode(); } }.bind(this), null, formData, file); } } }.bind(this)); } var fileNode = this.uploadFileAreaNode.getFirst(); fileNode.click(); }, createFolder: function(){ this.content.mask({ "style": { "opacity": 0.7, "background-color": "#999" } }); var createFolderNode = new Element("div", {"styles": this.css.createFolderNode}).inject(this.content); createFolderNode.position({ relativeTo: this.node, position: "center" }); var titleNode = new Element("div", {"styles": this.css.createFolderTitleNode, "text": this.lp.createFolder}).inject(createFolderNode); var inforNode = new Element("div", {"styles": this.css.createFolderInforNode, "text": this.lp.inputFolderName}).inject(createFolderNode); var inputAreaNode = new Element("div", {"styles": this.css.createFolderInputAreaNode}).inject(createFolderNode); var inputNode = new Element("input", {"type": "text", "styles": this.css.createFolderInputNode}).inject(inputAreaNode); var actionNode = new Element("div", {"styles": this.css.createFolderActionNode}).inject(createFolderNode); var cancelButton = new Element("button", {"styles": this.css.createFolderCancelButton, "text": this.lp.cancel}).inject(actionNode); var okButton = new Element("button", {"styles": this.css.createFolderOkButton, "text": this.lp.ok}).inject(actionNode); cancelButton.addEvent("click", function(){ this.content.unmask(); createFolderNode.destroy(); }.bind(this)); okButton.addEvent("click", function(){ if (inputNode.get("value")){ var data = { "name": inputNode.get("value"), "superior": (this.currentFolder && this.currentFolder.data) ? this.currentFolder.data.id : "" }; this.restActions.saveFolder(data, function(json){ data.id = json.data.id; if (this.currentFolder){ var json = {"data":[data]}; this.createTreeNode(json, this.currentFolder); this.currentFolder.clickNode(); }else{ this.topTreeNode.clickNode(); } }.bind(this)); createFolderNode.destroy(); this.content.unmask(); }else{ this.notice(this.lp.folderNameNotEmpty, "error", createFolderNode); } }.bind(this)); }, loadFolderTreeNode: function(){ this.folderTreeNode = new Element("div", { "styles": this.css.folderTreeNode }).inject(this.folderTreeAreaScrollNode); MWF.require("MWF.widget.Tree", function(){ this.folderTree = new MWF.widget.Tree(this.folderTreeNode, { "style": "file", // "onQueryExpand": function(node){ // this.loadFolderTree(node); // }.bind(this) }); this.folderTree.load(); var rootData = { "expand": false, "title": "root", "text": "root", "action": function(treeNode){ this.recordHistory(treeNode); this.expand(treeNode, function(){ this.loadSub(treeNode); }.bind(this)); }.bind(this), "icon": "folder.png" }; this.topTreeNode = this.folderTree.appendChild(rootData); this.topTreeNode.clickNode(); // this.loadFolderTree(); }.bind(this)); }, createShareTreeNode: function(json){ json.data.each(function(data){ var nodeData = { "expand": false, "title": data.person+"("+data.count+")", "text": data.person+"("+data.count+")", "action": function(treeNode){ this.loadShareFile(treeNode); }.bind(this), "icon": "folder.png" }; var treeNode = this.shareTree.appendChild(nodeData); treeNode.data = data; }.bind(this)); }, loadShareTreeNode: function(){ this.shareTreeNode = new Element("div", { "styles": this.css.folderTreeNode }).inject(this.shareTreeAreaScrollNode); MWF.require("MWF.widget.Tree", function(){ this.shareTree = new MWF.widget.Tree(this.shareTreeNode, { "style": "file" }); this.shareTree.load(); this.restActions.listShare(function(json){ this.createShareTreeNode(json); // node.setOperateIcon(); }.bind(this), null, false); // this.loadFolderTree(); }.bind(this)); }, loadShareFile: function(treeNode){ var person = treeNode.data.person; this.restActions.listShareAttachment(function(json){ this.fileContentAreaNode.empty(); json.data.each(function(file){ new MWF.xApplication.File.ShareAttachment(file, this); }.bind(this)); }.bind(this), null, person); }, loadFileContentAreaNode: function(){ this.controller = new MWF.xApplication.File.AttachmentController(this.attachmentContentNode, this, { "resize": false, "isSizeChange": false, }) this.controller.load(); //this.fileContentAreaScrollNode = new Element("div", { // "styles": this.css.fileContentAreaScrollNode //}).inject(this.attachmentContentNode); // //this.fileContentAreaScrollNode.addEvent("click", function(){ // if (this.selectedItem) this.selectedItem.unSelected(); //}.bind(this)); // //this.fileContentAreaNode = new Element("div", { // "styles": this.css.fileContentAreaNode //}).inject(this.fileContentAreaScrollNode); // //this.initDropUpLoad(); }, createTreeNode: function(json, topNode){ json.data.each(function(data){ var nodeData = { "expand": false, "title": data.name, "text": data.name, "action": function(treeNode){ this.recordHistory(treeNode); this.expand(treeNode, function(){ this.loadSub(treeNode); }.bind(this)); }.bind(this), "icon": "folder.png" }; var treeNode = topNode.appendChild(nodeData); treeNode.data = data; }.bind(this)); }, loadFolderTree: function(node, callback){ if (!node.loaded){ if (node.data){ this.restActions.listFolder(function(json){ this.createTreeNode(json, node); node.setOperateIcon(); if (callback) callback(); }.bind(this), null, node.data.id, false); }else{ this.restActions.listTopFolder(function(json){ this.createTreeNode(json, node); node.setOperateIcon(); if (callback) callback(); }.bind(this), null, false); } node.loaded = true; }else{ if (callback) callback(); } }, setContentHeight: function(node){ var size = this.node.getSize(); var tSize = this.topNode.getSize(); // var toolSize = this.toolsNode.getSize(); var mtt = this.topNode.getStyle("margin-top").toFloat(); var mbt = this.topNode.getStyle("margin-bottom").toFloat(); // var mttool = this.toolsNode.getStyle("margin-top").toFloat(); // var mbtool = this.toolsNode.getStyle("margin-bottom").toFloat(); var mtc = this.fileContentNode.getStyle("margin-top").toFloat(); var mbc = this.fileContentNode.getStyle("margin-bottom").toFloat(); var height = size.y-tSize.y-mtt-mbt-mtc-mbc; this.fileContentNode.setStyle("height", height); this.attachmentContentNode.setStyle("height", height); var attTopSzie = this.controller.topNode.getSize(); var y = height-attTopSzie.y; this.controller.contentScrollNode.setStyle("height", ""+y+"px"); // this.fileContentAreaNode.setStyle("min-height", height); var tabSize = this.treeTab.tabNodeContainer.getSize(); var height = height-tabSize.y; this.folderTreeAreaScrollNode.setStyle("height", height); this.shareTreeAreaScrollNode.setStyle("height", height); }, expand: function(treeNode, callback){ if (!treeNode.options.expand){ this.loadFolderTree(treeNode, function(){ if (callback) callback(); }.bind(this)); this.folderTree.expand(treeNode); treeNode.options.expand = true; treeNode.setOperateIcon(); }else{ if (callback) callback(); } }, checkHistory: function(){ if (this.history.length>1){ if (this.currentHistory>0){ this.enabledLeftNode(); }else{ this.disabledLeftNode(); } if (this.currentHistory0){ this.currentHistory--; var treeNode = this.history[this.currentHistory]; if (treeNode){ treeNode.selectNode(); this.loadSub(treeNode); this.checkHistory(); } } }, rightPath: function(){ if (this.currentHistory