move (reorder) and move updates

1 files changed, 53 insertions, 5 deletions

diff --git a/static/script.js b/static/script.js
index 3be5775..8687b0e 100644
--- a/static/script.js
+++ b/static/script.js
@@ -14,6 +14,10 @@ $(document).ready(function () {
 			case 1:
 				drawRemove(update.yid);
 				break;
+			case 2:
+			case 3:
+				drawMove(update.yid, update.action);
+				break;
 			}
 		}
 	}
@@ -167,12 +171,11 @@ function search(query) {
 }
 
 function add(id, title) {
-	var user = $('#user').val();
 	params = {
 		pid: pid,
 		yid: id,
 		title: title,
-		user: user
+		user: $('#user').val()
 	}
 	$.getJSON('/add/', params);
 }
@@ -187,7 +190,19 @@ function drawAdd(s) {
 				<a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\
 			</div>\
 			<div class="user">' + s.user + '</div>\
-			<div class="remove" onclick="remove(\'' + s.yid + '\')">×</div>\
+			<div class="remove">\
+				<a href="javascript:remove(\'' + s.yid + '\')">\
+					<img src="/static/remove.png" alt="remove">\
+				</a>\
+			</div>\
+			<div class="reorder">\
+				<a href="javascript:move(\'' + s.yid + '\', 2)">\
+					<img src="/static/up-arrow.png" alt="up">\
+				</a>\
+				<a href="javascript:move(\'' + s.yid + '\', 3)">\
+					<img src="/static/down-arrow.png" alt="down">\
+				</a>\
+			</div>\
 			<canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\
 			<br>\
 			<img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\
@@ -201,7 +216,6 @@ function drawAdd(s) {
 }
 
 function remove(id) {
-	var user = $('#user').val();
 	params = {
 		pid: pid,
 		yid: id,
@@ -211,8 +225,42 @@ function remove(id) {
 
 function drawRemove(id) {
 	var element = $('#' + id);
+	stop(id);
 	element.slideUp(100, function () {
-		stop(id);
 		element.remove();
 	});
 }
+
+function move(id, dir) {
+	params = {
+		pid: pid,
+		yid: id,
+		direction: dir // see updates.go:moveUpAction
+	}
+	$.getJSON('/move/', params);
+}
+
+function drawMove(id, dir) {
+	var element1 = document.getElementById(id);
+	if (dir == 2) { //up
+		var element2 = element1.previousElementSibling;
+		if (!element2) return;
+		element1 = $('#' + id);
+		element2 = $('#' + element2.id);
+		element1.fadeOut(200, function () {
+			element1.detach();
+			element2.before(element1);
+			element1.fadeIn(200);
+		});
+	} else if (dir == 3) { //down
+		var element2 = element1.nextElementSibling;
+		if (!element2) return;
+		element1 = $('#' + id);
+		element2 = $('#' + element2.id);
+		element1.fadeOut(200, function () {
+			element1.detach();
+			element2.after(element1);
+			element1.fadeIn(200);
+		});
+	}
+}