ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify share button

Browse Source
This commit is contained in:
Codex Agent
2026-03-08 18:58:55 +00:00
parent 700953194a
commit edb08e3e5c
1 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
hdyc-svelte/src/lib/components/Calculator.svelte
View File

@@ -18,6 +18,9 @@
let swapState: { originalField: 1 | 2; originalValue: string } | null = null; let swapState: { originalField: 1 | 2; originalValue: string } | null = null;
let copyStatus: 'idle' | 'copied' | 'failed' = 'idle'; let copyStatus: 'idle' | 'copied' | 'failed' = 'idle';
let statusTimeout: ReturnType<typeof setTimeout> | null = null; let statusTimeout: ReturnType<typeof setTimeout> | null = null;
let copyStatusMessage = '';
let hasInputs = false;
let hasInputs = false;
$: has3 = ['3col', '3col-mul'].includes(config.type) || !!config.labels.in3; $: has3 = ['3col', '3col-mul'].includes(config.type) || !!config.labels.in3;
$: isTextInput = ['base', 'text-bin', 'bin-text', 'dec-frac', 'dms-dd', 'dd-dms'].includes(config.type); $: isTextInput = ['base', 'text-bin', 'bin-text', 'dec-frac', 'dms-dd', 'dd-dms'].includes(config.type);
@@ -104,6 +107,19 @@
} }
} }
$: hasInputs =
Boolean(
val1.trim() ||
val2.trim() ||
(has3 && val3.trim())
);
$: copyStatusMessage =
copyStatus === 'copied'
? 'Link copied to clipboard'
: copyStatus === 'failed'
? 'Failed to copy link'
: '';
onMount(() => { onMount(() => {
const params = new URLSearchParams($page.url.search); const params = new URLSearchParams($page.url.search);
if (params.has('v1')) { val1 = params.get('v1')!; handleInput(1); } if (params.has('v1')) { val1 = params.get('v1')!; handleInput(1); }
@@ -182,33 +198,32 @@
</div> </div>
<div class="calc-footer"> <div class="calc-footer">
<button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs"> <div class="footer-controls">
Clear <button type="button" class="clear-btn" on:click={clear} aria-label="Clear calculator inputs">
</button> Clear
<button </button>
type="button" <button
class="link-btn" type="button"
on:click={copyLink} class="icon-btn"
aria-label="Copy calculator link" on:click={copyLink}
disabled={!val1 && !val2 && !(val3 && has3)} aria-label="Copy calculator link"
> disabled={!hasInputs}
<svg viewBox="0 0 24 24" role="presentation" aria-hidden="true"> >
<path <svg viewBox="0 0 24 24" role="presentation" aria-hidden="true">
d="M10 14a1 1 0 0 1-1 1H6a4 4 0 0 1 0-8h3a1 1 0 1 1 0 2H6a2 2 0 0 0 0 4h3a1 1 0 0 1 1 1zm4-2a1 1 0 0 1 1-1h3a2 2 0 0 0 0-4h-3a1 1 0 1 1 0-2h3a4 4 0 0 1 0 8h-3a1 1 0 0 1-1-1zm-1.293 2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4zM12 16l-4-4 4-4" <path
fill="none" d="M10 14a1 1 0 0 1-1 1H6a4 4 0 0 1 0-8h3a1 1 0 1 1 0 2H6a2 2 0 0 0 0 4h3a1 1 0 0 1 1 1zm4-2a1 1 0 0 1 1-1h3a2 2 0 0 0 0-4h-3a1 1 0 1 1 0-2h3a4 4 0 0 1 0 8h-3a1 1 0 0 1-1-1zm-1.293 2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4zM12 16l-4-4 4-4"
stroke="currentColor" fill="none"
stroke-width="1.6" stroke="currentColor"
stroke-linecap="round" stroke-width="1.6"
stroke-linejoin="round" stroke-linecap="round"
/> stroke-linejoin="round"
</svg> />
Link </svg>
{#if copyStatus === 'copied'} </button>
<span class="status-badge">Copied</span> <span class="sr-only" aria-live="polite">
{:else if copyStatus === 'failed'} {copyStatusMessage}
<span class="status-badge">Failed</span> </span>
{/if} </div>
</button>
{#if config.factor && config.type === 'standard'} {#if config.factor && config.type === 'standard'}
<span class="formula-hint"> <span class="formula-hint">
1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2} 1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2}
@@ -348,6 +363,13 @@
padding: 1rem 2rem 1.25rem; padding: 1rem 2rem 1.25rem;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
.footer-controls {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
.clear-btn { .clear-btn {
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -367,39 +389,42 @@
outline: none; outline: none;
box-shadow: 0 0 0 3px var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow);
} }
.link-btn { .icon-btn {
display: inline-flex; width: 40px;
align-items: center; height: 40px;
gap: 0.35rem;
padding: 0.5rem 1rem;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
background: var(--section-bg); background: var(--section-bg);
color: var(--text); color: var(--text);
font-size: 0.85rem; display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer; cursor: pointer;
transition: background 0.2s, border-color 0.2s; transition: background 0.2s, border-color 0.2s;
} }
.link-btn svg { .icon-btn svg {
width: 1rem; width: 1.1rem;
height: 1rem; height: 1.1rem;
} }
.link-btn:disabled { .icon-btn:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.link-btn:not(:disabled):hover { .icon-btn:not(:disabled):hover {
border-color: var(--accent); border-color: var(--accent);
background: var(--surface-hover); background: var(--surface-hover);
} }
.status-badge { .sr-only {
font-size: 0.7rem; position: absolute;
background: var(--accent); width: 1px;
color: #fff; height: 1px;
border-radius: 999px; padding: 0;
padding: 0.05rem 0.55rem; margin: -1px;
text-transform: uppercase; overflow: hidden;
letter-spacing: 0.08em; clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} }
.formula-hint { .formula-hint {
font-size: 0.78rem; font-size: 0.78rem;