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

Side by Side Diff: adblock-browser-head.html

Issue 4814987935612928: Issue 2213 - landing page for mobile beta launch (Closed)
Patch Set: Updated according Thomas comments Created April 23, 2015, 1:03 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « adblock-browser.html ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
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">
7 #content *
8 {
9 box-sizing: content-box;
10 }
11
12 #content h1
13 {
14 margin-bottom: 28px;
15 }
16
17 ol
18 {
19 font-size: 16px;
20 padding-left: 60px;
21 }
22
23 ol li
24 {
25 margin-bottom: 14px;
26 }
27
28 #content h3.subscribe-header
29 {
30 font-size: 18px;
31 margin-bottom: 14px;
32 }
33
34 .subscribe-description
35 {
36 margin: 14px 0px 20px 0px;
37 }
38
39 .button-community-wrapper
40 {
41 display: inline-block;
42 text-align: center;
43 border: solid 1px #4CAE4C;
44 border-radius: 3px;
45 background-color: #5CB85C;
46 margin: 10px 0px 30px 0px;
47 }
48
49 .button-community-wrapper a
50 {
51 display: block;
52 padding: 25px 20px;
53 color: #FFFFFF;
54 font-weight: bold;
55 font-size: 14px;
56 text-decoration: none;
57 }
58
59 #subscribe-textbox
60 {
61 border: solid 1px #B5B4B0;
62 margin-right: 20px;
63 padding-left: 10px;
64 padding-right: 10px;
65 font-size: 16px;
66 width: 276px;
67 line-height: 44px;
68 height: 44px;
69 }
70
71 #subscribe-textbox.placeholder
72 {
73 color: #B5B4B0;
74 }
75
76 #subscribe-button
77 {
78 border: solid 1px #357EBD;
79 border-radius: 3px;
80 background-color: #428BCA;
81 color: #FFFFFF;
82 font-size: 14px;
83 font-weight: bold;
84 min-width: 146px;
85 height: 44px;
86 }
87
88 #subscribe-button span
89 {
90 padding-left: 30px;
91 padding-right: 30px;
92 }
93
94 .disclaimer
95 {
96 display: none;
97 font-size: 14px;
98 color: #D00;
99 border: 1px solid #D00;
100 border-radius: 5px;
101 padding: 5px;
102 margin-top: 30px;
103 }
104
105 html[lang="fr"] .disclaimer.lang-fr
106 {
107 display: block;
108 }
109
110 #subscribe-form .empty-label, #subscribe-form .sucess-label,
111 #response-error, #subscribe-form .invalid-label, #email-placeholder,
112 #subscribe-form.success input, #subscribe-form.success button
113 {
114 display: none;
115 }
116
117 #subscribe-form .empty-label,
118 #subscribe-form .invalid-label
119 {
120 margin-top: 30px;
121 }
122
123 #subscribe-form.success .sucess-label,
124 #subscribe-form.empty .empty-label,
125 #subscribe-form.invalid .invalid-label,
126 #subscribe-form.error #response-error
127 {
128 display: block;
129 }
130 </style>
131
132 <script type="text/javascript">
133 //<![CDATA[
134 function addListener(obj, type, listener, useCapture)
135 {
136 if ("addEventListener" in obj)
137 {
138 obj.addEventListener(type, function(ev)
139 {
140 if (listener(ev) === false)
141 ev.preventDefault();
142 }, useCapture);
143 }
144 else
145 {
146 if (type == "DOMContentLoaded" || type == "load")
saroyanm 2015/04/23 13:07:59 Having this check for this case looks okey, but ma
Thomas Greiner 2015/04/23 13:38:00 Why should it use "onreadystatechange" instead of
saroyanm 2015/04/23 16:02:43 Changed to readystatechange as discussed.
147 type = "readystatechange";
148
149 type = "on" + type;
150 if ("attachEvent" in obj)
151 {
152 obj.attachEvent(type, function()
153 {
154 if (document.readyState == "complete" && listener(event) === false)
155 event.returnValue = false;
156 });
157 }
158 else
Thomas Greiner 2015/04/23 13:38:00 Well spotted! I forgot to add the `return` after `
159 {
160 obj[type] = listener;
161 }
162 }
163 }
164
165 function addPlaceholder(textbox)
166 {
167 textbox.setAttribute("class", "placeholder");
168 textbox.value = getPlaceholderText();
169 }
170
171 function getPlaceholderText()
172 {
173 var textProperty = "innerText" in document.body ? "innerText" : "textContent";
174 return document.getElementById("email-placeholder")[textProperty];
175 }
176
177 function contentLoad()
178 {
179 var emailTextbox = document.getElementById("subscribe-textbox");
180
181 // textbox placeholder implementation for browsers
182 // that don't support placeholder attribute
183 if (!("placeholder" in document.createElement("input"))
184 && !emailTextbox.value)
185 {
186 addPlaceholder(emailTextbox);
187 addListener(emailTextbox, "focus", function()
188 {
189 if (emailTextbox.value == getPlaceholderText())
190 {
191 emailTextbox.value = "";
192 emailTextbox.setAttribute("class", "");
193 }
194 }, false);
195
196 addListener(emailTextbox, "blur", function()
197 {
198 if (!emailTextbox.value)
199 addPlaceholder(emailTextbox);
200 }, false);
201 }
202
203 addListener(document.getElementById("subscribe-form"), "submit", function()
204 {
205 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)
224 {
225 formElement.submit();
226 return false;
227 }
228
229 var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value );
230 var request = new XMLHttpRequest();
231 request.open("POST", formElement.action, true);
232 request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
233 request.setRequestHeader("Content-length", params.length);
234 addListener(request, "load", function()
235 {
236 if (request.status >= 200 && request.status < 300)
237 {
238 formElement.setAttribute("class", "success");
239 }
240 else
241 {
242 var textProperty = "innerText" in document.body ? "innerText" : "textCon tent";
243 document.getElementById("response-error")[textProperty] = request.status Text;
244 formElement.setAttribute("class", "error");
245 }
246 }, false);
247 request.send(params);
248 return false;
249 }, false);
250 }
251 addListener(document, "DOMContentLoaded", contentLoad, false);
252 //]]>
253 </script>
OLDNEW
« no previous file with comments | « adblock-browser.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld