refactor(tiles): each tile's zoom state is painted by _syncTileZoom

_applyTileLayout carried a loop that set every tile's zoomed class and
its ⤢ button's pressed state and label. That loop is now _syncTileZoom,
beside _syncTileSlots and _syncTileDividers, which _applyTileLayout calls
the same way. Same order of writes, same last-English-label compare.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-10-07 09:37:04 +02:00
parent b9ce850a2c
commit c101b70678
+20 -15
View File
@@ -1273,21 +1273,7 @@ Object.assign(CodemanApp.prototype, {
} }
const zoomed = grid.zoomedId && grid.tiles.has(grid.zoomedId) ? grid.zoomedId : null; const zoomed = grid.zoomedId && grid.tiles.has(grid.zoomedId) ? grid.zoomedId : null;
section.classList.toggle('tile-grid--zoomed', !!zoomed); section.classList.toggle('tile-grid--zoomed', !!zoomed);
for (const [id, entry] of grid.tiles) { this._syncTileZoom(zoomed);
entry.el.classList.toggle('tile--zoomed', id === zoomed);
const zoomBtn = entry.zoomBtn;
if (zoomBtn) {
const on = id === zoomed;
const label = on ? 'Restore the grid' : 'Zoom this tile';
zoomBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
// Against the last English label, never the DOM (translated in zh-CN).
if (entry.zoomLabel !== label) {
entry.zoomLabel = label;
zoomBtn.title = label;
zoomBtn.setAttribute('aria-label', label);
}
}
}
// Zoomed: one cell; the other tiles stay connected but hidden (CSS), so // Zoomed: one cell; the other tiles stay connected but hidden (CSS), so
// they measure nothing and send no resize. Otherwise every tile is placed // they measure nothing and send no resize. Otherwise every tile is placed
// explicitly in reading order, with a divider track between columns and // explicitly in reading order, with a divider track between columns and
@@ -1305,6 +1291,25 @@ Object.assign(CodemanApp.prototype, {
this._persistTileGrid(); this._persistTileGrid();
}, },
// Each tile's zoom state: the zoomed one is shown alone (CSS), and every ⤢
// button says what pressing it does next.
_syncTileZoom(zoomed) {
for (const [id, entry] of this._tileGrid.tiles) {
const on = id === zoomed;
entry.el.classList.toggle('tile--zoomed', on);
const zoomBtn = entry.zoomBtn;
if (!zoomBtn) continue;
zoomBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
const label = on ? 'Restore the grid' : 'Zoom this tile';
// Against the last English label, never the DOM (translated in zh-CN).
if (entry.zoomLabel !== label) {
entry.zoomLabel = label;
zoomBtn.title = label;
zoomBtn.setAttribute('aria-label', label);
}
}
},
// The empty cells of a layout that is not full (3 tiles in a 2x2, 5 in a // The empty cells of a layout that is not full (3 tiles in a 2x2, 5 in a
// 3x2): drop targets for a tab, after the tiles in reading order. // 3x2): drop targets for a tab, after the tiles in reading order.
_syncTileSlots(count, cols) { _syncTileSlots(count, cols) {