gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5.0

Browse Source 
New table rotation flip
This commit is contained in:
fraxle
2026-08-06 00:48:07 +01:00
parent 7f3fbb18c7
commit 60eee8e4c1
4 changed files with 315 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+20 -19
View File
@@ -235,7 +235,7 @@ export function UTCIForecast() {
utciEnv, setUtciEnv,
tableRotated, toggleTableRotated,
headStickyRef, headTrackRef, headTableRef,
bodyScrollRef, bodyTableRef, tableWrapRef,
bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
colPopup, colPopupRef,
handleThClick, handleThEnter, handleThLeave,
handlePopupEnter, handlePopupLeave,
@@ -1144,6 +1144,15 @@ export function UTCIForecast() {
<span class="col-toggles-edit-btn-label">${!isPro ? '🔒 Edit columns' : colTogglesOpen ? 'Hide Columns' : 'Edit columns'}</span>
<svg class="col-toggles-edit-btn-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
</button>
${forecastView === 'table' && html`
<button type="button"
class=${'table-rotate-btn table-rotate-btn--toolbar' + (tableRotated ? ' on' : '')}
title=${tableRotated ? 'Hours run along the top — click for hours down the side' : 'Hours run down the side — click for hours along the top'}
aria-pressed=${tableRotated ? 'true' : 'false'}
onClick=${toggleTableRotated}>
<span class="table-rotate-btn-icon" aria-hidden="true">⭮</span>
<span class="table-rotate-btn-label">Rotate</span>
</button>`}
</span>
${forecastView === 'simple' && (() => {
const showFur = visibleCols.furSurfaceT;
@@ -1407,26 +1416,20 @@ export function UTCIForecast() {
</span>`;
};
// Lives in the table's top-left cell in both orientations.
// stopPropagation so it doesn't also fire the header cell's
// column-info popup, same as the row-interval stepper.
const rotateBtn = html`
<button type="button"
class=${`table-rotate-btn${tableRotated ? ' on' : ''}`}
title=${tableRotated ? 'Hours down the side' : 'Hours along the top'}
aria-label="Rotate table"
aria-pressed=${tableRotated ? 'true' : 'false'}
onClick=${(e) => { e.stopPropagation(); toggleTableRotated(); }}
>⭮</button>`;
// ── ROTATED: hours across the top, metrics down the side ──
// One table, not two: the sticky top row and sticky left
// column are pure CSS here, so none of the head/body width
// syncing in useTableScroll is needed (it is disabled while
// rotated).
// The key matters: both orientations root at a <div>, so
// without distinct keys Preact diffs one into the other and
// reuses the DOM nodes — carrying over the inline column
// widths and header transforms that the width-sync leaves
// behind, which is what knocks the columns out of
// alignment when you flip back.
if (tableRotated) return html`
<div class=${`utci-table-wrap is-rotated${showUnits ? '' : ' no-units'}`}>
<div class="utci-rotated-scroll">
<div key="table-rotated" class=${`utci-table-wrap is-rotated${showUnits ? '' : ' no-units'}`}>
<div class="utci-rotated-scroll" ref=${rotatedScrollRef}>
<table class="utci-table utci-table-rotated">
<thead>
<tr>
@@ -1439,7 +1442,6 @@ export function UTCIForecast() {
<span class="hour-interval" onClick=${(e) => e.stopPropagation()}>
<${RowStepper} value=${tableInterval} onChange=${setTableInterval} showLabel=${false} />
</span>
${rotateBtn}
</span>
</th>
${tableRows.map(r => {
@@ -1463,7 +1465,7 @@ export function UTCIForecast() {
${newGroup && html`
<tr class="grp-label-row grp-label-row--rotated">
<th class=${`grp-label grp-label-${newGroup} grp-${newGroup}`} scope="rowgroup" colspan=${tableRows.length + 1}>
${GROUP_LABELS[newGroup]}
<span class="grp-label-pin">${GROUP_LABELS[newGroup]}</span>
</th>
</tr>`}
<tr class="rot-metric-row">
@@ -1494,7 +1496,7 @@ export function UTCIForecast() {
// Split into a sticky header table and a scrolling body
// table whose column widths useTableScroll keeps in step.
return html`
<div class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
<div key="table-normal" class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
<span class="utci-scroll-chevron left" aria-hidden="true">‹</span>
<span class="utci-scroll-chevron right" aria-hidden="true">›</span>
@@ -1509,7 +1511,6 @@ export function UTCIForecast() {
<span class="hour-interval" onClick=${(e) => e.stopPropagation()}>
<${RowStepper} value=${tableInterval} onChange=${setTableInterval} showLabel=${false} />
</span>
${rotateBtn}
</th>
${visibleColumnDefs.map(d => html`
<th key=${d.key} scope="col"