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

Unified Diff: options.js

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Patch Set: Created Jan. 23, 2015, 6:09 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« options.html ('K') | « options.html ('k') | skin/options.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: options.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/options.js
@@ -0,0 +1,709 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-2015 Eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+(function()
+{
+ var optionSubscriptions = {};
+ var acceptableAdsUrl = null;
+
+ function onDOMLoaded()
+ {
+ initTabs();
+ updateVersionNumber();
+ updateShareLink();
+ populateLists();
+
+ setLinks("block-element-explanation", "#");
+
+ E("add-blocking-list").addEventListener("click", Modal.open, false);
+ E("add-website-language").addEventListener("click", Modal.open, false);
+ E("modal-close").addEventListener("click", Modal.close, false);
+ E("whitelisting-add-icon").addEventListener("click", whitelistDomainBtnClick, false);
+ E("whitelisting-add-btn").addEventListener("click", whitelistDomainBtnClick, false);
+ E("whitelisting-enter-icon").addEventListener("click", whitelistDomainBtnClick, false);
+ E("whitelisting-textbox").addEventListener("keypress", function(e) {
+ if (e.keyCode == 13)
+ whitelistDomainBtnClick();
+ }, false);
+ E("whitelisting-cancel-btn").addEventListener("click", function(){
+ E("whitelisting-textbox").value = "";
+ }, false);
+ E("allow-whitelist-cb").addEventListener("click", toggleAcceptableAds, false);
+ E("import-blockingList-btn").addEventListener("click", importListBtnCLick, false);
+ E("edit-ownBlockingList-btn").addEventListener("click", editOwnRulsBtnClick, false);
+ E("find-language").addEventListener("keyup", searchLanguage, false);
+ }
+
+ function initTabs()
+ {
+ var showContent = function(tab)
+ {
+ var tab = tab.querySelector(".tabs li.active");
+ if (tab.dataset.show)
+ E(tab.dataset.show).style.display = "block";
+ };
+ var optionList = document.querySelectorAll('.tabs li[data-show]');
+ for (var i = 0; i < optionList.length; ++i)
+ {
+ optionList[i].addEventListener("click", function(ev)
+ {
+ var tab = this.parentNode.querySelector(".active");
+ tab.classList.remove("active");
+ this.classList.add("active");
+ E(tab.dataset.show).style.display = "none";;
+ showContent(this.parentNode);
+ }, false);
+ }
+ showContent(E("main-navigation-tabs"));
+ showContent(E("blocking-list-tabs"));
+ }
+
+ var Modal =
+ {
+ open: function (content)
+ {
+ var modal = E("modal");
+ var content = E(this && this.dataset ? this.dataset.show : content);
+ content.style.display = "block";
+ modal.style.visibility = "visible";
+ E("modal-background").style.display = "block";
+ if (content.dataset.title)
+ E("modal-title").innerHTML = ext.i18n.getMessage(content.dataset.title);
+ modal.style.marginTop = -(modal.clientHeight/2)+"px";
+ },
+ close: function ()
+ {
+ var contents = E("modal-content").childNodes;
+ for (var i = 0; i < contents.length; ++i)
+ {
+ if (contents[i].style)
+ contents[i].style.display = "none";
+ }
+ E("modal-background").style.display = "none";
+ E("modal").style.visibility = "hidden";
+ }
+ }
+
+ function populateLists()
+ {
+ ext.backgroundPage.sendMessage({
+ type: "subscriptions.get",
+ special: true
+ }, function(subscriptions)
+ {
+ for (var i = 0; i < subscriptions.length; i++)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "filters.get",
+ subscriptionUrl: subscriptions[i].url
+ }, function(filters)
+ {
+ var whitelistArray = [];
+ for (var i = 0; i < filters.length; i++)
+ {
+ var match = filters[i].text.match(/^@@\|\|([^\/:]+)\^\$document$/);
+ if (match[1])
+ {
+ whitelistArray.push(match[1]);
+ }
+ else
+ {
+ // TODO: add `filters[i].text` to list of custom filters
+ }
+ }
+
+ if (whitelistArray.length > 0)
+ {
+ whitelistArray.sort();
+ for (var i = 0; i < whitelistArray.length; i++)
+ {
+ var domain = whitelistArray[i];
+ E("whitelisting-table").appendChild(createWhitelistElem(domain));
+ }
+ }
+ });
+ }
+ });
+
+ loadRecommendations(function(recommends)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "subscriptions.get",
+ downloadable: true
+ }, function(subscriptions)
+ {
+ getAcceptableAdsURL(function(url)
+ {
+ acceptableAdsUrl = url;
+ for (var i = 0; i < subscriptions.length; i++)
+ {
+ if (subscriptions[i].url == acceptableAdsUrl)
+ {
+ E("allow-whitelist-cb").previousSibling.checked = !subscriptions[i].disabled;
+ continue;
+ }
+
+ var subscription = recommends[subscriptions[i].url];
+ if (!subscription)
+ recommends[subscriptions[i].url] = subscriptions[i];
+ else
+ {
+ subscription.disabled = subscriptions[i].disabled;
+ if (subscription.type == "ads")
+ subscription.isAdded = true;
+ }
+ }
+ for (var key in recommends)
+ addOptionItem(recommends[key]);
+ });
+ });
+ });
+ }
+
+ function loadRecommendations(callback)
+ {
+ var recommendations = {};
+ var request = new XMLHttpRequest();
+ request.open("GET", "subscriptions.xml");
+ request.onload = function()
+ {
+ var list = document.getElementById("subscriptionSelector");
+ var elements = request.responseXML.documentElement.getElementsByTagName("subscription");
+ for (var i = 0; i < elements.length; i++)
+ {
+ var element = elements[i];
+ var subscription = {};
+ subscription.title = element.getAttribute("title");
+ subscription.url = element.getAttribute("url");
+ subscription.disabled = true;
+ var prefix = element.getAttribute("prefixes");
+ if (prefix)
+ {
+ subscription.prefixes = element.getAttribute("prefixes");
+ subscription.type = "ads";
+ subscription.display = ext.i18n.getMessage("options_language_"+subscription.prefixes.replace(/,/g, '_'));
+ }
+ else
+ subscription.display = element.getAttribute("specialization");
+
+ var popular = element.getAttribute("popular");
+ if (popular)
+ subscription.popular = element.getAttribute("popular");
+
+ recommendations[subscription.url] = subscription;
+ }
+ optionSubscriptions = recommendations;
+ callback(recommendations);
+ }
+ request.send();
+ }
+
+ function searchLanguage()
+ {
+ var searchVal = this.value;
+ var items = E("all-lang-table").childNodes;
+ for (var i = 0; i < items.length; ++i)
+ {
+ var item = items[i];
+ var language = item.getElementsByTagName("span")[1].innerHTML;
+ if (language.toLowerCase().indexOf(searchVal.toLowerCase()) > -1)
+ item.style.display = "block";
+ else
+ item.style.display = "none";
+ }
+ }
+
+ function addOptionItem(subscription)
+ {
+ var display = subscription.display ? subscription.display : subscription.title;
+ var getPossition = function(elements, subscription)
+ {
+ var localArray = [];
+ for (var i = 0; i < elements.length; i++)
+ {
+ var elem = elements[i];
+ localArray.push(elem);
+ }
+
+ localArray.push(subscription);
+ return localArray.sort(function(a, b) {
+ var aPopular = a.getElementsByClassName("popular").length > 0;
+ var bPopular = b.getElementsByClassName("popular").length > 0;
+ if(aPopular == bPopular)
+ {
+ var aValue = a.getElementsByClassName("display")[0].innerHTML.toLowerCase();
+ var bValue = b.getElementsByClassName("display")[0].innerHTML.toLowerCase();
+ if (aValue < bValue)
+ return -1;
+ if (aValue > bValue)
+ return 1;
+ return 0;
+ }
+ if (aPopular == "true")
+ return 1;
+ else
+ return -1;
+ }).indexOf(subscription);
+ };
+
+ var checkBoxClick = function()
+ {
+ toggleSubscription(subscription);
+ };
+
+ var appendToTable = function(table, elem)
+ {
+ var elements = table.getElementsByTagName("li");
+ if (elements.length == 0)
+ table.appendChild(elem);
+ else
+ {
+ var possition = getPossition(elements, elem);
+ table.insertBefore(elem, table.childNodes[possition]);
+ }
+ };
+
+ if (subscription.type && subscription.type == "ads")
+ {
+ if (!subscription.isAdded)
+ {
+ var listElem = generateListElement(subscription, subscription.display, "add");
+ listElem.dataset.url = subscription.url;
+ listElem._subscription = subscription;
+ listElem.getElementsByTagName("button")[0].addEventListener("click", function()
+ {
+ addSubscription(this.dataset.url);
+ }.bind(listElem), false);
+ appendToTable(E("all-lang-table"), listElem);
+ }
+ else
+ {
+ var listElem = generateListElement(subscription, display, "checkbox");
+ listElem.dataset.url = subscription.url;
+ listElem._subscription = subscription;
+ listElem.getElementsByTagName("span")[0].addEventListener("click", checkBoxClick, false);
+ appendToTable(E("blocking-languages-table"), listElem);
+ var listElem = generateListElement(subscription, display);
+ listElem.dataset.url = subscription.url;
+ listElem._subscription = subscription;
+ appendToTable(E("blocking-languages-modal-table"), listElem);
+ }
+ }
+ else
+ {
+ var listElem = generateListElement(subscription, display, "checkbox");
+ listElem.dataset.url = subscription.url;
+ listElem._subscription = subscription;
+ listElem.getElementsByTagName("span")[0].addEventListener("click", checkBoxClick, false);
+ appendToTable(E("further-list-table"), listElem);
+ }
+ }
+
+ function addLanguageSubscription(subscription)
+ {
+ var optionSubscription = getOptionSubscription(subscription.url);
+ var elems = getElementsByUrl(subscription.url);
+ for (var i = 0; i < elems.length; i++)
+ elems[i].parentNode.removeChild(elems[i]);
+ optionSubscription.isAdded = true;
+ optionSubscription.disabled = false;
+ addOptionItem(optionSubscription);
+ }
+
+ function createWhitelistElem(domain)
+ {
+ var listElem = generateListElement(null, domain, "delete");
+ listElem.dataset.domain = domain;
+ listElem.getElementsByTagName("button")[0].addEventListener("click", removeWhitelistBtnClick.bind(listElem), false);
+ return listElem;
+ }
+
+ function addFurtherList(subscription)
+ {
+ var optionSubscription = getOptionSubscription(subscription.url);
+ if (optionSubscription)
+ {
+ optionSubscription.disabled = false;
+ addOptionItem(optionSubscription);
+ }
+ else
+ {
+ optionSubscriptions[subscription.url] = subscription;
+ addOptionItem(subscription);
+ }
+ }
+
+ function updateSubscriptionState(subscription, state)
+ {
+ var elem = getElementsByUrl(subscription.url);
+ if (elem.length > 0)
+ {
+ for (var i = 0; i < elem.length; i++)
+ {
+ var checkbox = elem[i].getElementsByTagName("input")[0];
+ if (checkbox)
+ checkbox.checked = state;
+ }
+ }
+ else
+ {
+ if (subscription.url == acceptableAdsUrl)
+ E("allow-whitelist-cb").previousSibling.checked = state;
+ else
+ addFurtherList(subscription);
+ }
+ }
+
+ function getElementsByUrl(url)
+ {
+ return document.querySelectorAll("[data-url='"+url+"']");
+ }
+
+ function generateListElement(subscription, text, type)
+ {
+ var list = document.createElement("li");
+ if (type == "checkbox")
+ {
+ var input = document.createElement("input");
+ input.setAttribute("type", "checkbox");
+ if (subscription.disabled == false)
+ input.checked = true;
+ list.appendChild(input);
+ var span = document.createElement("span");
+ list.appendChild(span);
+ }
+ else if (type == "delete")
+ {
+ var button = document.createElement("button");
+ button.setAttribute("class", "delete");
+ list.appendChild(button);
+ }
+ else if (type == "add")
+ {
+ var button = document.createElement("button");
+ button.setAttribute("class", "button-add");
+ var span = document.createElement("span");
+ span.innerHTML = "+" + ext.i18n.getMessage("options_btn_add");
+ button.appendChild(span);
+ list.appendChild(button);
+ }
+ var span = document.createElement("span");
+ span.setAttribute("class", "display");
+ span.innerHTML = text;
+ list.appendChild(span);
+
+ if (subscription && subscription.popular == "true")
+ {
+ var popular = document.createElement("span");
+ popular.setAttribute("class", "popular");
+ popular.innerHTML = "popular";
+ list.appendChild(popular);
+ }
+
+ return list;
+ }
+
+ function getOptionSubscription(url)
+ {
+ return optionSubscriptions[url];
+ }
+
+ function importListBtnCLick()
+ {
+ var url = E("blockingList-textbox").value;
+ addSubscription(url);
+ Modal.close();
+ }
+
+ function whitelistDomainBtnClick()
+ {
+ var domain = E("whitelisting-textbox").value;
+ if (domain)
+ addWhitelistedDomain(domain);
+ }
+
+ function removeWhitelistBtnClick()
+ {
+ removeWhitelistedDomain(this.dataset.domain);
+ }
+
+ function editOwnRulsBtnClick()
+ {
+
+ }
+
+ function showAddSubscriptionDialog(action, subscription)
+ {
+ E("blockingList-textbox").value = subscription.url;
+ Modal.open("further-blocking-modal");
+ }
+
+ function getAcceptableAdsURL(callback)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "prefs.get",
+ key: "subscriptions_exceptionsurl"
+ }, function(value)
+ {
+ getAcceptableAdsURL = function(callback)
+ {
+ callback(value);
+ }
+ getAcceptableAdsURL(callback);
+ });
+ }
+
+ function toggleSubscription(subscription)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "subscriptions.toggle",
+ url: subscription.url,
+ title: subscription.title,
+ homepage: subscription.homepage
+ });
+ }
+
+ function toggleAcceptableAds()
+ {
+ var acceptableCheckbox = this.previousSibling;
+ getAcceptableAdsURL(function(url)
+ {
+ var isChecked = acceptableCheckbox.checked;
+ var title = "Allow non-intrusive advertising";
+ if (isChecked)
+ removeSubscription(url);
+ else
+ addSubscription(url, title);
+ });
+ }
+
+ function addSubscription(url, title, homepage)
+ {
+ var message = {
+ type: "subscriptions.add",
+ url: url
+ };
+ if (title)
+ message.title = title;
+ if (homepage)
+ message.homepage = homepage;
+
+ ext.backgroundPage.sendMessage(message);
+ }
+
+ function removeSubscription(url)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "subscriptions.remove",
+ url: url
+ });
+ }
+
+ function addWhitelistedDomain(domain)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "filters.add",
+ text: "@@||" + domain.toLowerCase() + "^$document"
+ });
+ }
+
+ function removeWhitelistedDomain(domain)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "filters.remove",
+ text: "@@||" + domain.toLowerCase() + "^$document"
+ });
+ }
+
+ function onFilterMessage(action, filter)
+ {
+ switch (action)
+ {
+ case "added":
+ var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
+ if (match[1])
+ {
+ var whitelistTbl = E("whitelisting-table");
+ var items = whitelistTbl.getElementsByClassName("display");
+ var domains = [];
+ for (var i = 0; i < items.length; i++)
+ {
+ domains.push(items[i].innerHTML);
+ }
+ var domain = match[1];
+ domains.push(domain);
+ domains.sort();
+
+ whitelistTbl.insertBefore(createWhitelistElem(domain), whitelistTbl.childNodes[domains.indexOf(domain)]);
+ E("whitelisting-textbox").value = "";
+ }
+ else
+ {
+ // TODO: add `filters[i].text` to list of custom filters
+ }
+ break;
+ case "loaded":
+ populateLists();
+ break;
+ case "removed":
+ var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
+ if (match[1])
+ {
+ var elem = document.querySelector("[data-domain='"+match[1]+"']");
+ elem.parentNode.removeChild(elem);
+ }
+ break;
+ }
+ }
+
+ function onSubscriptionMessage(action, subscription)
+ {
+ switch (action)
+ {
+ case "added":
+ var optionSubscription = getOptionSubscription(subscription.url);
+ if (optionSubscription)
+ {
+ var isAdsType = optionSubscription.type && optionSubscription.type == "ads";
+ if (isAdsType && !optionSubscription.isAdded)
+ addLanguageSubscription(subscription);
+ else
+ updateSubscriptionState(subscription, true);
+ }
+ else if (subscription.url == acceptableAdsUrl)
+ updateSubscriptionState(subscription, true);
+ else
+ addFurtherList(subscription);
+ break;
+ case "disabled":
+ updateSubscriptionState(subscription, false);
+ break;
+ case "homepage":
+ // TODO: NYI
+ break;
+ case "removed":
+ updateSubscriptionState(subscription, false);
+ break;
+ case "title":
+ // TODO: NYI
+ break;
+ }
+ }
+
+ function updateShareLink()
+ {
+ ext.backgroundPage.sendMessage({
+ type: "filters.blocked",
+ url: "https://platform.twitter.com/widgets/",
+ requestType: "SCRIPT",
+ docDomain: "adblockplus.org",
+ thirdParty: true
+ }, function(blocked)
+ {
+ // TODO: modify "share" link accordingly
+ });
+ }
+
+ function updateVersionNumber()
+ {
+ ext.backgroundPage.sendMessage({
+ method: "app.get",
+ what: "addonVersion"
+ }, function(addonVersion)
+ {
+ E("abp-version").innerHTML = addonVersion;
+ });
+ }
+
+ function getDocLink(link, callback)
+ {
+ ext.backgroundPage.sendMessage({
+ type: "app.get",
+ what: "doclink",
+ link: link
+ }, callback);
+ }
+
+ function setLinks(id)
+ {
+ var element = E(id);
+ if (!element)
+ {
+ return;
+ }
+
+ var links = element.getElementsByTagName("a");
+
+ for (var i = 0; i < links.length; i++)
+ {
+ if (typeof arguments[i + 1] == "string")
+ {
+ links[i].href = arguments[i + 1];
+ links[i].setAttribute("target", "_blank");
+ }
+ else if (typeof arguments[i + 1] == "function")
+ {
+ links[i].href = "javascript:void(0);";
+ links[i].addEventListener("click", arguments[i + 1], false);
+ }
+ }
+ }
+
+ function E(id)
+ {
+ return document.getElementById(id);
+ }
+
+ ext.onMessage.addListener(function(message)
+ {
+ switch (message.type)
+ {
+ case "app.listen":
+ if (message.action == "addSubscription")
+ {
+ message.args.unshift(message.action);
+ showAddSubscriptionDialog.apply(null, message.args);
+ }
+ break;
+ case "filters.listen":
+ message.args.unshift(message.action);
+ onFilterMessage.apply(null, message.args);
+ break;
+ case "subscriptions.listen":
+ message.args.unshift(message.action);
+ onSubscriptionMessage.apply(null, message.args);
+ break;
+ }
+ });
+
+ ext.backgroundPage.sendMessage({
+ type: "app.listen",
+ filter: ["addSubscription"]
+ });
+ ext.backgroundPage.sendMessage({
+ type: "filters.listen",
+ filter: ["added", "loaded", "removed"]
+ });
+ ext.backgroundPage.sendMessage({
+ type: "subscriptions.listen",
+ filter: ["added", "disabled", "homepage", "removed", "title"]
+ });
+
+ window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
+})();
« options.html ('K') | « options.html ('k') | skin/options.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld