8fb45ffffeba1be76c138e89473b18448149fd12
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-category");
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-category";
233 title.appendChild(p);
234
235 title.insertAdjacentHTML("beforeend", "<span class='add' id='add-new-category'>+</span>");
236
237 rmbutton = document.createElement("span");
238 rmbutton.setAttribute("class", "rmcol");
239 rmbutton.setAttribute("id", "rmcol-new-category");
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 listen(title.getElementsByClassName("add")[0]);
256 save();
257}
258
259function listen(li) {
260 li.addEventListener('click', function(event){
261 var r = event.target.id.split("-");
262 if (r[0] == "delete") {
263 var el = document.getElementById(r[2]+"-"+r[1]);
264 el.outerHTML = "";
265 delete el;
266 save();
267 } else {
268 addItem(r, li);
269 }
270 }, false);
271}
272
273function addItem(caller, li) {
274 if (ul == null) {
275 var ul = li.parentNode.parentNode;
276 var id = ul.id;
277 }
278 else {
279 var ul = document.getElementById(caller[1]);
280 var id = caller[1];
281 }
282
283 if (document.querySelectorAll("#"+id+" .new").length > 0) {
284 fields = document.querySelector("#"+id+" .new .name");
285 fields.focus();
286 return false;
287 }
288 var li = document.createElement("li");
289 li.setAttribute("class", "new");
290 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()+"'>");
291 ul.appendChild(li);
292 var span = document.getElementById("input-"+columnToArray(li).length.toString());
293 var form = document.getElementById("form-"+columnToArray(li).length.toString());
294 span.addEventListener('click', function(event){
295 var li = document.getElementsByClassName("new")[0]
296 var ul = li.parentNode;
297 if (li.getElementsByClassName("name")[0].value != "" && li.getElementsByClassName("url")[0].value != "" && li.getElementsByClassName("url")[0].validity.typeMismatch== false) {
298 var newli = document.createElement("li");
299 newli.setAttribute("id",caller[1]+"-"+columnToArray(ul).length.toString());
300 var siteurl = addhttp(li.getElementsByClassName("url")[0].value);
301 var nme = li.getElementsByClassName("name")[0].value;
302 li.remove()
303 delete li;
304
305 newli.insertAdjacentHTML("beforeend", "<a href="+siteurl+">"+nme+"</a>");
306 newli.insertAdjacentHTML("beforeend", rmspan[0]+columnToArray(ul).length.toString()+"-"+caller[1]+rmspan[1]);
307 document.getElementById(caller[1]).appendChild(newli);
308 save();
309 listen(newli);
310 }
311 else {
312 if (li.getElementsByClassName("name")[0].value == "" && li.getElementsByClassName("url")[0].value == "") {
313 console.log("No data supplied, deleting form");
314 this.parentNode.remove();
315 }
316 else {
317 console.log("Missing data, press Esc to delete form");
318 }
319 }
320 });
321 span.onmouseover = function() {
322 nme = document.getElementsByClassName("name")[0];
323 url = document.getElementsByClassName("url")[0];
324 if (nme.value === '' || url.value === '' || url.validity.typeMismatch == true) {
325 this.style.background = removebg;
326 }
327 else {
328 this.style.background = hovergrn;
329 }
330 };
331 span.onmouseout = function() {
332 this.style.background = hoverbg2;
333 };
334 fields = document.querySelector("#"+id+" .new .name");
335 fields.focus();
336
337}
338
339function menu() {
340 var allUserLi = document.querySelectorAll('.remove, .add');
341
342 allUserLi.forEach(function(li, p_index){
343 listen(li);
344 });
345}
346
347function save(l) {
348 console.log(mainlist);
349 var set = l || JSON.parse(JSON.stringify(mainlist));
350 d = []
351 d = set;
352 console.log("Saving settings");
353 for (var i = 0; i < set.length; ++i) {
354 d[i] = listToArray(document.getElementById(set[i]));
355 }
356 chrome.storage.sync.set( {"lists": d} );
357}