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

Delta Between Two Patch Sets: options.js

Issue 29321417: Issue 2357 - Added "predefined list" dialog to options page (Closed)
Left Patch Set: Created July 9, 2015, 1:50 p.m.
Right Patch Set: Post-review: Merged Created July 16, 2015, 11:36 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « options.html ('k') | skin/options.css » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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];
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 {
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.getAttribute("data-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.getAttribute("data-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 25 matching lines...) Expand all
161 { 171 {
162 id: "custom-list-table", 172 id: "custom-list-table",
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
181 }
182 ]);
183 collections.customFilters = new Collection(
184 [
185 {
186 id: "custom-filters-table"
171 } 187 }
172 ]); 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
(...skipping 78 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 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
317 } 332 }
318 333
319 function onClick(e) 334 function onClick(e)
320 { 335 {
321 var element = e.target; 336 var element = e.target;
322 while (true) 337 while (true)
323 { 338 {
324 if (!element) 339 if (!element)
325 return; 340 return;
326 341
327 if ("action" in element.dataset) 342 if (element.hasAttribute("data-action"))
328 break; 343 break;
329 344
330 element = element.parentNode; 345 element = element.parentElement;
331 } 346 }
332 347
333 switch (element.dataset.action) 348 var actions = element.getAttribute("data-action").split(",");
334 { 349 for (var i = 0; i < actions.length; i++)
335 case "add-domain-exception": 350 {
336 addWhitelistedDomain(); 351 switch (actions[i])
337 break; 352 {
338 case "add-subscription": 353 case "add-domain-exception":
339 var dialog = E("dialog-content-addSubscription"); 354 addWhitelistedDomain();
340 var title = dialog.querySelector("h3").textContent; 355 break;
341 var url = dialog.querySelector(".url").textContent; 356 case "add-predefined-subscription":
342 addEnableSubscription(url, title); 357 var dialog = E("dialog-content-predefined");
343 delete document.body.dataset.dialog; 358 var title = dialog.querySelector("h3").textContent;
344 break; 359 var url = dialog.querySelector(".url").textContent;
345 case "cancel-domain-exception": 360 addEnableSubscription(url, title);
346 E("whitelisting-textbox").value = ""; 361 document.body.removeAttribute("data-dialog");
347 break; 362 break;
348 case "close-dialog": 363 case "cancel-custom-filters":
349 delete document.body.dataset.dialog; 364 E("custom-filters").classList.remove("mode-edit");
saroyanm 2015/07/16 12:32:27 Strange, classList according to MDN is supported s
Sebastian Noack 2015/07/16 12:36:50 As I already told you in a different comment, it's
saroyanm 2015/07/16 12:41:01 Ahh right your reference to caniuse went out of my
350 break; 365 break;
351 case "edit-custom-filters": 366 case "cancel-domain-exception":
352 editCustomFilters(); 367 E("whitelisting-textbox").value = "";
353 break; 368 break;
354 case "import-subscription": 369 case "close-dialog":
355 var url = E("blockingList-textbox").value; 370 document.body.removeAttribute("data-dialog");
356 addEnableSubscription(url); 371 break;
357 delete document.body.dataset.dialog; 372 case "edit-custom-filters":
358 break; 373 E("custom-filters").classList.add("mode-edit");
359 case "open-language-dialog": 374 editCustomFilters();
360 openDialog("language"); 375 break;
361 break; 376 case "import-subscription":
362 case "open-subscription-dialog": 377 var url = E("blockingList-textbox").value;
363 openDialog("customlist"); 378 addEnableSubscription(url);
364 break; 379 document.body.removeAttribute("data-dialog");
380 break;
381 case "open-dialog":
382 openDialog(element.getAttribute("data-dialog"));
383 break;
384 case "save-custom-filters":
385 ext.backgroundPage.sendMessage(
386 {
387 type: "filters.importRaw",
388 text: E("custom-filters-raw").value
389 });
390 E("custom-filters").classList.remove("mode-edit");
391 break;
392 case "switch-tab":
393 document.body.setAttribute("data-tab",
394 element.getAttribute("data-tab"));
395 break;
396 }
365 } 397 }
366 } 398 }
367 399
368 function onDOMLoaded() 400 function onDOMLoaded()
369 { 401 {
370 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate"); 402 var recommendationTemplate = document.querySelector("#recommend-list-table t emplate");
371 var popularText = ext.i18n.getMessage("options_popular"); 403 var popularText = ext.i18n.getMessage("options_popular");
372 recommendationTemplate.content.querySelector(".popular").textContent = popul arText; 404 recommendationTemplate.content.querySelector(".popular").textContent = popul arText;
373 var languagesTemplate = document.querySelector("#all-lang-table template"); 405 var languagesTemplate = document.querySelector("#all-lang-table template");
374 var buttonText = ext.i18n.getMessage("options_button_add"); 406 var buttonText = ext.i18n.getMessage("options_button_add");
375 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText; 407 languagesTemplate.content.querySelector(".button-add span").textContent = bu ttonText;
376 408
377 populateLists(); 409 populateLists();
378 410
379 var tabList = document.querySelectorAll("#main-navigation-tabs li");
380 for (var i = 0; i < tabList.length; i++)
381 {
382 tabList[i].addEventListener("click", function(e)
383 {
384 document.body.dataset.tab = e.currentTarget.dataset.show;
385 }, false);
386 }
387
388 function onFindLanguageKeyUp() 411 function onFindLanguageKeyUp()
389 { 412 {
390 var searchStyle = E("search-style"); 413 var searchStyle = E("search-style");
391 if (!this.value) 414 if (!this.value)
392 searchStyle.innerHTML = ""; 415 searchStyle.innerHTML = "";
393 else 416 else
394 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }"; 417 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }";
418 }
419
420 function isEnterPressed(e)
421 {
422 // e.keyCode has been deprecated so we attempt to use e.key
423 if ("key" in e)
424 return e.key == "Enter";
425 return e.keyCode == 13; // keyCode "13" corresponds to "Enter"
395 } 426 }
396 427
397 // Initialize navigation sidebar 428 // Initialize navigation sidebar
398 ext.backgroundPage.sendMessage( 429 ext.backgroundPage.sendMessage(
399 { 430 {
400 type: "app.get", 431 type: "app.get",
401 what: "addonVersion" 432 what: "addonVersion"
402 }, 433 },
403 function(addonVersion) 434 function(addonVersion)
404 { 435 {
(...skipping 11 matching lines...) Expand all
416 447
417 updateShareLink(); 448 updateShareLink();
418 449
419 // Initialize interactive UI elements 450 // Initialize interactive UI elements
420 document.body.addEventListener("click", onClick, false); 451 document.body.addEventListener("click", onClick, false);
421 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find"); 452 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find");
422 E("find-language").setAttribute("placeholder", placeholderValue); 453 E("find-language").setAttribute("placeholder", placeholderValue);
423 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false); 454 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
424 E("whitelisting-textbox").addEventListener("keypress", function(e) 455 E("whitelisting-textbox").addEventListener("keypress", function(e)
425 { 456 {
426 // e.keyCode has been deprecated so we attempt to use e.key 457 if (isEnterPressed(e))
427 // keyCode "13" corresponds to "Enter"
428 if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
429 addWhitelistedDomain(); 458 addWhitelistedDomain();
430 }, false); 459 }, false);
460
461 // Advanced tab
462 var filterTextbox = document.querySelector("#custom-filters-add input");
463 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older");
464 filterTextbox.setAttribute("placeholder", placeholderValue);
465 function addCustomFilters()
466 {
467 var filterText = filterTextbox.value;
468 ext.backgroundPage.sendMessage(
469 {
470 type: "filters.add",
471 text: filterText
472 });
473 filterTextbox.value = "";
474 }
475 E("custom-filters-add").addEventListener("submit", function(e)
476 {
477 e.preventDefault();
478 addCustomFilters();
479 }, false);
480 var customFilterEditButtons = document.querySelectorAll("#custom-filters-edi t-wrapper button");
431 } 481 }
432 482
433 function openDialog(name) 483 function openDialog(name)
434 { 484 {
435 document.body.dataset.dialog = name; 485 document.body.setAttribute("data-dialog", name);
436 } 486 }
437 487
438 function populateLists() 488 function populateLists()
439 { 489 {
440 subscriptionsMap = Object.create(null); 490 subscriptionsMap = Object.create(null);
441 filtersMap = Object.create(null); 491 filtersMap = Object.create(null);
442 recommendationsMap = Object.create(null); 492 recommendationsMap = Object.create(null);
443 493
444 // Empty collections and lists 494 // Empty collections and lists
445 for (var property in collections) 495 for (var property in collections)
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
500 type: "filters.add", 550 type: "filters.add",
501 text: "@@||" + domain.value.toLowerCase() + "^$document" 551 text: "@@||" + domain.value.toLowerCase() + "^$document"
502 }); 552 });
503 } 553 }
504 554
505 domain.value = ""; 555 domain.value = "";
506 } 556 }
507 557
508 function editCustomFilters() 558 function editCustomFilters()
509 { 559 {
510 //TODO: NYI 560 var customFilterItems = collections.customFilters.items;
561 var filterTexts = [];
562 for (var i = 0; i < customFilterItems.length; i++)
563 filterTexts.push(customFilterItems[i].text);
564 E("custom-filters-raw").value = filterTexts.join("\n");
511 } 565 }
512 566
513 function getAcceptableAdsURL(callback) 567 function getAcceptableAdsURL(callback)
514 { 568 {
515 ext.backgroundPage.sendMessage( 569 ext.backgroundPage.sendMessage(
516 { 570 {
517 type: "prefs.get", 571 type: "prefs.get",
518 key: "subscriptions_exceptionsurl" 572 key: "subscriptions_exceptionsurl"
519 }, 573 },
520 function(value) 574 function(value)
(...skipping 20 matching lines...) Expand all
541 url: url 595 url: url
542 }; 596 };
543 if (title) 597 if (title)
544 message.title = title; 598 message.title = title;
545 if (homepage) 599 if (homepage)
546 message.homepage = homepage; 600 message.homepage = homepage;
547 601
548 ext.backgroundPage.sendMessage(message); 602 ext.backgroundPage.sendMessage(message);
549 } 603 }
550 604
551 function removeSubscription(url)
552 {
553 ext.backgroundPage.sendMessage(
554 {
555 type: "subscriptions.remove",
556 url: url
557 });
558 }
559
560 function removeFilter(filter)
561 {
562 ext.backgroundPage.sendMessage(
563 {
564 type: "filters.remove",
565 text: filter
566 });
567 }
568
569 function onFilterMessage(action, filter) 605 function onFilterMessage(action, filter)
570 { 606 {
571 switch (action) 607 switch (action)
572 { 608 {
573 case "added": 609 case "added":
574 updateFilter(filter); 610 updateFilter(filter);
575 updateShareLink(); 611 updateShareLink();
576 break; 612 break;
577 case "loaded": 613 case "loaded":
578 populateLists(); 614 populateLists();
579 break; 615 break;
580 case "removed": 616 case "removed":
581 var knownFilter = filtersMap[filter.text]; 617 var knownFilter = filtersMap[filter.text];
582 collections.whitelist.removeItem(knownFilter); 618 collections.whitelist.removeItem(knownFilter);
619 collections.customFilters.removeItem(knownFilter);
583 delete filtersMap[filter.text]; 620 delete filtersMap[filter.text];
584 updateShareLink(); 621 updateShareLink();
585 break; 622 break;
586 } 623 }
587 } 624 }
588 625
589 function onSubscriptionMessage(action, subscription) 626 function onSubscriptionMessage(action, subscription)
590 { 627 {
591 switch (action) 628 switch (action)
592 { 629 {
(...skipping 26 matching lines...) Expand all
619 } 656 }
620 updateShareLink(); 657 updateShareLink();
621 }); 658 });
622 break; 659 break;
623 case "title": 660 case "title":
624 // TODO: NYI 661 // TODO: NYI
625 break; 662 break;
626 } 663 }
627 } 664 }
628 665
629 function showAddSubscriptionDialog(subscription)
630 {
631 var dialog = E("dialog-content-addSubscription");
632 dialog.querySelector("h3").textContent = subscription.title || "";
633 dialog.querySelector(".url").textContent = subscription.url;
634 openDialog("addSubscription");
635 }
636
637 function updateShareLink() 666 function updateShareLink()
638 { 667 {
639 ext.backgroundPage.sendMessage( 668 ext.backgroundPage.sendMessage(
640 { 669 {
641 type: "filters.blocked", 670 type: "filters.blocked",
642 url: "https://platform.twitter.com/widgets/", 671 url: "https://platform.twitter.com/widgets/",
643 requestType: "SCRIPT", 672 requestType: "SCRIPT",
644 docDomain: "adblockplus.org", 673 docDomain: "adblockplus.org",
645 thirdParty: true 674 thirdParty: true
646 }, 675 },
(...skipping 17 matching lines...) Expand all
664 link: link 693 link: link
665 }, callback); 694 }, callback);
666 } 695 }
667 696
668 ext.onMessage.addListener(function(message) 697 ext.onMessage.addListener(function(message)
669 { 698 {
670 switch (message.type) 699 switch (message.type)
671 { 700 {
672 case "app.listen": 701 case "app.listen":
673 if (message.action == "addSubscription") 702 if (message.action == "addSubscription")
674 showAddSubscriptionDialog(message.args[0]); 703 {
704 var subscription = message.args[0];
705 var dialog = E("dialog-content-predefined");
706 dialog.querySelector("h3").textContent = subscription.title || "";
707 dialog.querySelector(".url").textContent = subscription.url;
708 openDialog("predefined");
709 }
710 else if (message.action == "error")
711 {
712 alert(message.args.join("\n"));
713 }
675 break; 714 break;
676 case "filters.listen": 715 case "filters.listen":
677 onFilterMessage(message.action, message.args[0]); 716 onFilterMessage(message.action, message.args[0]);
678 break; 717 break;
679 case "subscriptions.listen": 718 case "subscriptions.listen":
680 onSubscriptionMessage(message.action, message.args[0]); 719 onSubscriptionMessage(message.action, message.args[0]);
681 break; 720 break;
682 } 721 }
683 }); 722 });
684 723
685 ext.backgroundPage.sendMessage( 724 ext.backgroundPage.sendMessage(
686 { 725 {
687 type: "app.listen", 726 type: "app.listen",
688 filter: ["addSubscription"] 727 filter: ["addSubscription", "error"]
689 }); 728 });
690 ext.backgroundPage.sendMessage( 729 ext.backgroundPage.sendMessage(
691 { 730 {
692 type: "filters.listen", 731 type: "filters.listen",
693 filter: ["added", "loaded", "removed"] 732 filter: ["added", "loaded", "removed"]
694 }); 733 });
695 ext.backgroundPage.sendMessage( 734 ext.backgroundPage.sendMessage(
696 { 735 {
697 type: "subscriptions.listen", 736 type: "subscriptions.listen",
698 filter: ["added", "disabled", "homepage", "removed", "title"] 737 filter: ["added", "disabled", "homepage", "removed", "title"]
699 }); 738 });
700 739
701 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 740 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
702 })(); 741 })();
LEFTRIGHT

Powered by Google App Engine
This is Rietveld