Andrew's git - newtab.git/blob

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