Issue 3257 - Create uninstallation page in adblockplus.org (use GET http request)

pages/uninstalled.tmpl

Index: pages/uninstalled.tmpl
===================================================================
rename from pages/uninstall-abp.tmpl
rename to pages/uninstalled.tmpl
--- a/pages/uninstall-abp.tmpl
+++ b/pages/uninstalled.tmpl
@@ -29,7 +29,7 @@
         var input = document.createElement("input");
         input.setAttribute("type", "hidden");
         input.setAttribute("name", paramSplit[0]);

[Sebastian Noack, 2015/12/14 14:16:34]

The parameter key can theoretically also include unsafe characters. So you
should use decodeURICompnent here as well.

[saroyanm, 2015/12/14 14:48:12]

Done.

-        input.setAttribute("value", paramSplit[1]);
+        input.setAttribute("value", decodeURIComponent(paramSplit[1]));
         form.appendChild(input);
       });
 
@@ -48,11 +48,20 @@
       var reasonOtherCheckbox = document.getElementById("reason-other");
       reasonOtherCheckbox.addEventListener("change", function()
       {
-        var textArea = document.getElementById("reason-other-input");
-        if (textArea.hasAttribute("class"))
-          textArea.removeAttribute("class")
+        var reasonOther = document.getElementById("reason-other-container");
+        if (reasonOther.hasAttribute("class"))
+          reasonOther.removeAttribute("class")

[Sebastian Noack, 2015/12/14 14:16:34]

How about using |.classList.toggle("hidden")|?

[saroyanm, 2015/12/14 14:48:12]

Done.

         else
-          textArea.setAttribute("class", "hidden");
+          reasonOther.setAttribute("class", "hidden");
+      }, false);
+
+      var reasonOtherInput = document.getElementById("reason-other-input");
+      var maxLength = reasonOtherInput.getAttribute("maxlength");
+      var charCounter = document.getElementById("characters-countdown");
+      charCounter.textContent = maxLength;
+      reasonOtherInput.addEventListener("keyup", function()
+      {
+        charCounter.textContent = maxLength - reasonOtherInput.value.length;
       }, false);
 
       var submitButton = document.getElementById("submit-form");
@@ -76,7 +85,7 @@
 
 <section class="highlighted">
   <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translate("reasons-header", "Form heading")}}</h1>
-  <form id="reasons-form" action="uninstall-abp-submit" method="post">
+  <form id="reasons-form" action="uninstalled-submit" method="get">
     <ul id="reasons">
       {%- for reasonId, stringId, value in reasons %}
       <li>
@@ -91,7 +100,13 @@
           <input id="reason-other" type="checkbox" name="reason" value="0v0" />
           {{"Other, namely..."|translate("reason-other", "Last uninstallation reason")}}
         </label>
-        <textarea id="reason-other-input" class="hidden" name="reasonOther" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea>
+        <div id="reason-other-container" class="hidden">
+          <textarea id="reason-other-input" name="reasonOther" maxlength="300" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea>
+          <div>
+             {{"Characters remaining:"|translate("countdown-text", "Text of character limit counter appears after selecting 'Other, namely...' option")}}
+             <span id="characters-countdown"></span>
+          </div>
+        </div>
       </li>
     </ul>
     <button id="submit-form">{{"Submit"|translate("submit", "Submit button text")}}</button>