issue 1526 - Implement new options page design for Chrome/Opera/Safari

options.js

+/*
+ * This file is part of Adblock Plus <http://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/>.
+ */
+
+(function()
+{
+  function onDOMLoaded()
+  {
+    initTabs();
+    initModal();
+    initWhitelist();
+  }
+  
+  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 (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"));
+  }
+  
+  function initModal()
+  {
+    var openModal = function()
+    {
+      E("modal").style.visibility = "visible";
+    };
+    var closeModal = function()
+    {
+      E("modal").style.visibility = "hidden";
+    };
+    E("add-blocking-list").addEventListener("click", openModal, false);
+    E("add-website-language").addEventListener("click", openModal, false);
+    E("modal-close").addEventListener("click", closeModal, false);
+  }
+  
+  function initWhitelist()
+  {
+    
+  }
+  
+  function getDocLink(link, callback)
+  {
+    ext.backgroundPage.sendMessage({
+      type: "app.get",
+      what: "doclink",
+      link: link
+    }, callback);
+  }
+  
+  window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
+})();