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

Side by Side Diff: options.js

Issue 29329095: Issue 2747 - Added empty state for tables in options page (Closed)
Patch Set: Created Dec. 11, 2015, 4:48 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
« 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 12 matching lines...) Expand all
23 var recommendationsMap = Object.create(null); 23 var recommendationsMap = Object.create(null);
24 var filtersMap = Object.create(null); 24 var filtersMap = Object.create(null);
25 var collections = Object.create(null); 25 var collections = Object.create(null);
26 26
27 function Collection(details) 27 function Collection(details)
28 { 28 {
29 this.details = details; 29 this.details = details;
30 this.items = []; 30 this.items = [];
31 } 31 }
32 32
33 Collection.prototype._setEmpty = function(table, text)
34 {
35 var placeholder = table.querySelector(".empty-placeholder");
36 if (text && !placeholder)
37 {
38 placeholder = document.createElement("li");
39 placeholder.className = "empty-placeholder";
40 placeholder.textContent = ext.i18n.getMessage(text);
41 table.appendChild(placeholder);
42 }
43 else if (placeholder)
44 table.removeChild(placeholder);
45 }
46
33 Collection.prototype.addItems = function() 47 Collection.prototype.addItems = function()
34 { 48 {
35 var length = Array.prototype.push.apply(this.items, arguments); 49 var length = Array.prototype.push.apply(this.items, arguments);
36 if (length == 0) 50 if (length == 0)
37 return; 51 return;
38 52
39 this.items.sort(function(a, b) 53 this.items.sort(function(a, b)
40 { 54 {
41 var aValue = (a.title || a.text || a.url).toLowerCase(); 55 var aValue = (a.title || a.text || a.url).toLowerCase();
42 var bValue = (b.title || b.text || b.url).toLowerCase(); 56 var bValue = (b.title || b.text || b.url).toLowerCase();
(...skipping 15 matching lines...) Expand all
58 if (text) 72 if (text)
59 listItem.setAttribute("data-search", text.toLowerCase()); 73 listItem.setAttribute("data-search", text.toLowerCase());
60 74
61 var control = listItem.querySelector(".control"); 75 var control = listItem.querySelector(".control");
62 if (control) 76 if (control)
63 { 77 {
64 control.addEventListener("click", this.details[j].onClick, false); 78 control.addEventListener("click", this.details[j].onClick, false);
65 control.checked = item.disabled == false; 79 control.checked = item.disabled == false;
66 } 80 }
67 81
82 this._setEmpty(table, null);
68 if (table.hasChildNodes()) 83 if (table.hasChildNodes())
69 table.insertBefore(listItem, table.childNodes[this.items.indexOf(item) ]); 84 table.insertBefore(listItem, table.childNodes[this.items.indexOf(item) ]);
70 else 85 else
71 table.appendChild(listItem); 86 table.appendChild(listItem);
72 } 87 }
73 } 88 }
74 return length; 89 return length;
75 }; 90 };
76 91
77 Collection.prototype.removeItem = function(item) 92 Collection.prototype.removeItem = function(item)
78 { 93 {
79 var index = this.items.indexOf(item); 94 var index = this.items.indexOf(item);
80 if (index == -1) 95 if (index == -1)
81 return; 96 return;
82 97
83 this.items.splice(index, 1); 98 this.items.splice(index, 1);
84 var access = (item.url || item.text).replace(/'/g, "\\'");
85 for (var i = 0; i < this.details.length; i++) 99 for (var i = 0; i < this.details.length; i++)
86 { 100 {
87 var table = E(this.details[i].id); 101 var table = E(this.details[i].id);
88 var element = table.querySelector("[data-access='" + access + "']"); 102 var element = table.childNodes[index];
89 element.parentElement.removeChild(element); 103 element.parentElement.removeChild(element);
104 if (this.items.length == 0)
105 this._setEmpty(table, this.details[i].emptyText);
90 } 106 }
91 }; 107 };
92 108
93 Collection.prototype.clearAll = function() 109 Collection.prototype.clearAll = function()
94 { 110 {
111 this.items = [];
95 for (var i = 0; i < this.details.length; i++) 112 for (var i = 0; i < this.details.length; i++)
96 { 113 {
97 var table = E(this.details[i].id); 114 var table = E(this.details[i].id);
98 var template = table.querySelector("template"); 115 var template = table.querySelector("template");
99 table.innerHTML = ""; 116 table.innerHTML = "";
100 table.appendChild(template); 117 table.appendChild(template);
118 this._setEmpty(table, this.details[i].emptyText);
101 } 119 }
102 this.items.length = 0;
103 }; 120 };
104 121
105 function onToggleSubscriptionClick(e) 122 function onToggleSubscriptionClick(e)
106 { 123 {
107 e.preventDefault(); 124 e.preventDefault();
108 var subscriptionUrl = e.target.parentNode.getAttribute("data-access"); 125 var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
109 if (!e.target.checked) 126 if (!e.target.checked)
110 { 127 {
111 ext.backgroundPage.sendMessage( 128 ext.backgroundPage.sendMessage({
112 { 129 type: "subscriptions.remove",
113 type: "subscriptions.remove", 130 url: subscriptionUrl
114 url: subscriptionUrl 131 });
115 });
116 } 132 }
117 else 133 else
118 addEnableSubscription(subscriptionUrl); 134 addEnableSubscription(subscriptionUrl);
119 } 135 }
120 136
121 function onAddLanguageSubscriptionClick(e) 137 function onAddLanguageSubscriptionClick(e)
122 { 138 {
123 e.preventDefault(); 139 e.preventDefault();
124 var url = this.parentNode.getAttribute("data-access"); 140 var url = this.parentNode.getAttribute("data-access");
125 addEnableSubscription(url); 141 addEnableSubscription(url);
(...skipping 13 matching lines...) Expand all
139 [ 155 [
140 { 156 {
141 id: "recommend-list-table", 157 id: "recommend-list-table",
142 onClick: onToggleSubscriptionClick 158 onClick: onToggleSubscriptionClick
143 } 159 }
144 ]); 160 ]);
145 collections.langs = new Collection( 161 collections.langs = new Collection(
146 [ 162 [
147 { 163 {
148 id: "blocking-languages-table", 164 id: "blocking-languages-table",
165 emptyText: "options_dialog_language_added_empty",
149 onClick: onToggleSubscriptionClick 166 onClick: onToggleSubscriptionClick
150 }, 167 },
151 { 168 {
152 id: "blocking-languages-dialog-table" 169 id: "blocking-languages-dialog-table",
170 emptyText: "options_dialog_language_added_empty"
153 } 171 }
154 ]); 172 ]);
155 collections.allLangs = new Collection( 173 collections.allLangs = new Collection(
156 [ 174 [
157 { 175 {
158 id: "all-lang-table", 176 id: "all-lang-table",
177 emptyText: "options_dialog_language_other_empty",
159 onClick: onAddLanguageSubscriptionClick 178 onClick: onAddLanguageSubscriptionClick
160 } 179 }
161 ]); 180 ]);
162 collections.acceptableAds = new Collection( 181 collections.acceptableAds = new Collection(
163 [ 182 [
164 { 183 {
165 id: "acceptableads-table", 184 id: "acceptableads-table",
166 onClick: onToggleSubscriptionClick 185 onClick: onToggleSubscriptionClick
167 } 186 }
168 ]); 187 ]);
169 collections.custom = new Collection( 188 collections.custom = new Collection(
170 [ 189 [
171 { 190 {
172 id: "custom-list-table", 191 id: "custom-list-table",
173 onClick: onToggleSubscriptionClick 192 onClick: onToggleSubscriptionClick
174 } 193 }
175 ]); 194 ]);
176 collections.whitelist = new Collection( 195 collections.whitelist = new Collection(
177 [ 196 [
178 { 197 {
179 id: "whitelisting-table", 198 id: "whitelisting-table",
199 emptyText: "options_whitelisted_empty",
180 onClick: onRemoveFilterClick 200 onClick: onRemoveFilterClick
181 } 201 }
182 ]); 202 ]);
183 collections.customFilters = new Collection( 203 collections.customFilters = new Collection(
184 [ 204 [
185 { 205 {
186 id: "custom-filters-table" 206 id: "custom-filters-table",
207 emptyText: "options_customFilters_empty"
187 } 208 }
188 ]); 209 ]);
189 210
190 function updateSubscription(subscription) 211 function updateSubscription(subscription)
191 { 212 {
192 var subscriptionUrl = subscription.url; 213 var subscriptionUrl = subscription.url;
193 var knownSubscription = subscriptionsMap[subscriptionUrl]; 214 var knownSubscription = subscriptionsMap[subscriptionUrl];
194 if (knownSubscription) 215 if (knownSubscription)
195 knownSubscription.disabled = subscription.disabled; 216 knownSubscription.disabled = subscription.disabled;
196 else 217 else
(...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after
356 var title = dialog.querySelector("h3").textContent; 377 var title = dialog.querySelector("h3").textContent;
357 var url = dialog.querySelector(".url").textContent; 378 var url = dialog.querySelector(".url").textContent;
358 addEnableSubscription(url, title); 379 addEnableSubscription(url, title);
359 closeDialog(); 380 closeDialog();
360 break; 381 break;
361 case "cancel-custom-filters": 382 case "cancel-custom-filters":
362 E("custom-filters").classList.remove("mode-edit"); 383 E("custom-filters").classList.remove("mode-edit");
363 break; 384 break;
364 case "cancel-domain-exception": 385 case "cancel-domain-exception":
365 E("whitelisting-textbox").value = ""; 386 E("whitelisting-textbox").value = "";
387 document.querySelector("#whitelisting .controls").classList.remove("mo de-edit");
366 break; 388 break;
367 case "close-dialog": 389 case "close-dialog":
368 closeDialog(); 390 closeDialog();
369 break; 391 break;
370 case "edit-custom-filters": 392 case "edit-custom-filters":
371 E("custom-filters").classList.add("mode-edit"); 393 E("custom-filters").classList.add("mode-edit");
372 editCustomFilters(); 394 editCustomFilters();
373 break; 395 break;
396 case "edit-domain-exception":
397 document.querySelector("#whitelisting .controls").classList.add("mode- edit");
398 E("whitelisting-textbox").focus();
399 break;
374 case "import-subscription": 400 case "import-subscription":
375 var url = E("blockingList-textbox").value; 401 var url = E("blockingList-textbox").value;
376 addEnableSubscription(url); 402 addEnableSubscription(url);
377 closeDialog(); 403 closeDialog();
378 break; 404 break;
379 case "open-dialog": 405 case "open-dialog":
380 openDialog(element.getAttribute("data-dialog")); 406 openDialog(element.getAttribute("data-dialog"));
381 break; 407 break;
382 case "save-custom-filters": 408 case "save-custom-filters":
383 ext.backgroundPage.sendMessage( 409 ext.backgroundPage.sendMessage(
(...skipping 210 matching lines...) Expand 10 before | Expand all | Expand 10 after
594 if (domain.value) 620 if (domain.value)
595 { 621 {
596 ext.backgroundPage.sendMessage( 622 ext.backgroundPage.sendMessage(
597 { 623 {
598 type: "filters.add", 624 type: "filters.add",
599 text: "@@||" + domain.value.toLowerCase() + "^$document" 625 text: "@@||" + domain.value.toLowerCase() + "^$document"
600 }); 626 });
601 } 627 }
602 628
603 domain.value = ""; 629 domain.value = "";
630 document.querySelector("#whitelisting .controls").classList.remove("mode-edi t");
604 } 631 }
605 632
606 function editCustomFilters() 633 function editCustomFilters()
607 { 634 {
608 var customFilterItems = collections.customFilters.items; 635 var customFilterItems = collections.customFilters.items;
609 var filterTexts = []; 636 var filterTexts = [];
610 for (var i = 0; i < customFilterItems.length; i++) 637 for (var i = 0; i < customFilterItems.length; i++)
611 filterTexts.push(customFilterItems[i].text); 638 filterTexts.push(customFilterItems[i].text);
612 E("custom-filters-raw").value = filterTexts.join("\n"); 639 E("custom-filters-raw").value = filterTexts.join("\n");
613 } 640 }
(...skipping 176 matching lines...) Expand 10 before | Expand all | Expand 10 after
790 filter: ["added", "loaded", "removed"] 817 filter: ["added", "loaded", "removed"]
791 }); 818 });
792 ext.backgroundPage.sendMessage( 819 ext.backgroundPage.sendMessage(
793 { 820 {
794 type: "subscriptions.listen", 821 type: "subscriptions.listen",
795 filter: ["added", "disabled", "homepage", "removed", "title"] 822 filter: ["added", "disabled", "homepage", "removed", "title"]
796 }); 823 });
797 824
798 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 825 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
799 })(); 826 })();
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