oxedyne/daimond — www/js/workspace.js

oxedyne/daimond/www/js/workspace.js

39.6 KiB, 1 run

created by r2519314175:1481, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1	// workspace.js — the controls that arrange Daimond: the chip row, the panel
2	// gallery, the appearance menu and the palette.
3	//
4	// These are one module because they are one design. The chip row is deliberately
5	// allowed to be incomplete -- it shows what the user pinned, not every panel
6	// there is -- and that is only safe because the gallery and the palette are
7	// complete. A surface that is the ONLY way to reach a panel must grow with the
8	// fleet; a surface that is merely the FASTEST way need not.
9	//
10	// The layout engine in daimond.js owns the state. This file renders it and calls
11	// back in; it never seats a panel itself.
12	(function () {
13	'use strict';
14
15	var SCALE_KEY = 'daimond-fs-scale';
16	// Four steps, and no free slider. A slider invites a size nobody chose and
17	// makes a layout bug impossible to reproduce; four named steps do not.
18	var STEPS = [0.85, 1, 1.15, 1.3];
19	var STEP_KEYS = ['size.small', 'size.normal', 'size.large', 'size.larger'];
20
21	function t(k, v) { return window.DaimondI18n ? DaimondI18n.t(k, v) : k; }
22	function tn(k, n, v) { return window.DaimondI18n ? DaimondI18n.tn(k, n, v) : k; }
23	function stepName(i) { return t(STEP_KEYS[i]); }
24
25	// The dock's grids are named in the layout engine, which holds no strings.
26	// The mapping from a grid's key to what it is called lives here, with the
27	// rest of the text.
28	var GRID_KEYS = { '1': 'dock.one_column', '2x2': 'dock.2x2', '2x3': 'dock.2x3', '3x2': 'dock.3x2' };
29
30	var P = function () { return window.DaimondPanels; };
31
32	// ── Reading size ────────────────────────────────────────────────────
33	// Only the type responds. The frame, the padding and the panel widths stay
34	// where they are, because this is a control for reading rather than a zoom:
35	// a user who wants the whole interface bigger has the browser's own.
36
37	function scale() {
38	var v = parseFloat(localStorage.getItem(SCALE_KEY));
39	return STEPS.indexOf(v) === -1 ? 1 : v;
40	}
41
42	function setScale(v) {
43	if (STEPS.indexOf(v) === -1) return;
44	document.documentElement.style.setProperty('--fs-scale', String(v));
45	try { localStorage.setItem(SCALE_KEY, String(v)); } catch (e) { /* private mode */ }
46	if (P()) P().reflow();
47	tellFrames();
48	}
49
50	// ── Telling the framed guide how to look ────────────────────────────
51	//
52	// The guide is our own page, but the Web panel frames it WITHOUT
53	// `allow-same-origin` -- deliberately, so that a page an agent wrote cannot
54	// reach the user's keys. An opaque origin cannot read this document at all,
55	// which is why the guide's older attempt to mirror the theme by reaching for
56	// window.parent had silently never worked. postMessage is the one channel a
57	// sandboxed frame still has, so the theme and the reading size are pushed
58	// down it: on request when the guide loads, and again whenever they change.
59
60	function styleMessage() {
61	return {
62	daimondGuide: 'style',
63	theme: window.DaimondTheme ? DaimondTheme.get() : 'dark',
64	scale: scale(),
65	// The language travels the same channel. The guide cannot translate
66	// itself in place -- it is static pages, one set per locale -- so what
67	// it does with this is navigate to the matching page. Sending it here
68	// means the guide follows the app's language the way it already
69	// follows its palette, instead of being English under a German app.
70	locale: window.DaimondI18n ? DaimondI18n.locale() : 'en',
71	};
72	}
73
74	function tellFrames() {
75	var msg = styleMessage();
76	[].slice.call(document.querySelectorAll('iframe')).forEach(function (f) {
77	// '*' because the frame is in an opaque origin and has no origin to
78	// name. What is sent is a theme name and a number, so there is nothing
79	// here worth withholding.
80	try { f.contentWindow && f.contentWindow.postMessage(msg, '*'); } catch (e) {}
81	});
82	}
83
84	function initScale() {
85	var v = scale();
86	if (v !== 1) document.documentElement.style.setProperty('--fs-scale', String(v));
87	}
88
89	// ── The chip row ────────────────────────────────────────────────────
90	//
91	// ONE ROW, TWO BARS. On a desktop it is in the header; on a phone
92	// `placeChips` (js/mobile.js) moves the same element into the footer, where
93	// it scrolls sideways. What changes with it is what a chip MEANS, in two
94	// places below: what "filled" says, and what a press does.
95
96	var tagsEl;
97
98	/// The phone shell, when this width has one.
99	function shell() {
100	var s = window.DaimondShell;
101	return (s && s.isPhone && s.isPhone()) ? s : null;
102	}
103
104	function chip(p) {
105	var sh = shell();
106	// A FILLED CHIP SAYS "THIS IS WHAT YOU ARE LOOKING AT", and on a phone that
107	// is not the same question as `p.open`. One thing is on screen there: an
108	// Email panel the engine calls open, sitting behind a Terminal sheet, is
109	// not where the user is, and two filled chips would be two answers.
110	var lit = sh ? (sh.here() === p.id) : p.open;
111	var b = document.createElement('button');
112	b.className = 'ptag ptag-' + p.zone + (lit ? ' on' : '') + (p.evicts && !sh ? ' will-evict' : '');
113	b.textContent = p.label;
114	b.dataset.panel = p.id;
115	b.setAttribute('aria-pressed', lit ? 'true' : 'false');
116	if (p.full) {
117	b.disabled = true;
118	b.title = t('chip.dock_full');
119	} else if (p.folded) {
120	b.title = t('chip.show', { name: p.label });
121	} else if (p.open) {
122	b.title = t('chip.close', { name: p.label });
123	} else if (p.evicts) {
124	b.title = t('chip.open_instead', { name: p.label });
125	} else {
126	b.title = t('chip.open', { name: p.label });
127	}
128	// A PRESS IS "TAKE ME THERE" ON A PHONE, never "close what I am on". The
129	// desktop chip is a toggle and can be, because a filled chip and the panel
130	// it names are on screen together; on a phone the thing it would close is
131	// the whole screen, and for the rail it would close the drawer's own
132	// element and leave the hamburger opening nothing. See `goTo` in
133	// js/mobile.js.
134	b.addEventListener('click', function () {
135	var s = shell();
136	if (s) s.goTo(p.id); else P().activate(p.id);
137	});
138	return b;
139	}
140
141	function renderTags(model) {
142	tagsEl = tagsEl \|\| document.getElementById('panel-tags');
143	if (!tagsEl) return;
144	tagsEl.innerHTML = '';
145
146	var shown = model.panels.filter(function (p) { return !p.hidden && p.pinned; });
147	var spare = model.panels.filter(function (p) { return !p.hidden && !p.pinned; });
148
149	// Zones run left to right in the order they do on screen, so a chip sits
150	// on the side the panel it opens will appear. That is a stronger signal
151	// than colour, and it is the reason the groups are not merely sorted.
152	['rail', 'stage', 'dock'].forEach(function (zone) {
153	var inZone = shown.filter(function (p) { return p.zone === zone; });
154	if (!inZone.length) return;
155	if (tagsEl.children.length) tagsEl.appendChild(el('span', 'ptag-div'));
156	var g = el('div', 'ptag-group');
157	g.dataset.zone = zone;
158	inZone.forEach(function (p) { g.appendChild(chip(p)); });
159	tagsEl.appendChild(g);
160	});
161
162	// Whatever will not fit joins the spare, so the row shortens itself on a
163	// narrow window instead of crowding the controls beside it. Only the TAIL
164	// moves, and only into the menu: the order never changes, so a chip is
165	// either where it was or one click away, never somewhere else.
166	//
167	// A PHONE DOES NOT FIT, IT SCROLLS. The footer's strip is its own scroller
168	// (css/mobile.css) and every chip keeps the width of its own word, so
169	// there is no room to run out of -- and dropping the tail would take the
170	// three or four panels a phone reaches least often and hide them behind a
171	// second tap for no gain at all.
172	var squeezed = shell() ? 0 : fitRow();
173
174	var hidden = spare.length + squeezed;
175	if (hidden) {
176	var more = document.createElement('button');
177	more.className = 'ptag ptag-more';
178	more.id = 'panel-more';
179	more.setAttribute('aria-haspopup', 'dialog');
180	more.setAttribute('aria-expanded', 'false');
181	// Set after the second fit, below, once the true count is known.
182	more.innerHTML = '⋯<span class="n">' + hidden + '</span>';
183	more.addEventListener('click', function (e) { e.stopPropagation(); toggleGallery(more); });
184	tagsEl.appendChild(more);
185	// Adding the button costs width of its own, so anything it pushed out
186	// has to leave as well. Not on a phone, where nothing was pushed out.
187	if (!shell()) squeezed += fitRow();
188	var total = spare.length + squeezed;
189	var n = more.querySelector('.n');
190	if (n) n.textContent = String(total);
191	more.title = tn('chip.more', total);
192	}
193	watchRow();
194	}
195
196	/// Drop trailing chips until the row fits the space it has been given.
197	///
198	/// Taken from the END, so every chip that remains is exactly where it was.
199	/// A row that re-sorted itself to fit would be a row whose contents move
200	/// under the cursor, which is the failure this design exists to avoid.
201	/// Is the row longer than the box it has to live in?
202	///
203	/// Not the container's own overflow alone. The chips are flex items, so when
204	/// the row runs short of room they SHRINK before they overflow: the container
205	/// can report a clean fit while each chip clips its own label mid-glyph
206	/// against `.panel-tags{overflow:hidden}`. A chip whose text no longer fits
207	/// inside it is the honest signal, so both are asked.
208	function rowOverflows() {
209	if (tagsEl.scrollWidth > tagsEl.clientWidth + 1) return true;
210	var chips = tagsEl.querySelectorAll('.ptag');
211	for (var i = 0; i < chips.length; i++) {
212	if (chips[i].scrollWidth > chips[i].clientWidth + 1) return true;
213	}
214	return false;
215	}
216
217	/// Re-fit when the room the row actually has changes.
218	///
219	/// The fit is a measurement, and a measurement taken once is taken at
220	/// whatever moment the page happened to be in. On an iPad the row was
221	/// measured before the header had settled, came out 21px too long, and — a
222	/// fixed viewport firing no resize event ever after — stayed that way, with
223	/// "Spending" sliced mid-word and no ⋯ to fold it into. So the row watches
224	/// its own box, and takes the fit again when the answer would differ.
225	var _fitW = -1;
226	function watchRow() {
227	if (!tagsEl \|\| tagsEl._fitWatched) return;
228	tagsEl._fitWatched = true;
229	// Webfont metrics arrive after first paint, and every chip is text.
230	if (document.fonts && document.fonts.ready) {
231	document.fonts.ready
232	.then(function () { try { P().reflow(); } catch (e) {} })
233	.catch(function () {});
234	}
235	if (typeof ResizeObserver === 'undefined') return;
236	// Only a CHANGE of available width re-fits: re-fitting rewrites the row's
237	// children, not its box, so this cannot chase its own tail.
238	new ResizeObserver(function () {
239	if (!tagsEl.clientWidth \|\| tagsEl.clientWidth === _fitW) return;
240	_fitW = tagsEl.clientWidth;
241	try { P().reflow(); } catch (e) {}
242	}).observe(tagsEl);
243	}
244
245	function fitRow() {
246	var gone = 0, guard = 0;
247	while (rowOverflows() && guard++ < 60) {
248	var groups = tagsEl.querySelectorAll('.ptag-group');
249	var g = null;
250	for (var i = groups.length - 1; i >= 0; i--) {
251	if (groups[i].children.length) { g = groups[i]; break; }
252	}
253	if (!g) break;
254	g.removeChild(g.lastElementChild);
255	gone++;
256	// A group emptied by the squeeze takes its divider with it.
257	if (!g.children.length) {
258	var prev = g.previousElementSibling;
259	g.parentNode.removeChild(g);
260	if (prev && prev.className === 'ptag-div') prev.parentNode.removeChild(prev);
261	}
262	}
263	return gone;
264	}
265
266	function el(tag, cls, text) {
267	var e = document.createElement(tag);
268	if (cls) e.className = cls;
269	if (text != null) e.textContent = text;
270	return e;
271	}
272
273	/// The title row for one of the three surfaces this file puts over the app.
274	///
275	/// They were dismissible by Escape and by a click outside, and by nothing
276	/// else. On a 390px phone the appearance menu is 359px wide: nineteen pixels
277	/// of screen either side is not a way out, and it is what the user reported.
278	/// The row also gives the popover a NAME on screen — until now it was
279	/// identified only by the button that opened it, which on a phone is behind
280	/// it.
281	///
282	/// Falls back to a bare row if closer.js is somehow absent, rather than
283	/// throwing and taking the whole popover with it.
284	function closerHead(title, onClose) {
285	if (window.DaimondCloser) return DaimondCloser.head(title, { onClose: onClose });
286	return el('div', 'ui-head', title);
287	}
288
289	// ── The gallery: every panel there is, searchable ────────────────────
290
291	var galEl, galQuery = '';
292
293	function renderGallery() {
294	galEl = galEl \|\| document.getElementById('panel-gallery');
295	if (!galEl) return;
296	var model = P().model();
297	galEl.innerHTML = '';
298
299	galEl.appendChild(closerHead(t('gallery.title'), closeGallery));
300
301	var input = document.createElement('input');
302	input.className = 'gal-search';
303	input.type = 'search';
304	input.placeholder = t('gallery.search_ph');
305	input.setAttribute('aria-label', t('gallery.search_ph'));
306	input.value = galQuery;
307	input.addEventListener('input', function () { galQuery = input.value; renderGallery(); focusSearch(); });
308	galEl.appendChild(input);
309
310	var q = galQuery.trim().toLowerCase();
311	var hits = model.panels.filter(function (p) {
312	return !q \|\| p.label.toLowerCase().indexOf(q) !== -1;
313	});
314
315	if (!hits.length) {
316	galEl.appendChild(el('div', 'gal-empty', t('gallery.no_match')));
317	return;
318	}
319
320	['rail', 'stage', 'dock'].forEach(function (zone) {
321	var inZone = hits.filter(function (p) { return p.zone === zone; });
322	if (!inZone.length) return;
323	galEl.appendChild(el('div', 'pop-head', t('gallery.zone_' + zone)));
324	inZone.forEach(function (p) { galEl.appendChild(galleryRow(p)); });
325	});
326
327	var note = el('div', 'pop-note');
328	note.innerHTML = t('gallery.note');
329	galEl.appendChild(note);
330	}
331
332	function galleryRow(p) {
333	var row = el('div');
334	row.style.display = 'flex';
335	row.style.alignItems = 'center';
336
337	var go = document.createElement('button');
338	go.className = 'gal-row' + (p.open ? ' is-open' : '');
339	go.appendChild(el('span', 'nm', p.label));
340	var onRow = !!document.querySelector('#panel-tags .ptag[data-panel="' + p.id + '"]');
341	go.appendChild(el('span', 'state',
342	p.unrevealed ? t('gallery.state_unrevealed')
343	: p.full && !p.open ? t('gallery.state_full')
344	: p.open ? t('gallery.state_open')
345	: (p.pinned && !onRow) ? t('gallery.state_no_room') : ''));
346	go.disabled = !!(p.full && !p.open);
347	go.addEventListener('click', function () { P().activate(p.id); closeGallery(); });
348
349	// The pin decides the chip row's contents. It is a deliberate choice
350	// rather than a frequency ranking: a row that reorders itself destroys the
351	// muscle memory that stable positions exist to build.
352	var pin = document.createElement('button');
353	pin.className = 'gal-pin';
354	pin.setAttribute('aria-pressed', p.pinned ? 'true' : 'false');
355	pin.title = p.pinned ? t('gallery.unpin', { name: p.label }) : t('gallery.pin', { name: p.label });
356	pin.setAttribute('aria-label', pin.title);
357	pin.innerHTML = p.pinned
358	? '<svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.2 5.6L20 9.2l-4.2 3.6 1.3 5.7L12 15.6 6.9 18.5l1.3-5.7L4 9.2l5.8-.6z" fill="currentColor" stroke="none"/></svg>'
359	: '<svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.2 5.6L20 9.2l-4.2 3.6 1.3 5.7L12 15.6 6.9 18.5l1.3-5.7L4 9.2l5.8-.6z"/></svg>';
360	pin.addEventListener('click', function (e) {
361	e.stopPropagation();
362	P().setPinned(p.id, !p.pinned);
363	renderGallery();
364	});
365
366	row.appendChild(go);
367	row.appendChild(pin);
368	return row;
369	}
370
371	function focusSearch() {
372	var i = galEl && galEl.querySelector('.gal-search');
373	if (i) { i.focus(); i.setSelectionRange(i.value.length, i.value.length); }
374	}
375
376	function toggleGallery(anchor) {
377	galEl = galEl \|\| document.getElementById('panel-gallery');
378	if (!galEl.hidden) { closeGallery(); return; }
379	galQuery = '';
380	renderGallery();
381	openPop(galEl, anchor);
382	var more = document.getElementById('panel-more');
383	if (more) more.setAttribute('aria-expanded', 'true');
384	focusSearch();
385	}
386
387	function closeGallery() {
388	if (!galEl \|\| galEl.hidden) return;
389	galEl.hidden = true;
390	var more = document.getElementById('panel-more');
391	if (more) { more.setAttribute('aria-expanded', 'false'); more.focus(); }
392	}
393
394	// ── The appearance menu ─────────────────────────────────────────────
395
396	var menuEl;
397
398	/// The view ids, in the order they are offered. Simple first: it is the
399	/// default and the one a new reader should meet.
400	var VIEW_IDS = ['simple', 'max'];
401
402	function renderMenu() {
403	menuEl = menuEl \|\| document.getElementById('settings-menu');
404	if (!menuEl) return;
405	menuEl.innerHTML = '';
406	menuEl.appendChild(closerHead(t('topbar.appearance'), closeMenu));
407	var model = P().model();
408
409	// Spacing -- the overall shape (corners, typeface, room between things),
410	// orthogonal to the palette chosen below. The two settings are stored
411	// under their original ids, because a rename that moved them would clear
412	// the choice of everyone already using one; only the words changed.
413	// The view: Simple or Max. This replaced Compact/Breathe, which was the
414	// SKIN under a name that described only half of what people wanted from
415	// it. Choosing a view sets the skin with it -- shape and density are two
416	// expressions of one intent, and "airy shape, maximum density" is a
417	// combination nobody wants. Not a lock, though: the palette below is
418	// untouched, and a skin chosen afterwards stays chosen.
419	if (window.DaimondView) {
420	menuEl.appendChild(el('div', 'pop-head', t('menu.view')));
421	var viewNow = DaimondView.get();
422	var vseg = el('div', 'seg');
423	VIEW_IDS.forEach(function (id) {
424	var vb = el('button', null, t('menu.view_' + id));
425	vb.setAttribute('aria-pressed', id === viewNow ? 'true' : 'false');
426	vb.title = t('menu.view_' + id + '_help');
427	vb.addEventListener('click', function () {
428	DaimondView.set(id);
429	renderMenu();
430	});
431	vseg.appendChild(vb);
432	});
433	menuEl.appendChild(vseg);
434	menuEl.appendChild(el('div', 'pop-note', t('menu.view_note')));
435	}
436
437	// Theme. A pulldown rather than a row of buttons: ten palettes in three
438	// bands is a list to look down, and a segmented control of ten would eat
439	// the menu and still not say which of them are light. The bands are the
440	// optgroups, so "a light one" is one glance rather than ten guesses.
441	menuEl.appendChild(el('div', 'pop-head', t('menu.theme')));
442	var now = window.DaimondTheme ? DaimondTheme.get() : 'dark';
443	var sel = el('select', 'theme-pick');
444	sel.setAttribute('aria-label', t('menu.theme'));
445	(window.DaimondTheme ? DaimondTheme.tones() : ['dark']).forEach(function (tone) {
446	var grp = document.createElement('optgroup');
447	grp.label = t('menu.tone_' + tone);
448	DaimondTheme.inTone(tone).forEach(function (name) {
449	var o = el('option', null, t('menu.theme_' + name));
450	o.value = name;
451	// A palette that exists for a REASON says so on hover. Most are a
452	// matter of taste and need no note; Amber is not, and a reader
453	// scanning ten names would have no way to tell which is which.
454	var help = 'menu.theme_' + name + '_help';
455	if (t(help) !== help) o.title = t(help);
456	if (name === now) o.selected = true;
457	grp.appendChild(o);
458	});
459	sel.appendChild(grp);
460	});
461	sel.addEventListener('change', function () {
462	DaimondTheme.set(sel.value);
463	renderMenu();
464	});
465	menuEl.appendChild(sel);
466
467	// Reading size. The sample is set in the size being chosen, so the control
468	// shows the change rather than naming it.
469	menuEl.appendChild(el('div', 'pop-head', t('menu.text_size')));
470	var cur = STEPS.indexOf(scale());
471	var row = el('div', 'size-row');
472	var down = el('button', null, 'A');
473	down.style.fontSize = 'var(--fs-xs)';
474	down.title = t('menu.smaller');
475	down.setAttribute('aria-label', down.title);
476	down.disabled = cur <= 0;
477	down.addEventListener('click', function () { setScale(STEPS[cur - 1]); renderMenu(); });
478
479	var sample = el('div', 'sample', stepName(cur));
480	sample.setAttribute('aria-live', 'polite');
481
482	var up = el('button', null, 'A');
483	up.style.fontSize = 'var(--fs-2xl)';
484	up.title = t('menu.larger');
485	up.setAttribute('aria-label', up.title);
486	up.disabled = cur >= STEPS.length - 1;
487	up.addEventListener('click', function () { setScale(STEPS[cur + 1]); renderMenu(); });
488
489	row.appendChild(down);
490	row.appendChild(sample);
491	row.appendChild(up);
492	row.appendChild(el('span', 'pct', Math.round(STEPS[cur] * 100) + '%'));
493	menuEl.appendChild(row);
494
495	// The dock's tiling.
496	menuEl.appendChild(el('div', 'pop-head', t('menu.dock_tiling')));
497	var grids = P().grids();
498	var gseg = el('div', 'seg');
499	// Enumerated from the engine, not from a copy kept here: the palette
500	// already does this, and two lists of the same thing is one list too many.
501	var order = ['auto'].concat(Object.keys(grids).filter(function (k) { return k !== 'auto'; }));
502	order.forEach(function (key) {
503	var g = grids[key] \|\| { cols: model.cols, rows: model.rows };
504	var label = key === 'auto' ? t('menu.dock_auto') : key.replace('x', '×');
505	var b = el('button', 'grid-opt');
506	b.setAttribute('aria-pressed', P().grid() === key ? 'true' : 'false');
507	b.title = key === 'auto'
508	? t('menu.dock_auto_help')
509	: tn('menu.dock_grid_help', g.cols, { cols: g.cols, cells: g.cols * g.rows });
510	var cells = el('div', 'cells');
511	var cols = (key === 'auto') ? 2 : g.cols;
512	var rows = (key === 'auto') ? 2 : g.rows;
513	cells.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
514	for (var i = 0; i < cols * rows; i++) {
515	// The second column of `auto` is drawn as an outline: it appears only
516	// when the window is wide enough, and a solid cell would promise a
517	// column that may not be there.
518	cells.appendChild(el('i', (key === 'auto' && i % 2 === 1) ? 'maybe' : null));
519	}
520	b.appendChild(cells);
521	b.appendChild(el('span', 'cap', label));
522	b.addEventListener('click', function () { P().setGrid(key); renderMenu(); });
523	gseg.appendChild(b);
524	});
525	menuEl.appendChild(gseg);
526
527	// This Diamond's arrangement, when there is a Diamond to hang it on.
528	var diamond = window.DaimondDiamond && DaimondDiamond.current && DaimondDiamond.current();
529	if (diamond && diamond.id) {
530	menuEl.appendChild(el('div', 'pop-head', t('menu.this_diamond')));
531	var saved = P().hasArrangement(diamond.id);
532	var save = el('button', 'gal-row');
533	save.appendChild(el('span', 'nm', saved ? t('menu.arrangement_update')
534	: (diamond.name ? t('menu.arrangement_keep', { name: diamond.name })
535	: t('menu.arrangement_keep_this'))));
536	save.addEventListener('click', function () {
537	P().saveArrangement(diamond.id);
538	renderMenu();
539	});
540	menuEl.appendChild(save);
541	if (saved) {
542	var drop = el('button', 'gal-row');
543	drop.appendChild(el('span', 'nm', t('menu.arrangement_forget')));
544	drop.addEventListener('click', function () { P().forgetArrangement(diamond.id); renderMenu(); });
545	menuEl.appendChild(drop);
546	}
547	var n = el('div', 'pop-note');
548	n.textContent = t('menu.arrangement_note');
549	menuEl.appendChild(n);
550	}
551
552	renderLanguage(menuEl);
553	}
554
555	// ── Language and currency ───────────────────────────────────────────
556	//
557	// Two more ways the app can be made to fit the person using it, so they sit
558	// with the theme and the text size rather than in a settings form of their
559	// own. Currency is DISPLAY only: the note under it says so, because a price
560	// shown in euros that is charged in dollars is a surprise nobody should get
561	// at the card statement.
562
563	var localesReady = null; // the codes that actually have a table, once probed
564
565	/// Find out which locale files exist, by trying to load them. Once only,
566	/// and the picker is redrawn with the answer.
567	function probeLocales() {
568	if (localesReady !== null \|\| !window.DaimondI18n) return;
569	localesReady = [];
570	DaimondI18n.available().then(function (codes) {
571	localesReady = codes;
572	if (menuEl && !menuEl.hidden) renderMenu();
573	});
574	}
575
576	function renderLanguage(box) {
577	if (!window.DaimondI18n) return;
578
579	box.appendChild(el('div', 'pop-head', t('menu.language')));
580	// A full-width select and a note under it, which is how everything else
581	// in this menu explains itself. A label beside the control would leave
582	// each of them too narrow to read.
583	var lrow = el('div', 'set-pick');
584	var lsel = document.createElement('select');
585	lsel.className = 'settings-select';
586	lsel.setAttribute('aria-label', t('menu.language'));
587	DaimondI18n.locales().forEach(function (l) {
588	var o = document.createElement('option');
589	o.value = l.code;
590	o.textContent = l.name;
591	// Until the probe has answered, only the table already in hand is
592	// known to exist. A language with no file is offered but not
593	// selectable, so the picker shows what is coming without pretending
594	// it has arrived.
595	if (localesReady && localesReady.indexOf(l.code) === -1) {
596	o.disabled = true;
597	o.textContent = l.name + ' — ' + t('menu.language_pending');
598	}
599	if (l.code === DaimondI18n.locale()) o.selected = true;
600	lsel.appendChild(o);
601	});
602	// A language with no file falls back to English, and the picker is drawn
603	// again so it shows what actually happened rather than what was asked.
604	lsel.addEventListener('change', function () {
605	var want = lsel.value;
606	DaimondI18n.setLocale(want).then(function (ok) {
607	if (!ok && localesReady && localesReady.indexOf(want) === -1) probeLocales();
608	if (menuEl && !menuEl.hidden) renderMenu();
609	});
610	});
611	// Probed once per page, and only when someone reaches for the picker: the
612	// probe is a load of each file, so what is offered is what is on disk
613	// rather than what a list here claims -- but merely opening the
614	// appearance menu should not fetch eight files to find out.
615	lsel.addEventListener('focus', probeLocales);
616	lsel.addEventListener('pointerdown', probeLocales);
617	lrow.appendChild(lsel);
618	box.appendChild(lrow);
619	box.appendChild(el('div', 'pop-note', t('menu.language_help')));
620
621	box.appendChild(el('div', 'pop-head', t('menu.currency')));
622	var crow = el('div', 'set-pick');
623	var csel = document.createElement('select');
624	csel.className = 'settings-select';
625	csel.setAttribute('aria-label', t('menu.currency'));
626	DaimondI18n.currencies().forEach(function (c) {
627	var o = document.createElement('option');
628	o.value = c.code;
629	o.textContent = c.code + ' — ' + c.name;
630	if (c.code === DaimondI18n.currency()) o.selected = true;
631	csel.appendChild(o);
632	});
633	csel.addEventListener('change', function () { DaimondI18n.setCurrency(csel.value); renderMenu(); });
634	crow.appendChild(csel);
635	box.appendChild(crow);
636
637	var cn = el('div', 'pop-note');
638	cn.textContent = DaimondI18n.currency() === 'USD'
639	? t('menu.currency_help')
640	: t('menu.currency_help') + ' ' + t('billing.usd_note')
641	+ ' ' + t('billing.rates_as_of', { date: DaimondI18n.ratesAsOf() });
642	box.appendChild(cn);
643	}
644
645	function toggleMenu(anchor) {
646	menuEl = menuEl \|\| document.getElementById('settings-menu');
647	if (!menuEl.hidden) { closeMenu(); return; }
648	renderMenu();
649	openPop(menuEl, anchor);
650	anchor.setAttribute('aria-expanded', 'true');
651	// The first SETTING, not the closer. The closer is first in the document
652	// now, and landing the keyboard on Close would offer the way out before
653	// the thing itself.
654	var first = menuEl.querySelector('button:not(.ui-close)');
655	if (first) first.focus();
656	}
657
658	function closeMenu() {
659	if (!menuEl \|\| menuEl.hidden) return;
660	menuEl.hidden = true;
661	var b = document.getElementById('settings-menu-btn');
662	if (b) { b.setAttribute('aria-expanded', 'false'); b.focus(); }
663	}
664
665	/// Place a popover under the control that opened it, kept inside the window.
666	///
667	/// The `left: 0` before the measurement is load-bearing. A fixed box's
668	/// shrink-to-fit width is capped by the room to the RIGHT of wherever it
669	/// currently sits, and the pop still carries the `left` from its last open —
670	/// so after a resize or a rotation, `offsetWidth` reported the width the old
671	/// position allowed rather than the width the content wants. The Appearance
672	/// menu came back 272px instead of 350px on every open after the first, and
673	/// its dock-tiling row wrapped into two ragged lines. Measuring from the left
674	/// edge lets it be its full width before anything is decided from it.
675	function openPop(pop, anchor) {
676	pop.hidden = false;
677	pop.style.left = '0px';
678	var r = anchor.getBoundingClientRect();
679	var w = pop.offsetWidth;
680	var left = Math.min(Math.max(8, r.right - w), window.innerWidth - w - 8);
681	pop.style.left = left + 'px';
682	pop.style.top = (r.bottom + 6) + 'px';
683	}
684
685	// ── The palette ─────────────────────────────────────────────────────
686	// Invisible, and therefore never the primary surface -- but complete, which
687	// is what allows the visible surfaces to be selective.
688
689	var palEl, palInput, palList, palItems = [], palAt = 0;
690
691	function commands() {
692	var out = [];
693	P().model().panels.forEach(function (p) {
694	out.push({
695	kind: t('pal.kind_panel'), name: p.label,
696	hint: p.open ? t('pal.hint_open') : (p.full ? t('pal.hint_full') : ''),
697	run: function () { (P().goTo \|\| P().activate)(p.id); },
698	off: !!(p.full && !p.open),
699	});
700	});
701	(window.DaimondTheme ? DaimondTheme.list() : []).forEach(function (name) {
702	out.push({
703	kind: t('pal.kind_theme'), name: t('menu.theme_' + name),
704	hint: DaimondTheme.get() === name ? t('pal.hint_current') : '',
705	run: function () { DaimondTheme.set(name); },
706	});
707	});
708	STEPS.forEach(function (v, i) {
709	out.push({
710	kind: t('pal.kind_size'), name: stepName(i),
711	hint: Math.round(v * 100) + '%',
712	run: function () { setScale(v); },
713	});
714	});
715	var grids = P().grids();
716	Object.keys(grids).forEach(function (k) {
717	// `auto` is held as null in the engine, because its shape is decided by
718	// the window rather than fixed; it is offered below on its own terms.
719	if (!grids[k]) return;
720	out.push({
721	kind: t('pal.kind_dock'), name: t(GRID_KEYS[k] \|\| 'dock.automatic'),
722	hint: P().grid() === k ? t('pal.hint_current') : '',
723	run: function () { P().setGrid(k); },
724	});
725	});
726	out.push({ kind: t('pal.kind_dock'), name: t('dock.automatic'), hint: P().grid() === 'auto' ? t('pal.hint_current') : '',
727	run: function () { P().setGrid('auto'); } });
728	// Every language and every currency, reachable without opening a menu --
729	// which is what makes the appearance menu free to stay short.
730	if (window.DaimondI18n) {
731	DaimondI18n.locales().forEach(function (l) {
732	out.push({
733	kind: t('pal.kind_lang'), name: l.name,
734	hint: DaimondI18n.locale() === l.code ? t('pal.hint_current') : '',
735	run: function () { DaimondI18n.setLocale(l.code); },
736	});
737	});
738	DaimondI18n.currencies().forEach(function (c) {
739	out.push({
740	kind: t('pal.kind_ccy'), name: c.code + ' — ' + c.name,
741	hint: DaimondI18n.currency() === c.code ? t('pal.hint_current') : '',
742	run: function () { DaimondI18n.setCurrency(c.code); },
743	});
744	});
745	}
746	// The permission ladder, reachable from Ctrl-K. A mode switch is exactly
747	// what a palette is for: it is a thing you change while working, from
748	// wherever the keyboard already is.
749	if (window.DaimondHandMode) {
750	DaimondHandMode.list().forEach(function (m) {
751	out.push({
752	kind: t('pal.kind_permmode'), name: m.label,
753	hint: DaimondHandMode.get() === m.name ? t('pal.hint_current') : '',
754	run: function () { DaimondHandMode.set(m.name); },
755	});
756	});
757	}
758	return out;
759	}
760
761	function renderPalette() {
762	var q = palInput.value.trim().toLowerCase();
763	palItems = commands().filter(function (c) {
764	return !q \|\| (c.name + ' ' + c.kind).toLowerCase().indexOf(q) !== -1;
765	});
766	if (palAt >= palItems.length) palAt = 0;
767	palList.innerHTML = '';
768	if (!palItems.length) {
769	var e = el('li', 'pal-empty', t('pal.nothing'));
770	palList.appendChild(e);
771	return;
772	}
773	palItems.forEach(function (c, i) {
774	var li = el('li', 'pal-item');
775	li.id = 'pal-i' + i;
776	li.setAttribute('role', 'option');
777	li.setAttribute('aria-selected', i === palAt ? 'true' : 'false');
778	li.appendChild(el('span', 'kind', c.kind));
779	li.appendChild(el('span', 'nm', c.name));
780	if (c.hint) li.appendChild(el('span', 'hint', c.hint));
781	li.addEventListener('mousemove', function () { if (palAt !== i) { palAt = i; renderPalette(); } });
782	li.addEventListener('click', function () { runAt(i); });
783	palList.appendChild(li);
784	});
785	palInput.setAttribute('aria-activedescendant', 'pal-i' + palAt);
786	var sel = palList.children[palAt];
787	if (sel && sel.scrollIntoView) sel.scrollIntoView({ block: 'nearest' });
788	}
789
790	function runAt(i) {
791	var c = palItems[i];
792	if (!c \|\| c.off) return;
793	closePalette();
794	c.run();
795	}
796
797	/// What had the focus when the palette took it, so it can be given back.
798	var palPrev = null;
799
800	function openPalette() {
801	palEl = palEl \|\| document.getElementById('palette');
802	if (!palEl \|\| !palEl.hidden) return;
803	closeMenu(); closeGallery();
804	palPrev = document.activeElement;
805	palInput = document.getElementById('pal-input');
806	palList = document.getElementById('pal-list');
807	palInput.value = '';
808	palAt = 0;
809	palEl.hidden = false;
810	renderPalette();
811	palInput.focus();
812	}
813
814	/// Close, and put the focus back where it was.
815	///
816	/// Hiding the scrim and stopping left the focus on `<body>`, so the next Tab
817	/// restarted at the top of the app -- for a keyboard user, the whole rail and
818	/// topbar again, every time the palette was opened and dismissed. `closeMenu`
819	/// and `closeGallery` both already do this; this is the third of three.
820	///
821	/// `runAt` closes BEFORE running the command, so a command that deliberately
822	/// moves the focus somewhere else has to win. Restoring here and letting the
823	/// command move it afterwards is that order.
824	function closePalette() {
825	if (!palEl \|\| palEl.hidden) return;
826	palEl.hidden = true;
827	if (palPrev && palPrev.focus && document.contains(palPrev)) {
828	try { palPrev.focus(); } catch (e) { /* gone from the page */ }
829	}
830	palPrev = null;
831	}
832
833	// ── Wiring ──────────────────────────────────────────────────────────
834
835	function init() {
836	initScale();
837
838	// A guide page announces itself when it loads, because it cannot be seen
839	// from here until it does.
840	window.addEventListener('message', function (e) {
841	var d = e && e.data;
842	if (!d \|\| d.daimondGuide !== 'ready') return;
843	try { e.source.postMessage(styleMessage(), '*'); } catch (err) {}
844	});
845
846	// Setting the theme must reach the frames too, and the theme is owned by
847	// daimond.js -- so the service is wrapped rather than duplicated.
848	if (window.DaimondTheme && !DaimondTheme._wrapped) {
849	var inner = DaimondTheme.set;
850	DaimondTheme.set = function (name) { inner(name); tellFrames(); };
851	DaimondTheme._wrapped = true;
852	}
853
854	var menuBtn = document.getElementById('settings-menu-btn');
855	if (menuBtn) menuBtn.addEventListener('click', function (e) { e.stopPropagation(); toggleMenu(menuBtn); });
856
857	// A language or currency change repaints what this file draws. The chip
858	// row and the gallery are redrawn from the model, which is re-read from
859	// the DOM first, because a panel's name is an attribute on it.
860	if (window.DaimondI18n) {
861	DaimondI18n.onChange(function () {
862	if (P() && P().relabel) P().relabel();
863	else if (P()) P().reflow();
864	if (galEl && !galEl.hidden) renderGallery();
865	if (menuEl && !menuEl.hidden) renderMenu();
866	// And the framed guide, which carries the language the same way it
867	// carries the palette. Without this line the guide stays in the
868	// language it was opened in -- the whole point of sending a locale.
869	tellFrames();
870	});
871	}
872
873	palEl = document.getElementById('palette');
874	palInput = document.getElementById('pal-input');
875	palList = document.getElementById('pal-list');
876
877	if (palInput) {
878	palInput.addEventListener('input', function () { palAt = 0; renderPalette(); });
879	palInput.addEventListener('keydown', function (e) {
880	if (e.key === 'ArrowDown') { e.preventDefault(); palAt = Math.min(palAt + 1, palItems.length - 1); renderPalette(); }
881	else if (e.key === 'ArrowUp') { e.preventDefault(); palAt = Math.max(palAt - 1, 0); renderPalette(); }
882	else if (e.key === 'Enter') { e.preventDefault(); runAt(palAt); }
883	else if (e.key === 'Escape') { e.preventDefault(); closePalette(); }
884	// The palette is one box and a list walked with the arrows, and it
885	// covers the app. Tab had nowhere to go inside it, so it went behind
886	// it instead -- leaving the caret on a rail button under the scrim,
887	// with the palette still up and no longer taking what was typed.
888	else if (e.key === 'Tab') { e.preventDefault(); }
889	});
890	}
891	if (palEl) palEl.addEventListener('mousedown', function (e) { if (e.target === palEl) closePalette(); });
892	var palX = document.getElementById('pal-close');
893	if (palX) palX.addEventListener('click', function (e) { e.preventDefault(); closePalette(); });
894
895	document.addEventListener('keydown', function (e) {
896	// Ctrl/Cmd-K is the convention users arrive already knowing, and it is
897	// not a browser binding on any platform we serve.
898	if ((e.ctrlKey \|\| e.metaKey) && !e.altKey && (e.key === 'k' \|\| e.key === 'K')) {
899	// Ctrl-K is kill-to-end-of-line in a text field on macOS, so it is
900	// left alone there; Cmd-K still opens the palette on that platform.
901	var tgt = e.target;
902	var typing = tgt && (tgt.tagName === 'INPUT' \|\| tgt.tagName === 'TEXTAREA' \|\| tgt.isContentEditable);
903	if (typing && e.ctrlKey && !e.metaKey) return;
904	e.preventDefault();
905	palEl && palEl.hidden ? openPalette() : closePalette();
906	return;
907	}
908	if (e.key === 'Escape') { closeMenu(); closeGallery(); closePalette(); }
909	// Both popovers say `role="dialog"` and cover the app, and Tab used to
910	// walk straight out of them into the page behind -- with the popover
911	// still up, still covering whatever now had the focus. A dialog that
912	// lets the keyboard out from under itself is a dialog in name only, so
913	// the promise the markup makes is kept here. The trap is the one the
914	// real dialogs use, borrowed rather than copied.
915	if (e.key === 'Tab' && window.DaimondCore && DaimondCore.keepFocusIn) {
916	var open = (menuEl && !menuEl.hidden) ? menuEl
917	: (galEl && !galEl.hidden) ? galEl : null;
918	if (open) DaimondCore.keepFocusIn(open, e);
919	}
920	});
921
922	// A click anywhere else closes a popover, which is what a user expects of
923	// one and what stops two being open at once.
924	//
925	// "Anywhere else" has to be decided from the event's PATH, not from where
926	// its target sits now. Every control in the appearance menu re-renders the
927	// menu, which throws the clicked button away; by the time this bubbles,
928	// `menuEl.contains(e.target)` asks whether a detached node is a descendant
929	// and is told no. So the menu closed itself the moment you used it -- one
930	// step of text size per opening, and no way to watch the page change under
931	// the control that was changing it. The path is computed at dispatch,
932	// before any re-render, so it still knows where the click began.
933	function beganIn(pop, e) {
934	var path = e.composedPath ? e.composedPath() : null;
935	return path ? path.indexOf(pop) >= 0 : pop.contains(e.target);
936	}
937	document.addEventListener('click', function (e) {
938	if (menuEl && !menuEl.hidden && !beganIn(menuEl, e)) closeMenu();
939	if (galEl && !galEl.hidden && !beganIn(galEl, e)) closeGallery();
940	});
941
942	window.addEventListener('resize', function () { closeMenu(); closeGallery(); });
943	}
944
945	window.DaimondWorkspace = {
946	init: init,
947	renderTags: renderTags,
948	openPalette: openPalette,
949	scale: scale,
950	setScale: setScale,
951	steps: function () { return STEPS.slice(); },
952	};
953
954	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
955	else init();
956	})();