116 lines
3.8 KiB
TypeScript
116 lines
3.8 KiB
TypeScript
import * as results from './results.json' ;
|
|
const testList: TestList = results;
|
|
|
|
const testSelector: HTMLSelectElement | null = document.querySelector('#test_selector');
|
|
const browserSelector: HTMLSelectElement | null = document.querySelector('#browser_selector');
|
|
const previewImage: HTMLImageElement | null = document.querySelector('#preview_image');
|
|
const testLink: HTMLAnchorElement | null = document.querySelector('#test_link');
|
|
|
|
interface Test {
|
|
windowWidth: number;
|
|
windowHeight: number;
|
|
platform: {
|
|
name: string;
|
|
version: string;
|
|
}
|
|
"devicePixelRatio": number;
|
|
"id": string;
|
|
"screenshot": string;
|
|
}
|
|
|
|
type TestList = {[key: string]: Test[]};
|
|
|
|
function onTestChange(browserTests: Test[]) {
|
|
if (browserSelector) {
|
|
while (browserSelector.firstChild) {
|
|
browserSelector.firstChild.remove();
|
|
}
|
|
browserTests.forEach((browser, i) => {
|
|
if (i === 0) {
|
|
onBrowserChange(browser);
|
|
}
|
|
const option = document.createElement('option');
|
|
option.value = browser.id;
|
|
option.textContent = browser.id.replace(/_/g, ' ');
|
|
browserSelector.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
function onBrowserChange(browserTest: Test) {
|
|
if (previewImage) {
|
|
previewImage.src = `/results/${browserTest.screenshot}.png`;
|
|
if (browserTest.devicePixelRatio > 1) {
|
|
previewImage.style.transform = `scale(${1 / browserTest.devicePixelRatio})`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function selectTest(testName: string) {
|
|
if (testLink) {
|
|
testLink.textContent = testLink.href = testName;
|
|
}
|
|
onTestChange(testList[testName]);
|
|
}
|
|
|
|
const UP_ARROW = 38;
|
|
const DOWN_ARROW = 40;
|
|
const LEFT_ARROW = 37;
|
|
const RIGHT_ARROW = 39;
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if (testSelector && browserSelector) {
|
|
if (e.keyCode === UP_ARROW) {
|
|
testSelector.selectedIndex = Math.max(0, testSelector.selectedIndex - 1);
|
|
const event = new Event('change');
|
|
testSelector.dispatchEvent(event);
|
|
e.preventDefault();
|
|
} else if (e.keyCode === DOWN_ARROW) {
|
|
testSelector.selectedIndex = Math.min(testSelector.children.length - 1, testSelector.selectedIndex + 1);
|
|
const event = new Event('change');
|
|
testSelector.dispatchEvent(event);
|
|
e.preventDefault();
|
|
} else if (e.keyCode === LEFT_ARROW) {
|
|
browserSelector.selectedIndex = Math.max(0, browserSelector.selectedIndex - 1);
|
|
const event = new Event('change');
|
|
browserSelector.dispatchEvent(event);
|
|
e.preventDefault();
|
|
} else if (e.keyCode === RIGHT_ARROW) {
|
|
browserSelector.selectedIndex = Math.min(browserSelector.children.length - 1, browserSelector.selectedIndex + 1);
|
|
const event = new Event('change');
|
|
browserSelector.dispatchEvent(event);
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
});
|
|
|
|
if (testSelector && browserSelector) {
|
|
testSelector.addEventListener('change', () => {
|
|
selectTest(testSelector.value);
|
|
}, false);
|
|
|
|
browserSelector.addEventListener('change', () => {
|
|
testList[testSelector.value].some(browser => {
|
|
if (browser.id === browserSelector.value) {
|
|
if (browser) {
|
|
onBrowserChange(browser);
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
}, false);
|
|
|
|
const tests: string[] = Object.keys(testList);
|
|
tests.forEach((testName, i) => {
|
|
if (i === 0) {
|
|
selectTest(testName);
|
|
}
|
|
const option = document.createElement('option');
|
|
option.value = testName;
|
|
option.textContent = testName;
|
|
|
|
testSelector.appendChild(option);
|
|
});
|
|
}
|