RC2
Tweaks and new pulldowns
This commit is contained in:
fraxle
+71
-65
@@ -30,7 +30,7 @@ import {
|
||||
VEHICLE_TYPES, BUILDING_TYPES,
|
||||
cloudCategory, confidenceBand, moonGlyph,
|
||||
} from './utils.js';
|
||||
import { SkyScope, WindVane, CloudIcon, ScopeReticle, PrecipIcon } from './components.js';
|
||||
import { SkyScope, WindVane, CloudIcon, ScopeReticle, PrecipIcon, CustomSelect, VentPill } from './components.js';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
@@ -1068,11 +1068,17 @@ export function UTCIForecast() {
|
||||
<span class="col-toggles-label">Columns:</span>
|
||||
|
||||
${activeProfile === 'outdoors' && html`
|
||||
<select
|
||||
class=${`col-toggle burn-select on`}
|
||||
<${CustomSelect}
|
||||
value=${outdoorsVariant}
|
||||
onChange=${(e) => {
|
||||
const v = e.target.value;
|
||||
isOn=${true}
|
||||
hideLabel="Outdoors"
|
||||
hidingLabel="Hide Outdoors"
|
||||
options=${Object.entries(OUTDOORS_VARIANTS).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.name + (v.proOnly && !isPro ? ' 🔒' : ''),
|
||||
disabled: false,
|
||||
}))}
|
||||
onChange=${(v) => {
|
||||
if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
|
||||
setProPromptSource(`variant:${v}`);
|
||||
setProPromptDay(0);
|
||||
@@ -1080,10 +1086,8 @@ export function UTCIForecast() {
|
||||
}
|
||||
setOutdoorsVariant(v);
|
||||
setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
|
||||
}}>
|
||||
${Object.entries(OUTDOORS_VARIANTS).map(([k, v]) => html`
|
||||
<option key=${k} value=${k}>${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}</option>`)}
|
||||
</select>`}
|
||||
}}
|
||||
/>`}
|
||||
|
||||
${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['air']) && html`<button class=${`col-toggle${visibleCols.air ? ' on' : ''}`} onClick=${() => toggleCol('air')}>Air</button>`}
|
||||
${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['rh']) && html`<button class=${`col-toggle${visibleCols.rh ? ' on' : ''}`} onClick=${() => toggleCol('rh')}>RH</button>`}
|
||||
@@ -1105,84 +1109,87 @@ export function UTCIForecast() {
|
||||
${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['uvB']) && html`<button class=${`col-toggle${visibleCols.uvB ? ' on' : ''}`} onClick=${() => toggleCol('uvB')}>UV-B</button>`}
|
||||
|
||||
${(activeProfile === 'custom' || FILTER_PROFILES[activeProfile]?.cols['burn']) && html`
|
||||
<select
|
||||
class=${`col-toggle burn-select${visibleCols.burn ? ' on' : ''}`}
|
||||
value=${visibleCols.burn ? skinType : 'off'}
|
||||
onChange=${(e) => {
|
||||
if (e.target.value === 'off') {
|
||||
<${CustomSelect}
|
||||
value=${skinType}
|
||||
isOn=${visibleCols.burn}
|
||||
hideLabel="Burn"
|
||||
hidingLabel="Hide Burn"
|
||||
options=${Object.entries(SKIN_TYPES).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.name.split(' · ')[1] + ' skin',
|
||||
}))}
|
||||
onChange=${(v) => {
|
||||
if (v === 'off') {
|
||||
setVisibleCols(prev => ({ ...prev, burn: false }));
|
||||
} else {
|
||||
setSkinType(e.target.value);
|
||||
setSkinType(v);
|
||||
setVisibleCols(prev => ({ ...prev, burn: true }));
|
||||
}
|
||||
}}>
|
||||
<option value="off">${visibleCols.burn ? 'Hide Burn' : 'Burn'}</option>
|
||||
${Object.entries(SKIN_TYPES).map(([k, v]) => html`
|
||||
<option key=${k} value=${k}>${v.name.split(' · ')[1]} skin</option>`)}
|
||||
</select>`}
|
||||
}}
|
||||
/>`}
|
||||
|
||||
${(activeProfile === 'custom' || FILTER_PROFILES[activeProfile]?.cols['vehicleT']) && html`
|
||||
<span class="col-toggle-group">
|
||||
<select
|
||||
class=${`col-toggle burn-select grouped-left${visibleCols.vehicleT ? ' on' : ''}`}
|
||||
value=${visibleCols.vehicleT ? vehicleType : 'off'}
|
||||
onChange=${(e) => {
|
||||
if (e.target.value === 'off') {
|
||||
<${CustomSelect}
|
||||
value=${vehicleType}
|
||||
isOn=${visibleCols.vehicleT}
|
||||
hideLabel="Vehicle"
|
||||
hidingLabel="Hide Vehicle"
|
||||
groupedLeft=${true}
|
||||
isLastChild=${!visibleCols.vehicleT}
|
||||
options=${Object.entries(VEHICLE_TYPES).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.name,
|
||||
}))}
|
||||
onChange=${(v) => {
|
||||
if (v === 'off') {
|
||||
setVisibleCols(prev => ({ ...prev, vehicleT: false }));
|
||||
setVehicleVent(false);
|
||||
} else {
|
||||
setVehicleType(e.target.value);
|
||||
setVehicleType(v);
|
||||
setVisibleCols(prev => ({ ...prev, vehicleT: true }));
|
||||
}
|
||||
}}>
|
||||
<option value="off">${visibleCols.vehicleT ? 'Hide Vehicle' : 'Vehicle'}</option>
|
||||
${Object.entries(VEHICLE_TYPES).map(([k, v]) => html`
|
||||
<option key=${k} value=${k}>${v.name}</option>`)}
|
||||
</select>
|
||||
}}
|
||||
/>
|
||||
${visibleCols.vehicleT && html`
|
||||
<label
|
||||
class=${`col-toggle-vent grouped-right${vehicleVent ? ' on' : ''}`}
|
||||
title="Ventilation — open windows significantly reduce cabin heat build-up">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked=${vehicleVent}
|
||||
onChange=${() => setVehicleVent(v => !v)}
|
||||
style=${{ position: 'absolute', opacity: 0, width: 0, height: 0 }} />
|
||||
<span class="vent-checkbox${vehicleVent ? ' checked' : ''}"></span>
|
||||
Ventilation
|
||||
</label>`}
|
||||
<${VentPill}
|
||||
checked=${vehicleVent}
|
||||
onChange=${() => setVehicleVent(v => !v)}
|
||||
label="Ventilation"
|
||||
title="Ventilation — open windows significantly reduce cabin heat build-up"
|
||||
/>`}
|
||||
</span>`}
|
||||
|
||||
${(activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['indoorT'] || FILTER_PROFILES[activeProfile].cols['managedT']) && html`
|
||||
<span class="col-toggle-group">
|
||||
<select
|
||||
class=${`col-toggle burn-select grouped-left${indoorMode === 'on' ? ' on' : ''}`}
|
||||
value=${indoorMode === 'on' ? buildingType : 'off'}
|
||||
onChange=${(e) => {
|
||||
if (e.target.value === 'off') {
|
||||
<${CustomSelect}
|
||||
value=${buildingType}
|
||||
isOn=${indoorMode === 'on'}
|
||||
hideLabel="Indoors"
|
||||
hidingLabel="Hide Indoors"
|
||||
groupedLeft=${true}
|
||||
isLastChild=${indoorMode !== 'on'}
|
||||
options=${Object.entries(BUILDING_TYPES).map(([k, v]) => ({
|
||||
value: k,
|
||||
label: v.name,
|
||||
}))}
|
||||
onChange=${(v) => {
|
||||
if (v === 'off') {
|
||||
setIndoorMode('off');
|
||||
setIndoorManaged(false);
|
||||
} else {
|
||||
setBuildingType(e.target.value);
|
||||
setBuildingType(v);
|
||||
setIndoorMode('on');
|
||||
}
|
||||
}}>
|
||||
<option value="off">${indoorMode === 'on' ? 'Hide Indoors' : 'Indoors'}</option>
|
||||
${Object.entries(BUILDING_TYPES).map(([k, v]) => html`
|
||||
<option key=${k} value=${k}>${v.name}</option>`)}
|
||||
</select>
|
||||
}}
|
||||
/>
|
||||
${indoorMode === 'on' && html`
|
||||
<label
|
||||
class=${`col-toggle-vent grouped-right${indoorManaged ? ' on' : ''}`}
|
||||
title="Managed: curtains closed by day, windows open when cooler outside">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked=${indoorManaged}
|
||||
onChange=${() => setIndoorManaged(v => !v)}
|
||||
style=${{ position: 'absolute', opacity: 0, width: 0, height: 0 }} />
|
||||
<span class="vent-checkbox${indoorManaged ? ' checked' : ''}"></span>
|
||||
Managed
|
||||
</label>`}
|
||||
<${VentPill}
|
||||
checked=${indoorManaged}
|
||||
onChange=${() => setIndoorManaged(v => !v)}
|
||||
label="Managed"
|
||||
title="Managed: curtains closed by day, windows open when cooler outside"
|
||||
/>`}
|
||||
</span>`}
|
||||
${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['precip']) && html`<button class=${`col-toggle${visibleCols.precip ? ' on' : ''}`} onClick=${() => toggleCol('precip')}>Precip</button>`}
|
||||
|
||||
@@ -1456,4 +1463,3 @@ export function UTCIForecast() {
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { h, Fragment } from '../vendor/preact.js';
|
||||
import { useState, useEffect, useRef } from '../vendor/preact-hooks.js';
|
||||
import htm from '../vendor/htm.js';
|
||||
import {
|
||||
skyGradientForElev, skyFillForElev, grassFillForElev,
|
||||
@@ -22,6 +23,113 @@ import {
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// CUSTOMSELECT — cross-platform styled dropdown pill.
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// props:
|
||||
// value — current value string
|
||||
// options — array of { value, label, disabled }
|
||||
// onChange — fn(newValue)
|
||||
// hideLabel — label shown when value === 'off' (e.g. 'Burn')
|
||||
// hidingLabel — label shown for the 'off' option when active (e.g. 'Hide Burn')
|
||||
// isOn — bool — whether the pill shows as active (brass)
|
||||
// groupedLeft — bool — fuse right side with a VentPill
|
||||
// isLastChild — bool — restore right border-radius when no sibling follows
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, isOn, groupedLeft, isLastChild }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const wrapRef = useRef(null);
|
||||
|
||||
// Close on outside click or Escape
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDown = (e) => {
|
||||
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
|
||||
};
|
||||
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
|
||||
document.addEventListener('mousedown', onDown);
|
||||
document.addEventListener('touchstart', onDown);
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onDown);
|
||||
document.removeEventListener('touchstart', onDown);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
// Build the label shown on the button
|
||||
const activeOpt = options.find(o => o.value === value);
|
||||
const btnLabel = isOn
|
||||
? (activeOpt ? activeOpt.label : hideLabel)
|
||||
: hideLabel;
|
||||
|
||||
const btnClass = [
|
||||
'cs-btn',
|
||||
isOn ? 'on' : '',
|
||||
groupedLeft ? 'grouped-left' : '',
|
||||
(groupedLeft && isLastChild) ? 'last-child' : '',
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
return html`
|
||||
<span class=${`cs-wrap${open ? ' open' : ''}`} ref=${wrapRef}>
|
||||
<button
|
||||
class=${btnClass}
|
||||
onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }}
|
||||
type="button"
|
||||
>
|
||||
${btnLabel}
|
||||
<span class="cs-arrow">▾</span>
|
||||
</button>
|
||||
${open && html`
|
||||
<div class="cs-panel" role="listbox">
|
||||
${isOn && html`
|
||||
<span
|
||||
class="cs-option"
|
||||
role="option"
|
||||
onClick=${() => { onChange('off'); setOpen(false); }}
|
||||
>${hidingLabel || ('Hide ' + hideLabel)}</span>
|
||||
<div class="cs-divider"></div>
|
||||
`}
|
||||
${options.map(opt => html`
|
||||
<span
|
||||
key=${opt.value}
|
||||
class=${`cs-option${opt.value === value && isOn ? ' selected' : ''}${opt.disabled ? ' disabled' : ''}`}
|
||||
role="option"
|
||||
onClick=${() => {
|
||||
if (opt.disabled) return;
|
||||
onChange(opt.value);
|
||||
setOpen(false);
|
||||
}}
|
||||
>${opt.label}</span>
|
||||
`)}
|
||||
</div>
|
||||
`}
|
||||
</span>`;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// VENTPILL — the checkbox pill fused to the right of a CustomSelect.
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// props:
|
||||
// checked — bool
|
||||
// onChange — fn()
|
||||
// label — string
|
||||
// title — tooltip string
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
export function VentPill({ checked, onChange, label, title }) {
|
||||
return html`
|
||||
<label class=${`cs-vent${checked ? ' on' : ''}`} title=${title}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked=${checked}
|
||||
onChange=${onChange}
|
||||
style=${{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
|
||||
/>
|
||||
<span class=${`cs-checkbox${checked ? ' checked' : ''}`}></span>
|
||||
${label}
|
||||
</label>`;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// SKYSCOPE — the little porthole circle next to each hour.
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user