Andrew's git - newtab.git/blob

55bbf1728e9c6ba4c80af3fb887d4ea1d6bb9fec
   1var mainlist;
   2var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
   3document.addEventListener("DOMContentLoaded", function() {
   4  chrome.storage.sync.get(
   5    {"lists": [
   6      [
   7        ["Github", "https://github.com"],
   8        ["Wikipedia", "https://en.wikipedia.org"],
   9        ["Gmail", "https://mail.google.com"]
  10      ],
  11      [
  12        ["Desmos", "https://www.desmos.com/calculator"],
  13        ["Wolfram", "https://wolframalpha.com"],
  14        ["Hacker News", "https://news.ycombinator.com"]
  15      ],
  16      [
  17        ["Reddit", "https://www.reddit.com"],
  18        ["YouTube", "https://youtube.com"],
  19        ["Instagram", "https://instagram.com"]
  20      ]
  21    ],
  22"l1name": "General",
  23"l2name": "Productivity",
  24"l3name": "Social"},
  25    userListsCallback);
  26});
  27
  28function columnToArray(list) {
  29  var l = [];
  30  var elem = list.getElementsByClassName("item");
  31  for (var i = 0; i < elem.length; ++i) {
  32    l[i] = [elem[i].innerText, elem[i].getAttribute("href")];
  33  }
  34  return l;
  35}
  36
  37function listToArray(list) {
  38  var l = [];
  39  var elem = list.getElementsByTagName("li");
  40  for (var i = 0; i < elem.length; ++i) {
  41    l[i] = [elem[i].getElementsByTagName("a")[0].innerText, elem[i].getElementsByTagName("a")[0].getAttribute("href")];
  42  }
  43  return l;
  44}
  45
  46var userListsCallback = function(lists) {
  47  mainlist = [lists["l1name"],lists["l2name"],lists["l3name"]]
  48  for(var i=0;i<lists["lists"].length;i++) {
  49    var ul = document.createElement("ul");
  50    ul.setAttribute("id", mainlist[i]);
  51    document.getElementById("links").appendChild(ul);
  52
  53    var title = document.createElement("div");
  54    title.setAttribute("class", "title");
  55    ul.appendChild(title);
  56
  57    var p = document.createElement("p");
  58    p.innerText = mainlist[i];
  59    title.appendChild(p);
  60
  61    title.insertAdjacentHTML("beforeend", "<span class='add' id='add-"+mainlist[i]+"'>+</span>");
  62
  63    var list = lists["lists"][i];
  64    for(var j=0;j<lists["lists"][i].length;j++) {
  65      var li = document.createElement("li");
  66      li.setAttribute("id", mainlist[i]+"-"+j);
  67      var siteurl = list[j][1];
  68      var nme = list[j][0];
  69      var img = document.createElement("img");
  70      img.className = "icon";
  71      img.src = "http://www.google.com/s2/favicons?domain="+siteurl+"";
  72      li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+nme+"</a>");
  73      li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
  74      ul.appendChild(li);
  75    }
  76
  77    var sortable = Sortable.create(ul, {
  78      group: "userlists",
  79      onUpdate: function (evt) {
  80        save();
  81      }
  82    });
  83  }
  84
  85  menu();
  86
  87};
  88
  89document.onkeyup=function(e){
  90  var e = e || window.event; // for IE to cover IEs window event-object
  91  fields = document.getElementsByClassName("new");
  92  if(e.which == 27 && fields != null) {
  93    fields[fields.length-1].remove();
  94    return false;
  95  }
  96  if(e.which == 27 && fields != null) {
  97    fields[fields.length-1].remove();
  98    return false;
  99  }
 100}
 101
 102function listen(li) {
 103  li.addEventListener('click', function(event){
 104    var r = event.target.id.split("-");
 105    if (r[0] == "delete") {
 106      var el = document.getElementById(r[2]+"-"+r[1]);
 107      el.outerHTML = "";
 108      delete el;
 109      save();
 110    } else {
 111      var ul = document.getElementById(r[1]);
 112      console.log(ul);
 113      if (document.querySelectorAll("#"+r[1]+" .new").length > 0) {
 114        fields = document.querySelector("#"+r[1]+" .new .name");
 115        fields.focus(); 
 116        return false;
 117      }
 118      var li = document.createElement("li");
 119      li.setAttribute("class", "new");
 120      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()+"'>");
 121      ul.appendChild(li);
 122      var span = document.getElementById("input-"+columnToArray(li).length.toString());
 123      var form = document.getElementById("form-"+columnToArray(li).length.toString());
 124      span.addEventListener('click', function(event){
 125        var li = document.getElementsByClassName("new")[0]
 126        var ul = li.parentNode;
 127        if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "") {
 128          var newli = document.createElement("li");
 129          newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
 130          var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
 131          var nme = li.getElementsByClassName("name")[0].value;
 132          li.remove()
 133          delete li;
 134
 135          newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+nme+"</a>");
 136          newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+r[1]+rmspan[1]);
 137          document.getElementById(r[1]).appendChild(newli);
 138          save();
 139          listen(newli);
 140        }
 141        else {
 142          if (li.getElementsByClassName("name")[0].value == "" && li.getElementsByClassName("url")[0].value == "") {
 143            console.log("No data supplied, deleting form");
 144            this.parentNode.remove();
 145          }
 146          else {
 147            console.log("Missing data, press Esc to delete form");
 148          }
 149        }
 150      });
 151      span.onmouseover = function() {
 152        nme = document.getElementsByClassName("name")[0];
 153        url = document.getElementsByClassName("url")[0];
 154        if (nme.value === ''  || url.value === '') {
 155          this.style.background = "#bf616a";
 156        }
 157        else {
 158          this.style.background = "#a3be8c";
 159        }
 160      };
 161      span.onmouseout = function() {
 162        this.style.background = "#848ead";
 163      };
 164      fields = document.querySelector("#"+r[1]+" .new .name");
 165      fields.focus(); 
 166    }
 167  }, false);
 168}
 169
 170function menu() {
 171  var allUserLi = document.querySelectorAll('.remove, .add');
 172
 173  allUserLi.forEach(function(li, p_index){
 174    listen(li);
 175  });
 176}
 177
 178function save(l) {
 179  var set = l || JSON.parse(JSON.stringify(mainlist));
 180  d = []
 181  d = set;
 182  console.log("Saving settings");
 183  for (var i = 0; i < set.length; ++i) {
 184    d[i] = listToArray(document.getElementById(set[i]));
 185  }
 186  chrome.storage.sync.set( {"lists": d} );
 187}