diff options
author | RaNaN <Mast3rRaNaN@hotmail.de> | 2010-09-14 14:07:49 +0200 |
---|---|---|
committer | RaNaN <Mast3rRaNaN@hotmail.de> | 2010-09-14 14:07:49 +0200 |
commit | 71467f2866e96cdbe911cd9996305b7e83eef2a2 (patch) | |
tree | e72c3fb58981533f3740a736947840a5cc7a3ed5 /module/web/templates/default | |
parent | reverted, closed #129 (diff) | |
download | pyload-71467f2866e96cdbe911cd9996305b7e83eef2a2.tar.xz |
link ordering for webif
Diffstat (limited to 'module/web/templates/default')
-rw-r--r-- | module/web/templates/default/collector.html | 7 | ||||
-rw-r--r-- | module/web/templates/default/package_ui.js | 73 | ||||
-rw-r--r-- | module/web/templates/default/queue.html | 7 |
3 files changed, 83 insertions, 4 deletions
diff --git a/module/web/templates/default/collector.html b/module/web/templates/default/collector.html index 0143e13ec..630eddc51 100644 --- a/module/web/templates/default/collector.html +++ b/module/web/templates/default/collector.html @@ -9,7 +9,7 @@ document.addEvent("domready", function(){
load = new Fx.Tween($("load-indicator"), {link: "cancel"});
- var pUI = new PackageUI("url");
+ var pUI = new PackageUI("url", 0);
});
</script>
{% endblock %}
@@ -48,12 +48,17 @@ document.addEvent("domready", function(){ <li>
<div id="package_{{id}}" class="package">
<div class="order" style="display: none;">{{ package.order }}</div>
+
<div class="packagename" style="cursor: move;">
{{ package.name }}
+ <span class="buttons" style="opacity:0; cursor: default">
<img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
<img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+
+ <img title="{% trans "Move Package to Queue" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />
+ </span>
</div>
<div id="children_{{id}}" style="display: none;" class="children">
<span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>
diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js index a63a22aef..5f39710c1 100644 --- a/module/web/templates/default/package_ui.js +++ b/module/web/templates/default/package_ui.js @@ -11,8 +11,9 @@ function indicateFinish() { } var PackageUI = new Class({ - initialize: function(url) { + initialize: function(url, type) { this.url = url; + this.type = type; this.packages = []; this.parsePackages(); @@ -21,6 +22,7 @@ var PackageUI = new Class({ clone: true, revert: true, opacity: 0.4, + handle: ".packagename", onStart: this.startSort, onComplete: this.saveSort.bind(this) }); @@ -77,6 +79,20 @@ var Package = new Class({ this.ele.store("pid", this.id); this.parseElement(); } + + var pname = this.ele.getElements(".packagename")[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)); + + }, createElement: function() { @@ -90,6 +106,8 @@ var Package = new Class({ imgs[1].addEvent('click', this.restartPackage.bind(this)); + imgs[2].addEvent('click', this.movePackage.bind(this)); + this.ele.getElement('.packagename').addEvent('click', this.toggle.bind(this)); }, @@ -114,7 +132,7 @@ var Package = new Class({ } }); - var html = "<span class='child_status'><img src='/media/default/img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon}); + var html = "<span style='cursor: move' class='child_status sorthandle'><img src='/media/default/img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon}); html += "<span style='font-size: 15px'>{name}</span><br /><div class='child_secrow'>".substitute({"name": link.name}); html += "<span class='child_status'>{statusmsg}</span>{error} ".substitute({"statusmsg": link.statusmsg, "error":link.error}); html += "<span class='child_status'>{format_size}</span>".substitute({"format_size": link.format_size}); @@ -128,9 +146,20 @@ var Package = new Class({ "html": html }); + li.store("order", link.order); + li.store("lid", link.id); + li.adopt(div); ul.adopt(li); }); + this.sorts = new Sortables(ul, { + constrain: false, + clone: true, + revert: true, + opacity: 0.4, + handle: ".sorthandle", + onComplete: this.saveSort.bind(this) + }); this.registerLinkEvents(); this.linksLoaded = true; indicateFinish(); @@ -195,11 +224,51 @@ var Package = new Class({ method: 'get', url: '/json/restart_package/'+this.id, onSuccess: function(){ + var child = this.ele.getElement('.children'); + if (child.getStyle('display') == "block") { + child.dissolve(); + } + var ul = $("sort_children_{id}".substitute({"id": this.id})); + ul.erase("html"); + this.linksLoaded = false; + + indicateFinish(); + }.bind(this) + }).send(); + event.stop(); + }, + + movePackage: function(event){ + indicateLoad(); + new Request({ + method: 'get', + url: '/json/move_package/'+((this.ui.type +1) % 2) +"/"+ this.id, + onSuccess: function(){ this.ele.nix(); indicateFinish(); }.bind(this) }).send(); event.stop(); + }, + + saveSort: function(ele, copy) { + var order = []; + this.sorts.serialize(function(ele,pos){ + if (ele.retrieve("order") != pos){ + order.push(ele.retrieve("lid")+"|"+pos); + ele.store("order", pos); + } + + }); + if (order.length > 0){ + indicateLoad(); + new Request.JSON({ + method: 'get', + url: '/json/link_order/' + order[0], + onSuccess: indicateFinish, + onFailure: indicateFinish + }).send(); + } } });
\ No newline at end of file diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html index 09b2a4aec..2e8bf4b96 100644 --- a/module/web/templates/default/queue.html +++ b/module/web/templates/default/queue.html @@ -9,7 +9,7 @@ document.addEvent("domready", function(){
load = new Fx.Tween($("load-indicator"), {link: "cancel"});
- var pUI = new PackageUI("url");
+ var pUI = new PackageUI("url",1);
});
</script>
{% endblock %}
@@ -50,12 +50,17 @@ document.addEvent("domready", function(){ <li>
<div id="package_{{id}}" class="package">
<div class="order" style="display: none;">{{ package.order }}</div>
+
<div class="packagename" style="cursor: move;">
{{ package.name }}
+ <span class="buttons" style="opacity:0; cursor: default">
<img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
<img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+
+ <img title="{% trans "Move Package to Collector" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />
+ </span>
</div>
<div id="children_{{id}}" style="display: none;" class="children">
<span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>
|