remember position of column titles
[newtab.git] / admin.js
index 386da741d7c81a7059fbc09c7aca81e69172a316..ddc08c5e2aff6cd442b4ffbbb12e082c62e5e5f0 100644 (file)
--- a/admin.js
+++ b/admin.js
@@ -3,25 +3,23 @@ var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
 document.addEventListener("DOMContentLoaded", function() {
   chrome.storage.sync.get(
     {"lists": [
-      [
+      ["General",
         ["Github", "https://github.com"],
         ["Wikipedia", "https://en.wikipedia.org"],
         ["Gmail", "https://mail.google.com"]
       ],
-      [
+      ["Productivity",
         ["Desmos", "https://www.desmos.com/calculator"],
         ["Wolfram", "https://wolframalpha.com"],
         ["Hacker News", "https://news.ycombinator.com"]
       ],
-      [
+      ["Social",
         ["Reddit", "https://www.reddit.com"],
         ["YouTube", "https://youtube.com"],
         ["Instagram", "https://instagram.com"]
       ]
-    ],
-"l1name": "General",
-"l2name": "Productivity",
-"l3name": "Social"},
+    ]
+},
     userListsCallback);
 });
 
@@ -36,22 +34,37 @@ 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");
   for (var i = 0; i < elem.length; ++i) {
-    l[i] = [elem[i].getElementsByTagName("a")[0].innerText, elem[i].getElementsByTagName("a")[0].getAttribute("href")];
+    l[i+1] = [elem[i].getElementsByTagName("a")[0].innerText, elem[i].getElementsByTagName("a")[0].getAttribute("href")];
   }
   return l;
 }
 
 var userListsCallback = function(lists) {
-  mainlist = [lists["l1name"],lists["l2name"],lists["l3name"]]
+  console.log(lists);
+  console.log(lists['lists'][0][0]);
+  mainlist = [lists['lists'][0][0],lists['lists'][1][0],lists['lists'][2][0]]
   for(var i=0;i<lists["lists"].length;i++) {
     var ul = document.createElement("ul");
     ul.setAttribute("id", mainlist[i]);
+    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");
@@ -61,21 +74,22 @@ var userListsCallback = function(lists) {
     title.insertAdjacentHTML("beforeend", "<span class='add' id='add-"+mainlist[i]+"'>+</span>");
 
     var list = lists["lists"][i];
-    for(var j=0;j<lists["lists"][i].length;j++) {
+    for(var j=1;j<lists["lists"][i].length;j++) {
       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>");
+      img.src = "https://www.google.com/s2/favicons?domain="+siteurl+"";
+      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);
     }
 
-    var sortable = Sortable.create(ul, {
+    new Sortable(ul, {
       group: "userlists",
+      animation: 150,
       onUpdate: function (evt) {
         save();
       }
@@ -86,6 +100,44 @@ var userListsCallback = function(lists) {
 
 };
 
+function dragStart(e) {
+  console.log(this);
+  dragSrcEl = this;
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/html', this.innerHTML);
+}
+
+function dragOver(e) {
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  e.dataTransfer.dropEffect = 'move';
+  return false;
+}
+
+function dragEnter(e) {
+  this.classList.add('over');
+}
+
+function dragLeave(e) {
+  this.classList.remove('over');
+}
+
+function drop(e) {
+  if (e.stopPropagation); {
+    e.stopPropagation();
+  }
+  if (dragSrcEl != this) {
+    console.log(mainlist);
+    dragSrcEl.innerHTML = this.innerHTML;
+    this.innerHTML = e.dataTransfer.getData('text/html');
+    save();
+  }
+  return false;
+}
+
+var dragSrcEl = null;
+
 document.onkeyup=function(e){
   var e = e || window.event; // for IE to cover IEs window event-object
   fields = document.getElementsByClassName("new");
@@ -93,8 +145,8 @@ document.onkeyup=function(e){
     fields[fields.length-1].remove();
     return false;
   }
-  if(e.which == 27 && fields != null) {
-    fields[fields.length-1].remove();
+  if(e.which == 13 && fields.length > 0) {
+    fields[fields.length-1].getElementsByClassName("save")[0].click();
     return false;
   }
 }
@@ -109,36 +161,59 @@ function listen(li) {
       save();
     } else {
       var ul = document.getElementById(r[1]);
+      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()+"'>");
+      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()+"'>");
       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 != "" && li.getElementsByClassName("url")[0].validity.typeMismatch== false) {
           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 === '' || url.validity.typeMismatch == true) {
+          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);
 }
@@ -153,6 +228,7 @@ function menu() {
 
 function save(l) {
   var set = l || JSON.parse(JSON.stringify(mainlist));
+  console.log(set);
   d = []
   d = set;
   console.log("Saving settings");