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;
+}
+
+ol
+{
+  font-size: 16px;
+  padding-left: 60px;
+}
+
+ol li
+{
+  margin-bottom: 14px;
+}
+
+#content h3.subscribe-header
+{
+  font-size: 18px;
+  margin-bottom: 14px;
+}
+
+.subscribe-description
+{
+  margin: 14px 0px 20px 0px;
+}
+
+.button-community-wrapper
+{
+  display: inline-block;
+  text-align: center;
+  border: solid 1px #4CAE4C;
+  border-radius: 3px;
+  background-color: #5CB85C;
+  margin: 10px 0px 30px 0px;
+}
+
+.button-community-wrapper a
+{
+  display: block;
+  padding: 25px 20px;
+  color: #FFFFFF;
+  font-weight: bold;
+  font-size: 14px;
+  text-decoration: none; 
+}
+
+#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.

+}
+
+#subscribe-textbox.placeholder
+{
+  color: #B5B4B0;
+}
+
+#subscribe-button
+{
+  border: solid 1px #357EBD;
+  border-radius: 3px;
+  background-color: #428BCA;
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: bold;
+  min-width: 146px;
+  height: 44px;
+}
+
+#subscribe-button span
+{
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.disclaimer
+{
+  display: none;
+  font-size: 14px;
+  color: #D00;
+  border: 1px solid #D00;
+  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
+{
+  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.

+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);
+    }, useCapture);
+  }
+  else
+  {
+    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;
+    }
+    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);
+      }
+    });
+  }
+}
+
+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];
+}
+
+function contentLoad()
+{
+  var emailTextbox = document.getElementById("subscribe-textbox");
+
+  // textbox placeholder implementation for browsers
+  // that don't support placeholder attribute
+  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;
+    }
+
+    // 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 params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);
+    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)
+      {
+        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");
+      }
+    }, false);
+    request.send(params);
+  }, false);
+}
+addListener(document, "DOMContentLoaded", contentLoad, false);
+--></script>