From: Andrew Lorimer <andrew@lorimer.id.au>
Date: Fri, 16 Aug 2019 07:28:29 +0000 (+1000)
Subject: keyboard shortcuts & mouseover events
X-Git-Url: https://git.lorimer.id.au/newtab.git/diff_plain/ce3ce1f199e8a635d93875f5e1e37eaa14b1e658

keyboard shortcuts & mouseover events
---

diff --git a/admin.js b/admin.js
index 386da74..55bbf17 100644
--- 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);
 }
diff --git a/style.css b/style.css
index 409724a..ad98395 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,11 @@
+:root {
+  --hover-bg: #434c5e;
+  --hover-grn: #a3be8c;
+  --hover-bg-2: #848ead;
+  --remove-bg: #bf616a;
+  --default-fg: #d8dee9;
+}
+  
 html, body {
   font-size: 16px !important;
   width: 100%;
@@ -6,7 +14,7 @@ html, body {
 
 body {
   margin: 0;
-  color: #D8DEE9;
+  color: var(--default-fg);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -50,13 +58,10 @@ input.url {
 }
 
 .remove {
-/*  width: 9px;
-  height: 29px;
-  padding: 6px 10px 0 10px;*/
   width: 29px;
   height: 35px;
   padding: 0;
-  background: #434C5E;
+  background: var(--hover-bg);
   float: right;
   text-align: center;
   justify-content: center;
@@ -75,18 +80,19 @@ input.url {
   text-align: center;
   align-items: center;
   cursor: pointer;
+  background-color: var(--hover-bg-2);
 }
 
 .save:hover, .save:focus, .save:focus-within {
-  background: #A3BE8C;
+  background: var(--hover-grn);
 }
 
 .remove:hover {
-  background: #BF616A;
+  background: var(--remove-bg);
 }
 
 .add {
-  background-color: #434C5E;
+  background-color: var(--hover-bg);
   margin-top: 14px;
   width: 29px;
   height: 29px;
@@ -99,7 +105,11 @@ input.url {
 }
 
 .add:hover {
-  background-color: #A3BE8C !important;
+  background-color: var(--hover-grn) !important;
+}
+
+.new {
+  background-color: var(--hover-bg);
 }
 
 .title:hover > .add {
@@ -109,16 +119,16 @@ input.url {
 .title:hover .add:not(:hover),
 li:hover > .remove:not(:hover) {
   display: flex;
-  background-color: #434c5e;
+  background-color: var(--hover-bg);
 }
 
 li:hover > a, li > a:focus, li > a:focus-within {
   display: inline-block;
-  background-color: #434c5e;
+  background-color: var(--hover-bg);
 }
 
 li:hover {
-  background-color: #434c5e;
+  background-color: var(--hover-bg);
 }
 
 a {
@@ -140,15 +150,14 @@ a, ul > .title > p {
 }
 
 li.sortable-chosen.sortable-ghost > a {
-  background-color: white;
-  color: #2A313B !important;
+  background-color: var(--hover-bg-2);
 }
 
 .title {
   margin-bottom: 0.5rem;
   font-weight: bold;
   text-align: left;
-  border-bottom: 1px solid #434C5E;
+  border-bottom: 1px solid var(--hover-bg);
 }
 
 .title p {