110 lines
4.1 KiB
HTML
110 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Fast-browser performance fixture</title>
|
|
<style>
|
|
body { font: 16px system-ui, sans-serif; margin: 2rem; }
|
|
.candidate-grid { display: grid; gap: .35rem; max-width: 42rem; }
|
|
.status { min-height: 1.5rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>Local form validation</h1>
|
|
<p id="status" class="status">Fixture ready</p>
|
|
<p id="profile-status" class="status">Profile draft loaded</p>
|
|
<p id="popup-status" class="status">Popup idle</p>
|
|
<p id="preview" class="status"></p>
|
|
<form id="form" novalidate></form>
|
|
</main>
|
|
<script>
|
|
(() => {
|
|
const params = new URLSearchParams(location.search);
|
|
const mode = params.get('mode') || 'density';
|
|
const count = Math.max(0, Math.min(60, Number(params.get('count') || 0)));
|
|
const form = document.querySelector('#form');
|
|
const status = document.querySelector('#status');
|
|
const profileStatus = document.querySelector('#profile-status');
|
|
const popupStatus = document.querySelector('#popup-status');
|
|
const preview = document.querySelector('#preview');
|
|
const label = (text, input) => {
|
|
const wrapper = document.createElement('div');
|
|
const caption = document.createElement('label');
|
|
caption.textContent = text;
|
|
caption.htmlFor = input.id;
|
|
wrapper.append(caption, input);
|
|
return wrapper;
|
|
};
|
|
if (mode === 'popup') {
|
|
status.textContent = 'Popup ready';
|
|
return;
|
|
}
|
|
if (mode === 'density') {
|
|
const grid = document.createElement('div');
|
|
grid.className = 'candidate-grid';
|
|
for (let index = 0; index < count; index += 1) {
|
|
const input = document.createElement('input');
|
|
input.id = `candidate-${index}`;
|
|
input.type = 'text';
|
|
input.placeholder = `Search filter ${index + 1}`;
|
|
grid.append(label(`Filter ${index + 1}`, input));
|
|
}
|
|
form.append(grid);
|
|
status.textContent = `Density fixture with ${count} controls`;
|
|
return;
|
|
}
|
|
const display = document.createElement('input');
|
|
display.id = 'display-name';
|
|
display.type = 'text';
|
|
display.value = 'existing value';
|
|
form.append(label('Display name', display));
|
|
|
|
const save = document.createElement('button');
|
|
save.type = 'button';
|
|
save.textContent = 'Save profile';
|
|
save.addEventListener('click', () => {
|
|
profileStatus.textContent = display.value === 'Ada Lovelace' ? 'Profile saved' : 'Profile validation failed';
|
|
});
|
|
form.append(save);
|
|
|
|
const previewButton = document.createElement('button');
|
|
previewButton.type = 'button';
|
|
previewButton.textContent = 'Preview profile';
|
|
previewButton.addEventListener('click', () => {
|
|
preview.textContent = `Preview ready: ${display.value}`;
|
|
});
|
|
form.append(previewButton);
|
|
|
|
const immediate = document.createElement('button');
|
|
immediate.type = 'button';
|
|
immediate.textContent = 'Immediate action';
|
|
immediate.addEventListener('click', () => { status.textContent = 'Immediate complete'; });
|
|
form.append(immediate);
|
|
|
|
const delayed = document.createElement('button');
|
|
delayed.type = 'button';
|
|
delayed.textContent = 'Delayed action';
|
|
delayed.addEventListener('click', () => setTimeout(() => { status.textContent = 'Delayed complete'; }, 40));
|
|
form.append(delayed);
|
|
|
|
const popupButton = document.createElement('button');
|
|
popupButton.type = 'button';
|
|
popupButton.textContent = 'Open popup';
|
|
popupButton.addEventListener('click', () => {
|
|
popupStatus.textContent = 'Popup requested';
|
|
window.open(`${location.origin}${location.pathname}?mode=popup`, '_blank', 'popup,width=420,height=240');
|
|
});
|
|
form.append(popupButton);
|
|
for (let index = 0; index < 10; index += 1) {
|
|
const input = document.createElement('input');
|
|
input.id = `extra-${index}`;
|
|
input.type = 'text';
|
|
input.placeholder = `Extra field ${index + 1}`;
|
|
form.append(label(`Extra field ${index + 1}`, input));
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|