5.0
New table rotation flip
This commit is contained in:
fraxle
+20
-19
@@ -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"
|
||||
|
||||
@@ -732,6 +732,8 @@ export function useAppState() {
|
||||
const bodyScrollRef = useRef(null);
|
||||
const bodyTableRef = useRef(null);
|
||||
const tableWrapRef = useRef(null);
|
||||
// The rotated orientation's single scroll pane (scrolls in both axes).
|
||||
const rotatedScrollRef = useRef(null);
|
||||
|
||||
// ── 7. COLUMN POPUP + TABLE SCROLL ───────────────────────────────────
|
||||
const {
|
||||
@@ -751,6 +753,7 @@ export function useAppState() {
|
||||
handleBodyScroll,
|
||||
} = useTableScroll({
|
||||
headTableRef, bodyTableRef, bodyScrollRef, headTrackRef, tableWrapRef,
|
||||
rotatedScrollRef,
|
||||
forecast, visibleCols, selectedDay, skinType, vehicleType,
|
||||
indoorMode, indoorManaged, showDecimals, showUnits,
|
||||
// The rotated table is a single table with CSS-only sticky edges, so
|
||||
@@ -907,7 +910,7 @@ export function useAppState() {
|
||||
forecastView, setForecastView,
|
||||
// table refs
|
||||
headStickyRef, headTrackRef, headTableRef,
|
||||
bodyScrollRef, bodyTableRef, tableWrapRef,
|
||||
bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
|
||||
// column popup
|
||||
colPopup, colPopupRef,
|
||||
handleThClick, handleThEnter, handleThLeave,
|
||||
|
||||
@@ -28,6 +28,7 @@ export function useTableScroll({
|
||||
headTableRef,
|
||||
bodyTableRef,
|
||||
bodyScrollRef,
|
||||
rotatedScrollRef,
|
||||
headTrackRef,
|
||||
tableWrapRef,
|
||||
forecast,
|
||||
@@ -41,7 +42,9 @@ export function useTableScroll({
|
||||
showUnits,
|
||||
// When the table is rotated it renders as ONE table whose sticky header
|
||||
// row and sticky metric column are handled entirely in CSS. There is no
|
||||
// second table to keep in step, so every effect below short-circuits.
|
||||
// second table to keep in step, so the width-sync and scroll-indicator
|
||||
// effects short-circuit — but drag-to-scroll still applies, just to the
|
||||
// rotated pane (which scrolls in both axes) instead of the body table.
|
||||
rotated = false,
|
||||
}) {
|
||||
// --- SCROLL INDICATORS ---------------------------------------------
|
||||
@@ -57,21 +60,27 @@ export function useTableScroll({
|
||||
|
||||
// --- DRAG-TO-SCROLL ------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (rotated) return;
|
||||
const el = bodyScrollRef.current;
|
||||
// Whichever element is actually the scroller in the current
|
||||
// orientation. Rotated, it scrolls vertically too, so the drag
|
||||
// follows both axes.
|
||||
const el = rotated ? (rotatedScrollRef && rotatedScrollRef.current) : bodyScrollRef.current;
|
||||
if (!el) return;
|
||||
let isDown = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let startScroll = 0;
|
||||
let startScrollTop = 0;
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
// Only act on clicks that land inside the body scroller
|
||||
// Only act on clicks that land inside the scroller
|
||||
if (!el.contains(e.target)) return;
|
||||
if (e.button !== 0) return;
|
||||
if (e.target.closest('button, a, input, select')) return;
|
||||
isDown = true;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
startScroll = el.scrollLeft;
|
||||
startScrollTop = el.scrollTop;
|
||||
el.style.cursor = 'grabbing';
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.webkitUserSelect = 'none';
|
||||
@@ -80,6 +89,7 @@ export function useTableScroll({
|
||||
if (!isDown) return;
|
||||
const dx = e.clientX - startX;
|
||||
el.scrollLeft = startScroll - dx;
|
||||
if (rotated) el.scrollTop = startScrollTop - (e.clientY - startY);
|
||||
};
|
||||
const onMouseUp = () => {
|
||||
if (!isDown) return;
|
||||
|
||||
Reference in New Issue
Block a user