1var mainlist;
2var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
3document.addEventListener("DOMContentLoaded", function() {
4chrome.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"},
25userListsCallback);
26});
2728
function columnToArray(list) {
29var l = [];
30var elem = list.getElementsByClassName("item");
31for (var i = 0; i < elem.length; ++i) {
32l[i] = [elem[i].innerText, elem[i].getAttribute("href")];
33}
34return l;
35}
3637
function listToArray(list) {
38var l = [];
39var elem = list.getElementsByTagName("li");
40for (var i = 0; i < elem.length; ++i) {
41l[i] = [elem[i].getElementsByTagName("a")[0].innerText, elem[i].getElementsByTagName("a")[0].getAttribute("href")];
42}
43return l;
44}
4546
var userListsCallback = function(lists) {
47mainlist = [lists["l1name"],lists["l2name"],lists["l3name"]]
48for(var i=0;i<lists["lists"].length;i++) {
49var ul = document.createElement("ul");
50ul.setAttribute("id", mainlist[i]);
51document.getElementById("links").appendChild(ul);
5253
var title = document.createElement("div");
54title.setAttribute("class", "title");
55ul.appendChild(title);
5657
var p = document.createElement("p");
58p.innerText = mainlist[i];
59title.appendChild(p);
6061
title.insertAdjacentHTML("beforeend", "<span class='add' id='add-"+mainlist[i]+"'>+</span>");
6263
var list = lists["lists"][i];
64for(var j=0;j<lists["lists"][i].length;j++) {
65var li = document.createElement("li");
66li.setAttribute("id", mainlist[i]+"-"+j);
67var siteurl = list[j][1];
68var name = list[j][0];
69var img = document.createElement("img");
70img.className = "icon";
71img.src = "http://www.google.com/s2/favicons?domain="+siteurl+"";
72li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+name+"</a>");
73li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
74ul.appendChild(li);
75}
7677
var sortable = Sortable.create(ul, {
78group: "userlists",
79onUpdate: function (evt) {
80save();
81}
82});
83}
8485
menu();
8687
};
8889
document.onkeyup=function(e){
90var e = e || window.event; // for IE to cover IEs window event-object
91fields = document.getElementsByClassName("new");
92if(e.which == 27 && fields != null) {
93fields[fields.length-1].remove();
94return false;
95}
96if(e.which == 27 && fields != null) {
97fields[fields.length-1].remove();
98return false;
99}
100}
101102
function listen(li) {
103li.addEventListener('click', function(event){
104var r = event.target.id.split("-");
105if (r[0] == "delete") {
106var el = document.getElementById(r[2]+"-"+r[1]);
107el.outerHTML = "";
108delete el;
109save();
110} else {
111var ul = document.getElementById(r[1]);
112var li = document.createElement("li");
113li.setAttribute("class", "new");
114li.insertAdjacentHTML("beforeend", "<span class='save' tabindex='3' id='input-"+columnToArray(li).length.toString()+"'>✔</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()+"'>");
115ul.appendChild(li);
116var span = document.getElementById("input-"+columnToArray(li).length.toString());
117var form = document.getElementById("form-"+columnToArray(li).length.toString());
118var name = document.getElementsByClassName("name")[0].focus();
119span.addEventListener('click', function(event){
120var li = document.getElementsByClassName("new")[0]
121var ul = li.parentNode;
122if (li.getElementsByClassName("name")[0].value != "" || li.getElementsByClassName("url")[0].value != "") {
123var newli = document.createElement("li");
124newli.setAttribute("id",r[1]+"-"+columnToArray(ul).length.toString());
125var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
126var name = li.getElementsByClassName("name")[0].value;
127li.remove()
128delete li;
129130
newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+name+"</a>");
131newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+r[1]+rmspan[1]);
132document.getElementById(r[1]).appendChild(newli);
133save();
134listen(newli);
135}
136});
137span.addEventListener('keypress', function(e) {
138if (e.keyCode == 13) {
139span.click();
140}
141});
142}
143}, false);
144}
145146
function menu() {
147var allUserLi = document.querySelectorAll('.remove, .add');
148149
allUserLi.forEach(function(li, p_index){
150listen(li);
151});
152}
153154
function save(l) {
155var set = l || JSON.parse(JSON.stringify(mainlist));
156d = []
157d = set;
158console.log("Saving settings");
159for (var i = 0; i < set.length; ++i) {
160d[i] = listToArray(document.getElementById(set[i]));
161}
162chrome.storage.sync.set( {"lists": d} );
163}