diff options
Diffstat (limited to 'module/web/templates/default/filemanager_ui.js')
| -rw-r--r-- | module/web/templates/default/filemanager_ui.js | 291 |
1 files changed, 291 insertions, 0 deletions
diff --git a/module/web/templates/default/filemanager_ui.js b/module/web/templates/default/filemanager_ui.js new file mode 100644 index 000000000..be2f51e13 --- /dev/null +++ b/module/web/templates/default/filemanager_ui.js @@ -0,0 +1,291 @@ +var load, rename_box, confirm_box; + +document.addEvent("domready", function() { + load = new Fx.Tween($("load-indicator"), {link: "cancel"}); + load.set("opacity", 0); + + rename_box = new Fx.Tween($('rename_box')); + confirm_box = new Fx.Tween($('confirm_box')); + $('rename_reset').addEvent('click', function() { + hide_rename_box() + }); + $('delete_reset').addEvent('click', function() { + hide_confirm_box() + }); + + /*$('filemanager_actions_list').getChildren("li").each(function(action) { + var action_name = action.className; + if(functions[action.className] != undefined) + { + action.addEvent('click', functions[action.className]); + } + });*/ +}); + +function indicateLoad() { + //$("load-indicator").reveal(); + load.start("opacity", 1) +} + +function indicateFinish() { + load.start("opacity", 0) +} + +function indicateSuccess() { + indicateFinish(); + notify.alert('{{_("Success")}}.', { + 'className': 'success' + }); +} + +function indicateFail() { + indicateFinish(); + notify.alert('{{_("Failed")}}.', { + 'className': 'error' + }); +} + +function show_rename_box() { + bg_show(); + $("rename_box").setStyle('display', 'block'); + rename_box.start('opacity', 1) +} + +function hide_rename_box() { + bg_hide(); + rename_box.start('opacity', 0).chain(function() { + $('rename_box').setStyle('display', 'none'); + }); +} + +function show_confirm_box() { + bg_show(); + $("confirm_box").setStyle('display', 'block'); + confirm_box.start('opacity', 1) +} + +function hide_confirm_box() { + bg_hide(); + confirm_box.start('opacity', 0).chain(function() { + $('confirm_box').setStyle('display', 'none'); + }); +} + +var FilemanagerUI = new Class({ + initialize: function(url, type) { + this.url = url; + this.type = type; + this.directories = []; + this.files = []; + this.parseChildren(); + }, + + parseChildren: function() { + $("directories-list").getChildren("li.folder").each(function(ele) { + var path = ele.getElements("input.path")[0].get("value"); + var name = ele.getElements("input.name")[0].get("value"); + this.directories.push(new Item(this, path, name, ele)) + }.bind(this)); + + $("directories-list").getChildren("li.file").each(function(ele) { + var path = ele.getElements("input.path")[0].get("value"); + var name = ele.getElements("input.name")[0].get("value"); + this.files.push(new Item(this, path, name, ele)) + }.bind(this)); + } +}); + +var Item = new Class({ + initialize: function(ui, path, name, ele) { + this.ui = ui; + this.path = path; + this.name = name; + this.ele = ele; + this.directories = []; + this.files = []; + this.actions = new Array(); + this.actions["delete"] = this.del; + this.actions["rename"] = this.rename; + this.actions["mkdir"] = this.mkdir; + this.parseElement(); + + var pname = this.ele.getElements("span")[0]; + this.buttons = new Fx.Tween(this.ele.getElements(".buttons")[0], {link: "cancel"}); + this.buttons.set("opacity", 0); + + pname.addEvent("mouseenter", function(e) { + this.buttons.start("opacity", 1) + }.bind(this)); + + pname.addEvent("mouseleave", function(e) { + this.buttons.start("opacity", 0) + }.bind(this)); + + }, + + parseElement: function() { + this.ele.getChildren('span span.buttons img').each(function(img) { + img.addEvent('click', this.actions[img.className].bind(this)); + }, this); + + //click on the directory name must open the directory itself + this.ele.getElements('b')[0].addEvent('click', this.toggle.bind(this)); + + //iterate over child directories + var uls = this.ele.getElements('ul'); + if(uls.length > 0) + { + uls[0].getChildren("li.folder").each(function(fld) { + var path = fld.getElements("input.path")[0].get("value"); + var name = fld.getElements("input.name")[0].get("value"); + this.directories.push(new Item(this, path, name, fld)); + }.bind(this)); + uls[0].getChildren("li.file").each(function(fld) { + var path = fld.getElements("input.path")[0].get("value"); + var name = fld.getElements("input.name")[0].get("value"); + this.files.push(new Item(this, path, name, fld)); + }.bind(this)); + } + }, + + reorderElements: function() { + //TODO sort the main ul again (to keep data ordered after renaming something) + }, + + del: function(event) { + $("confirm_form").removeEvents("submit"); + $("confirm_form").addEvent("submit", this.deleteDirectory.bind(this)); + + $$("#confirm_form p").set('html', '{{_(("Are you sure you want to delete the selected item?"))}}'); + + show_confirm_box(); + event.stop(); + }, + + deleteDirectory: function(event) { + hide_confirm_box(); + new Request.JSON({ + method: 'POST', + url: "/json/filemanager/delete", + data: {"path": this.path, "name": this.name}, + onSuccess: function(data) { + if(data.response == "success") + { + new Fx.Tween(this.ele).start('opacity', 0); + var ul = this.ele.parentNode; + this.ele.dispose(); + //if this was the only child, add a "empty folder" div + if(!ul.getChildren('li')[0]) + { + var div = new Element("div", { 'html': '{{ _("Folder is empty") }}' }); + div.replaces(ul); + } + + indicateSuccess(); + } else + { + //error from json code... + indicateFail(); + } + }.bind(this), + onFailure: indicateFail + }).send(); + + event.stop(); + }, + + rename: function(event) { + $("rename_form").removeEvents("submit"); + $("rename_form").addEvent("submit", this.renameDirectory.bind(this)); + + $("path").set("value", this.path); + $("old_name").set("value", this.name); + $("new_name").set("value", this.name); + + show_rename_box(); + event.stop(); + }, + + renameDirectory: function(event) { + hide_rename_box(); + new Request.JSON({ + method: 'POST', + url: "/json/filemanager/rename", + onSuccess: function(data) { + if(data.response == "success") + { + this.name = $("new_name").get("value"); + this.ele.getElements("b")[0].set('html', $("new_name").get("value")); + this.reorderElements(); + indicateSuccess(); + } else + { + //error from json code... + indicateFail(); + } + }.bind(this), + onFailure: indicateFail + }).send($("rename_form").toQueryString()); + + event.stop(); + }, + + mkdir: function(event) { + new Request.JSON({ + method: 'POST', + url: "/json/filemanager/mkdir", + data: {"path": this.path + "/" + this.name, "name": '{{_("New folder")}}'}, + onSuccess: function(data) { + if(data.response == "success") + { + new Request.HTML({ + method: 'POST', + url: "/filemanager/get_dir", + data: {"path": data.path, "name": data.name}, + onSuccess: function(li) { + //add node as first child of ul + var ul = this.ele.getChildren('ul')[0]; + if(!ul) + { + //remove the "Folder Empty" div + this.ele.getChildren('div').dispose(); + + //create new ul to contain subfolder + ul = new Element("ul"); + ul.inject(this.ele, 'bottom'); + } + li[0].inject(ul, 'top'); + + //add directory as a subdirectory of the current item + this.directories.push(new Item(this.ui, data.path, data.name, ul.firstChild)); + }.bind(this), + onFailure: indicateFail + }).send(); + indicateSuccess(); + } else + { + //error from json code... + indicateFail(); + } + }.bind(this), + onFailure: indicateFail + }).send(); + + event.stop(); + }, + + toggle: function() { + var child = this.ele.getElement('ul'); + if(child == null) + child = this.ele.getElement('div'); + + if(child != null) + { + if (child.getStyle('display') == "block") { + child.dissolve(); + } else { + child.reveal(); + } + } + } +}); |