Skip to content
This repository was archived by the owner on Apr 11, 2024. It is now read-only.

Commit df1a353

Browse files
NielsLeenheerNielsLeenheer
committed
Reorganize some scripts to make the logic more clear
1 parent 6a91b24 commit df1a353

File tree

3 files changed

+218
-320
lines changed

3 files changed

+218
-320
lines changed

‎index.html

Lines changed: 107 additions & 244 deletions
Original file line numberDiff line numberDiff line change
@@ -185,265 +185,130 @@ <h3>Help us improve HTML5 test by donating</h3>
185185
<script>
186186
<!--
187187

188-
function submit(method, payload) {
189-
var httpRequest;
190-
if (window.XMLHttpRequest) {
191-
httpRequest = new XMLHttpRequest();
192-
} else if (window.ActiveXObject) {
193-
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
194-
}
195-
196-
httpRequest.open('POST','/api/' + method, true);
197-
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
198-
httpRequest.send('payload=' + encodeURIComponent(payload));
199-
}
200-
201-
function upgradeConnection(success, failure) {
202-
if (location.protocol == "http:") {
203-
var httpRequest;
204-
205-
if (window.XMLHttpRequest) {
206-
httpRequest = new XMLHttpRequest();
207-
} else if (window.ActiveXObject) {
208-
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
209-
}
210-
211-
httpRequest.onreadystatechange = function() {
212-
if (httpRequest.readyState == 4) {
213-
if (httpRequest.status >= 200 && httpRequest.status < 400) {
214-
success();
215-
} else {
216-
failure();
217-
}
218-
}
219-
}
188+
loadWhichBrowser(function() {
189+
Browsers = new WhichBrowser({
190+
useFeatures: true,
191+
detectCamouflage: true
192+
});
220193

221-
httpRequest.open('GET','https://' + location.hostname + '/assets/upgrade', true);
222-
httpRequest.send();
194+
new Test(function(r) {
195+
var m = new Metadata(tests);
196+
var c = new Calculate(r, m.data);
223197

224-
return;
225-
}
226-
227-
failure();
228-
}
198+
submitResults(r, c);
229199

200+
upgradeConnection(
201+
function() {
202+
location.protocol = 'https:';
203+
},
204+
function() {
205+
showResults(r, c, m);
206+
}
207+
);
208+
}, showError);
230209

210+
finalizePage();
211+
});
231212

232213

233-
loadWhichBrowser(function() {
234-
235-
Browsers = new WhichBrowser({
236-
useFeatures: true,
237-
detectCamouflage: true
214+
function showResults(r, c, m) {
215+
/* Update total score */
216+
var container = document.getElementById('score');
217+
218+
container.innerHTML = tim(
219+
"<div class='pointsPanel'>" +
220+
"<h2><span>Your browser scores</span> <strong>{{score}}</strong> <span>out of {{maximum}} points</span></h2>" +
221+
"</div>",
222+
c);
223+
224+
/* Show box for confirming useragent detection */
225+
new Confirm(container, {
226+
id: r.uniqueid,
227+
onConfirm: function() { submit('confirm', '{"uniqueid": "' + r.uniqueid + '"}'); },
228+
onReport: function() { submit('report', '{"uniqueid": "' + r.uniqueid + '"}'); },
229+
onFeedback: function(value) { submit('feedback', JSON.stringify({ uniqueid: r.uniqueid, value: value })); }
238230
});
239231

240-
Blacklist = { 'OneBrowser' : { blocked: true, identifier: Browsers.browser.toString() } };
241-
242-
if (typeof Blacklist[Browsers.browser.name] != 'undefined')
243-
{
244-
if (Blacklist[Browsers.browser.name].blocked)
245-
{
246-
var contents = document.getElementById('contents');
247-
contents.style.visibility = 'visible';
248-
249-
var warning = document.getElementById('warning');
250-
warning.innerHTML =
251-
"<div class='blocked'>" +
252-
"<h2>" + Blacklist[Browsers.browser.name].identifier + " has been blocked!</h2>" +
253-
"<p>It appears that your browser is too buggy to test or is deliberately attempting to get higher scores " +
254-
"by claiming it supports features that it does not. In any case consider switching to a different browser, " +
255-
"because this will also cause problems for websites that attempt to use these features.</p>" +
256-
"<button onclick='this.style.display=\"none\"; start();'>Show results anyway</button>" +
257-
"</div>"
258-
259-
var loading = document.getElementById('loading');
260-
loading.style.display = 'none';
261-
262-
this.load();
263-
return;
264-
}
265-
}
266-
267-
start();
268-
});
232+
/* Show action buttons */
233+
var wrapper = document.createElement('div');
234+
wrapper.className = 'wrapper';
235+
container.appendChild(wrapper);
269236

237+
var buttons = document.createElement('div');
238+
buttons.className = 'buttons';
239+
wrapper.appendChild(buttons);
270240

271-
function start() {
272-
var params = {};
241+
var button = document.createElement('span');
242+
button.className = 'button save';
243+
button.innerHTML = '<span>Save results</span>';
244+
buttons.appendChild(button);
273245

274-
if (location.search) {
275-
var parts = location.search.substring(1).split('&');
246+
new Save(button, {
247+
id: r.uniqueid,
248+
onSave: function() { submit('save', '{"uniqueid": "' + r.uniqueid + '"}'); }
249+
});
276250

277-
for (var i = 0; i < parts.length; i++) {
278-
var nv = parts[i].split('=');
279-
if (!nv[0]) continue;
280-
params[nv[0]] = decodeURIComponent(nv[1]) || true;
281-
}
282-
}
251+
var button = document.createElement('a');
252+
button.className = 'button compare';
253+
button.href = '/compare/browser/mybrowser.html';
254+
button.innerHTML = '<span>Compare to...</span>';
255+
buttons.appendChild(button);
283256

284-
var identifier = typeof params.identifier != 'undefined' ? params.identifier : '';
285-
var source = typeof params.source != 'undefined' ? params.source : '';
286-
var task = typeof params.task != 'undefined' ? params.task : '';
257+
var button = document.createElement('span');
258+
button.className = 'button share';
259+
button.innerHTML = '<span>Share</span>';
260+
buttons.appendChild(button);
287261

288-
new Test(function(r) {
289-
var m = new Metadata(tests);
262+
new Share(button, {
263+
score: c.score,
264+
browser: Browsers.toString()
265+
});
290266

291-
var c = new Calculate(r, m.data);
267+
var button = document.createElement('a');
268+
button.className = 'button donate';
269+
button.href = 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9DNBJPQFEHYSC';
270+
button.innerHTML = '<span>Donate</span>';
271+
buttons.appendChild(button);
272+
273+
274+
/* Show detailed report of scores */
275+
var container = document.getElementById('results');
276+
var div = document.createElement('div');
277+
div.className = 'resultsTable detailsTable';
278+
container.appendChild(div);
279+
280+
var table = new ResultsTable({
281+
parent: div,
282+
tests: m.data,
283+
header: false,
284+
links: true,
285+
explainations: true,
286+
grading: true,
287+
bonus: true,
288+
distribute: true,
289+
columns: 1
290+
});
292291

293-
/* Submit results */
294-
try {
295-
var payload = '{' +
296-
'"release": "' + r.release + '",' +
297-
'"source": "' + source + '",' +
298-
'"protocol": "' + location.protocol + '",' +
299-
'"identifier": "' + escapeSlashes(identifier) + '",' +
300-
'"task": "' + task + '",' +
301-
'"uniqueid": "' + r.uniqueid + '",' +
302-
'"score": ' + c.score + ',' +
303-
'"maximum": ' + c.maximum + ',' +
304-
'"camouflage": "' + (Browsers.camouflage ? '1' : '0') + '",' +
305-
'"features": "' + (Browsers.features.join(',')) + '",' +
306-
'"browserName": "' + (Browsers.browser.name ? Browsers.browser.name : '') + '",' +
307-
'"browserChannel": "' + (Browsers.browser.channel ? Browsers.browser.channel : '') + '",' +
308-
'"browserVersion": "' + (Browsers.browser.version ? Browsers.browser.version.toString() : '') + '",' +
309-
'"browserVersionType": "' + (Browsers.browser.version ? Browsers.browser.version.type : '') + '",' +
310-
'"browserVersionMajor": "' + (Browsers.browser.version ? Browsers.browser.version.major : '') + '",' +
311-
'"browserVersionMinor": "' + (Browsers.browser.version ? Browsers.browser.version.minor : '') + '",' +
312-
'"browserVersionOriginal": "' + (Browsers.browser.version ? Browsers.browser.version.original : '') + '",' +
313-
'"browserMode": "' + (Browsers.browser.mode ? Browsers.browser.mode : '') + '",' +
314-
'"engineName": "' + (Browsers.engine.name ? Browsers.engine.name : '') + '",' +
315-
'"engineVersion": "' + (Browsers.engine.version ? Browsers.engine.version.toString() : '') + '",' +
316-
'"osName": "' + (Browsers.os.name ? Browsers.os.name : '') + '",' +
317-
'"osFamily": "' + (Browsers.os.family ? Browsers.os.family : '') + '",' +
318-
'"osVersion": "' + (Browsers.os.version ? Browsers.os.version.toString() : '') + '",' +
319-
'"deviceManufacturer": "' + (Browsers.device.manufacturer ? Browsers.device.manufacturer : '') + '",' +
320-
'"deviceModel": "' + (Browsers.device.model ? Browsers.device.model : '') + '",' +
321-
'"deviceSeries": "' + (Browsers.device.series ? Browsers.device.series : '') + '",' +
322-
'"deviceType": "' + (Browsers.device.type ? Browsers.device.type : '') + '",' +
323-
'"deviceIdentified": "' + (Browsers.device.identified ? '1' : '0' ) + '",' +
324-
'"deviceWidth": "' + (screen.width) + '",' +
325-
'"deviceHeight": "' + (screen.height) + '",' +
326-
'"useragent": "' + navigator.userAgent + '",' +
327-
'"humanReadable": "' + Browsers.toString() + '",' +
328-
'"points": "' + c.points + '",' +
329-
'"results": "' + r.results + '"' +
330-
'}';
331-
332-
submit('submit', payload);
333-
} catch(e) {
334-
alert('Could not submit results: ' + e.message);
335-
}
336-
337-
338-
339-
340-
341-
342-
upgradeConnection(
343-
function() {
344-
location.protocol = 'https:';
345-
},
346-
function() {
292+
table.updateColumn(0, { points: c.points, maximum: c.maximum, score: c.score, results: r.results });
347293

348-
/* Update total score */
349-
var container = document.getElementById('score');
350-
351-
container.innerHTML = tim(
352-
"<div class='pointsPanel'>" +
353-
"<h2><span>Your browser scores</span> <strong>{{score}}</strong> <span>out of {{maximum}} points</span></h2>" +
354-
"</div>",
355-
c);
356-
357-
/* Show box for confirming useragent detection */
358-
new Confirm(container, {
359-
id: r.uniqueid,
360-
onConfirm: function() { submit('confirm', '{"uniqueid": "' + r.uniqueid + '"}'); },
361-
onReport: function() { submit('report', '{"uniqueid": "' + r.uniqueid + '"}'); },
362-
onFeedback: function(value) { submit('feedback', JSON.stringify({ uniqueid: r.uniqueid, value: value })); }
363-
});
364-
365-
/* Show action buttons */
366-
var wrapper = document.createElement('div');
367-
wrapper.className = 'wrapper';
368-
container.appendChild(wrapper);
369-
370-
var buttons = document.createElement('div');
371-
buttons.className = 'buttons';
372-
wrapper.appendChild(buttons);
373-
374-
var button = document.createElement('span');
375-
button.className = 'button save';
376-
button.innerHTML = '<span>Save results</span>';
377-
buttons.appendChild(button);
378-
379-
new Save(button, {
380-
id: r.uniqueid,
381-
onSave: function() { submit('save', '{"uniqueid": "' + r.uniqueid + '"}'); }
382-
});
383-
384-
var button = document.createElement('a');
385-
button.className = 'button compare';
386-
button.href = '/compare/browser/mybrowser.html';
387-
button.innerHTML = '<span>Compare to...</span>';
388-
buttons.appendChild(button);
389-
390-
var button = document.createElement('span');
391-
button.className = 'button share';
392-
button.innerHTML = '<span>Share</span>';
393-
buttons.appendChild(button);
394-
395-
new Share(button, {
396-
score: c.score,
397-
browser: Browsers.toString()
398-
});
399-
400-
var button = document.createElement('a');
401-
button.className = 'button donate';
402-
button.href = 'https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9DNBJPQFEHYSC';
403-
button.innerHTML = '<span>Donate</span>';
404-
buttons.appendChild(button);
405-
406-
407-
/* Show detailed report of scores */
408-
var container = document.getElementById('results');
409-
var div = document.createElement('div');
410-
div.className = 'resultsTable detailsTable';
411-
container.appendChild(div);
412-
413-
var table = new ResultsTable({
414-
parent: div,
415-
tests: m.data,
416-
header: false,
417-
links: true,
418-
explainations: true,
419-
grading: true,
420-
bonus: true,
421-
distribute: true,
422-
columns: 1
423-
});
424-
425-
table.updateColumn(0, { points: c.points, maximum: c.maximum, score: c.score, results: r.results });
426-
427-
new Index({
428-
tests: tests,
429-
index: document.getElementById('index'),
430-
wrapper: document.getElementById('contentwrapper')
431-
});
432-
433-
window.setTimeout(function() {
434-
var contents = document.getElementById('contents');
435-
contents.style.visibility = 'visible';
436-
437-
var loading = document.getElementById('loading');
438-
loading.style.display = 'none';
439-
}, 100);
294+
new Index({
295+
tests: tests,
296+
index: document.getElementById('index'),
297+
wrapper: document.getElementById('contentwrapper')
298+
});
299+
300+
window.setTimeout(function() {
301+
var contents = document.getElementById('contents');
302+
contents.style.visibility = 'visible';
303+
304+
var loading = document.getElementById('loading');
305+
loading.style.display = 'none';
306+
}, 100);
307+
}
440308

441-
}
442-
);
443-
},
444309

445-
function(e) {
446-
if (typeof console != 'undefined') console.log(e);
310+
function showError(e) {
311+
if (typeof console != 'undefined') console.log(e);
447312

448313
alert('Test has failed: ' + e.message);
449314

@@ -452,12 +317,10 @@ <h3>Help us improve HTML5 test by donating</h3>
452317

453318
var loading = document.getElementById('loading');
454319
loading.style.display = 'none';
455-
});
456-
457-
this.load();
458320
}
459321

460-
function load() {
322+
323+
function finalizePage() {
461324
(function(){
462325
var bsa = document.createElement('script');
463326
bsa.type = 'text/javascript';

0 commit comments

Comments
 (0)