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 25 matching lines @@
   {
     textbox.setAttribute("class", "placeholder");
     textbox.value = getPlaceholderText(textbox);
   }
 
   function getPlaceholderText(textbox)
   {
     return textbox.getAttribute("placeholder");
   }
 
-  function contentLoad()

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

Please rename the function, in general the content is not yet fully loaded at
this point, so I'd rename the function to something more descriptive ex.:
initSubscriptionForm(edgeSubscription), also please pass the form element as
parameter here ex.:

initSubscriptionForm(document.getElementById("edge-subscription"));

+  function initSubscriptionForm(subscriptionElement)
   {
-    var edgeSubscription = document.getElementById("edge-subscription");

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

This will be redundant after the suggested implementation above.

-    var emailTextbox = edgeSubscription.getElementsByClassName("subscribe-textbox")[0];

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

In general I'd be fan of using queryselector because it should harm the
performance that much and will make the code more clear IMO, but I'll let it up
to you to keep it like this or change to queryselectors while old code on
homepage looks terrible, because of migration and old support reuqirements.

[Oleksandr, 2015/09/30 08:17:03]

To me the querySelector wouldn't be any more understandable nor faster. So I'll
just leave this as is.

+    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(textbox))
+        if (emailTextbox.value == getPlaceholderText(emailTextbox))
         {
           emailTextbox.value = "";
           emailTextbox.setAttribute("class", "");
         }
       }, false);
 
       addListener(emailTextbox, "blur", function()
       {
         if (!emailTextbox.value)
           addPlaceholder(emailTextbox);
       }, false);
     }
 
-    var subscriptionForm = document.getElementById("edge-subscription").

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

You have the "edge-subscription" element already, no need to get it from
document again.

-                         getElementsByTagName("form")[0];
-    addListener(subscriptionForm, "submit", function()
+    var formElement = subscriptionElement.getElementsByTagName("form")[0];
+    addListener(formElement, "submit", function()
     {
-      var formElement = subscriptionForm;

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

I think this assignment is redundant.

       if (!window.XMLHttpRequest)
       {
         formElement.submit();
         return false;
       }
 
-      var pathArray = window.location.pathname.split("/");
-      var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);

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

After implementing the changes in index.tmpl you can get parameters from input
boxes ex.:
var inputs = subscriptionForm.getElementsByTagName("input");
var params = "";
for (var i = 0; i < inputs.length; i++)
{
  if (params)
    params += "&";
  params += inputs[i].name + "=" + encodeURIComponent(inputs[i].value);
}

-      params += "&lang=" + pathArray[1];
-      params += "&product=" + "edge";
+      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", "/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");
@@ skipping 41 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();
 })();