mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

docs: update test previewer (#2637)

Browse Source
This commit is contained in:
Niklas von Hertzen 2021-08-07 18:05:08 +08:00 committed by GitHub
parent e36408ad03
commit 7a06d0c2c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
www/src/preview.ts
View File

@ -22,18 +22,30 @@ type TestList = {[key: string]: Test[]};
function onTestChange(browserTests: Test[]) { function onTestChange(browserTests: Test[]) {
if (browserSelector) { if (browserSelector) {
const currentSelection = browserSelector.value;
while (browserSelector.firstChild) { while (browserSelector.firstChild) {
browserSelector.firstChild.remove(); browserSelector.firstChild.remove();
} }
let newSelection;
browserTests.forEach((browser, i) => { browserTests.forEach((browser, i) => {
if (i === 0) { if (i === 0) {
onBrowserChange(browser); newSelection = browser;
} }
const option = document.createElement('option'); const option = document.createElement('option');
option.value = browser.id; option.value = browser.id;
if (browser.id === currentSelection) {
option.selected = true;
newSelection = browser;
}
option.textContent = browser.id.replace(/_/g, ' '); option.textContent = browser.id.replace(/_/g, ' ');
browserSelector.appendChild(option); browserSelector.appendChild(option);
}); });
if (newSelection) {
onBrowserChange(newSelection);
}
} }
} }
@ -48,13 +60,20 @@ function onBrowserChange(browserTest: Test) {
previewImage.style.transformOrigin = ''; previewImage.style.transformOrigin = '';
} }
} }
if (history) {
history.replaceState(null, document.title, `?browser=${browserSelector?.value}&test=${testSelector?.value}`);
}
} }
function selectTest(testName: string) { function selectTest(testName: string) {
const foundTest = testList[testName];
if (foundTest) {
if (testLink) { if (testLink) {
testLink.textContent = testLink.href = testName; testLink.textContent = testLink.href = testName;
} }
onTestChange(testList[testName]); onTestChange(foundTest);
}
} }
const UP_ARROW = 38; const UP_ARROW = 38;
@ -116,15 +135,29 @@ if (testSelector && browserSelector) {
false false
); );
const tests: string[] = Object.keys(testList); let testFromUrl: string | null = null;
tests.forEach((testName, i) => {
if (i === 0) { if (URLSearchParams) {
selectTest(testName); const url = new URLSearchParams(location.search);
testFromUrl = url.get('test');
if (browserSelector) {
const option = document.createElement('option');
browserSelector.appendChild(option);
browserSelector.value = option.value = url.get('browser') ?? '';
} }
}
const tests: string[] = Object.keys(testList);
tests.forEach((testName) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = testName; option.value = testName;
option.textContent = testName; option.textContent = testName;
if (option.value === testFromUrl) {
option.selected = true;
}
testSelector.appendChild(option); testSelector.appendChild(option);
}); });
selectTest(testSelector.value ?? testSelector.firstChild?.textContent ?? '');
} }