123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- var elemAdd = document.querySelector("#add");
- var elemName = elemAdd.querySelector(".name");
- var elemSuggestions = elemAdd.querySelector(".suggestions");
- var elemList = document.querySelector("#list");
-
- elemSuggestions.show = function() {
- elemSuggestions.className = "suggestions";
- elemSuggestions.style.display = "block";
- }
- elemSuggestions.hide = function() {
- elemSuggestions.className = "suggestions hidden";
- setTimeout(function() {
- elemSuggestions.style.display = "none";
- }, 100);
- }
- elemSuggestions.hide();
-
- var events = WebEvents();
- var words = [];
-
- function capitalize(word) {
- var first = word[0].toUpperCase();
- return first + word.substring(1);
- }
-
- function remove(index) {
- var elem;
- for (var i in elemList.childNodes) {
- var e = elemList.childNodes[i];
- var eindex = parseInt(e.querySelector(".index").value);
- if (eindex == index) {
- elem = e;
- break;
- }
- }
- if (!elem)
- return;
-
- elem.className += " hidden";
- setTimeout(function() {
- elem.parentNode.removeChild(elem);
- }, 1000);
- }
-
- function add(word, index, animate) {
- if (!word)
- return;
-
- var elem = document.createElement("div");
- if (animate)
- elem.className = "elem hidden";
- else
- elem.className = "elem";
-
- var elemName = document.createElement("span");
- elemName.className = "name";
- elemName.textContent = capitalize(word);
-
- var elemIndex = document.createElement("input");
- elemIndex.className = "index";
- elemIndex.value = index;
- elemIndex.type = "hidden";
-
- var elemOk = document.createElement("span");
- elemOk.className = "ok";
-
- elemOk.addEventListener("click", function() {
- if (/remove-pending/.test(elem.className))
- return;
- elem.className += " remove-pending";
- post("/remove/"+index);
- });
-
- elem.appendChild(elemIndex);
- elem.appendChild(elemName);
- elem.appendChild(elemOk);
-
- list.insertBefore(elem, list.firstChild);
-
- if (animate) {
- setTimeout(function() {
- elem.className = "elem";
- }, 100);
- }
- }
-
- function request(method, url, cb) {
- var xhr = new XMLHttpRequest();
-
- xhr.addEventListener("load", function() {
- var obj;
- try {
- obj = JSON.parse(xhr.responseText);
- if (cb)
- cb(null, JSON.parse(xhr.responseText));
- } catch (err) {
- console.log(xhr.responseText);
- if (cb)
- cb(err);
- }
- });
- xhr.addEventListener("error", function(err) {
- if (cb)
- cb(err);
- });
-
- xhr.open(method, url);
- xhr.send();
- }
-
- function get(url, cb) {
- request("GET", url, cb);
- }
- function post(url, cb) {
- request("POST", url, cb);
- }
-
- function clearChildren(elem) {
- while (elem.firstChild) {
- elem.removeChild(elem.firstChild);
- }
- }
-
- elemAdd.addEventListener("submit", function(evt) {
- evt.preventDefault();
- if (elemName.value == "")
- return;
-
- post("/add/"+encodeURIComponent(elemName.value));
- elemName.value = "";
- });
-
- function displaySuggestions() {
- setTimeout(function() {
- var name = elemName.value;
- var suggestions = words
- .filter(function(w) {
- return w.name.indexOf(name.toLowerCase()) !== -1;
- })
- .sort(function(a, b) {
- return a.count - b.count;
- });
-
- clearChildren(elemSuggestions);
-
- suggestions.forEach(function(w) {
- var elem = document.createElement("div");
- elem.className = "suggestion";
- elem.textContent = capitalize(w.name);
-
- elemSuggestions.insertBefore(elem, elemSuggestions.firstChild);
-
- elem.addEventListener("click", function() {
- console.log(w);
- post("/add/"+encodeURIComponent(w.name));
- elemSuggestions.hide();
- elemName.value = "";
- elemName.blur();
- });
- });
- if (suggestions.length > 0)
- elemSuggestions.show();
- else
- elemSuggestions.hide();
- }, 10);
- }
- elemName.addEventListener("keydown", displaySuggestions);
- elemName.addEventListener("focus", displaySuggestions);
- elemName.addEventListener("blur", function(evt) {
- setTimeout(function() {
- elemSuggestions.hide();
- }, 100);
- });
-
- events.on("add", function(evt) {
- add(evt.name, evt.index, true);
-
- var word = words.filter(function(w) {
- return w.name === evt.name;
- })[0];
- if (word)
- word.count += 1;
- else
- words.push({ name: evt.name, count: 1 });
- });
-
- events.on("remove", function(evt) {
- remove(evt.index);
- });
-
- events.on("connection", function() {
- clearChildren(elemList);
- get("/list", function(err, list) {
- list.forEach(function(word, index) { add(word, index); });
- });
- });
-
- get("/words", function(err, w) {
- if (err)
- return console.error(err);
-
- words = w;
- });
|