Issue 2213 - landing page for mobile beta launch

adblock-browser-head.html

-<meta name="title" content="Adblock Browser Beta Launch" />
-<meta property="og:title" content="Adblock Browser Beta Launch" />
-<meta name="description" content="Want Adblock Browser for your smartphone or tablet? Join the Adblock Browser for Android Beta Google+ community." />
-<meta property="og:description" content="Want Adblock Browser for your smartphone or tablet? Join the Adblock Browser for Android Beta Google+ community." />
-
 <style type="text/css">
 #content *
 {
   box-sizing: content-box;
 }
 
 #content h1
 {
   margin-bottom: 28px;
 }
@@ skipping 42 matching lines @@
 
 #subscribe-textbox
 {
   border: solid 1px #B5B4B0;
   margin-right: 20px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 16px;
   width: 276px;
   line-height: 44px;
-  height: 44px;

[Thomas Greiner, 2015/04/23 10:47:11]

You don't need to explicitly specify the height if you're using line-height.

[saroyanm, 2015/04/23 13:07:59]

It's hack for IE8 unfortunately without specifying height explicitly the textbox
size is staying same as default.

[Thomas Greiner, 2015/04/23 13:38:00]

As mentioned in an earlier comment, please add comments to the IE8 specific
parts.

In this case it was non-obvious that it needs to be there. By adding a comment
explaining that it's required for IE8 we can make sure that this code won't be
changed unless we decide to drop support for it.

+  height: 44px; /* IE 8 */
 }
 
 #subscribe-textbox.placeholder
 {
   color: #B5B4B0;
 }
 
 #subscribe-button
 {
   border: solid 1px #357EBD;
@@ skipping 21 matching lines @@
   border-radius: 5px;
   padding: 5px;
   margin-top: 30px;
 }
 
 html[lang="fr"] .disclaimer.lang-fr
 {
   display: block;
 }
 
-#subscribe-form .empty-label, #subscribe-form .sucess-label,
-#response-error, #subscribe-form .invalid-label, #email-placeholder,
-#subscribe-form.success input, #subscribe-form.success button
+#subscribe-form .sucess-label, #response-error,
+#subscribe-form .invalid-label, #subscribe-form.success input,
+#subscribe-form.success button
 {
   display: none;
 }
 
-#subscribe-form .empty-label,
 #subscribe-form .invalid-label
 {
   margin-top: 30px;
 }
 
 #subscribe-form.success .sucess-label,
-#subscribe-form.empty .empty-label,
 #subscribe-form.invalid .invalid-label,
 #subscribe-form.error #response-error
 {
   display: block;
 }
 </style>
 
-<script type="text/javascript"><!--

[Thomas Greiner, 2015/04/23 10:47:11]

It looks like `<!--` and `-->` are special exceptions in JavaScript engines
because usually they would produce syntax errors. Therefore let's use the safer
`//<![CDATA[` and `//]]>` here to make sure that no exceptions are being thrown
on any platform because we just need to make sure that it's valid XHTML (see
also http://stackoverflow.com/a/1508005).

[saroyanm, 2015/04/23 13:07:59]

Done.

+<script type="text/javascript">
+//<![CDATA[
 function addListener(obj, type, listener, useCapture)
 {
   if ("addEventListener" in obj)
   {
     obj.addEventListener(type, function(ev)
     {
-      ev.preventDefault();

[Thomas Greiner, 2015/04/23 10:47:11]

The default behavior is not to prevent the default behavior so let's only call
`preventDefault` if the listener returns `false`.

[saroyanm, 2015/04/23 13:07:59]

Done.

-      listener(ev);
+      if (listener(ev) === false)
+        ev.preventDefault();
     }, useCapture);
   }
   else
   {
+    // IE 8
     if (type == "DOMContentLoaded")
       type = "readystatechange";
 
-    // XMLHttpRequest missing attachEvent method In IE 8
-    if (obj instanceof XMLHttpRequest && type == "load")

[Thomas Greiner, 2015/04/23 10:47:11]

It's more useful if you'd make this more generic:

type = "on" + type;

if ("attachEvent" in obj)
{
  obj.attachEvent(type, function()
  {
    if (document.readyState == "complete" && listener(event) === false)
      event.returnValue = false;
  });
}

obj[type] = listener;

[saroyanm, 2015/04/23 13:07:59]

Done.

-    {
-      obj.onreadystatechange = listener;
-      return;
+    type = "on" + type;
+    if ("attachEvent" in obj)
+    {
+      obj.attachEvent(type, function()
+      {
+        if (document.readyState == "complete" && listener(event) === false)
+          event.returnValue = false;
+      });
     }
-    obj.attachEvent("on" + type, function()
-    {
-      if (document.readyState == "complete")
-      {
-        event.returnValue = false;

[Thomas Greiner, 2015/04/23 10:47:11]

The default return value is `true` so let's only set `event.returnValue` if the
listener returns `false`.

[saroyanm, 2015/04/23 13:07:59]

Done.

-        listener(event);
-      }
-    });
+    else
+    {
+      obj[type] = listener;
+    }
   }
 }
 
 function addPlaceholder(textbox)
 {
   textbox.setAttribute("class", "placeholder");
   textbox.value = getPlaceholderText();
 }
 
 function getPlaceholderText()
 {
-  var text = "innerText" in document.body ? "innerText" : "textContent";
-  return document.getElementById("email-placeholder")[text];
+  return document.getElementById("subscribe-textbox").getAttribute("placeholder");
 }
 
 function contentLoad()
 {
   var emailTextbox = document.getElementById("subscribe-textbox");
 
-  // textbox placeholder implementation for browsers
-  // that don't support placeholder attribute
+  // 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("subscribe-form"), "submit", function()
   {
     var formElement = document.getElementById("subscribe-form");
-    if (!emailTextbox.value || emailTextbox.value == getPlaceholderText())
-    {
-      formElement.setAttribute("class", "empty");
-      return;
+    if (!window.XMLHttpRequest)
+    {
+      formElement.submit();
+      return false;
     }
 
-    // Simple email validation for browsers
-    // that don't support input of type email
-    var input = document.createElement("input");
-    input.setAttribute("type", "email");
-    if (input.type !== "email" 
-        && !(/(.+)@(.+){2,}\.(.+){2,}/.test(emailTextbox.value)))
-    {
-      formElement.setAttribute("class", "invalid");
-      return;
-    }
-
-    if (!window.XMLHttpRequest)
-    {
-      formElement.submit();
-      return;
-    }
-
+    var pathArray = window.location.pathname.split("/");
     var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);
+    params += "&lang=" + pathArray[1];
     var request = new XMLHttpRequest();
     request.open("POST", formElement.action, true);
     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-    request.setRequestHeader("Content-length", params.length);
-    addListener(request, "load", function()
-    {
-      if (request.status >= 200 && request.status < 300)
+    addListener(request, "readystatechange", function()
+    {
+      if (request.readyState == 4)
       {
-        formElement.setAttribute("class", "success");
-      }
-      else
-      {
-        var text = "innerText" in document.body ? "innerText" : "textContent";

[Thomas Greiner, 2015/04/23 10:47:11]

The variable name is implying that this is a text value so I'd suggest calling
it "textProperty".

[saroyanm, 2015/04/23 13:07:59]

Done.

-        document.getElementById("response-error")[text] = request.statusText;
-        formElement.setAttribute("class", "error");
+        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);
 }
 addListener(document, "DOMContentLoaded", contentLoad, false);
---></script>
+//]]>
+</script>