LEFT | RIGHT |
1 <meta name="title" content="Adblock Browser Beta Launch" /> | |
2 <meta property="og:title" content="Adblock Browser Beta Launch" /> | |
3 <meta name="description" content="Want Adblock Browser for your smartphone or ta
blet? Join the Adblock Browser for Android Beta Google+ community." /> | |
4 <meta property="og:description" content="Want Adblock Browser for your smartphon
e or tablet? Join the Adblock Browser for Android Beta Google+ community." /> | |
5 | |
6 <style type="text/css"> | 1 <style type="text/css"> |
7 #content * | 2 #content * |
8 { | 3 { |
9 box-sizing: content-box; | 4 box-sizing: content-box; |
10 } | 5 } |
11 | 6 |
12 #content h1 | 7 #content h1 |
13 { | 8 { |
14 margin-bottom: 28px; | 9 margin-bottom: 28px; |
15 } | 10 } |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
58 | 53 |
59 #subscribe-textbox | 54 #subscribe-textbox |
60 { | 55 { |
61 border: solid 1px #B5B4B0; | 56 border: solid 1px #B5B4B0; |
62 margin-right: 20px; | 57 margin-right: 20px; |
63 padding-left: 10px; | 58 padding-left: 10px; |
64 padding-right: 10px; | 59 padding-right: 10px; |
65 font-size: 16px; | 60 font-size: 16px; |
66 width: 276px; | 61 width: 276px; |
67 line-height: 44px; | 62 line-height: 44px; |
68 height: 44px; | 63 height: 44px; /* IE 8 */ |
69 } | 64 } |
70 | 65 |
71 #subscribe-textbox.placeholder | 66 #subscribe-textbox.placeholder |
72 { | 67 { |
73 color: #B5B4B0; | 68 color: #B5B4B0; |
74 } | 69 } |
75 | 70 |
76 #subscribe-button | 71 #subscribe-button |
77 { | 72 { |
78 border: solid 1px #357EBD; | 73 border: solid 1px #357EBD; |
(...skipping 21 matching lines...) Expand all Loading... |
100 border-radius: 5px; | 95 border-radius: 5px; |
101 padding: 5px; | 96 padding: 5px; |
102 margin-top: 30px; | 97 margin-top: 30px; |
103 } | 98 } |
104 | 99 |
105 html[lang="fr"] .disclaimer.lang-fr | 100 html[lang="fr"] .disclaimer.lang-fr |
106 { | 101 { |
107 display: block; | 102 display: block; |
108 } | 103 } |
109 | 104 |
110 #subscribe-form .empty-label, #subscribe-form .sucess-label, | 105 #subscribe-form .sucess-label, #response-error, |
111 #response-error, #subscribe-form .invalid-label, #email-placeholder, | 106 #subscribe-form .invalid-label, #subscribe-form.success input, |
112 #subscribe-form.success input, #subscribe-form.success button | 107 #subscribe-form.success button |
113 { | 108 { |
114 display: none; | 109 display: none; |
115 } | 110 } |
116 | 111 |
117 #subscribe-form .empty-label, | |
118 #subscribe-form .invalid-label | 112 #subscribe-form .invalid-label |
119 { | 113 { |
120 margin-top: 30px; | 114 margin-top: 30px; |
121 } | 115 } |
122 | 116 |
123 #subscribe-form.success .sucess-label, | 117 #subscribe-form.success .sucess-label, |
124 #subscribe-form.empty .empty-label, | |
125 #subscribe-form.invalid .invalid-label, | 118 #subscribe-form.invalid .invalid-label, |
126 #subscribe-form.error #response-error | 119 #subscribe-form.error #response-error |
127 { | 120 { |
128 display: block; | 121 display: block; |
129 } | 122 } |
130 </style> | 123 </style> |
131 | 124 |
132 <script type="text/javascript"> | 125 <script type="text/javascript"> |
133 //<![CDATA[ | 126 //<![CDATA[ |
134 function addListener(obj, type, listener, useCapture) | 127 function addListener(obj, type, listener, useCapture) |
135 { | 128 { |
136 if ("addEventListener" in obj) | 129 if ("addEventListener" in obj) |
137 { | 130 { |
138 obj.addEventListener(type, function(ev) | 131 obj.addEventListener(type, function(ev) |
139 { | 132 { |
140 if (listener(ev) === false) | 133 if (listener(ev) === false) |
141 ev.preventDefault(); | 134 ev.preventDefault(); |
142 }, useCapture); | 135 }, useCapture); |
143 } | 136 } |
144 else | 137 else |
145 { | 138 { |
| 139 // IE 8 |
146 if (type == "DOMContentLoaded") | 140 if (type == "DOMContentLoaded") |
147 type = "readystatechange"; | 141 type = "readystatechange"; |
148 | 142 |
149 type = "on" + type; | 143 type = "on" + type; |
150 if ("attachEvent" in obj) | 144 if ("attachEvent" in obj) |
151 { | 145 { |
152 obj.attachEvent(type, function() | 146 obj.attachEvent(type, function() |
153 { | 147 { |
154 if (document.readyState == "complete" && listener(event) === false) | 148 if (document.readyState == "complete" && listener(event) === false) |
155 event.returnValue = false; | 149 event.returnValue = false; |
156 }); | 150 }); |
157 } | 151 } |
158 else | 152 else |
159 { | 153 { |
160 obj[type] = listener; | 154 obj[type] = listener; |
161 } | 155 } |
162 } | 156 } |
163 } | 157 } |
164 | 158 |
165 function addPlaceholder(textbox) | 159 function addPlaceholder(textbox) |
166 { | 160 { |
167 textbox.setAttribute("class", "placeholder"); | 161 textbox.setAttribute("class", "placeholder"); |
168 textbox.value = getPlaceholderText(); | 162 textbox.value = getPlaceholderText(); |
169 } | 163 } |
170 | 164 |
171 function getPlaceholderText() | 165 function getPlaceholderText() |
172 { | 166 { |
173 var textProperty = "innerText" in document.body ? "innerText" : "textContent"; | 167 return document.getElementById("subscribe-textbox").getAttribute("placeholder"
); |
174 return document.getElementById("email-placeholder")[textProperty]; | |
175 } | 168 } |
176 | 169 |
177 function contentLoad() | 170 function contentLoad() |
178 { | 171 { |
179 var emailTextbox = document.getElementById("subscribe-textbox"); | 172 var emailTextbox = document.getElementById("subscribe-textbox"); |
180 | 173 |
181 // textbox placeholder implementation for browsers | 174 // IE9 + Safari iOS |
182 // that don't support placeholder attribute | |
183 if (!("placeholder" in document.createElement("input")) | 175 if (!("placeholder" in document.createElement("input")) |
184 && !emailTextbox.value) | 176 && !emailTextbox.value) |
185 { | 177 { |
186 addPlaceholder(emailTextbox); | 178 addPlaceholder(emailTextbox); |
187 addListener(emailTextbox, "focus", function() | 179 addListener(emailTextbox, "focus", function() |
188 { | 180 { |
189 if (emailTextbox.value == getPlaceholderText()) | 181 if (emailTextbox.value == getPlaceholderText()) |
190 { | 182 { |
191 emailTextbox.value = ""; | 183 emailTextbox.value = ""; |
192 emailTextbox.setAttribute("class", ""); | 184 emailTextbox.setAttribute("class", ""); |
193 } | 185 } |
194 }, false); | 186 }, false); |
195 | 187 |
196 addListener(emailTextbox, "blur", function() | 188 addListener(emailTextbox, "blur", function() |
197 { | 189 { |
198 if (!emailTextbox.value) | 190 if (!emailTextbox.value) |
199 addPlaceholder(emailTextbox); | 191 addPlaceholder(emailTextbox); |
200 }, false); | 192 }, false); |
201 } | 193 } |
202 | 194 |
203 addListener(document.getElementById("subscribe-form"), "submit", function() | 195 addListener(document.getElementById("subscribe-form"), "submit", function() |
204 { | 196 { |
205 var formElement = document.getElementById("subscribe-form"); | 197 var formElement = document.getElementById("subscribe-form"); |
206 if (!emailTextbox.value || emailTextbox.value == getPlaceholderText()) | |
207 { | |
208 formElement.setAttribute("class", "empty"); | |
209 return false; | |
210 } | |
211 | |
212 // Simple email validation for browsers | |
213 // that don't support input of type email | |
214 var input = document.createElement("input"); | |
215 input.setAttribute("type", "email"); | |
216 if (input.type !== "email" | |
217 && !(/(.+)@(.+){2,}\.(.+){2,}/.test(emailTextbox.value))) | |
218 { | |
219 formElement.setAttribute("class", "invalid"); | |
220 return false; | |
221 } | |
222 | |
223 if (!window.XMLHttpRequest) | 198 if (!window.XMLHttpRequest) |
224 { | 199 { |
225 formElement.submit(); | 200 formElement.submit(); |
226 return false; | 201 return false; |
227 } | 202 } |
228 | 203 |
| 204 var pathArray = window.location.pathname.split("/"); |
229 var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value
); | 205 var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value
); |
| 206 params += "&lang=" + pathArray[1]; |
230 var request = new XMLHttpRequest(); | 207 var request = new XMLHttpRequest(); |
231 request.open("POST", formElement.action, true); | 208 request.open("POST", formElement.action, true); |
232 request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"
); | 209 request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"
); |
233 request.setRequestHeader("Content-length", params.length); | |
234 addListener(request, "readystatechange", function() | 210 addListener(request, "readystatechange", function() |
235 { | 211 { |
236 if (request.readyState == 4) | 212 if (request.readyState == 4) |
237 { | 213 { |
238 if (request.status >= 200 && request.status < 300) | 214 if (request.status >= 200 && request.status < 300) |
239 { | 215 { |
240 formElement.setAttribute("class", "success"); | 216 formElement.setAttribute("class", "success"); |
241 } | 217 } |
| 218 else if (request.status == 400) |
| 219 { |
| 220 formElement.setAttribute("class", "invalid"); |
| 221 } |
242 else | 222 else |
243 { | 223 { |
244 var textProperty = "innerText" in document.body ? "innerText" : "textC
ontent"; | 224 var errorWrapper = document.getElementById("response-error"); |
245 document.getElementById("response-error")[textProperty] = request.stat
usText; | 225 if ("textContent" in errorWrapper) |
| 226 errorWrapper.textContent = request.statusText; |
| 227 else // IE8 |
| 228 errorWrapper.innerText = request.statusText; |
| 229 |
246 formElement.setAttribute("class", "error"); | 230 formElement.setAttribute("class", "error"); |
247 } | 231 } |
248 } | 232 } |
249 }, false); | 233 }, false); |
250 request.send(params); | 234 request.send(params); |
251 return false; | 235 return false; |
252 }, false); | 236 }, false); |
253 } | 237 } |
254 addListener(document, "DOMContentLoaded", contentLoad, false); | 238 addListener(document, "DOMContentLoaded", contentLoad, false); |
255 //]]> | 239 //]]> |
256 </script> | 240 </script> |
LEFT | RIGHT |