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: post-review: rebased Created July 16, 2015, 10:49 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « options.html ('k') | skin/options.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 { 110 {
111 ext.backgroundPage.sendMessage( 111 ext.backgroundPage.sendMessage(
112 { 112 {
113 type: "subscriptions.remove", 113 type: "subscriptions.remove",
114 url: subscriptionUrl 114 url: subscriptionUrl
115 }); 115 });
116 } 116 }
117 else 117 else
118 addEnableSubscription(subscriptionUrl); 118 addEnableSubscription(subscriptionUrl);
119 } 119 }
120 120
121 function onAddLanguageSubscriptionClick(e) 121 function onAddLanguageSubscriptionClick(e)
122 { 122 {
123 e.preventDefault(); 123 e.preventDefault();
124 var url = this.parentNode.dataset.access; 124 var url = this.parentNode.getAttribute("data-access");
125 addEnableSubscription(url); 125 addEnableSubscription(url);
126 } 126 }
127 127
128 function onRemoveFilterClick() 128 function onRemoveFilterClick()
129 { 129 {
130 var filter = this.parentNode.dataset.access; 130 var filter = this.parentNode.getAttribute("data-access");
131 ext.backgroundPage.sendMessage( 131 ext.backgroundPage.sendMessage(
132 { 132 {
133 type: "filters.remove", 133 type: "filters.remove",
134 text: filter 134 text: filter
135 }); 135 });
136 } 136 }
137 137
138 collections.popular = new Collection( 138 collections.popular = new Collection(
139 [ 139 [
140 { 140 {
(...skipping 183 matching lines...) Expand 10 before | Expand all | Expand 10 after
324 if (element.getAttribute("popular")) 324 if (element.getAttribute("popular"))
325 recommendation.isPopular = true; 325 recommendation.isPopular = true;
326 326
327 recommendationsMap[subscription.url] = recommendation; 327 recommendationsMap[subscription.url] = recommendation;
328 updateSubscription(subscription); 328 updateSubscription(subscription);
329 } 329 }
330 }, false); 330 }, false);
331 request.send(null); 331 request.send(null);
332 } 332 }
333 333
334 function onClick(e)
335 {
336 var element = e.target;
337 while (true)
338 {
339 if (!element)
340 return;
341
342 if (element.hasAttribute("data-action"))
343 break;
344
345 element = element.parentElement;
346 }
347
348 switch (element.getAttribute("data-action"))
349 {
350 case "add-domain-exception":
351 addWhitelistedDomain();
352 break;
353 case "add-predefined-subscription":
354 var dialog = E("dialog-content-predefined");
355 var title = dialog.querySelector("h3").textContent;
356 var url = dialog.querySelector(".url").textContent;
357 addEnableSubscription(url, title);
358 document.body.removeAttribute("data-dialog");
359 break;
360 case "cancel-domain-exception":
361 E("whitelisting-textbox").value = "";
362 break;
363 case "close-dialog":
364 document.body.removeAttribute("data-dialog");
365 break;
366 case "edit-custom-filters":
367 editCustomFilters();
368 break;
369 case "import-subscription":
370 var url = E("blockingList-textbox").value;
371 addEnableSubscription(url);
372 document.body.removeAttribute("data-dialog");
373 break;
374 case "open-dialog":
375 openDialog(element.getAttribute("data-dialog"));
376 break;
377 case "switch-tab":
378 document.body.setAttribute("data-tab",
379 element.getAttribute("data-tab"));
380 break;
381 }
382 }
383
334 function onDOMLoaded() 384 function onDOMLoaded()
335 { 385 {
336 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate"); 386 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate");
337 var popularText = ext.i18n.getMessage("options_popular"); 387 var popularText = ext.i18n.getMessage("options_popular");
338 recommendationTemplate.content.querySelector(".popular").textContent = popul arText; 388 recommendationTemplate.content.querySelector(".popular").textContent = popul arText;
339 var languagesTemplate = document.querySelector("#all-lang-table template"); 389 var languagesTemplate = document.querySelector("#all-lang-table template");
340 var buttonText = ext.i18n.getMessage("options_button_add"); 390 var buttonText = ext.i18n.getMessage("options_button_add");
341 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText; 391 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText;
342 392
343 populateLists(); 393 populateLists();
344 394
345 var tabList = document.querySelectorAll("#main-navigation-tabs li");
346 for (var i = 0; i < tabList.length; i++)
347 {
348 tabList[i].addEventListener("click", function(e)
349 {
350 document.body.dataset.tab = e.currentTarget.dataset.show;
351 }, false);
352 }
353
354 function onFindLanguageKeyUp() 395 function onFindLanguageKeyUp()
355 { 396 {
356 var searchStyle = E("search-style"); 397 var searchStyle = E("search-style");
357 if (!this.value) 398 if (!this.value)
358 searchStyle.innerHTML = ""; 399 searchStyle.innerHTML = "";
359 else 400 else
360 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }"; 401 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }";
361 } 402 }
362 403
363 function isEnterPressed(e) 404 function isEnterPressed(e)
(...skipping 20 matching lines...) Expand all
384 }); 425 });
385 426
386 getDocLink("contribute", function(link) 427 getDocLink("contribute", function(link)
387 { 428 {
388 document.querySelector("#tab-contribute a").setAttribute("href", link); 429 document.querySelector("#tab-contribute a").setAttribute("href", link);
389 }); 430 });
390 431
391 updateShareLink(); 432 updateShareLink();
392 433
393 // Initialize interactive UI elements 434 // Initialize interactive UI elements
435 document.body.addEventListener("click", onClick, false);
394 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find"); 436 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find");
395 E("find-language").setAttribute("placeholder", placeholderValue); 437 E("find-language").setAttribute("placeholder", placeholderValue);
396 E("add-blocking-list").addEventListener("click", function()
397 {
398 openDialog("customlist");
399 }, false);
400 E("add-website-language").addEventListener("click", function()
401 {
402 openDialog("language");
403 }, false);
404 E("dialog-close").addEventListener("click", function()
405 {
406 delete document.body.dataset.dialog;
407 }, false);
408 E("edit-ownBlockingList-button").addEventListener("click", editCustomFilters , false);
409 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false); 438 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
410 E("whitelisting").addEventListener("click", function(e)
411 {
412 var id = e.target.id;
413 if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
414 addWhitelistedDomain();
415 else if (id == "whitelisting-cancel-button")
416 E("whitelisting-textbox").value = "";
417 }, false);
418 E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false);
419 E("whitelisting-textbox").addEventListener("keypress", function(e) 439 E("whitelisting-textbox").addEventListener("keypress", function(e)
420 { 440 {
421 if (isEnterPressed(e)) 441 if (isEnterPressed(e))
422 addWhitelistedDomain(); 442 addWhitelistedDomain();
423 }, false); 443 }, false);
424 E("import-blockingList-button").addEventListener("click", function()
425 {
426 var url = E("blockingList-textbox").value;
427 addEnableSubscription(url);
428 delete document.body.dataset.dialog;
429 }, false);
430 444
431 // Advanced tab 445 // Advanced tab
432 var filterTextbox = document.querySelector("#custom-filters-add input"); 446 var filterTextbox = document.querySelector("#custom-filters-add input");
433 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older"); 447 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older");
434 filterTextbox.setAttribute("placeholder", placeholderValue); 448 filterTextbox.setAttribute("placeholder", placeholderValue);
435 function addCustomFilters() 449 function addCustomFilters()
436 { 450 {
437 var filterText = filterTextbox.value; 451 var filterText = filterTextbox.value;
438 ext.backgroundPage.sendMessage( 452 ext.backgroundPage.sendMessage(
439 { 453 {
(...skipping 28 matching lines...) Expand all
468 { 482 {
469 type: "filters.importRaw", 483 type: "filters.importRaw",
470 text: E("custom-filters-raw").value 484 text: E("custom-filters-raw").value
471 }); 485 });
472 } 486 }
473 }, false); 487 }, false);
474 } 488 }
475 489
476 function openDialog(name) 490 function openDialog(name)
477 { 491 {
478 document.body.dataset.dialog = name; 492 document.body.setAttribute("data-dialog", name);
479 } 493 }
480 494
481 function populateLists() 495 function populateLists()
482 { 496 {
483 subscriptionsMap = Object.create(null); 497 subscriptionsMap = Object.create(null);
484 filtersMap = Object.create(null); 498 filtersMap = Object.create(null);
485 recommendationsMap = Object.create(null); 499 recommendationsMap = Object.create(null);
486 500
487 // Empty collections and lists 501 // Empty collections and lists
488 for (var property in collections) 502 for (var property in collections)
(...skipping 160 matching lines...) Expand 10 before | Expand all | Expand 10 after
649 } 663 }
650 updateShareLink(); 664 updateShareLink();
651 }); 665 });
652 break; 666 break;
653 case "title": 667 case "title":
654 // TODO: NYI 668 // TODO: NYI
655 break; 669 break;
656 } 670 }
657 } 671 }
658 672
659 function showAddSubscriptionDialog(subscription)
660 {
661 E("blockingList-textbox").value = subscription.url;
662 openDialog("customlist");
663 }
664
665 function updateShareLink() 673 function updateShareLink()
666 { 674 {
667 ext.backgroundPage.sendMessage( 675 ext.backgroundPage.sendMessage(
668 { 676 {
669 type: "filters.blocked", 677 type: "filters.blocked",
670 url: "https://platform.twitter.com/widgets/", 678 url: "https://platform.twitter.com/widgets/",
671 requestType: "SCRIPT", 679 requestType: "SCRIPT",
672 docDomain: "adblockplus.org", 680 docDomain: "adblockplus.org",
673 thirdParty: true 681 thirdParty: true
674 }, 682 },
(...skipping 18 matching lines...) Expand all
693 }, callback); 701 }, callback);
694 } 702 }
695 703
696 ext.onMessage.addListener(function(message) 704 ext.onMessage.addListener(function(message)
697 { 705 {
698 switch (message.type) 706 switch (message.type)
699 { 707 {
700 case "app.listen": 708 case "app.listen":
701 if (message.action == "addSubscription") 709 if (message.action == "addSubscription")
702 { 710 {
703 E("blockingList-textbox").value = message.args[0].url; 711 var subscription = message.args[0];
704 openDialog("customlist"); 712 var dialog = E("dialog-content-predefined");
713 dialog.querySelector("h3").textContent = subscription.title || "";
714 dialog.querySelector(".url").textContent = subscription.url;
715 openDialog("predefined");
705 } 716 }
706 else if (message.action == "error") 717 else if (message.action == "error")
707 { 718 {
708 alert(message.args.join("\n")); 719 alert(message.args.join("\n"));
709 } 720 }
710 break; 721 break;
711 case "filters.listen": 722 case "filters.listen":
712 onFilterMessage(message.action, message.args[0]); 723 onFilterMessage(message.action, message.args[0]);
713 break; 724 break;
714 case "subscriptions.listen": 725 case "subscriptions.listen":
(...skipping 13 matching lines...) Expand all
728 filter: ["added", "loaded", "removed"] 739 filter: ["added", "loaded", "removed"]
729 }); 740 });
730 ext.backgroundPage.sendMessage( 741 ext.backgroundPage.sendMessage(
731 { 742 {
732 type: "subscriptions.listen", 743 type: "subscriptions.listen",
733 filter: ["added", "disabled", "homepage", "removed", "title"] 744 filter: ["added", "disabled", "homepage", "removed", "title"]
734 }); 745 });
735 746
736 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 747 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
737 })(); 748 })();
OLDNEW
« no previous file with comments | « options.html ('k') | skin/options.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld