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

Side by Side Diff: options.js

Issue 29321198: Issue 2376 - Implement custom filters in new options page (Closed)
Patch Set: removed the console.log Created July 13, 2015, 2:08 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 20 matching lines...) Expand all
31 } 31 }
32 32
33 Collection.prototype.addItems = function() 33 Collection.prototype.addItems = function()
34 { 34 {
35 var length = Array.prototype.push.apply(this.items, arguments); 35 var length = Array.prototype.push.apply(this.items, arguments);
36 if (length == 0) 36 if (length == 0)
37 return; 37 return;
38 38
39 this.items.sort(function(a, b) 39 this.items.sort(function(a, b)
40 { 40 {
41 var aValue = (a.title || a.url || a.text).toLowerCase(); 41 var aValue = (a.title || a.text || a.url).toLowerCase();
42 var bValue = (b.title || b.url || a.text).toLowerCase(); 42 var bValue = (b.title || b.text || b.url).toLowerCase();
43 return aValue.localeCompare(bValue); 43 return aValue.localeCompare(bValue);
44 }); 44 });
45 45
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];
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
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.dataset.access;
109 if (!e.target.checked) 109 if (!e.target.checked)
110 removeSubscription(subscriptionUrl); 110 {
111 ext.backgroundPage.sendMessage(
112 {
113 type: "subscriptions.remove",
114 url: subscriptionUrl
115 });
116 }
111 else 117 else
112 addEnableSubscription(subscriptionUrl); 118 addEnableSubscription(subscriptionUrl);
113 } 119 }
114 120
115 function onAddLanguageSubscriptionClick(e) 121 function onAddLanguageSubscriptionClick(e)
116 { 122 {
117 e.preventDefault(); 123 e.preventDefault();
118 var url = this.parentNode.dataset.access; 124 var url = this.parentNode.dataset.access;
119 addEnableSubscription(url); 125 addEnableSubscription(url);
120 } 126 }
121 127
122 function onRemoveFilterClick() 128 function onRemoveFilterClick()
123 { 129 {
124 var filter = this.parentNode.dataset.access; 130 var filter = this.parentNode.dataset.access;
125 removeFilter(filter); 131 ext.backgroundPage.sendMessage(
132 {
133 type: "filters.remove",
134 text: filter
135 });
126 } 136 }
127 137
128 collections.popular = new Collection( 138 collections.popular = new Collection(
129 [ 139 [
130 { 140 {
131 id: "recommend-list-table", 141 id: "recommend-list-table",
132 onClick: onToggleSubscriptionClick 142 onClick: onToggleSubscriptionClick
133 } 143 }
134 ]); 144 ]);
135 collections.langs = new Collection( 145 collections.langs = new Collection(
(...skipping 27 matching lines...) Expand all
163 onClick: onToggleSubscriptionClick 173 onClick: onToggleSubscriptionClick
164 } 174 }
165 ]); 175 ]);
166 collections.whitelist = new Collection( 176 collections.whitelist = new Collection(
167 [ 177 [
168 { 178 {
169 id: "whitelisting-table", 179 id: "whitelisting-table",
170 onClick: onRemoveFilterClick 180 onClick: onRemoveFilterClick
171 } 181 }
172 ]); 182 ]);
183 collections.customFilters = new Collection(
184 [
185 {
186 id: "custom-filters-table"
187 }
188 ]);
173 189
174 function updateSubscription(subscription) 190 function updateSubscription(subscription)
175 { 191 {
176 var subscriptionUrl = subscription.url; 192 var subscriptionUrl = subscription.url;
177 var knownSubscription = subscriptionsMap[subscriptionUrl]; 193 var knownSubscription = subscriptionsMap[subscriptionUrl];
178 if (knownSubscription) 194 if (knownSubscription)
179 knownSubscription.disabled = subscription.disabled; 195 knownSubscription.disabled = subscription.disabled;
180 else 196 else
181 { 197 {
182 getAcceptableAdsURL(function(acceptableAdsUrl) 198 getAcceptableAdsURL(function(acceptableAdsUrl)
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
259 } 275 }
260 } 276 }
261 277
262 function updateFilter(filter) 278 function updateFilter(filter)
263 { 279 {
264 var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/); 280 var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
265 if (match && !filtersMap[filter.text]) 281 if (match && !filtersMap[filter.text])
266 { 282 {
267 filter.title = match[1]; 283 filter.title = match[1];
268 collections.whitelist.addItems(filter); 284 collections.whitelist.addItems(filter);
269 filtersMap[filter.text] = filter
270 } 285 }
271 else 286 else
272 { 287 collections.customFilters.addItems(filter);
273 // TODO: add `filters[i].text` to list of custom filters 288
274 } 289 filtersMap[filter.text] = filter;
275 } 290 }
276 291
277 function loadRecommendations() 292 function loadRecommendations()
278 { 293 {
279 var request = new XMLHttpRequest(); 294 var request = new XMLHttpRequest();
280 request.open("GET", "subscriptions.xml", false); 295 request.open("GET", "subscriptions.xml", false);
281 request.addEventListener("load", function() 296 request.addEventListener("load", function()
282 { 297 {
283 var list = document.getElementById("subscriptionSelector"); 298 var list = document.getElementById("subscriptionSelector");
284 var docElem = request.responseXML.documentElement; 299 var docElem = request.responseXML.documentElement;
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
338 353
339 function onFindLanguageKeyUp() 354 function onFindLanguageKeyUp()
340 { 355 {
341 var searchStyle = E("search-style"); 356 var searchStyle = E("search-style");
342 if (!this.value) 357 if (!this.value)
343 searchStyle.innerHTML = ""; 358 searchStyle.innerHTML = "";
344 else 359 else
345 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }"; 360 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }";
346 } 361 }
347 362
363 function isEnterPressed(e)
364 {
365 // e.keyCode has been deprecated so we attempt to use e.key
366 if ("key" in e)
367 return e.key == "Enter";
368 return e.keyCode == 13; // keyCode "13" corresponds to "Enter"
369 }
370
348 // Initialize navigation sidebar 371 // Initialize navigation sidebar
349 ext.backgroundPage.sendMessage( 372 ext.backgroundPage.sendMessage(
350 { 373 {
351 type: "app.get", 374 type: "app.get",
352 what: "addonVersion" 375 what: "addonVersion"
353 }, 376 },
354 function(addonVersion) 377 function(addonVersion)
355 { 378 {
356 E("abp-version").textContent = addonVersion; 379 E("abp-version").textContent = addonVersion;
357 }); 380 });
(...skipping 30 matching lines...) Expand all
388 { 411 {
389 var id = e.target.id; 412 var id = e.target.id;
390 if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon") 413 if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
391 addWhitelistedDomain(); 414 addWhitelistedDomain();
392 else if (id == "whitelisting-cancel-button") 415 else if (id == "whitelisting-cancel-button")
393 E("whitelisting-textbox").value = ""; 416 E("whitelisting-textbox").value = "";
394 }, false); 417 }, false);
395 E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false); 418 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 if (isEnterPressed(e))
399 // keyCode "13" corresponds to "Enter"
400 if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
401 addWhitelistedDomain(); 422 addWhitelistedDomain();
402 }, false); 423 }, false);
403 E("import-blockingList-button").addEventListener("click", function() 424 E("import-blockingList-button").addEventListener("click", function()
404 { 425 {
405 var url = E("blockingList-textbox").value; 426 var url = E("blockingList-textbox").value;
406 addEnableSubscription(url); 427 addEnableSubscription(url);
407 delete document.body.dataset.dialog; 428 delete document.body.dataset.dialog;
408 }, false); 429 }, false);
430
431 // Advanced tab
432 var filterTextbox = document.querySelector("#custom-filters-add input");
433 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older");
434 filterTextbox.setAttribute("placeholder", placeholderValue);
435 function addCustomFilters()
436 {
437 var filterText = filterTextbox.value;
438 if (!filterText)
439 return;
440
441 ext.backgroundPage.sendMessage(
442 {
443 type: "filters.parse",
444 text: filterText
445 });
446 filterTextbox.value = "";
447 }
448 E("custom-filters-add").addEventListener("submit", function(e)
449 {
450 e.preventDefault();
451 addCustomFilters();
452 }, false);
453 var customFilterEditButtons = document.querySelectorAll("#custom-filters-edi t-wrapper button");
454 E("custom-filters-edit-wrapper").addEventListener("click", function(e)
455 {
456 var target = null;
457 if (e.target.localName == "button")
458 target = e.target;
459 else if (e.target.parentElement.localName == "button")
460 target = e.target.parentElement;
461 else
462 return;
463
464 var id = target.id;
465 E("custom-filters").classList.toggle("mode-edit");
466 if (id == "custom-filters-show-edit")
467 editCustomFilters();
468 else if (id == "custom-filters-raw-save")
469 {
470 ext.backgroundPage.sendMessage(
471 {
472 type: "filters.importRaw",
473 text: E("custom-filters-raw").value
474 });
475 }
476 }, false);
409 } 477 }
410 478
411 function openDialog(name) 479 function openDialog(name)
412 { 480 {
413 document.body.dataset.dialog = name; 481 document.body.dataset.dialog = name;
414 } 482 }
415 483
416 function populateLists() 484 function populateLists()
417 { 485 {
418 subscriptionsMap = Object.create(null); 486 subscriptionsMap = Object.create(null);
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
478 type: "filters.add", 546 type: "filters.add",
479 text: "@@||" + domain.value.toLowerCase() + "^$document" 547 text: "@@||" + domain.value.toLowerCase() + "^$document"
480 }); 548 });
481 } 549 }
482 550
483 domain.value = ""; 551 domain.value = "";
484 } 552 }
485 553
486 function editCustomFilters() 554 function editCustomFilters()
487 { 555 {
488 //TODO: NYI 556 var customFilterItems = collections.customFilters.items;
557 var filterTexts = [];
558 for (var i = 0; i < customFilterItems.length; i++)
559 filterTexts.push(customFilterItems[i].text);
560 E("custom-filters-raw").value = filterTexts.join("\n");
489 } 561 }
490 562
491 function getAcceptableAdsURL(callback) 563 function getAcceptableAdsURL(callback)
492 { 564 {
493 ext.backgroundPage.sendMessage( 565 ext.backgroundPage.sendMessage(
494 { 566 {
495 type: "prefs.get", 567 type: "prefs.get",
496 key: "subscriptions_exceptionsurl" 568 key: "subscriptions_exceptionsurl"
497 }, 569 },
498 function(value) 570 function(value)
(...skipping 20 matching lines...) Expand all
519 url: url 591 url: url
520 }; 592 };
521 if (title) 593 if (title)
522 message.title = title; 594 message.title = title;
523 if (homepage) 595 if (homepage)
524 message.homepage = homepage; 596 message.homepage = homepage;
525 597
526 ext.backgroundPage.sendMessage(message); 598 ext.backgroundPage.sendMessage(message);
527 } 599 }
528 600
529 function removeSubscription(url)
530 {
531 ext.backgroundPage.sendMessage(
532 {
533 type: "subscriptions.remove",
534 url: url
535 });
536 }
537
538 function removeFilter(filter)
539 {
540 ext.backgroundPage.sendMessage(
541 {
542 type: "filters.remove",
543 text: filter
544 });
545 }
546
547 function onFilterMessage(action, filter) 601 function onFilterMessage(action, filter)
548 { 602 {
549 switch (action) 603 switch (action)
550 { 604 {
551 case "added": 605 case "added":
552 updateFilter(filter); 606 updateFilter(filter);
553 updateShareLink(); 607 updateShareLink();
554 break; 608 break;
555 case "loaded": 609 case "loaded":
556 populateLists(); 610 populateLists();
557 break; 611 break;
558 case "removed": 612 case "removed":
559 var knownFilter = filtersMap[filter.text]; 613 var knownFilter = filtersMap[filter.text];
560 collections.whitelist.removeItem(knownFilter); 614 collections.whitelist.removeItem(knownFilter);
615 collections.customFilters.removeItem(knownFilter);
561 delete filtersMap[filter.text]; 616 delete filtersMap[filter.text];
562 updateShareLink(); 617 updateShareLink();
563 break; 618 break;
564 } 619 }
565 } 620 }
566 621
567 function onSubscriptionMessage(action, subscription) 622 function onSubscriptionMessage(action, subscription)
568 { 623 {
569 switch (action) 624 switch (action)
570 { 625 {
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
640 link: link 695 link: link
641 }, callback); 696 }, callback);
642 } 697 }
643 698
644 ext.onMessage.addListener(function(message) 699 ext.onMessage.addListener(function(message)
645 { 700 {
646 switch (message.type) 701 switch (message.type)
647 { 702 {
648 case "app.listen": 703 case "app.listen":
649 if (message.action == "addSubscription") 704 if (message.action == "addSubscription")
650 showAddSubscriptionDialog(message.args[0]); 705 {
706 E("blockingList-textbox").value = message.args[0].url;
707 openDialog("customlist");
708 }
709 else if (message.action == "error")
710 {
711 var error = message.args[0];
712 //TODO handle error message
Thomas Greiner 2015/07/13 15:54:23 We're not going to have a dedicated UI element for
713 }
651 break; 714 break;
652 case "filters.listen": 715 case "filters.listen":
653 onFilterMessage(message.action, message.args[0]); 716 onFilterMessage(message.action, message.args[0]);
654 break; 717 break;
655 case "subscriptions.listen": 718 case "subscriptions.listen":
656 onSubscriptionMessage(message.action, message.args[0]); 719 onSubscriptionMessage(message.action, message.args[0]);
657 break; 720 break;
658 } 721 }
659 }); 722 });
660 723
661 ext.backgroundPage.sendMessage( 724 ext.backgroundPage.sendMessage(
662 { 725 {
663 type: "app.listen", 726 type: "app.listen",
664 filter: ["addSubscription"] 727 filter: ["addSubscription"]
Thomas Greiner 2015/07/13 15:54:23 The "error" action also needs to be added here to
saroyanm 2015/07/14 10:20:59 I wander, shouldn't it only fire after it's regist
Thomas Greiner 2015/07/14 10:58:52 Exactly, that's why I asked you to make the change
saroyanm 2015/07/14 11:19:25 I think this question was remaining before We figu
665 }); 728 });
666 ext.backgroundPage.sendMessage( 729 ext.backgroundPage.sendMessage(
667 { 730 {
668 type: "filters.listen", 731 type: "filters.listen",
669 filter: ["added", "loaded", "removed"] 732 filter: ["added", "loaded", "removed"]
670 }); 733 });
671 ext.backgroundPage.sendMessage( 734 ext.backgroundPage.sendMessage(
672 { 735 {
673 type: "subscriptions.listen", 736 type: "subscriptions.listen",
674 filter: ["added", "disabled", "homepage", "removed", "title"] 737 filter: ["added", "disabled", "homepage", "removed", "title"]
675 }); 738 });
676 739
677 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 740 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
678 })(); 741 })();
OLDNEW
« messageResponder.js ('K') | « options.html ('k') | skin/options.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld