Issue 2844 - Create Microsoft Edge coming soon landing page

includes/index.tmpl

 title=Adblock Plus - Surf the web without annoying ads!
 noheading=True
 localefile=index
 
 {#
  # This file is part of the Adblock Plus website,
  # Copyright (C) 2006-2015 Eyeo GmbH
  #
  # Adblock Plus is free software: you can redistribute it and/or modify
  # it under the terms of the GNU General Public License version 3 as
@@ skipping 15 matching lines @@
 
 <link href="https://adblockplus.org/" rel="canonical">
 <link href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" rel="chrome-webstore-item">
 <meta content="product" property="og:type">
 <meta content="https://adblockplus.org/img/adblockplus_promo.png" property="og:image">
 <meta content="https://adblockplus.org/" property="og:url">
 <meta content="{{"Adblock Plus - Surf the web without annoying ads!"|translate("s1")}}" name="title">
 <meta content="{{"Adblock Plus is the most popular adblocker available for Firefox, Chrome, Opera, Safari, Android and Internet Explorer. Block all annoying ads all over the web: remove video ads on YouTube, block Facebook ads, get rid of pop-ups and much more. On Google Chrome, Adblock Plus is one of the fastest growing extensions ever. Our adblock for Chrome is being used by 10 million people. Download online for free now!"|translate("s2")}}" name="description">
 <meta content="{{"Adblock Plus - Surf the web without annoying ads!"|translate("s1")}}" property="og:title">
 <meta content="{{"Adblock Plus is the most popular adblocker available for Firefox, Chrome, Opera, Safari, Android and Internet Explorer. Block all annoying ads all over the web: remove video ads on YouTube, block Facebook ads, get rid of pop-ups and much more. On Google Chrome, Adblock Plus is one of the fastest growing extensions ever. Our adblock for Chrome is being used by 10 million people. Download online for free now!"|translate("s2")}}" property="og:description">
+<script type="text/javascript">

[saroyanm, 2015/08/20 20:54:53]

Please move script to index.js

+//<![CDATA[
+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();
+}
+
+function getPlaceholderText()
+{
+  return document.getElementById("subscribe-textbox").getAttribute("placeholder");
+}
+
+function contentLoad()
+{
+  var emailTextbox = document.getElementById("subscribe-textbox");
+
+  // 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 (!window.XMLHttpRequest)
+    {
+      formElement.submit();
+      return false;
+    }
+
+    var pathArray = window.location.pathname.split("/");
+    var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);
+    params += "&lang=" + pathArray[1];
+    params += "&edge=" + "true";

[saroyanm, 2015/08/20 20:54:53]

We were not passing parameter for Adblock Browser subscribers. Should we also
update Adblock Browser Beta form ?

[Oleksandr, 2015/08/26 00:19:28]

No. Adblock Browser is default.

+    var request = new XMLHttpRequest();
+    request.open("POST", formElement.action, 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);
+}
+addListener(document, "DOMContentLoaded", contentLoad, false);
+//]]>
+</script>
+
 </head>
 
 
 <div itemscope="itemscope" itemtype="http://schema.org/SoftwareApplication">
   <section id="main">
     <div id="summary">
       <h1 itemprop="name">{{"Adblock Plus"|translate("s5")}}</h1>
       <h2 itemprop="description">{{"Surf the web without annoying ads!"|translate("s6")}}</h2>
 
       <ul id="features">
         <li itemprop="featureList">
           <div class="sprite"></div>
 {{"Can block tracking, malware domains, banners, pop-ups and video ads - even on Facebook and YouTube"|translate("s7")}}
         </li>
         <li itemprop="featureList">
           <div class="sprite"></div>
 {{"Unobtrusive ads aren't being blocked in order to support websites (<a href=\"acceptable-ads\">configurable</a>)"|translate("s8")}}
         </li>
         <li class="emphasized" id="feature-free" itemprop="featureList">
           <div class="sprite"></div>
 {{"It's free!"|translate("s9")}}
           <span class="license-note" style="display: inline">{{"(<a href=\"https://www.gnu.org/licenses/translations.fr.html\">GPLv3</a>)"|translate("s10")}}</span>
         </li>
         <li id="feature-maxthon" itemprop="featureList">
           <div class="sprite"></div>
 {{"Integrated by default in"|translate("s11")}} <a href="http://www.maxthon.com/" target="_blank">{{"Maxthon Cloud Browser"|translate("s12")}}</a>
         </li>
+        <li id="feature-edge" itemprop="featureList">
+          <p class="subscribe-description">
+            {{"Get a heads-up prior to the launch!"|translate("ios-subscription-description")}}

[saroyanm, 2015/08/20 20:54:53]

I assume the text was copy pasted, please change the message ID it shouldn't be
"ios-subscription-description"
Same goes for other messageIDs below.

[Oleksandr, 2015/08/26 00:19:28]

Done. I assumed we could reuse the ios translations, but it doesn't look like
that's possible.

+          </p>
+          <form id="subscribe-form" accept-charset="utf-8" action="/submitEmail" method="post">

[saroyanm, 2015/08/20 20:54:54]

I'd not use some more edge specific IDs, probably we can have some other comming
soon landing pages, so please don't make it to generic.

+            <input id="subscribe-textbox" type="email" name="email" placeholder="{{"Your email address"|translate("ios-subscription-input-placeholder")}}" required />
+            <button id="subscribe-button" type="submit"><span>{{"Notify me"|translate("ios-subscription-button")}}</span></button>
+            <span class="sucess-label">
+              {{"A confirmation email has been sent. Please check your email and click the confirmation link."|translate("subscription-message-success")}}
+            </span>
+            <span class="invalid-label">
+              {{"Please enter a valid email address."|translate("subscription-message-invalid-email")}}
+            </span>
+            <span id="response-error">
+            </span>
+          </form>
+      </li>
       </ul>
     </div>
 
     <div id="install">
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplusfirefox.xpi" id="install-firefox">{{"Install for Firefox"|translate("s13")}}</a>
       <a class="install-button" href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" id="install-chrome" onclick="chrome.webstore.install(); return false;">{{"Install for Chrome"|translate("s14")}}</a>
       <a class="install-button" href="https://addons.opera.com/extensions/details/opera-adblock/?display=en-US" id="install-opera">{{"Install for Opera"|translate("s15")}}</a>
       <a class="install-button" href="android-install" id="install-android">{{"Install for Android"|translate("s16")}}</a>
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplusie.exe" id="install-internet-explorer">{{"Install for Internet Explorer"|translate("s17")}}</a>
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplussafari.safariextz" id="install-safari">{{"Install for Safari"|translate("s18")}}</a>
       <a class="install-button" href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" id="install-yandex-browser" onclick="chrome.webstore.install(); return false;">{{"Install for Yandex Browser"|translate("s19")}}</a>
+      <div id="edge-other-browsers">{{"Download Adblock Plus for another browser:"|translate("edge-other-browser")}}</div>

[saroyanm, 2015/08/20 20:54:53]

Pleaase don't make IDs for current element edge specific.

       <ul>
         <li>
           <a class="sprite" href="firefox" id="platform-firefox" title="{{"Adblock Plus for Firefox"|translate("s20")}}"></a>
         </li>
         <li>
           <a class="sprite" href="chrome" id="platform-chrome" title="{{"Adblock Plus for Chrome"|translate("s21")}}"></a>
         </li>
         <li>
           <a class="sprite" href="android" id="platform-android" title="{{"Adblock Plus for Android"|translate("s22")}}"></a>
         </li>
         <li>
           <a class="sprite" href="opera" id="platform-opera" title="{{"Adblock Plus for Opera"|translate("s23")}}"></a>
         </li>
         <li>
           <a class="sprite" href="internet-explorer" id="platform-internet-explorer" title="{{"Adblock Plus for Internet Explorer"|translate("s24")}}"></a>
         </li>
         <li>
           <a class="sprite" href="safari" id="platform-safari" title="{{"Adblock Plus for Safari"|translate("s25")}}"></a>
         </li>
         <li>
           <a class="sprite" href="yandex-browser" id="platform-yandex-browser" title="{{"Adblock Plus for Yandex Browser"|translate("s26")}}"></a>
         </li>
         <li>
           <a class="sprite" href="maxthon" id="platform-maxthon" title="{{"Adblock Plus for Maxthon"|translate("s27")}}"></a>
         </li>
+        <li>
+          <a class="sprite" href="edge" id="platform-edge" title="{{"Adblock Plus for Microsoft Edge"|translate("abp-microsoft-edge")}}"></a>
+        </li>
       </ul>
     </div>
   </section>
 
   <div id="adblock-browser-notification">
     {{'Be the first to experience the new Adblock Browser for smartphones and tablets. <a href="adblock-browser">Get it here.</a>'|translate("adblock-browser-notification")}}
   </div>
   <div class="disclaimer lang-fr">
     En téléchargeant le logiciel Adblock Plus vous acceptez que si vous utilisez Adblock Plus pour visiter un site Internet en violation de toute obligation ou droit de quelque nature que ce soit en relation avec ce site Internet, en aucun cas EYEO ne pourra être tenu pour responsable envers vous ou tout autre tiers pour toute perte ou dommage (y compris, sans y être limité, les dommages pour perte de chances et perte de bénéfices) découlant directement ou indirectement de votre utilisation de ce logiciel.
   </div>
   <div id="maxthon-notification">
     使用傲游云浏览器，享受最好的广告过滤体验. (内置Adblock Plus) <a href="http://www.maxthon.cn" target="_blank">下载傲游云浏览器</a>
   </div>
   <div class="warning-platform firefox">{{"It appears that you are using Mozilla Firefox."|translate("s28")}} <a href="firefox">{{"Switch to Adblock Plus for Firefox."|translate("s29")}}</a></div>
   <div class="warning-platform chrome">{{"It appears that you are using Google Chrome."|translate("s30")}} <a href="chrome">{{"Switch to Adblock Plus for Chrome."|translate("s31")}}</a></div>
   <div class="warning-platform android">{{"It appears that you are using Android."|translate("s32")}} <a href="android">{{"Switch to Adblock Plus for Android."|translate("s33")}}</a></div>
   <div class="warning-platform opera">{{"It appears that you are using Opera."|translate("s34")}} <a href="opera">{{"Switch to Adblock Plus for Opera."|translate("s35")}}</a></div>
   <div class="warning-platform internet-explorer">{{"It appears that you are using Internet Explorer."|translate("s36")}} <a href="internet-explorer">{{"Switch to Adblock Plus for Internet Explorer."|translate("s37")}}</a></div>
   <div class="warning-platform safari">{{"It appears that you are using Safari."|translate("s38")}} <a href="safari">{{"Switch to Adblock Plus for Safari."|translate("s39")}}</a></div>
   <div class="warning-platform yandex-browser">{{"It appears that you are using Yandex Browser."|translate("s40")}} <a href="yandex-browser">{{"Switch to Adblock Plus for Yandex Browser."|translate("s41")}}</a></div>
   <div class="warning-platform maxthon">{{"It appears that you are using Maxthon."|translate("s42")}} <a href="maxthon">{{"Switch to Adblock Plus for Maxthon."|translate("s43")}}</a></div>
 
   <iframe frameborder="0" height="285" id="video" itemprop="video" src="//www.youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1&amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light" width="520"></iframe>
   <img height="305" id="maxthon-instruction" src="/img/maxthon-instruction.png" width="540">
+  <img height="305" id="edge-incoming" src="/img/edge_teaser.png" width="540">

[saroyanm, 2015/08/20 20:54:53]

incoming ?

[saroyanm, 2015/08/20 20:54:53]

Please don't specify width and height inside image tag, I assume the iframe code
was just copy pasted, which doesn't looks good, styling should go to CSS.

 </div>
 
 <div id="key-facts">
   <section class="first">
     <div class="sprite" id="facts-open-source"></div>
     <h1>{{"Open Source"|translate("s44")}}</h1>
     <p>
         {{"Adblock Plus is an open source project.\n      <a href=\"contribute\">Join us!</a>"|translate("s45")}}
     </p>
   </section>
@@ skipping 45 matching lines @@
       </button>
       <button id="more-safari" onclick="showTab(this);return false;">
         {{"Apple Safari"|translate("s57")}}
       </button>
       <button id="more-yandex-browser" onclick="showTab(this);return false;">
         {{"Yandex Browser"|translate("s58")}}
       </button>
       <button id="more-maxthon" onclick="showTab(this);return false;">
         {{"Maxthon"|translate("s59")}}
       </button>
+      <button id="more-edge" onclick="showTab(this);return false;">
+        {{"Microsoft Edge"|translate("Microsoft Edge")}}

[saroyanm, 2015/08/20 20:54:53]

Please don't use messageID with space, make it consistent with other messages
you have specified.

+      </button>
     </div>
 
     <div class="more-tab" id="tab-firefox">
       <h2>{{"Download Firefox Adblock Plus"|translate("s60")}}</h2>
 
       <p>
         {{"Firefox is a free and open source browser available for Windows, OS X, Linux, and Android which supports add-ons. Add-ons are extensions to your browser to improve privacy and security and the way you view the web. Since its launch in 2006, Adblock Plus has continuously been the most popular add-on for the Mozilla Firefox web browser."|translate("s61")}}
       </p>
 
       <p>
@@ skipping 132 matching lines @@
       </p>
     </div>
 
     <div class="more-tab" id="tab-maxthon">
       <h2>{{"Adblock Plus for Maxthon"|translate("s97")}}</h2>
 
       <p>
         {{"Different from being as an extension on other browsers, Adblock Plus has been integrated by default for Maxthon users, and as an opt-in option for Chinese users. Are you fed up with advertisers infringing on your browsing experience? Simply install Maxthon Cloud Browser and all annoying ads will be automatically blocked from the internet. Blinking banners, popups, video commercials on YouTube and Facebook ads: Maxthon Cloud Browser with Adblock Plus integrated will automatically remove any unwanted ad from every website you visit. Want more? You can easily activate additional privacy and security features such as tracking and malware protection."|translate("s98")}}
       </p>
     </div>
+    <div class="more-tab" id="tab-edge">
+      <h2>{{"Be notified when Adblock Plus for Microsoft Edge is available!"|translate("abp-for-edge-be-notified")}}</h2>
+
+      <p>
+        {{"Microsoft Edge <a href='https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508820-javascript-browser-extensions'>does not yet support extensions</a>. However, you can be sure that a version of Adblock Plus for Microsoft Edge will be released as soon as possible. Enter your email in the field above to receive a notification when Adblock Plus for Microsoft Edge is available. While you're waiting, you may want to try the latest version of Adblock Plus for Internet Explorer"|translate("ms-edge-description")}}

[saroyanm, 2015/08/20 20:54:53]

I don't remember this text to be specified. Also missing period missing. Would
be great if you could check the text back with Lisa.

[Oleksandr, 2015/08/26 00:19:29]

This has now been approved by Lisa. See here:
https://docs.google.com/document/d/10FyTjdghZw6dVYvVWegaElAwB-xfxuQACm5P6ay0_...

+      </p>
+    </div>
   </div>
 </section>
 
 <script src="/js/index.js"></script>