Initial

1 files changed, 196 insertions, 0 deletions

diff --git a/static/index.js b/static/index.js
new file mode 100644
index 0000000..23d53ea
--- /dev/null
+++ b/static/index.js
@@ -0,0 +1,196 @@
+var socket = null;
+var is_initialised = false;
+var glist = [];  // [(int, string, element)]
+var el_list = null;
+
+function setupSocket() {
+  socket = io();
+
+  socket.on("init", function(list) {
+    // Reload if server restarted
+    if (!is_initialised) is_initialised = true;
+    else { location.reload(); return; }
+
+    glist = list;
+    for (var i = 0; i < glist.length; i++) glist[i].push(null);
+    initialiseList();
+  });
+
+  socket.on("error", function(err) {
+    alert("Error: " + err);
+  });
+
+  socket.on("alert", function(text) {
+    alert(text);
+  });
+}
+
+// Returns element
+function createItemElement(votes, string) {
+  var el;
+
+  var el_item = document.createElement("div");
+  el_item.classList.add("item");
+  if (votes < 0) el_item.classList.add("negative");
+
+  el = document.createElement("span");
+  el.classList.add("item-bullet");
+  el.appendChild(document.createTextNode("•"));
+  el_item.appendChild(el);
+
+  el = document.createElement("span");
+  el.classList.add("item-label");
+  el.appendChild(document.createTextNode(string));
+  el_item.appendChild(el);
+
+  el = document.createElement("span");
+  el.classList.add("item-votes");
+  el.appendChild(document.createTextNode("[" + votes + "]"));
+  el_item.appendChild(el);
+
+  var buttons = document.createElement("span");
+  buttons.classList.add("item-buttons");
+
+  el = document.createElement("span");
+  el.classList.add("item-upvote");
+  el.appendChild(document.createTextNode("⇧"));
+  el.addEventListener("click", function() {
+    upvoteItem(string, 1);
+  });
+  buttons.appendChild(el);
+
+  el = document.createElement("span");
+  el.classList.add("item-downvote");
+  el.appendChild(document.createTextNode("↓"));
+  el.addEventListener("click", function() {
+    upvoteItem(string, -1);
+  });
+  buttons.appendChild(el);
+
+  el = document.createElement("span");
+  el.classList.add("item-delete");
+  el.appendChild(document.createTextNode("⨯"));
+  el.addEventListener("click", function() {
+    if (votes < 0) deleteItem(string);
+    else negateItem(string);
+  });
+  buttons.appendChild(el);
+
+  el_item.appendChild(buttons);
+
+  return el_item;
+}
+
+function initialiseList() {
+  var el_item, el;
+  el_list.innerHTML = "";
+
+  for (var i = 0; i < glist.length; i++) {
+    el_item = createItemElement(glist[i][0], glist[i][1]);
+    glist[i][2] = el_item;
+    el_list.appendChild(el_item);
+  }
+
+  el_item = document.createElement("div");
+  el_item.classList.add("item");
+  el_item.classList.add("make-new");
+
+  el = document.createElement("span");
+  el.classList.add("new-item-bullet");
+  el.appendChild(document.createTextNode("+"));
+  el_item.appendChild(el);
+
+  el = document.createElement("input");
+  el.type = "text";
+  el.setAttribute("size", 21);
+  el.setAttribute("placeholder", "New item...");
+  el.classList.add("new-item-input");
+  el.addEventListener("keypress", function(ev) {
+    if (ev.key == "Enter" || ev.keyCode == 10 || ev.keyCode == 13) {
+      submitNewItem(ev.target.value);
+      ev.target.value = "";
+    }
+  });
+  el_item.appendChild(el);
+
+  el_list.appendChild(el_item);
+}
+
+function submitNewItem(string) {
+  for (var i = 0; i < glist.length; i++) {
+    if (glist[i][1] == string) {
+      var el = glist[i][2];
+      el.classList.add("flash");
+      setTimeout(function(i) { el.classList.remove("flash"); }, 200);
+      return;
+    }
+  }
+
+  socket.emit("new", string);
+
+  insertItem(0, string);
+}
+
+function upvoteItem(string, incr) {
+  for (var i = 0; i < glist.length; i++) {
+    if (glist[i][1] == string) {
+      glist[i][0] += incr;
+      socket.emit("set_votes", string, glist[i][0]);
+      reinsertItem(i);
+      break;
+    }
+  }
+}
+
+function negateItem(string) {
+  for (var i = 0; i < glist.length; i++) {
+    if (glist[i][1] == string) {
+      glist[i][0] = -1;
+      socket.emit("set_votes", string, -1);
+      reinsertItem(i);
+      break;
+    }
+  }
+}
+
+function deleteItem(string) {
+  for (var i = 0; i < glist.length; i++) {
+    if (glist[i][1] == string) {
+      socket.emit("delete", string);
+      glist[i][2].parentElement.removeChild(glist[i][2]);
+      glist.splice(i, 1);
+      break;
+    }
+  }
+}
+
+function insertItem(votes, string) {
+  var i;
+  for (i = 0; i < glist.length; i++) {
+    if (glist[i][0] > votes) continue;
+    if (glist[i][0] < votes || glist[i][1] > string) break;
+  }
+  var el = createItemElement(votes, string);
+  if (i == glist.length) {
+    glist.push([votes, string, el]);
+    el_list.insertBefore(el, document.querySelector(".item.make-new"));
+  } else {
+    var refel = glist[i][2];
+    glist.splice(i, 0, [votes, string, el]);
+    el_list.insertBefore(el, refel);
+  }
+}
+
+function reinsertItem(index) {
+  glist[index][2].parentElement.removeChild(glist[index][2]);
+  var votes = glist[index][0];
+  var string = glist[index][1];
+  glist.splice(index, 1);
+
+  insertItem(votes, string);
+}
+
+window.addEventListener("load", function() {
+  el_list = document.getElementById("list");
+  setupSocket();
+});