Squash Odysseus development history

static/test-fixtures/browser-catalog.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Synthetic browser test catalog</title>
+<h1>Synthetic browser test catalog</h1>
+<p>Test data only. Nothing can be purchased.</p>
+<form id="search">
+  <label for="query">Search catalog</label>
+  <input id="query" name="query" type="search">
+  <button type="submit">Search</button>
+</form>
+<section aria-live="polite" id="results">Enter a color to see matching sofas.</section>
+<p id="consent-state"></p>
+<dialog id="cookie-choices" aria-labelledby="cookie-title">
+  <h2 id="cookie-title">Cookie choices</h2>
+  <p>This is a synthetic dialog. No cookies or tracking are installed.</p>
+  <button id="reject-optional" type="button">Reject optional cookies</button>
+  <button id="accept-optional" type="button">Accept optional cookies</button>
+</dialog>
+<script src="/static/test-fixtures/browser-catalog.js"></script>

static/test-fixtures/browser-catalog.js

@@ -0,0 +1,28 @@
+const products = [
+  { name: 'Cedar', color: 'orange', price: 219 },
+  { name: 'Harbor', color: 'orange', price: 349 },
+  { name: 'Willow', color: 'yellow', price: 279 },
+];
+if (new URLSearchParams(location.search).get('overlay') === 'delayed') {
+  const dialog = document.getElementById('cookie-choices');
+  document.getElementById('query').addEventListener('input', () => dialog.showModal(), { once: true });
+  for (const choice of ['reject', 'accept']) {
+    document.getElementById(`${choice}-optional`).addEventListener('click', () => {
+      document.getElementById('consent-state').textContent = `Optional cookies: ${choice === 'reject' ? 'rejected' : 'accepted'}`;
+      dialog.close();
+    });
+  }
+}
+document.getElementById('search').addEventListener('submit', event => {
+  event.preventDefault();
+  const query = document.getElementById('query').value.toLowerCase();
+  const matches = products.filter(p => query.includes(p.color) || query.includes(p.name.toLowerCase()));
+  const results = document.getElementById('results');
+  results.replaceChildren();
+  for (const product of matches) {
+    const row = document.createElement('p');
+    row.textContent = `${product.name}: ${product.color} sofa, $${product.price}`;
+    results.append(row);
+  }
+  if (!matches.length) results.textContent = 'No matching sofas.';
+});