From: Andrew Lorimer <andrew@lorimer.id.au>
Date: Sat, 17 Aug 2019 04:30:03 +0000 (+1000)
Subject: allow user to add/remove columns indefinitely
X-Git-Url: https://git.lorimer.id.au/newtab.git/diff_plain/e669bd6b01760a24237b9e52e955d5616ce72e05

allow user to add/remove columns indefinitely
---

diff --git a/admin.js b/admin.js
index ddc08c5..8fb45ff 100644
--- a/admin.js
+++ b/admin.js
@@ -1,5 +1,10 @@
 var mainlist;
 var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
+var tick = "✔";
+var removebg = "#bf616a";
+var hovergrn = "#a3be8c";
+var hoverbg = "#434c5e";
+var hoverbg2 = "#848ead";
 document.addEventListener("DOMContentLoaded", function() {
   chrome.storage.sync.get(
     {"lists": [
@@ -34,7 +39,6 @@ function columnToArray(list) {
 
 function listToArray(list) {
   var l = [];
-  console.log(list);
   console.log(list.getElementsByClassName('title')[0].getElementsByTagName("p")[0].textContent);
   l[0] = list.getElementsByClassName('title')[0].getElementsByTagName("p")[0].textContent;
   var elem = list.getElementsByTagName("li");
@@ -45,10 +49,13 @@ function listToArray(list) {
 }
 
 var userListsCallback = function(lists) {
-  console.log(lists);
-  console.log(lists['lists'][0][0]);
-  mainlist = [lists['lists'][0][0],lists['lists'][1][0],lists['lists'][2][0]]
+  mainlist = []
+  for (let x of lists['lists']) {
+    mainlist.push(x[0]);
+  }
   for(var i=0;i<lists["lists"].length;i++) {
+    document.getElementById('edit').addEventListener('click', edit, false);
+    document.getElementById('addcol').addEventListener('click', addCol, false);
     var ul = document.createElement("ul");
     ul.setAttribute("id", mainlist[i]);
     ul.setAttribute('draggable', 'true');
@@ -101,7 +108,6 @@ var userListsCallback = function(lists) {
 };
 
 function dragStart(e) {
-  console.log(this);
   dragSrcEl = this;
   e.dataTransfer.effectAllowed = 'move';
   e.dataTransfer.setData('text/html', this.innerHTML);
@@ -128,7 +134,6 @@ function drop(e) {
     e.stopPropagation();
   }
   if (dragSrcEl != this) {
-    console.log(mainlist);
     dragSrcEl.innerHTML = this.innerHTML;
     this.innerHTML = e.dataTransfer.getData('text/html');
     save();
@@ -151,6 +156,106 @@ document.onkeyup=function(e){
   }
 }
 
+var editMode = false;
+
+function edit() {
+  if (editMode == true) {
+    console.log("Exited edit mode");
+    closeEdit(this);
+    return 0;
+  }
+  console.log("Entered edit mode");
+  this.style.background = hovergrn;
+  this.innerText = tick;
+  addbtn = document.getElementById("addcol");
+  addbtn.style.display = "flex";
+  var cols = document.getElementsByTagName("ul");
+  for (let col of cols) {
+    title = col.getElementsByClassName("title")[0];
+    rmbutton = document.createElement("span"); 
+    rmbutton.setAttribute("class", "rmcol");
+    rmbutton.setAttribute("id", "rmcol-"+col.id);
+    rmbutton.innerText = "-";
+    rmbutton.addEventListener('click', function(event){
+      console.log("Deleting column " + this.parentNode.parentNode);
+      this.parentNode.parentNode.remove();
+      var index = mainlist.indexOf(this.parentNode.parentNode.id);
+      console.log("Found deleted node " + this.parentNode.parentNode.id + " at index " + index);
+      if (index > -1) {
+        mainlist.splice(index, 1);
+      }
+      save();
+    });
+    title.appendChild(rmbutton);
+    title.getElementsByClassName("add")[0].style.display = "flex";
+    title.getElementsByTagName("p")[0].style.width = "calc(100% - 90px)";
+  }
+  editMode = true;
+}
+
+function closeEdit(editbtn) {
+  editbtn.style.background = hoverbg;
+  editbtn.innerText = "e";
+  addbtn = document.getElementById("addcol");
+  addbtn.style.display = "none";
+  var cols = document.getElementsByTagName("ul");
+  for (let col of cols) {
+    rmbutton = col.getElementsByClassName("title")[0].getElementsByClassName("rmcol")[0];
+    rmbutton.remove();
+    title = col.getElementsByClassName("title")[0];
+    title.getElementsByClassName("add")[0].style.display = "";
+    title.getElementsByTagName("p")[0].style.width = "calc(100% - 45px)";
+  }
+  editMode = false;
+}
+
+function addCol() {
+  var ul = document.createElement("ul");
+  ul.setAttribute("id", "new-category");
+  ul.setAttribute('draggable', 'true');
+  ul.addEventListener('dragstart', dragStart, false);
+  ul.addEventListener('dragenter', dragEnter, false);
+  ul.addEventListener('dragover', dragOver, false);
+  ul.addEventListener('dragleave', dragLeave, false);
+  ul.addEventListener('drop', drop, false);
+  document.getElementById("links").appendChild(ul);
+
+  var grip = document.createElement("span");
+  grip.setAttribute("class", "grip");
+
+  var title = document.createElement("div");
+  title.setAttribute("class", "title");
+  title.appendChild(grip)
+  ul.appendChild(title);
+
+  var p = document.createElement("p");
+  p.innerText = "new-category";
+  title.appendChild(p);
+
+  title.insertAdjacentHTML("beforeend", "<span class='add' id='add-new-category'>+</span>");
+
+  rmbutton = document.createElement("span"); 
+  rmbutton.setAttribute("class", "rmcol");
+  rmbutton.setAttribute("id", "rmcol-new-category");
+  rmbutton.innerText = "-";
+  rmbutton.addEventListener('click', function(event){
+    console.log("Deleting column " + this.parentNode.parentNode);
+    this.parentNode.parentNode.remove();
+    var index = mainlist.indexOf(this.parentNode.parentNode.id);
+    console.log("Found deleted node " + this.parentNode.parentNode.id + " at index " + index);
+    if (index > -1) {
+      mainlist.splice(index, 1);
+    }
+    save();
+  });
+  title.appendChild(rmbutton);
+  title.getElementsByClassName("add")[0].style.display = "flex";
+  title.getElementsByTagName("p")[0].style.width = "calc(100% - 90px)";
+  
+  listen(title.getElementsByClassName("add")[0]);
+  save();
+}
+
 function listen(li) {
   li.addEventListener('click', function(event){
     var r = event.target.id.split("-");
@@ -160,15 +265,29 @@ function listen(li) {
       delete el;
       save();
     } else {
-      var ul = document.getElementById(r[1]);
-      if (document.querySelectorAll("#"+r[1]+" .new").length > 0) {
-        fields = document.querySelector("#"+r[1]+" .new .name");
+      addItem(r, li);
+    }
+  }, false);
+}
+
+function addItem(caller, li) {
+      if (ul == null) {
+        var ul = li.parentNode.parentNode;
+        var id = ul.id;
+      }
+      else {
+        var ul = document.getElementById(caller[1]);
+        var id = caller[1];
+      }
+      
+      if (document.querySelectorAll("#"+id+" .new").length > 0) {
+        fields = document.querySelector("#"+id+" .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='url' spellcheck=false class='url' value='' placeholder='url' tabindex='2' id='form-"+columnToArray(li).length.toString()+"'>");
+      li.insertAdjacentHTML("beforeend", "<span class='save' tabindex='3' id='input-"+columnToArray(li).length.toString()+"'>"+tick+"</span><input type='text' class='name' value='' placeholder='name' tabindex='1'><br /><input type='url' spellcheck=false 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());
@@ -177,15 +296,15 @@ function listen(li) {
         var ul = li.parentNode;
         if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "" && li.getElementsByClassName("url")[0].validity.typeMismatch== false) {
           var newli = document.createElement("li");
-          newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
+          newli.setAttribute("id",caller[1]+"-"+columnToArray(ul).length.toString());
           var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
           var nme = li.getElementsByClassName("name")[0].value;
           li.remove()
           delete li;
 
           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);
+          newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+caller[1]+rmspan[1]);
+          document.getElementById(caller[1]).appendChild(newli);
           save();
           listen(newli);
         }
@@ -203,19 +322,18 @@ function listen(li) {
         nme = document.getElementsByClassName("name")[0];
         url = document.getElementsByClassName("url")[0];
         if (nme.value === ''  || url.value === '' || url.validity.typeMismatch == true) {
-          this.style.background = "#bf616a";
+          this.style.background = removebg;
         }
         else {
-          this.style.background = "#a3be8c";
+          this.style.background = hovergrn; 
         }
       };
       span.onmouseout = function() {
-        this.style.background = "#848ead";
+        this.style.background = hoverbg2;
       };
-      fields = document.querySelector("#"+r[1]+" .new .name");
+      fields = document.querySelector("#"+id+" .new .name");
       fields.focus(); 
-    }
-  }, false);
+
 }
 
 function menu() {
@@ -227,8 +345,8 @@ function menu() {
 }
 
 function save(l) {
+  console.log(mainlist);
   var set = l || JSON.parse(JSON.stringify(mainlist));
-  console.log(set);
   d = []
   d = set;
   console.log("Saving settings");
diff --git a/newtab.html b/newtab.html
index c2a40aa..123d1fd 100644
--- a/newtab.html
+++ b/newtab.html
@@ -14,6 +14,8 @@
   </head>
 
   <body>
+    <span id="edit">e</span>
+    <span id="addcol">+</span>
     <div class="favorites" id="links" style="min-height: 283px;"></div>
   </body>
 </html>
diff --git a/style.css b/style.css
index 0093262..ac31d9e 100644
--- a/style.css
+++ b/style.css
@@ -92,7 +92,34 @@ input.url {
   background: var(--remove-bg);
 }
 
-.add {
+#edit, #addcol {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: var(--hover-bg);
+  width: 29px;
+  height: 29px;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+#edit:hover {
+  background-color: var(--hover-bg-2);
+}
+
+#addcol {
+  display: none;
+  right: 29px;
+}
+
+#addcol:hover {
+  background-color: var(--hover-grn);
+}
+
+.add, .rmcol {
   background-color: var(--hover-bg);
   margin-top: 14px;
   width: 29px;
@@ -109,6 +136,14 @@ input.url {
   background-color: var(--hover-grn) !important;
 }
 
+.rmcol {
+  display: flex;
+}
+
+.rmcol:hover {
+  background-color: var(--remove-bg) !important;
+}
+
 .new {
   background-color: var(--hover-bg);
 }