Issue 2381 - Added share overlay to options page

options.js

 /*
  * 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
@@ skipping 20 matching lines @@
   }
 
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
     if (length == 0)
       return;
 
     this.items.sort(function(a, b)
     {
-      var aValue = (a.title || a.url || a.text).toLowerCase();
-      var bValue = (b.title || b.url || a.text).toLowerCase();
+      var aValue = (a.title || a.text || a.url).toLowerCase();
+      var bValue = (b.title || b.text || b.url).toLowerCase();
       return aValue.localeCompare(bValue);
     });
 
     for (var j = 0; j < this.details.length; j++) 
     {
       var table = E(this.details[j].id);
       var template = table.querySelector("template");
       for (var i = 0; i < arguments.length; i++) 
       {
         var item = arguments[i];
         var text = item.title || item.url || item.text;
         var listItem = document.createElement("li");
         listItem.appendChild(document.importNode(template.content, true));
-        listItem.dataset.access = item.url || item.text;
+        listItem.setAttribute("data-access", item.url || item.text);
         listItem.querySelector(".display").textContent = text;
         if (text)
-          listItem.dataset.search = text.toLowerCase();
+          listItem.setAttribute("data-search", text.toLowerCase());
 
         var control = listItem.querySelector(".control");
         if (control)
         {
           control.addEventListener("click", this.details[j].onClick, false);
           control.checked = item.disabled == false;
         }
 
         if (table.hasChildNodes())
           table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
@@ skipping 28 matching lines @@
       var template = table.querySelector("template");
       table.innerHTML = "";
       table.appendChild(template);
     }
     this.items.length = 0;
   };
 
   function onToggleSubscriptionClick(e)
   {
     e.preventDefault();
-    var subscriptionUrl = e.target.parentNode.dataset.access;
+    var subscriptionUrl = e.target.parentNode.getAttribute("data-access");
     if (!e.target.checked)
-      removeSubscription(subscriptionUrl);
+    {
+       ext.backgroundPage.sendMessage(
+        {
+          type: "subscriptions.remove",
+          url: subscriptionUrl
+        });
+    }
     else
       addEnableSubscription(subscriptionUrl);
   }
 
   function onAddLanguageSubscriptionClick(e)
   {
     e.preventDefault();
-    var url = this.parentNode.dataset.access;
+    var url = this.parentNode.getAttribute("data-access");
     addEnableSubscription(url);
   }
 
   function onRemoveFilterClick()
   {
-    var filter = this.parentNode.dataset.access;
-    removeFilter(filter);
+    var filter = this.parentNode.getAttribute("data-access");
+    ext.backgroundPage.sendMessage(
+    {
+      type: "filters.remove",
+      text: filter
+    });
   }
 
   collections.popular = new Collection(
   [
     {
       id: "recommend-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.langs = new Collection(
@@ skipping 25 matching lines @@
     {
       id: "custom-list-table", 
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table", 
       onClick: onRemoveFilterClick
+    }
+  ]);
+  collections.customFilters = new Collection(
+  [
+    {
+      id: "custom-filters-table"
     }
   ]);
 
   function updateSubscription(subscription)
   {
     var subscriptionUrl = subscription.url;
     var knownSubscription = subscriptionsMap[subscriptionUrl];
     if (knownSubscription)
       knownSubscription.disabled = subscription.disabled;
     else
@@ skipping 78 matching lines @@
     }
   }
 
   function updateFilter(filter)
   {
     var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItems(filter);
-      filtersMap[filter.text] = filter
     }
     else
-    {
-      // TODO: add `filters[i].text` to list of custom filters
-    }
+      collections.customFilters.addItems(filter);
+
+    filtersMap[filter.text] = filter;
   }
 
   function loadRecommendations()
   {
     var request = new XMLHttpRequest();
     request.open("GET", "subscriptions.xml", false);
     request.addEventListener("load", function()
     {
       var list = document.getElementById("subscriptionSelector");
       var docElem = request.responseXML.documentElement;
@@ skipping 12 matching lines @@
         recommendation.isAdsType = false;
         recommendation.isPopular = false;
         var prefix = element.getAttribute("prefixes");
         if (prefix)
         {
           var prefix = element.getAttribute("prefixes").replace(/,/g, "_");
           subscription.title = ext.i18n.getMessage("options_language_" + prefix);
           recommendation.isAdsType = true;
         }
         else
+        {
           subscription.title = element.getAttribute("specialization");
-        
-        if (element.getAttribute("popular"))
           recommendation.isPopular = true;
+        }
 
         recommendationsMap[subscription.url] = recommendation;
         updateSubscription(subscription);
       }
     }, false);
     request.send(null);
+  }
+
+  function onClick(e)
+  {
+    var element = e.target;
+    while (true)
+    {
+      if (!element)
+        return;
+
+      if (element.hasAttribute("data-action"))
+        break;
+
+      element = element.parentElement;
+    }
+
+    var actions = element.getAttribute("data-action").split(",");
+    for (var i = 0; i < actions.length; i++)
+    {
+      switch (actions[i])
+      {
+        case "add-domain-exception":
+          addWhitelistedDomain();
+          break;
+        case "add-predefined-subscription":
+          var dialog = E("dialog-content-predefined");
+          var title = dialog.querySelector("h3").textContent;
+          var url = dialog.querySelector(".url").textContent;
+          addEnableSubscription(url, title);
+          document.body.removeAttribute("data-dialog");
+          break;
+        case "cancel-custom-filters":
+          E("custom-filters").classList.remove("mode-edit");
+          break;
+        case "cancel-domain-exception":
+          E("whitelisting-textbox").value = "";
+          break;
+        case "close-dialog":
+          document.body.removeAttribute("data-dialog");
+          break;
+        case "edit-custom-filters":
+          E("custom-filters").classList.add("mode-edit");
+          editCustomFilters();
+          break;
+        case "import-subscription":
+          var url = E("blockingList-textbox").value;
+          addEnableSubscription(url);
+          document.body.removeAttribute("data-dialog");
+          break;
+        case "open-dialog":
+          openDialog(element.getAttribute("data-dialog"));
+          break;
+        case "save-custom-filters":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "filters.importRaw",
+            text: E("custom-filters-raw").value
+          });
+          E("custom-filters").classList.remove("mode-edit");
+          break;
+        case "switch-tab":
+          document.body.setAttribute("data-tab",
+            element.getAttribute("data-tab"));
+          break;
+      }
+    }
   }
 
   function onDOMLoaded()
   {
     var recommendationTemplate = document.querySelector("#recommend-list-table template");
     var popularText = ext.i18n.getMessage("options_popular");
     recommendationTemplate.content.querySelector(".popular").textContent = popularText;
     var languagesTemplate = document.querySelector("#all-lang-table template");
     var buttonText = ext.i18n.getMessage("options_button_add");
     languagesTemplate.content.querySelector(".button-add span").textContent = buttonText;
 
     populateLists();
 
-    var tabList = document.querySelectorAll("#main-navigation-tabs li");
-    for (var i = 0; i < tabList.length; i++)
-    {
-      tabList[i].addEventListener("click", function(e)
-      {
-        document.body.dataset.tab = e.currentTarget.dataset.show;
-      }, false);
-    }
-
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
       if (!this.value)
         searchStyle.innerHTML = "";
       else
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
     }
 
+    function isEnterPressed(e)
+    {
+      // e.keyCode has been deprecated so we attempt to use e.key
+      if ("key" in e)
+        return e.key == "Enter";
+      return e.keyCode == 13;  // keyCode "13" corresponds to "Enter"
+    }
+
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
       type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
     });
     getDocLink("releases", function(link)
     {
       E("link-version").setAttribute("href", link);
     });
 
     getDocLink("contribute", function(link)
     {
       document.querySelector("#tab-contribute a").setAttribute("href", link);
     });
 
     updateShareLink();
 
     // Initialize interactive UI elements
+    document.body.addEventListener("click", onClick, false);
     var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
-    E("add-blocking-list").addEventListener("click", function()
-    {
-      openDialog("customlist");
-    }, false);
-    E("add-website-language").addEventListener("click", function()
-    {
-      openDialog("language");
-    }, false);
-    E("dialog-close").addEventListener("click", function()
-    {
-      delete document.body.dataset.dialog;
-    }, false);
-    E("edit-ownBlockingList-button").addEventListener("click", editCustomFilters, false);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
-    E("whitelisting").addEventListener("click", function(e)
-    {
-      var id = e.target.id;
-      if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
-        addWhitelistedDomain();
-      else if (id == "whitelisting-cancel-button")
-        E("whitelisting-textbox").value = "";
-    }, false);
-    E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false);
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
-      // e.keyCode has been deprecated so we attempt to use e.key
-      // keyCode "13" corresponds to "Enter"
-      if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
+      if (isEnterPressed(e))
         addWhitelistedDomain();
     }, false);
-    E("import-blockingList-button").addEventListener("click", function()
-    {
-      var url = E("blockingList-textbox").value;
-      addEnableSubscription(url);
-      delete document.body.dataset.dialog;
+
+    // Advanced tab
+    var filterTextbox = document.querySelector("#custom-filters-add input");
+    placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeholder");
+    filterTextbox.setAttribute("placeholder", placeholderValue);
+    function addCustomFilters()
+    {
+      var filterText = filterTextbox.value;
+      ext.backgroundPage.sendMessage(
+      {
+        type: "filters.add",
+        text: filterText
+      });
+      filterTextbox.value = "";
+    }
+    E("custom-filters-add").addEventListener("submit", function(e)
+    {
+      e.preventDefault();
+      addCustomFilters();
     }, false);
+    var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
   }
 
   function openDialog(name)
   {
-    document.body.dataset.dialog = name;
+    document.body.setAttribute("data-dialog", name);
   }
 
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
     recommendationsMap = Object.create(null);
 
     // Empty collections and lists
     for (var property in collections)
@@ skipping 54 matching lines @@
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
   }
 
   function editCustomFilters()
   {
-    //TODO: NYI
+    var customFilterItems = collections.customFilters.items;
+    var filterTexts = [];
+    for (var i = 0; i < customFilterItems.length; i++)
+      filterTexts.push(customFilterItems[i].text);
+    E("custom-filters-raw").value = filterTexts.join("\n");
   }
 
   function getAcceptableAdsURL(callback)
   {
     ext.backgroundPage.sendMessage(
     {
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
     },
     function(value)
@@ skipping 20 matching lines @@
       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 removeFilter(filter)
-  {
-    ext.backgroundPage.sendMessage(
-    {
-      type: "filters.remove",
-      text: filter
-    });
-  }
-
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
         updateFilter(filter);
         updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
         var knownFilter = filtersMap[filter.text];
         collections.whitelist.removeItem(knownFilter);
+        collections.customFilters.removeItem(knownFilter);
         delete filtersMap[filter.text];
         updateShareLink();
         break;
     }
   }
 
   function onSubscriptionMessage(action, subscription)
   {
     switch (action)
     {
@@ skipping 26 matching lines @@
           }
           updateShareLink();
         });
         break;
       case "title":
         // TODO: NYI
         break;
     }
   }
 
-  function showAddSubscriptionDialog(subscription)
-  {
-    E("blockingList-textbox").value = subscription.url;
-    openDialog("customlist");
-  }
-
   function onShareLinkClick(e)
   {
     e.preventDefault();
 
     getDocLink("share-general", function(link)
     {
       openSharePopup(link);
     });
   }
 
@@ skipping 27 matching lines @@
     for (var i = 0; i < shareResources.length; i++)
       checkShareResource(shareResources[i], onResult);
   }
 
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
         if (message.action == "addSubscription")
-          showAddSubscriptionDialog(message.args[0]);
+        {
+          var subscription = message.args[0];
+          var dialog = E("dialog-content-predefined");
+          dialog.querySelector("h3").textContent = subscription.title || "";
+          dialog.querySelector(".url").textContent = subscription.url;
+          openDialog("predefined");
+        }
+        else if (message.action == "error")
+        {
+          alert(message.args.join("\n"));
+        }
         break;
       case "filters.listen":
         onFilterMessage(message.action, message.args[0]);
         break;
       case "subscriptions.listen":
         onSubscriptionMessage(message.action, message.args[0]);
         break;
     }
   });
 
   ext.backgroundPage.sendMessage(
   {
     type: "app.listen",
-    filter: ["addSubscription"]
+    filter: ["addSubscription", "error"]
   });
   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);
 })();