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();
+      }, 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(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"));

+  {
+    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.

+
+    // IE9 + Safari iOS
+    if (!("placeholder" in document.createElement("input"))
+        && !emailTextbox.value)
+    {
+      addPlaceholder(emailTextbox);
+      addListener(emailTextbox, "focus", function()
+      {
+        if (emailTextbox.value == getPlaceholderText(textbox))
+        {
+          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 = 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 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");
+          }
+          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")
       container.className = visibleTab || getDefaultTab();
     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");
     var ua = content.className.match(/ua\-([^\s]+)/);
     visibleTab = ua && ua[1] || "firefox";
     return visibleTab;
   }
-  
+
   function init()
   {
     container = document.getElementById("more-container");
+    contentLoad();
   }
-  
+
   init();
 })();