Issue 2844 - Create Microsoft Edge coming soon landing page

static/js/index.js

 (function()
 {
   function addListener(obj, type, listener, useCapture)
   {
     if ("addEventListener" in obj)
     {
       obj.addEventListener(type, function(ev)
       {
         if (listener(ev) === false)
           ev.preventDefault();
@@ skipping 17 matching lines @@
       else
       {
         obj[type] = listener;
       }
     }
   }
 
   function addPlaceholder(textbox)
   {
     textbox.setAttribute("class", "placeholder");
-    textbox.value = getPlaceholderText();
+    textbox.value = getPlaceholderText(textbox);
   }
 
-  function getPlaceholderText()
+  function getPlaceholderText(textbox)
   {
-    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");
+    return textbox.getAttribute("placeholder");
   }
 
-  function contentLoad()
+  function initSubscriptionForm(subscriptionElement)
   {
-    var emailTextbox = document.getElementById("edge-subscription").
-                                getElementsByClassName("subscribe-textbox")[0];
+    var emailTextbox = subscriptionElement.querySelectorAll(".subscribe-textbox")[0];
 
     // IE9 + Safari iOS
     if (!("placeholder" in document.createElement("input"))
         && !emailTextbox.value)
     {
       addPlaceholder(emailTextbox);
       addListener(emailTextbox, "focus", function()
       {
-        if (emailTextbox.value == getPlaceholderText())
+        if (emailTextbox.value == getPlaceholderText(emailTextbox))
         {
           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 = subscriptionElement.getElementsByTagName("form")[0];
+    addListener(formElement, "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 inputs = formElement.getElementsByTagName("input");
+      var params = "";
+      for (var i = 0; i < inputs.length; i++)
+      {
+        if (params)
+          params += "&";
+        params += inputs[i].name + "=" + encodeURIComponent(inputs[i].value);
+      }      
       var request = new XMLHttpRequest();
-      request.open("POST", formElement.action, true);
+      request.open("POST", "/submitEmail", 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)
@@ skipping 39 matching lines @@
   {
     var content = document.getElementById("content");
     var ua = content.className.match(/ua\-([^\s]+)/);
     visibleTab = ua && ua[1] || "firefox";
     return visibleTab;
   }
 
   function init()
   {
     container = document.getElementById("more-container");
-    contentLoad();
+    initSubscriptionForm(document.getElementById("edge-subscription"));
   }
 
   init();
 })();