Added simple table

2025-09-12 03:13:52 +02:00
parent 92e67be36b
commit e664440360
5 changed files with 319 additions and 0 deletions
--- a/standalone/tables-1/t10.mjs
+++ b/standalone/tables-1/t10.mjs
@@ -0,0 +1,122 @@
+// Here we are going to try to present something
+
+class Style_Definitions {
+	constructor(definitions) {
+		Object.assign(this, { definitions });
+	}
+}
+
+class Capture {
+	constructor(target, associative_array) {
+		Object.assign(this, { target, associative_array });
+	}
+}
+
+function C(target, associative_array) {
+	return new Capture(target, associative_array);
+}
+
+function S(style_definitions) {
+	return new Style_Definitions(style_definitions);
+}
+
+function T(contents) {
+
+	//For now - assume plain text
+	return document.createTextNode(contents);
+
+}
+
+function E(tagName, ...members) {
+
+	const e = document.createElement(tagName);
+	for (const m of members) {
+		//For now we assume some sort of node but could be different stuff later
+		if (m instanceof Capture) {
+			for (const [name, sub_member] of Object.entries(m.associative_array)) {
+				m.target[name] = sub_member;
+				e.appendChild(sub_member);
+			}
+		} else if (m instanceof Style_Definitions) {
+			Object.assign(e.style, m.definitions);
+		} else {
+
+			switch (m.nodeType) {
+				case Node.ELEMENT_NODE:
+				case Node.TEXT_NODE:
+					e.appendChild(m);
+					break;
+
+				default:
+					throw new Error(`Unrecognized member: ${m}`);
+			}
+		}
+	}
+	return e;
+
+}
+
+
+
+export async function test_table() {
+
+	const data = await (await fetch('./t10.json')).json();
+	const headings = ['Planet', 'Atmosphere', 'Temperature', 'Population', 'Notes'];
+
+	const table = E('table',
+		E('thead',
+			E('tr', ...headings.map(h => E('th', T(h)))),
+		),
+		E('tbody',
+			...data.map(e => E('tr',
+				E('th', T(e.planet)),
+				E('td', T(e.atmosphere)),
+				E('td', T(`${e.temperature.value.toLocaleString()} ${e.temperature.unit}`)),
+				E('td', T(e.population.toLocaleString())),
+				E('td', E('ol', ...e.notes.map(n => E('li', T(n))))),
+			)),
+		),
+	);
+
+	document.body.appendChild(table);
+
+	const lut = {};
+	const info = E('div',
+		S({
+			color: '#FF0',
+		}),
+
+		E('span',
+			S({
+				fontWeight: 'bold',
+				minWidth: '8em',
+				display: 'inline-block',
+				textAlign: 'right',
+				paddingRight: '.5em',
+			}),
+			C(lut, {cell: T('Cell')}),
+		),
+		T('·'),
+		E('span',
+			S({
+				fontStyle: 'italic',
+				paddingLeft: '.5em',
+				color: '#C80',
+			}),
+			C(lut, {text: T('???')}),
+		),
+	);
+
+	document.body.appendChild(info);
+
+	table.addEventListener('mousemove', (e) => {
+		const section = e.target.closest('tbody') ||e.target.closest('thead');
+		const cell = e.target.closest('td') ||e.target.closest('th');
+		const row = e.target.closest('tr');
+		lut.text.data = cell?.innerHTML || '???';
+		lut.cell.data = `${section.tagName} ${row.sectionRowIndex}:${cell.cellIndex}`;
+
+	})
+
+
+}