Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: options.js

Issue 29321417: Issue 2357 - Added "predefined list" dialog to options page (Closed)
Patch Set: Created July 13, 2015, 6:17 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2015 Eyeo GmbH 3 * Copyright (C) 2006-2015 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
46 for (var j = 0; j < this.details.length; j++) 46 for (var j = 0; j < this.details.length; j++)
47 { 47 {
48 var table = E(this.details[j].id); 48 var table = E(this.details[j].id);
49 var template = table.querySelector("template"); 49 var template = table.querySelector("template");
50 for (var i = 0; i < arguments.length; i++) 50 for (var i = 0; i < arguments.length; i++)
51 { 51 {
52 var item = arguments[i]; 52 var item = arguments[i];
53 var text = item.title || item.url || item.text; 53 var text = item.title || item.url || item.text;
54 var listItem = document.createElement("li"); 54 var listItem = document.createElement("li");
55 listItem.appendChild(document.importNode(template.content, true)); 55 listItem.appendChild(document.importNode(template.content, true));
56 listItem.dataset.access = item.url || item.text; 56 listItem.setAttribute("data-access", item.url || item.text);
57 listItem.querySelector(".display").textContent = text; 57 listItem.querySelector(".display").textContent = text;
58 if (text) 58 if (text)
59 listItem.dataset.search = text.toLowerCase(); 59 listItem.setAttribute("data-search", text.toLowerCase());
60 60
61 var control = listItem.querySelector(".control"); 61 var control = listItem.querySelector(".control");
62 if (control) 62 if (control)
63 { 63 {
64 control.addEventListener("click", this.details[j].onClick, false); 64 control.addEventListener("click", this.details[j].onClick, false);
65 control.checked = item.disabled == false; 65 control.checked = item.disabled == false;
66 } 66 }
67 67
68 if (table.hasChildNodes()) 68 if (table.hasChildNodes())
69 table.insertBefore(listItem, table.childNodes[this.items.indexOf(item) ]); 69 table.insertBefore(listItem, table.childNodes[this.items.indexOf(item) ]);
(...skipping 28 matching lines...) Expand all
98 var template = table.querySelector("template"); 98 var template = table.querySelector("template");
99 table.innerHTML = ""; 99 table.innerHTML = "";
100 table.appendChild(template); 100 table.appendChild(template);
101 } 101 }
102 this.items.length = 0; 102 this.items.length = 0;
103 }; 103 };
104 104
105 function onToggleSubscriptionClick(e) 105 function onToggleSubscriptionClick(e)
106 { 106 {
107 e.preventDefault(); 107 e.preventDefault();
108 var subscriptionUrl = e.target.parentNode.dataset.access; 108 var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
109 if (!e.target.checked) 109 if (!e.target.checked)
110 removeSubscription(subscriptionUrl); 110 removeSubscription(subscriptionUrl);
111 else 111 else
112 addEnableSubscription(subscriptionUrl); 112 addEnableSubscription(subscriptionUrl);
113 } 113 }
114 114
115 function onAddLanguageSubscriptionClick(e) 115 function onAddLanguageSubscriptionClick(e)
116 { 116 {
117 e.preventDefault(); 117 e.preventDefault();
118 var url = this.parentNode.dataset.access; 118 var url = this.parentNode.getAttribute("data-access");
119 addEnableSubscription(url); 119 addEnableSubscription(url);
120 } 120 }
121 121
122 function onRemoveFilterClick() 122 function onRemoveFilterClick()
123 { 123 {
124 var filter = this.parentNode.dataset.access; 124 var filter = this.parentNode.getAttribute("data-access");
125 removeFilter(filter); 125 removeFilter(filter);
126 } 126 }
127 127
128 collections.popular = new Collection( 128 collections.popular = new Collection(
129 [ 129 [
130 { 130 {
131 id: "recommend-list-table", 131 id: "recommend-list-table",
132 onClick: onToggleSubscriptionClick 132 onClick: onToggleSubscriptionClick
133 } 133 }
134 ]); 134 ]);
(...skipping 174 matching lines...) Expand 10 before | Expand all | Expand 10 after
309 if (element.getAttribute("popular")) 309 if (element.getAttribute("popular"))
310 recommendation.isPopular = true; 310 recommendation.isPopular = true;
311 311
312 recommendationsMap[subscription.url] = recommendation; 312 recommendationsMap[subscription.url] = recommendation;
313 updateSubscription(subscription); 313 updateSubscription(subscription);
314 } 314 }
315 }, false); 315 }, false);
316 request.send(null); 316 request.send(null);
317 } 317 }
318 318
319 function onClick(e)
320 {
321 var element = e.target;
322 while (true)
323 {
324 if (!element)
325 return;
326
327 if (element.hasAttribute("data-action"))
328 break;
329
330 element = element.parentElement;
331 }
332
333 switch (element.getAttribute("data-action"))
334 {
335 case "add-domain-exception":
336 addWhitelistedDomain();
337 break;
338 case "add-subscription":
339 var dialog = E("dialog-content-predefined");
340 var title = dialog.querySelector("h3").textContent;
341 var url = dialog.querySelector(".url").textContent;
342 addEnableSubscription(url, title);
343 document.body.removeAttribute("data-dialog");
344 break;
345 case "cancel-domain-exception":
346 E("whitelisting-textbox").value = "";
347 break;
348 case "close-dialog":
349 document.body.removeAttribute("data-dialog");
350 break;
351 case "edit-custom-filters":
352 editCustomFilters();
353 break;
354 case "import-subscription":
355 var url = E("blockingList-textbox").value;
356 addEnableSubscription(url);
357 document.body.removeAttribute("data-dialog");
358 break;
359 case "open-language-dialog":
360 openDialog("language");
361 break;
362 case "open-subscription-dialog":
363 openDialog("custom");
364 break;
365 case "switch-tab":
366 document.body.setAttribute("data-tab",
367 element.getAttribute("data-tab"));
368 break;
369 }
370 }
371
319 function onDOMLoaded() 372 function onDOMLoaded()
320 { 373 {
321 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate"); 374 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate");
322 var popularText = ext.i18n.getMessage("options_popular"); 375 var popularText = ext.i18n.getMessage("options_popular");
323 recommendationTemplate.content.querySelector(".popular").textContent = popul arText; 376 recommendationTemplate.content.querySelector(".popular").textContent = popul arText;
324 var languagesTemplate = document.querySelector("#all-lang-table template"); 377 var languagesTemplate = document.querySelector("#all-lang-table template");
325 var buttonText = ext.i18n.getMessage("options_button_add"); 378 var buttonText = ext.i18n.getMessage("options_button_add");
326 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText; 379 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText;
327 380
328 populateLists(); 381 populateLists();
329 382
330 var tabList = document.querySelectorAll("#main-navigation-tabs li");
331 for (var i = 0; i < tabList.length; i++)
332 {
333 tabList[i].addEventListener("click", function(e)
334 {
335 document.body.dataset.tab = e.currentTarget.dataset.show;
336 }, false);
337 }
338
339 function onFindLanguageKeyUp() 383 function onFindLanguageKeyUp()
340 { 384 {
341 var searchStyle = E("search-style"); 385 var searchStyle = E("search-style");
342 if (!this.value) 386 if (!this.value)
343 searchStyle.innerHTML = ""; 387 searchStyle.innerHTML = "";
344 else 388 else
345 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }"; 389 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }";
346 } 390 }
347 391
348 // Initialize navigation sidebar 392 // Initialize navigation sidebar
(...skipping 12 matching lines...) Expand all
361 }); 405 });
362 406
363 getDocLink("contribute", function(link) 407 getDocLink("contribute", function(link)
364 { 408 {
365 document.querySelector("#tab-contribute a").setAttribute("href", link); 409 document.querySelector("#tab-contribute a").setAttribute("href", link);
366 }); 410 });
367 411
368 updateShareLink(); 412 updateShareLink();
369 413
370 // Initialize interactive UI elements 414 // Initialize interactive UI elements
415 document.body.addEventListener("click", onClick, false);
371 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find"); 416 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find");
372 E("find-language").setAttribute("placeholder", placeholderValue); 417 E("find-language").setAttribute("placeholder", placeholderValue);
373 E("add-blocking-list").addEventListener("click", function()
374 {
375 openDialog("customlist");
376 }, false);
377 E("add-website-language").addEventListener("click", function()
378 {
379 openDialog("language");
380 }, false);
381 E("dialog-close").addEventListener("click", function()
382 {
383 delete document.body.dataset.dialog;
384 }, false);
385 E("edit-ownBlockingList-button").addEventListener("click", editCustomFilters , false);
386 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false); 418 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
387 E("whitelisting").addEventListener("click", function(e)
388 {
389 var id = e.target.id;
390 if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
391 addWhitelistedDomain();
392 else if (id == "whitelisting-cancel-button")
393 E("whitelisting-textbox").value = "";
394 }, false);
395 E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false);
396 E("whitelisting-textbox").addEventListener("keypress", function(e) 419 E("whitelisting-textbox").addEventListener("keypress", function(e)
397 { 420 {
398 // e.keyCode has been deprecated so we attempt to use e.key 421 // e.keyCode has been deprecated so we attempt to use e.key
399 // keyCode "13" corresponds to "Enter" 422 // keyCode "13" corresponds to "Enter"
400 if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13)) 423 if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
401 addWhitelistedDomain(); 424 addWhitelistedDomain();
402 }, false); 425 }, false);
403 E("import-blockingList-button").addEventListener("click", function()
404 {
405 var url = E("blockingList-textbox").value;
406 addEnableSubscription(url);
407 delete document.body.dataset.dialog;
408 }, false);
409 } 426 }
410 427
411 function openDialog(name) 428 function openDialog(name)
412 { 429 {
413 document.body.dataset.dialog = name; 430 document.body.setAttribute("data-dialog", name);
414 } 431 }
415 432
416 function populateLists() 433 function populateLists()
417 { 434 {
418 subscriptionsMap = Object.create(null); 435 subscriptionsMap = Object.create(null);
419 filtersMap = Object.create(null); 436 filtersMap = Object.create(null);
420 recommendationsMap = Object.create(null); 437 recommendationsMap = Object.create(null);
421 438
422 // Empty collections and lists 439 // Empty collections and lists
423 for (var property in collections) 440 for (var property in collections)
(...skipping 173 matching lines...) Expand 10 before | Expand all | Expand 10 after
597 } 614 }
598 updateShareLink(); 615 updateShareLink();
599 }); 616 });
600 break; 617 break;
601 case "title": 618 case "title":
602 // TODO: NYI 619 // TODO: NYI
603 break; 620 break;
604 } 621 }
605 } 622 }
606 623
607 function showAddSubscriptionDialog(subscription) 624 function showAddSubscriptionDialog(subscription)
saroyanm 2015/07/14 11:03:38 Make sense to rename the method as well, ex.: "sh
Thomas Greiner 2015/07/14 11:37:33 Done. Removed the function since it's only been us
608 { 625 {
609 E("blockingList-textbox").value = subscription.url; 626 var dialog = E("dialog-content-predefined");
610 openDialog("customlist"); 627 dialog.querySelector("h3").textContent = subscription.title || "";
628 dialog.querySelector(".url").textContent = subscription.url;
629 openDialog("predefined");
611 } 630 }
612 631
613 function updateShareLink() 632 function updateShareLink()
614 { 633 {
615 ext.backgroundPage.sendMessage( 634 ext.backgroundPage.sendMessage(
616 { 635 {
617 type: "filters.blocked", 636 type: "filters.blocked",
618 url: "https://platform.twitter.com/widgets/", 637 url: "https://platform.twitter.com/widgets/",
619 requestType: "SCRIPT", 638 requestType: "SCRIPT",
620 docDomain: "adblockplus.org", 639 docDomain: "adblockplus.org",
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after
669 filter: ["added", "loaded", "removed"] 688 filter: ["added", "loaded", "removed"]
670 }); 689 });
671 ext.backgroundPage.sendMessage( 690 ext.backgroundPage.sendMessage(
672 { 691 {
673 type: "subscriptions.listen", 692 type: "subscriptions.listen",
674 filter: ["added", "disabled", "homepage", "removed", "title"] 693 filter: ["added", "disabled", "homepage", "removed", "title"]
675 }); 694 });
676 695
677 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 696 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
678 })(); 697 })();
OLDNEW

Powered by Google App Engine
This is Rietveld