1var mainlist;
2var rmspan = ["<span class='remove' id='delete-", "'>–</span>"]
3var tick = "✔";
4var removebg = "#bf616a";
5var hovergrn = "#a3be8c";
6var hoverbg = "#434c5e";
7var hoverbg2 = "#848ead";
8document.addEventListener("DOMContentLoaded", function() {
9 chrome.storage.sync.get(
10 {"lists": [
11 ["General",
12 ["Github", "https://github.com"],
13 ["Wikipedia", "https://en.wikipedia.org"],
14 ["Gmail", "https://mail.google.com"]
15 ],
16 ["Productivity",
17 ["Desmos", "https://www.desmos.com/calculator"],
18 ["Wolfram", "https://wolframalpha.com"],
19 ["Hacker News", "https://news.ycombinator.com"]
20 ],
21 ["Social",
22 ["Reddit", "https://www.reddit.com"],
23 ["YouTube", "https://youtube.com"],
24 ["Instagram", "https://instagram.com"]
25 ]
26 ]
27},
28 userListsCallback);
29});
30
31function columnToArray(list) {
32 var l = [];
33 var elem = list.getElementsByClassName("item");
34 for (var i = 0; i < elem.length; ++i) {
35 l[i] = [elem[i].innerText, elem[i].getAttribute("href")];
36 }
37 return l;
38}
39
40function listToArray(list) {
41 var l = [];
42 console.log(list.getElementsByClassName('title')[0].getElementsByTagName("p")[0].textContent);
43 l[0] = list.getElementsByClassName('title')[0].getElementsByTagName("p")[0].textContent;
44 var elem = list.getElementsByTagName("li");
45 for (var i = 0; i < elem.length; ++i) {
46 l[i+1] = [elem[i].getElementsByTagName("a")[0].innerText, elem[i].getElementsByTagName("a")[0].getAttribute("href")];
47 }
48 return l;
49}
50
51var userListsCallback = function(lists) {
52 mainlist = []
53 for (let x of lists['lists']) {
54 mainlist.push(x[0]);
55 }
56 for(var i=0;i<lists["lists"].length;i++) {
57 document.getElementById('edit').addEventListener('click', edit, false);
58 document.getElementById('addcol').addEventListener('click', addCol, false);
59 var ul = document.createElement("ul");
60 ul.setAttribute("id", mainlist[i]);
61 ul.setAttribute('draggable', 'true');
62 ul.addEventListener('dragstart', dragStart, false);
63 ul.addEventListener('dragenter', dragEnter, false);
64 ul.addEventListener('dragover', dragOver, false);
65 ul.addEventListener('dragleave', dragLeave, false);
66 ul.addEventListener('drop', drop, false);
67 document.getElementById("links").appendChild(ul);
68
69 var grip = document.createElement("span");
70 grip.setAttribute("class", "grip");
71
72 var title = document.createElement("div");
73 title.setAttribute("class", "title");
74 title.appendChild(grip)
75 ul.appendChild(title);
76
77 var p = document.createElement("p");
78 p.innerText = mainlist[i];
79 title.appendChild(p);
80
81 title.insertAdjacentHTML("beforeend", "<span class='add' id='add-"+mainlist[i]+"'>+</span>");
82
83 var list = lists["lists"][i];
84 for(var j=1;j<lists["lists"][i].length;j++) {
85 var li = document.createElement("li");
86 li.setAttribute("id", mainlist[i]+"-"+j);
87 var siteurl = list[j][1];
88 var nme = list[j][0];
89 var img = document.createElement("img");
90 img.className = "icon";
91 img.src = "https://www.google.com/s2/favicons?domain="+siteurl+"";
92 li.insertAdjacentHTML("beforeend", "<a class='item' href="+siteurl+"><img src="+img.src+" alt="+extractDomain(siteurl,1)+"/> "+nme+"</a>");
93 li.insertAdjacentHTML("beforeend", rmspan[0] + j + "-" + mainlist[i] + rmspan[1]);
94 ul.appendChild(li);
95 }
96
97 new Sortable(ul, {
98 group: "userlists",
99 animation: 150,
100 onUpdate: function (evt) {
101 save();
102 }
103 });
104 }
105
106 menu();
107
108};
109
110function dragStart(e) {
111 dragSrcEl = this;
112 e.dataTransfer.effectAllowed = 'move';
113 e.dataTransfer.setData('text/html', this.innerHTML);
114}
115
116function dragOver(e) {
117 if (e.preventDefault) {
118 e.preventDefault();
119 }
120 e.dataTransfer.dropEffect = 'move';
121 return false;
122}
123
124function dragEnter(e) {
125 this.classList.add('over');
126}
127
128function dragLeave(e) {
129 this.classList.remove('over');
130}
131
132function drop(e) {
133 if (e.stopPropagation); {
134 e.stopPropagation();
135 }
136 if (dragSrcEl != this) {
137 dragSrcEl.innerHTML = this.innerHTML;
138 this.innerHTML = e.dataTransfer.getData('text/html');
139 save();
140 }
141 return false;
142}
143
144var dragSrcEl = null;
145
146document.onkeyup=function(e){
147 var e = e || window.event; // for IE to cover IEs window event-object
148 fields = document.getElementsByClassName("new");
149 if(e.which == 27 && fields != null) {
150 fields[fields.length-1].remove();
151 return false;
152 }
153 if(e.which == 13 && fields.length > 0) {
154 fields[fields.length-1].getElementsByClassName("save")[0].click();
155 return false;
156 }
157}
158
159var editMode = false;
160
161function edit() {
162 if (editMode == true) {
163 console.log("Exited edit mode");
164 closeEdit(this);
165 return 0;
166 }
167 console.log("Entered edit mode");
168 this.style.background = hovergrn;
169 this.innerText = tick;
170 addbtn = document.getElementById("addcol");
171 addbtn.style.display = "flex";
172 var cols = document.getElementsByTagName("ul");
173 for (let col of cols) {
174 title = col.getElementsByClassName("title")[0];
175 rmbutton = document.createElement("span");
176 rmbutton.setAttribute("class", "rmcol");
177 rmbutton.setAttribute("id", "rmcol-"+col.id);
178 rmbutton.innerText = "-";
179 rmbutton.addEventListener('click', function(event){
180 console.log("Deleting column " + this.parentNode.parentNode);
181 this.parentNode.parentNode.remove();
182 var index = mainlist.indexOf(this.parentNode.parentNode.id);
183 console.log("Found deleted node " + this.parentNode.parentNode.id + " at index " + index);
184 if (index > -1) {
185 mainlist.splice(index, 1);
186 }
187 save();
188 });
189 title.appendChild(rmbutton);
190 title.getElementsByClassName("add")[0].style.display = "flex";
191 title.getElementsByTagName("p")[0].style.width = "calc(100% - 90px)";
192 }
193 editMode = true;
194}
195
196function closeEdit(editbtn) {
197 editbtn.style.background = hoverbg;
198 editbtn.innerText = "e";
199 addbtn = document.getElementById("addcol");
200 addbtn.style.display = "none";
201 var cols = document.getElementsByTagName("ul");
202 for (let col of cols) {
203 rmbutton = col.getElementsByClassName("title")[0].getElementsByClassName("rmcol")[0];
204 rmbutton.remove();
205 title = col.getElementsByClassName("title")[0];
206 title.getElementsByClassName("add")[0].style.display = "";
207 title.getElementsByTagName("p")[0].style.width = "calc(100% - 45px)";
208 }
209 editMode = false;
210}
211
212function addCol() {
213 var ul = document.createElement("ul");
214 ul.setAttribute("id", "new");
215 ul.setAttribute('draggable', 'true');
216 ul.addEventListener('dragstart', dragStart, false);
217 ul.addEventListener('dragenter', dragEnter, false);
218 ul.addEventListener('dragover', dragOver, false);
219 ul.addEventListener('dragleave', dragLeave, false);
220 ul.addEventListener('drop', drop, false);
221 document.getElementById("links").appendChild(ul);
222
223 var grip = document.createElement("span");
224 grip.setAttribute("class", "grip");
225
226 var title = document.createElement("div");
227 title.setAttribute("class", "title");
228 title.appendChild(grip)
229 ul.appendChild(title);
230
231 var p = document.createElement("p");
232 p.innerText = "new";
233 title.appendChild(p);
234
235 title.insertAdjacentHTML("beforeend", "<span class='add' id='add-new'>+</span>");
236
237 rmbutton = document.createElement("span");
238 rmbutton.setAttribute("class", "rmcol");
239 rmbutton.setAttribute("id", "rmcol-new");
240 rmbutton.innerText = "-";
241 rmbutton.addEventListener('click', function(event){
242 console.log("Deleting column " + this.parentNode.parentNode);
243 this.parentNode.parentNode.remove();
244 var index = mainlist.indexOf(this.parentNode.parentNode.id);
245 console.log("Found deleted node " + this.parentNode.parentNode.id + " at index " + index);
246 if (index > -1) {
247 mainlist.splice(index, 1);
248 }
249 save();
250 });
251 title.appendChild(rmbutton);
252 title.getElementsByClassName("add")[0].style.display = "flex";
253 title.getElementsByTagName("p")[0].style.width = "calc(100% - 90px)";
254
255 mainlist.push(["new"]);
256 save();
257 listen(title.getElementsByClassName("add")[0]);
258}
259
260function listen(li) {
261 li.addEventListener('click', function(event){
262 var r = event.target.id.split("-");
263 if (r[0] == "delete") {
264 var el = document.getElementById(r[2]+"-"+r[1]);
265 el.outerHTML = "";
266 delete el;
267 save();
268 } else {
269 addItem(r, li);
270 }
271 }, false);
272}
273
274function addItem(caller, li) {
275 if (ul == null) {
276 var ul = li.parentNode.parentNode;
277 var id = ul.id;
278 }
279 else {
280 var ul = document.getElementById(caller[1]);
281 var id = caller[1];
282 }
283
284 if (document.querySelectorAll("#"+id+" .new").length > 0) {
285 fields = document.querySelector("#"+id+" .new .name");
286 fields.focus();
287 return false;
288 }
289 var li = document.createElement("li");
290 li.setAttribute("class", "new");
291 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()+"'>");
292 ul.appendChild(li);
293 var span = document.getElementById("input-"+columnToArray(li).length.toString());
294 var form = document.getElementById("form-"+columnToArray(li).length.toString());
295 span.addEventListener('click', function(event){
296 var li = document.getElementsByClassName("new")[0]
297 var ul = li.parentNode;
298 if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "" && li.getElementsByClassName("url")[0].validity.typeMismatch== false) {
299 var newli = document.createElement("li");
300 newli.setAttribute("id",caller[1]+"-"+columnToArray(ul).length.toString());
301 var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
302 var nme = li.getElementsByClassName("name")[0].value;
303 li.remove()
304 delete li;
305
306 newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+nme+"</a>");
307 newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+caller[1]+rmspan[1]);
308 document.getElementById(id).appendChild(newli);
309 save();
310 listen(newli);
311 }
312 else {
313 if (li.getElementsByClassName("name")[0].value == "" && li.getElementsByClassName("url")[0].value == "") {
314 console.log("No data supplied, deleting form");
315 this.parentNode.remove();
316 }
317 else {
318 console.log("Missing data, press Esc to delete form");
319 }
320 }
321 });
322 span.onmouseover = function() {
323 nme = document.getElementsByClassName("name")[0];
324 url = document.getElementsByClassName("url")[0];
325 if (nme.value === '' || url.value === '' || url.validity.typeMismatch == true) {
326 this.style.background = removebg;
327 }
328 else {
329 this.style.background = hovergrn;
330 }
331 };
332 span.onmouseout = function() {
333 this.style.background = hoverbg2;
334 };
335 fields = document.querySelector("#"+id+" .new .name");
336 fields.focus();
337
338}
339
340function menu() {
341 var allUserLi = document.querySelectorAll('.remove, .add');
342
343 allUserLi.forEach(function(li, p_index){
344 listen(li);
345 });
346}
347
348function save(l) {
349 console.log(mainlist);
350 var set = l || JSON.parse(JSON.stringify(mainlist));
351 d = []
352 d = set;
353 console.log("Saving settings");
354 for (var i = 0; i < set.length; ++i) {
355 d[i] = listToArray(document.getElementById(set[i]));
356 }
357 chrome.storage.sync.set( {"lists": d} );
358}