Issue 2844 - Create Microsoft Edge coming soon landing page

static/js/index.js

Index: static/js/index.js
===================================================================
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,8 +1,126 @@
 (function()
 {
+  function addListener(obj, type, listener, useCapture)
+  {
+    if ("addEventListener" in obj)
+    {
+      obj.addEventListener(type, function(ev)
+      {
+        if (listener(ev) === false)
+          ev.preventDefault();
+      }, useCapture);
+    }
+    else
+    {
+      // IE 8
+      if (type == "DOMContentLoaded")
+        type = "readystatechange";
+
+      type = "on" + type;
+      if ("attachEvent" in obj)
+      {
+        obj.attachEvent(type, function()
+        {
+          if (document.readyState == "complete" && listener(event) === false)
+            event.returnValue = false;
+        });
+      }
+      else
+      {
+        obj[type] = listener;
+      }
+    }
+  }
+
+  function addPlaceholder(textbox)
+  {
+    textbox.setAttribute("class", "placeholder");
+    textbox.value = getPlaceholderText();
+  }
+
+  function getPlaceholderText()
+  {
+    return document.getElementById("edge-subscription").

[saroyanm, 2015/09/24 14:52:04]

You can assign the element to the variable and reuse it, I think that is making
the code wonky. ex.: var edgeSubscription =
document.getElementById("edge-subscription");

+                    getElementsByClassName("subscribe-textbox")[0].
+                    getAttribute("placeholder");
+  }
+
+  function contentLoad()
+  {
+    var emailTextbox = document.getElementById("edge-subscription").
+                                getElementsByClassName("subscribe-textbox")[0];
+
+    // IE9 + Safari iOS
+    if (!("placeholder" in document.createElement("input"))
+        && !emailTextbox.value)
+    {
+      addPlaceholder(emailTextbox);
+      addListener(emailTextbox, "focus", function()
+      {
+        if (emailTextbox.value == getPlaceholderText())
+        {
+          emailTextbox.value = "";
+          emailTextbox.setAttribute("class", "");
+        }
+      }, false);
+
+      addListener(emailTextbox, "blur", function()
+      {
+        if (!emailTextbox.value)
+          addPlaceholder(emailTextbox);
+      }, false);
+    }
+
+    addListener(document.getElementById("edge-subscription").

[saroyanm, 2015/09/24 14:52:05]

please assign form element to variable and reuse it.

+                         getElementsByTagName("form")[0], "submit", function()
+    {
+      var formElement = document.getElementById("edge-subscription").
+                                 getElementsByTagName("form")[0];
+      if (!window.XMLHttpRequest)
+      {
+        formElement.submit();
+        return false;
+      }
+
+      var pathArray = window.location.pathname.split("/");
+      var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);
+      params += "&lang=" + pathArray[1];

[saroyanm, 2015/09/24 14:52:04]

Please note that this will return empty string for users who will visit the
website with MS Edge, because with our setup the language and plaform url is not
being show for users visiting adblockplus.org, so probably we can't determine
the language that way, I don't have strong opinion on this, but maybe we can get
the locale using:
document.documentElement.lang

[Oleksandr, 2015/09/25 00:35:45]

I don't have a strong opinion on this either, but this parameter is ignored
anyway. So I think it is fine as is.

[saroyanm, 2015/09/29 09:58:38]

IMO make sense to remove it or provide correct implementation in case in future
we will provide email dependent on page locale, commented in your new patch
regarding updating this implementation.

+      params += "&product=" + "edge";

[saroyanm, 2015/09/24 14:52:05]

Where is this coming from ? I can't find reference to this new parameter in any
related ticket.

[Oleksandr, 2015/09/25 00:35:45]

https://hg.adblockplus.org/sitescripts/rev/19391de96062#l3.30

[saroyanm, 2015/09/29 09:58:38]

Thanks for the reference, Updated the ticket accordingly.

+      var request = new XMLHttpRequest();
+      request.open("POST", formElement.action, true);
+      request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      addListener(request, "readystatechange", function()
+      {
+        if (request.readyState == 4)
+        {
+          if (request.status >= 200 && request.status < 300)
+          {
+            formElement.setAttribute("class", "success");
+          }
+          else if (request.status == 400)
+          {
+            formElement.setAttribute("class", "invalid");
+          }
+          else
+          {
+            var errorWrapper = document.getElementById("response-error");
+            if ("textContent" in errorWrapper)
+              errorWrapper.textContent = request.statusText;
+            else // IE8
+              errorWrapper.innerText = request.statusText;
+
+            formElement.setAttribute("class", "error");
+          }
+        }
+      }, false);
+      request.send(params);
+      return false;
+    }, false);
+  }
+
   var visibleTab;
   var container;
-  
+
   window.toggleMore = function()
   {
     if (container.className == "hidden")
@@ -10,14 +128,14 @@
     else
       container.className = "hidden";
   }
-  
+
   window.showTab = function(button)
   {
     var id = button.id.substr(5);
     container.className = id;
     visibleTab = id;
   }
-  
+
   function getDefaultTab()
   {
     var content = document.getElementById("content");
@@ -25,11 +143,12 @@
     visibleTab = ua && ua[1] || "firefox";
     return visibleTab;
   }
-  
+
   function init()
   {
     container = document.getElementById("more-container");
+    contentLoad();
   }
-  
+
   init();
 })();