Fixes #35 - Progressively enhance install button with appropriate links and text

static/js/index.js

Index: static/js/index.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,70 @@
+"use strict";
+
+(function()
+{
+  var supportedPlatforms = {

[saroyanm, 2018/03/23 19:08:37]

I wonder what SEO implications this can introduce, as we used to have a separate
page for each browser, but now we are introducing 1 page instead?
Are we going to generate pages for each platform, or introduce redirections ?
Maybe having a separate page for each browser can help us with SEO ? 
I assume all this was discussed, so would be great to send a link or, maybe we
can discuss the implications.

[ire, 2018/03/26 10:23:01]

This is a good point. As I wasn't part of the initial conversations around the
abp redesign, I'm not aware of if this was discussed. Julian may be able to
answer your question or, if not, we can bring this up in the issue. 

+    // Desktop browsers
+    "chrome": {
+      installer: "https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb",

[saroyanm, 2018/03/23 19:08:37]

Seems like here we also don't have inline installation, same as here ->
https://codereview.adblockplus.org/29722640/diff/29723573/pages/download.tmpl...

[ire, 2018/03/26 10:23:01]

Done.

+      label: "Chrome"
+    },
+    "opera": {
+      installer: "https://addons.opera.com/extensions/details/opera-adblock/?display=en-US",
+      label: "Opera"
+    },
+    "yandexbrowser": {
+      installer: "https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb",
+      label: "Yandex Browser"
+    },
+    "msie": {
+      installer: "https://update.adblockplus.org/latest/adblockplusie.exe",
+      label: "Internet Explorer"
+    },
+    "msedge": {
+      installer: "https://www.microsoft.com/store/p/adblock-plus/9nblggh4r9nz",
+      label: "Micrsoft Edge"
+    },
+    "firefox": {
+      installer: "https://update.adblockplus.org/latest/adblockplusfirefox.xpi",
+      label: "Firefox"
+    },
+    "safari": {
+      installer: "https://update.adblockplus.org/latest/adblockplussafari.safariextz",
+      label: "Safari"
+    },
+    "maxthon": "",
+
+    // Mobile platforms
+    "ios": {
+      installer: "https://eyeo.to/adblockbrowser/ios/abp-website",

[saroyanm, 2018/03/23 19:08:37]

We might want to use this or similar redirection links in the download page I
assume, relevant ->
https://codereview.adblockplus.org/29722640/diff/29729581/pages/download.tmpl...

[ire, 2018/03/26 10:23:01]

Ack.

+      label: "iOS",
+    },
+    "android": {
+      installer: "https://eyeo.to/adblockbrowser/android/abp-website",
+      label: "Android"
+    }
+  };
+
+  function setupHeroDownloadButton()
+  {
+    var heroDownloadButton = document.getElementById("hero-download-button");
+    var detectedPlatform;
+
+    for (var key in supportedPlatforms) if (bowser[key]) detectedPlatform = key;
+
+    if (!detectedPlatform) return;
+
+    document.body.classList.add(detectedPlatform);
+
+    if (detectedPlatform === "maxthon") return;
+    
+    heroDownloadButton.href = supportedPlatforms[detectedPlatform].installer;
+    heroDownloadButton.textContent = document
+      .getElementById("hero-download-button-template")
+      .innerHTML
+      .replace("browser", supportedPlatforms[detectedPlatform].label);
+  }
+
+  if (bowser) setupHeroDownloadButton();
+
+}());