allow user to add/remove columns indefinitely

diff --git a/admin.js b/admin.js
index ddc08c5e2aff6cd442b4ffbbb12e082c62e5e5f0..8fb45ffffeba1be76c138e89473b18448149fd12 100644 (file)
--- a/admin.js
+++ b/admin.js
@@ -1,5 +1,10 @@
 var mainlist;
 var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
 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": [
 document.addEventListener("DOMContentLoaded", function() {
   chrome.storage.sync.get(
     {"lists": [


@@ -34,7 +39,6 @@ function columnToArray(list) {
 
 function listToArray(list) {
   var l = [];
 
 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");
   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) {
 }
 
 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++) {
   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');
     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) {
 };
 
 function dragStart(e) {

-  console.log(this);

   dragSrcEl = this;
   e.dataTransfer.effectAllowed = 'move';
   e.dataTransfer.setData('text/html', this.innerHTML);
   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) {
     e.stopPropagation();
   }
   if (dragSrcEl != this) {

-    console.log(mainlist);

     dragSrcEl.innerHTML = this.innerHTML;
     this.innerHTML = e.dataTransfer.getData('text/html');
     save();
     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("-");
 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 {
       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");
         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());
       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");
         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>");
           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);
         }
           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) {
         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 {
         }
         else {

-          this.style.background = "#a3be8c";
+          this.style.background = hovergrn; 

         }
       };
       span.onmouseout = function() {
         }
       };
       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(); 
       fields.focus(); 

-    }
-  }, false);
+

 }
 
 function menu() {
 }
 
 function menu() {


@@ -227,8 +345,8 @@ function menu() {
 }
 
 function save(l) {
 }
 
 function save(l) {

+  console.log(mainlist);

   var set = l || JSON.parse(JSON.stringify(mainlist));
   var set = l || JSON.parse(JSON.stringify(mainlist));

-  console.log(set);

   d = []
   d = set;
   console.log("Saving settings");
   d = []
   d = set;
   console.log("Saving settings");

diff --git a/newtab.html b/newtab.html
index c2a40aa88e684a91f9e48354d33fee858d6c1ff0..123d1fdb2dfd530952e0a0b989394c48c3ad810e 100644 (file)
--- a/newtab.html
+++ b/newtab.html
@@ -14,6 +14,8 @@
   </head>
 
   <body>
   </head>
 
   <body>

+    <span id="edit">e</span>
+    <span id="addcol">+</span>

     <div class="favorites" id="links" style="min-height: 283px;"></div>
   </body>
 </html>
     <div class="favorites" id="links" style="min-height: 283px;"></div>
   </body>
 </html>

diff --git a/style.css b/style.css
index 0093262a2c441c91b03bb6b0c9186224c2906f77..ac31d9e983a581215be3900a5e93f101431fb03b 100644 (file)
--- a/style.css
+++ b/style.css
@@ -92,7 +92,34 @@ input.url {
   background: var(--remove-bg);
 }
 
   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;
   background-color: var(--hover-bg);
   margin-top: 14px;
   width: 29px;


@@ -109,6 +136,14 @@ input.url {
   background-color: var(--hover-grn) !important;
 }
 
   background-color: var(--hover-grn) !important;
 }
 

+.rmcol {
+  display: flex;
+}
+
+.rmcol:hover {
+  background-color: var(--remove-bg) !important;
+}
+

 .new {
   background-color: var(--hover-bg);
 }
 .new {
   background-color: var(--hover-bg);
 }