OLD | NEW |
1 title=Adblock Plus has been uninstalled | 1 title=Adblock Plus has been uninstalled |
2 template=simple | 2 template=minimal |
3 | 3 |
4 {% set reasons = [ | 4 {% set reasons = [ |
5 ("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""), | 5 ("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""), |
6 ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""), | 6 ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""), |
7 ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", "
"), | 7 ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", "
"), |
8 ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""), | 8 ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""), |
9 ("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["A
dBlock", "uBlock", "uBlock Origin", "Ghostery"]), | 9 ("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["A
dBlock", "uBlock", "uBlock Origin", "Ghostery"]), |
10 ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.",
""), | 10 ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.",
""), |
11 ("7v0", "reason-difficult", "I find it difficult to use Adblock Plus.", ""), | 11 ("7v0", "reason-difficult", "I find it difficult to use Adblock Plus.", ""), |
12 ] %} | 12 ] %} |
13 | 13 |
14 <head> | 14 <head> |
15 <meta name="robots" content="noindex" /> | 15 <meta name="robots" content="noindex" /> |
16 <script type="text/javascript"> | 16 <link rel="stylesheet" href="/css/uninstalled.css" type="text/css" media="all"
> |
17 (function() | |
18 { | |
19 var adblockersList = null; | |
20 function toggleView(element) | |
21 { | |
22 var targetId = element.getAttribute("data-toggle-view"); | |
23 if (targetId) | |
24 document.getElementById(targetId).classList.toggle("hidden"); | |
25 } | |
26 | |
27 function checkSelectedAdblocker() | |
28 { | |
29 var selectedOption = adblockersList[adblockersList.selectedIndex]; | |
30 var element = selectedOption.getAttribute("data-show-element"); | |
31 if (element) | |
32 document.getElementById(element).classList.remove("hidden"); | |
33 else | |
34 { | |
35 element = selectedOption.getAttribute("data-hide-element"); | |
36 document.getElementById(element).classList.add("hidden"); | |
37 } | |
38 } | |
39 | |
40 function init() | |
41 { | |
42 var form = document.getElementById("reasons-form"); | |
43 | |
44 // Create hidden input for GET parameters | |
45 window.location.search.substr(1).split("&").forEach(function(param) | |
46 { | |
47 if (!/.=./.test(param)) | |
48 return; | |
49 | |
50 var paramSplit = param.split("="); | |
51 var input = document.createElement("input"); | |
52 input.setAttribute("type", "hidden"); | |
53 input.setAttribute("name", decodeURIComponent(paramSplit[0])); | |
54 input.setAttribute("value", decodeURIComponent(paramSplit[1])); | |
55 form.appendChild(input); | |
56 }); | |
57 | |
58 // Randomly add reasons | |
59 var reasonsContainer = document.getElementById("reasons"); | |
60 var reasons = document.querySelectorAll("#reasons > li"); | |
61 reasons = Array.prototype.slice.call(reasons); | |
62 reasonsContainer.innerHTML = ""; | |
63 while (reasons.length) | |
64 { | |
65 var randomIndex = Math.floor(Math.random() * (reasons.length -1)); | |
66 var reasonElement = reasons.splice(randomIndex, 1)[0]; | |
67 reasonsContainer.appendChild(reasonElement); | |
68 var checkbox = reasonElement.querySelector("input[type=checkbox]"); | |
69 if (checkbox.checked) | |
70 toggleView(checkbox); | |
71 | |
72 checkbox.addEventListener("change", function(event) | |
73 { | |
74 toggleView(event.target); | |
75 }, false); | |
76 } | |
77 | |
78 adblockersList = document.querySelector("#adblockers select"); | |
79 adblockersList.addEventListener("change", function() | |
80 { | |
81 checkSelectedAdblocker(); | |
82 }, false); | |
83 checkSelectedAdblocker(); | |
84 | |
85 var reasonOtherInput = document.getElementById("reason-other-input"); | |
86 var maxLength = reasonOtherInput.getAttribute("maxlength"); | |
87 var charCounter = document.getElementById("characters-countdown"); | |
88 charCounter.textContent = maxLength; | |
89 reasonOtherInput.addEventListener("keyup", function() | |
90 { | |
91 charCounter.textContent = maxLength - reasonOtherInput.value.length; | |
92 }, false); | |
93 | |
94 var submitButton = document.getElementById("submit-form"); | |
95 submitButton.addEventListener("click", function(event) | |
96 { | |
97 if (!document.querySelector("ul input:checked")) | |
98 { | |
99 event.preventDefault(); | |
100 form.setAttribute("class", "error"); | |
101 } | |
102 else | |
103 { | |
104 form.submit(); | |
105 } | |
106 }, false); | |
107 } | |
108 document.addEventListener("DOMContentLoaded", init, false); | |
109 })(); | |
110 </script> | |
111 </head> | 17 </head> |
112 | 18 |
113 <div class="notification"> | 19 <form id="reasons-form" class="content" action="uninstalled-submit" method="get"
> |
114 <strong>{{"Did you uninstall Adblock Plus by accident?"|translate("reinstall-h
eadline", "Text next to the Reinstallation button")}}</strong> | 20 |
115 {{"index"|linkify}}{{"Reinstall Now"|translate("reinstall", "Reinstall button
text")}}</a> | 21 <header class="section bg-primary text-center"> |
116 </div> | 22 <div class="container"> |
117 <section class="highlighted"> | 23 <h1>{{ title | translate("title") }}</h1> |
118 <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translat
e("reasons-header", "Form heading")}}</h1> | 24 <p>{{ "Please select the reason(s) why you uninstalled Adblock Plus:" |
translate("reasons-header", "Form heading") }}</p> |
119 <form id="reasons-form" action="uninstalled-submit" method="get"> | 25 </div> |
| 26 </header> |
| 27 |
| 28 <div id="uninstall-reasons" class="container section"> |
120 <fieldset> | 29 <fieldset> |
121 <ul id="reasons"> | 30 <ul id="reasons" class="unstyled row"> |
122 {%- for reasonId, stringId, value, adblockers in reasons %} | 31 {%- for reasonId, stringId, value, adblockers in reasons %} |
123 <li> | 32 <li class="column one-third"> |
124 <label> | 33 <label> |
125 <input type="checkbox" name="reason" {% if adblockers %} data-toggle
-view="adblockers" {% endif %} value="{{reasonId}}" /> | 34 <input type="checkbox" name="reason" {% if adblockers %} data-togg
le-view="adblockers" {% endif %} value="{{ reasonId }}" /> |
126 {{value|translate(stringId, "Uninstallation reason")}} | 35 {{ value | translate(stringId, "Uninstallation reason") }} |
127 </label> | 36 </label> |
128 {%- if adblockers %} | 37 {%- if adblockers %} |
129 <fieldset class="hidden" id="adblockers"> | 38 <fieldset class="hidden" id="adblockers"> |
130 <select name="otherAdblockerPredefined"> | 39 <select name="otherAdblockerPredefined"> |
131 {%- for name in adblockers %} | 40 {%- for adblocker in adblockers %} |
132 <option data-hide-element="other-adblocker" value="{{name}}">{{nam
e}}</option> | 41 <option data-hide-element="other-adblocker" value="{{ adbloc
ker }}">{{ adblocker }}</option> |
133 {%- endfor %} | 42 {%- endfor %} |
134 <option data-show-element="other-adblocker" value="Other">{{"Other
"|translate("other", "Option in list of Adblockers")}}</option> | 43 <option data-show-element="other-adblocker" value="Other">{{ "
Other" | translate("other", "Option in list of Adblockers") }}</option> |
135 </select> | 44 </select> |
136 <input id="other-adblocker" class="hidden" type="text" name="otherAd
blocker" /> | 45 <input id="other-adblocker" class="hidden" type="text" name="oth
erAdblocker" /> |
137 </fieldset> | 46 </fieldset> |
138 {%- endif %} | 47 {%- endif %} |
139 </li> | 48 </li> |
140 {%- endfor %} | 49 {%- endfor %} |
141 <li> | 50 <li class="column one-third"> |
142 <label> | 51 <label> |
143 <input id="reason-other" data-toggle-view="reason-other-container" t
ype="checkbox" name="reason" value="0v0" /> | 52 <input id="reason-other" data-toggle-view="reason-other-container" t
ype="checkbox" name="reason" value="0v0" /> |
144 {{"Other, namely..."|translate("reason-other", "Last uninstallation
reason")}} | 53 {{ "Other, namely..." | translate("reason-other", "Last uninstallati
on reason") }} |
145 </label> | 54 </label> |
146 <fieldset id="reason-other-container" class="hidden"> | 55 <fieldset id="reason-other-container" class="hidden"> |
147 <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> | 56 <textarea |
| 57 id="reason-other-input" |
| 58 name="reasonOther" |
| 59 cols="60" |
| 60 rows="4" |
| 61 maxlength="300" |
| 62 placeholder="{{ "Please explain why you are uninstalling Adblock P
lus" | translate("reason-other-placeholder", "Textarea placeholder text, appears
after selecting 'Other, namely...' option") }}"></textarea> |
148 <div> | 63 <div> |
149 {{"Characters remaining:"|translate("countdown-text", "Text of ch
aracter limit counter appears after selecting 'Other, namely...' option")}} | 64 {{ "Characters remaining:" | translate("countdown-text", "Text of
character limit counter appears after selecting 'Other, namely...' option") }} |
150 <span id="characters-countdown"></span> | 65 <span id="characters-countdown"></span> |
151 </div> | 66 </div> |
152 </fieldset> | 67 </fieldset> |
153 </li> | 68 </li> |
154 </ul> | 69 </ul> |
155 </fieldset> | 70 </fieldset> |
156 <button id="submit-form">{{"Submit"|translate("submit", "Submit button text"
)}}</button> | 71 <p id="reason-error">{{ "Please select at least one of the options above" |
translate("error-msg", "Error message, is being shown after submission if no ite
m selected")}}</p> |
157 <span class="error-label">{{"Please select at least one of the options above
"|translate("error-msg", "Error message, is being shown after submission if no i
tem selected")}}</span> | 72 |
158 </form> | 73 <div class="text-center"> |
159 <p class="disclaimer"> | 74 <p> |
160 {{"By clicking Submit, you are sending your response to Adblock Plus. Please
see our <a href='/privacy'>privacy policy</a>."|translate("disclaimer", "Discla
imer below form")}} | 75 <button class="button primary">{{ "Submit" | translate("submit", "Submit
button text") }}</button> |
161 </p> | 76 </p> |
162 </section> | 77 <p class="disclaimer"> |
| 78 <small>{{ "By clicking Submit, you are sending your response to Adblock
Plus. Please see our <a href='/privacy'>privacy policy</a>." | translate("discla
imer", "Disclaimer below form") }}</small> |
| 79 </p> |
| 80 </div> |
| 81 </div> |
| 82 </form> |
| 83 |
| 84 <aside id="reinstall" class="bg-accent"> |
| 85 <div class="container content"> |
| 86 <p class="lead"> |
| 87 {{ "Did you uninstall Adblock Plus by accident?" | translate("reinstall-head
line", "Text next to the Reinstallation button") }} |
| 88 {{ "index" | linkify(class="button secondary") }}{{ "Reinstall Now" | transl
ate("reinstall", "Reinstall button text") }}</a> |
| 89 </div> |
| 90 </aside> |
| 91 |
| 92 <script src="/js/uninstalled.js"></script> |
OLD | NEW |