keyboard shortcuts & mouseover events
[newtab.git] / admin.js
index 386da741d7c81a7059fbc09c7aca81e69172a316..55bbf1728e9c6ba4c80af3fb887d4ea1d6bb9fec 100644 (file)
--- a/admin.js
+++ b/admin.js
@@ -65,11 +65,11 @@ var userListsCallback = function(lists) {
       var li = document.createElement("li");
       li.setAttribute("id", mainlist[i]+"-"+j);
       var siteurl = list[j][1];
-      var name = list[j][0];
+      var nme = list[j][0];
       var img = document.createElement("img");
       img.className = "icon";
       img.src = "http://www.google.com/s2/favicons?domain="+siteurl+"";
-      li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+name+"</a>");
+      li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+nme+"</a>");
       li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
       ul.appendChild(li);
     }
@@ -109,36 +109,60 @@ function listen(li) {
       save();
     } else {
       var ul = document.getElementById(r[1]);
+      console.log(ul);
+      if (document.querySelectorAll("#"+r[1]+" .new").length > 0) {
+        fields = document.querySelector("#"+r[1]+" .new .name");
+        fields.focus(); 
+        return false;
+      }
       var li = document.createElement("li");
       li.setAttribute("class", "new");
       li.insertAdjacentHTML("beforeend", "<span class='save' tabindex='3' id='input-"+columnToArray(li).length.toString()+"'>&#x2714;</span><input type='text' class='name' value='' placeholder='name' tabindex='1'><br /><input type='text' class='url' value='' placeholder='url' tabindex='2' id='form-"+columnToArray(li).length.toString()+"'>");
       ul.appendChild(li);
       var span = document.getElementById("input-"+columnToArray(li).length.toString());
       var form = document.getElementById("form-"+columnToArray(li).length.toString());
-      var name = document.getElementsByClassName("name")[0].focus();
       span.addEventListener('click', function(event){
         var li = document.getElementsByClassName("new")[0]
         var ul = li.parentNode;
-        if (li.getElementsByClassName("name")[0].value != "" || li.getElementsByClassName("url")[0].value != "") {
+        if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "") {
           var newli = document.createElement("li");
           newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
           var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
-          var name = li.getElementsByClassName("name")[0].value;
+          var nme = li.getElementsByClassName("name")[0].value;
           li.remove()
           delete li;
 
-          newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+name+"</a>");
+          newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+nme+"</a>");
           newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+r[1]+rmspan[1]);
           document.getElementById(r[1]).appendChild(newli);
           save();
           listen(newli);
         }
-      });
-      span.addEventListener('keypress', function(e) {
-        if (e.keyCode == 13) {
-          span.click();
+        else {
+          if (li.getElementsByClassName("name")[0].value == "" && li.getElementsByClassName("url")[0].value == "") {
+            console.log("No data supplied, deleting form");
+            this.parentNode.remove();
+          }
+          else {
+            console.log("Missing data, press Esc to delete form");
+          }
         }
       });
+      span.onmouseover = function() {
+        nme = document.getElementsByClassName("name")[0];
+        url = document.getElementsByClassName("url")[0];
+        if (nme.value === ''  || url.value === '') {
+          this.style.background = "#bf616a";
+        }
+        else {
+          this.style.background = "#a3be8c";
+        }
+      };
+      span.onmouseout = function() {
+        this.style.background = "#848ead";
+      };
+      fields = document.querySelector("#"+r[1]+" .new .name");
+      fields.focus(); 
     }
   }, false);
 }