benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-05 02:44:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: format Map Source component boundary

Browse Source
This commit is contained in:
Sameh Khamis committed 2026-09-12 22:25:05 -07:00
1 parent 72d531b18f
commit da7496b7eb
6 files changed
+271 -86
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/mapStackChips.js
+25 -8
View File
@@ -40,7 +40,9 @@ export function mapStackChipModel(stack, activeId) {
const fallbackReason = requiresIon
? keySetupRequirement('cesium-ion')
: `${label || 'This map stack'} is unavailable`;
const unavailableHint = available ? '' : String(stack?.unavailableReason || fallbackReason);
const unavailableHint = available
? ''
: String(stack?.unavailableReason || fallbackReason);
return {
id: String(stack?.id ?? ''),
label,
@@ -63,10 +65,10 @@ export function mapStackChipModel(stack, activeId) {
* `PRESENTED_MAP_STACK_IDS` order; unlisted stacks stay outside this presentation.
*/
export function mapStackChipModels(stacks, activeId) {
const stacksById = new Map((Array.isArray(stacks) ? stacks : [])
.map((stack) => [stack?.id, stack]));
return PRESENTED_MAP_STACK_IDS
.map((id) => stacksById.get(id))
const stacksById = new Map(
(Array.isArray(stacks) ? stacks : []).map((stack) => [stack?.id, stack]),
);
return PRESENTED_MAP_STACK_IDS.map((id) => stacksById.get(id))
.filter(Boolean)
.map((stack) => mapStackChipModel(stack, activeId));
}
@@ -82,7 +84,17 @@ export function mapStackChipModels(stacks, activeId) {
* @param {(element: HTMLElement, type: string, listener: Function) => void} [options.bind] - Listener owner override.
* @returns {Array<object>} The rendered chip models.
*/
export function renderMapStackChips(container, stacks, { activeId = null, onSelect = null, doc, bind = (element, type, listener) => element.addEventListener(type, listener) } = {}) {
export function renderMapStackChips(
container,
stacks,
{
activeId = null,
onSelect = null,
doc,
bind = (element, type, listener) =>
element.addEventListener(type, listener),
} = {},
) {
if (!container) return [];
const ownerDoc = doc || container.ownerDocument || globalThis.document;
if (!ownerDoc?.createElement) return [];
@@ -97,13 +109,18 @@ export function renderMapStackChips(container, stacks, { activeId = null, onSele
MAP_STACK_CHIP_CLASS,
model.active ? 'active' : '',
model.available ? '' : 'unavailable',
].filter(Boolean).join(' ');
]
.filter(Boolean)
.join(' ');
chip.dataset.stackId = model.id;
chip.title = model.title;
chip.setAttribute('aria-pressed', String(model.active));
chip.setAttribute('aria-disabled', String(!model.available));
if (!model.available) {
chip.setAttribute('aria-label', `${model.label} unavailable: ${model.unavailableHint}`);
chip.setAttribute(
'aria-label',
`${model.label} unavailable: ${model.unavailableHint}`,
);
}
const label = ownerDoc.createElement('span');
src/ui/mapSource.js
+8 -1
View File
@@ -1,2 +1,9 @@
export { createMapSourceControls } from './mapSourceControls.js';
export { MAP_STACK_CHIP_CLASS, PRESENTED_MAP_STACK_IDS, mapStackChipModel, mapStackChipModels, renderMapStackChips, syncMapStackChips } from '../mapStackChips.js';
export {
MAP_STACK_CHIP_CLASS,
PRESENTED_MAP_STACK_IDS,
mapStackChipModel,
mapStackChipModels,
renderMapStackChips,
syncMapStackChips,
} from '../mapStackChips.js';
src/ui/mapSourceControls.js
+19 -6
View File
@@ -5,8 +5,13 @@ import { renderMapStackChips, syncMapStackChips } from '../mapStackChips.js';
* The supplied controller remains authoritative for availability and active state.
*/
export function createMapSourceControls({
container, statusElement, controller, subscribe,
claimSelection = () => {}, onStateChanged = () => {}, onError = () => {},
container,
statusElement,
controller,
subscribe,
claimSelection = () => {},
onStateChanged = () => {},
onError = () => {},
}) {
let destroyed = false;
let generation = 0;
@@ -20,7 +25,10 @@ export function createMapSourceControls({
syncMapStackChips(container, state.activeId);
if (statusElement) {
const stack = state.activeStack;
statusElement.textContent = state.status === 'switching' ? '...' : (stack?.shortLabel || stack?.label || 'MAP');
statusElement.textContent =
state.status === 'switching'
? '...'
: stack?.shortLabel || stack?.label || 'MAP';
statusElement.classList.toggle('warn', !!state.lastError);
}
}
@@ -42,7 +50,8 @@ export function createMapSourceControls({
}
if (destroyed || current !== generation) return state;
render(controller.getState());
if (state?.activeId === before && stackId !== before && state?.lastError) onError(state.lastError);
if (state?.activeId === before && stackId !== before && state?.lastError)
onError(state.lastError);
if (syncShare) onStateChanged();
return state;
}
@@ -51,7 +60,9 @@ export function createMapSourceControls({
for (const remove of removers.splice(0)) remove();
renderMapStackChips(container, controller.getStacks(), {
activeId: controller.getActiveId(),
onSelect: (id) => { void select(id).catch(() => {}); },
onSelect: (id) => {
void select(id).catch(() => {});
},
bind,
});
render(controller.getState());
@@ -63,7 +74,9 @@ export function createMapSourceControls({
});
refresh();
return {
render, select, refresh,
render,
select,
refresh,
destroy() {
if (destroyed) return;
destroyed = true;
src/ui/mapSourceControls.test.mjs
+97 -24
View File
@@ -16,7 +16,9 @@ function makeElement(tagName = 'div') {
children: [],
classList: {
toggle(name, force) {
const classes = new Set(String(element.className).split(/\s+/).filter(Boolean));
const classes = new Set(
String(element.className).split(/\s+/).filter(Boolean),
);
const next = force === undefined ? !classes.has(name) : !!force;
if (next) classes.add(name);
else classes.delete(name);
@@ -26,16 +28,35 @@ function makeElement(tagName = 'div') {
return String(element.className).split(/\s+/).includes(name);
},
},
appendChild(child) { element.children.push(child); return child; },
setAttribute(name, value) { element.attributes[name] = String(value); },
getAttribute(name) { return element.attributes[name] ?? null; },
addEventListener(type, handler) { (element.listeners[type] ||= []).push(handler); },
removeEventListener(type, handler) { element.listeners[type] = (element.listeners[type] || []).filter((current) => current !== handler); },
click() { for (const handler of element.listeners.click || []) handler(); },
appendChild(child) {
element.children.push(child);
return child;
},
setAttribute(name, value) {
element.attributes[name] = String(value);
},
getAttribute(name) {
return element.attributes[name] ?? null;
},
addEventListener(type, handler) {
(element.listeners[type] ||= []).push(handler);
},
removeEventListener(type, handler) {
element.listeners[type] = (element.listeners[type] || []).filter(
(current) => current !== handler,
);
},
click() {
for (const handler of element.listeners.click || []) handler();
},
};
Object.defineProperty(element, 'innerHTML', {
get() { return ''; },
set() { element.children.length = 0; },
get() {
return '';
},
set() {
element.children.length = 0;
},
});
return element;
}
@@ -44,7 +65,16 @@ function fixture() {
const container = makeElement();
container.ownerDocument = { createElement: (tag) => makeElement(tag) };
const statusElement = makeElement();
const sources = [{ id: 'osm', label: 'OSM' }, { id: 'esri-imagery', label: 'Esri' }, { id: 'bing-aerial', label: 'Bing', available: false, unavailableReason: 'Unavailable for this test' }];
const sources = [
{ id: 'osm', label: 'OSM' },
{ id: 'esri-imagery', label: 'Esri' },
{
id: 'bing-aerial',
label: 'Bing',
available: false,
unavailableReason: 'Unavailable for this test',
},
];
let state = { activeId: 'osm', activeStack: sources[0], status: 'ready' };
const listeners = new Set();
const requests = [];
@@ -55,20 +85,49 @@ function fixture() {
getState: (status) => ({ ...state, status: status || state.status }),
setStack: (id) => {
calls.push(['select', id]);
return new Promise((resolve, reject) => requests.push({ id, resolve, reject }));
return new Promise((resolve, reject) =>
requests.push({ id, resolve, reject }),
);
},
};
const controls = createMapSourceControls({ container, statusElement, controller,
subscribe: (listener) => { listeners.add(listener); return () => listeners.delete(listener); },
claimSelection: () => calls.push(['claim']), onStateChanged: () => calls.push(['state']), onError: (message) => calls.push(['error', message]),
const controls = createMapSourceControls({
container,
statusElement,
controller,
subscribe: (listener) => {
listeners.add(listener);
return () => listeners.delete(listener);
},
claimSelection: () => calls.push(['claim']),
onStateChanged: () => calls.push(['state']),
onError: (message) => calls.push(['error', message]),
});
const chip = (id) => container.children.find((el) => el.dataset.stackId === id);
const chip = (id) =>
container.children.find((el) => el.dataset.stackId === id);
function change(id, lastError = null) {
state = { activeId: id, activeStack: sources.find((source) => source.id === id), status: 'ready', lastError };
state = {
activeId: id,
activeStack: sources.find((source) => source.id === id),
status: 'ready',
lastError,
};
return controller.getState();
}
const emit = () => { for (const listener of listeners) listener(); };
return { container, statusElement, controller, controls, requests, calls, listeners, chip, change, emit };
const emit = () => {
for (const listener of listeners) listener();
};
return {
container,
statusElement,
controller,
controls,
requests,
calls,
listeners,
chip,
change,
emit,
};
}
test('initial presentation uses actual state and retains unavailable chip semantics', () => {
@@ -76,7 +135,11 @@ test('initial presentation uses actual state and retains unavailable chip semant
assert.equal(f.chip('osm').getAttribute('aria-pressed'), 'true');
assert.equal(f.statusElement.textContent, 'OSM');
const unavailable = f.chip('bing-aerial');
assert.equal(unavailable.disabled, false, 'unavailable chips remain focusable');
assert.equal(
unavailable.disabled,
false,
'unavailable chips remain focusable',
);
assert.equal(unavailable.getAttribute('aria-disabled'), 'true');
unavailable.click();
assert.equal(f.requests.length, 0);
@@ -98,8 +161,10 @@ test('selection claims authority before requesting and never lights a pending so
test('provider-driven fallback updates the active chip and durable state notification', () => {
const f = fixture();
f.change('esri-imagery'); f.emit();
f.change('osm', 'Source unavailable; using OSM'); f.emit();
f.change('esri-imagery');
f.emit();
f.change('osm', 'Source unavailable; using OSM');
f.emit();
assert.equal(f.chip('osm').getAttribute('aria-pressed'), 'true');
assert.equal(f.statusElement.textContent, 'OSM');
assert.equal(f.statusElement.classList.contains('warn'), true);
@@ -114,7 +179,11 @@ test('a late superseded response cannot overwrite the latest displayed selection
f.requests[1].resolve(f.change('osm'));
await second;
const count = f.calls.length;
f.requests[0].resolve({ activeId: 'esri-imagery', activeStack: { label: 'old' }, lastError: 'obsolete failure' });
f.requests[0].resolve({
activeId: 'esri-imagery',
activeStack: { label: 'old' },
lastError: 'obsolete failure',
});
await first;
assert.equal(f.statusElement.textContent, 'OSM');
assert.equal(f.calls.length, count);
@@ -128,7 +197,9 @@ test('failed selection keeps the real source lit and reports its error', async (
await pending;
assert.equal(f.chip('osm').getAttribute('aria-pressed'), 'true');
assert.equal(f.statusElement.classList.contains('warn'), true);
assert.ok(f.calls.some((call) => call[0] === 'error' && call[1] === 'Unavailable'));
assert.ok(
f.calls.some((call) => call[0] === 'error' && call[1] === 'Unavailable'),
);
f.controls.destroy();
});
@@ -138,7 +209,9 @@ test('rejected selection leaves switching presentation and propagates a useful e
f.requests[0].reject(new Error('Request failed'));
await assert.rejects(pending, /Request failed/);
assert.equal(f.statusElement.textContent, 'OSM');
assert.ok(f.calls.some((call) => call[0] === 'error' && call[1] === 'Request failed'));
assert.ok(
f.calls.some((call) => call[0] === 'error' && call[1] === 'Request failed'),
);
f.controls.destroy();
});