Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: adblock-browser-head.html

Issue 4814987935612928: Issue 2213 - landing page for mobile beta launch (Closed)
Left Patch Set: Changed onload event of XHR to readystatechange Created April 23, 2015, 3:59 p.m.
Right Patch Set: Make meta tags translatable Created April 29, 2015, 1:12 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « adblock-browser.html ('k') | no next file » | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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
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
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>
LEFTRIGHT

Powered by Google App Engine
This is Rietveld