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,75 @@
+"use strict";
+
+(function()
+{
+  var supportedPlatforms = {
+
+    // Desktop browsers
+    "chrome": {
+      installer: "https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb",
+      label: "Chrome"

[juliandoucette, 2018/04/06 12:35:23]

Are these labels still being used?

[ire, 2018/04/06 13:21:49]

Good catch, forgot about that! Removed.

+    },
+    "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",
+      label: "iOS",
+    },
+    "android": {
+      installer: "https://eyeo.to/adblockbrowser/android/abp-website",
+      label: "Android"
+    }
+  };
+
+  function setupHeroDownloadButton()
+  {
+    var detectedPlatform = Object.keys(supportedPlatforms).find(hasOwnProperty.bind(bowser));

[juliandoucette, 2018/04/06 12:35:23]

NIT: Line is too long?

[ire, 2018/04/06 13:21:49]

Done.

+
+    if (!detectedPlatform) return;
+
+    document.body.classList.add(detectedPlatform);
+
+    if (detectedPlatform === "maxthon") return;

[juliandoucette, 2018/04/06 12:35:23]

NIT: Code style says we should use == :(

[ire, 2018/04/06 13:21:49]

I can't seem to find where it says that?

(Done anyway)

[juliandoucette, 2018/04/06 16:29:16]

It's kindof obscure:

ABP Coding style > General > 1.1 "Follow the Mozilla Coding Style's general
practices and its naming and formatting rules."

Mozilla Coding Style > Naming and formatting code > Operators "In JavaScript, ==
is preferred to ===."

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style...

[ire, 2018/04/09 09:24:01]

Acknowledged.

+
+    var heroDownloadButton = document.getElementById("hero-download-button");
+    heroDownloadButton.href = supportedPlatforms[detectedPlatform].installer;
+    heroDownloadButton.innerHTML = document
+      .getElementById("hero-download-button-template")
+      .innerHTML;
+    
+    heroDownloadButton.addEventListener("click", function(event)
+    {
+      if (!chrome) return;

[juliandoucette, 2018/04/06 12:35:23]

It's possible for chrome to exist without webstore (e.g. when running the test
server or a modified version of chrome). It's also possible for
chrome.webstore.install to fail/error (e.g. because the webstore has invalidated
our domain or the user canceled the install).

We may decide to handle the success or failure of the install separately (I'm
sure Jeen would be interested).

I suggest that we check chrome and chrome.webstore before preventing the default
behaviour of this event.

[ire, 2018/04/06 13:21:49]

Agreed.
Agreed, done.

+      event.preventDefault();
+      chrome.webstore.install();
+    });
+  }
+
+  if (bowser) setupHeroDownloadButton();
+
+}());