Fix: shift+click preserves input value, Ctrl+click adopts value, stable highlight layout
- shift+click now only sets fromUnitId; inputValue is unchanged so all outputs recalculate correctly from the original user input - Ctrl+click is a new gesture that sets both fromUnitId and inputValue to the tile's displayed converted value (the "pivot" action) - highlighted-result block always renders with min-height:8rem so the page below it never jumps when a highlight is added or cleared - hotkey hint updated to document all three click gestures Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -89,9 +89,14 @@
|
||||
|
||||
function handleSetInput(id: string) {
|
||||
// Shift+click: promote result unit to from-unit.
|
||||
// Re-express the current value in terms of the new from-unit.
|
||||
// inputValue is NOT changed — outputs recalculate from the same inputValue with the new fromUnitId.
|
||||
// highlightedUnitId is NOT cleared — the two states are independent.
|
||||
const convertedValue = convertById(inputValue, fromUnitId, id, units);
|
||||
fromUnitId = id;
|
||||
}
|
||||
|
||||
function handleCtrlClick(id: string, convertedValue: import('big.js').Big) {
|
||||
// Ctrl+click: adopt this tile's displayed value as the new inputValue and promote it to from-unit.
|
||||
// This is the "pivot" gesture.
|
||||
inputValue = parseFloat(convertedValue.toFixed(FRACTIONAL_DIGITS));
|
||||
fromUnitId = id;
|
||||
}
|
||||
@@ -101,8 +106,8 @@
|
||||
<title>Humor Units — Converter</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if highlightedResult !== null}
|
||||
<div class="highlighted-result">
|
||||
<div class="highlighted-result" aria-live="polite">
|
||||
{#if highlightedResult !== null}
|
||||
<button
|
||||
class="highlight-dismiss"
|
||||
aria-label="Remove highlight"
|
||||
@@ -111,8 +116,8 @@
|
||||
<span class="highlighted-value">{formatBig(highlightedResult.convertedValue)}</span>
|
||||
<span class="highlighted-label">{highlightedResult.unit.labelPlural}</span>
|
||||
<span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<ConverterCard
|
||||
{units}
|
||||
@@ -124,4 +129,5 @@
|
||||
onunitchange={handleUnitChange}
|
||||
onhighlight={handleHighlight}
|
||||
onsetinput={handleSetInput}
|
||||
onctrlclick={handleCtrlClick}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user