319 lines
8.0 KiB
Svelte
319 lines
8.0 KiB
Svelte
<script lang="ts">
|
|
import { app } from '$lib/stores/app.svelte';
|
|
|
|
interface Props {
|
|
onAdvancedClick?: () => void;
|
|
showAdvanced?: boolean;
|
|
}
|
|
|
|
let { onAdvancedClick, showAdvanced = false }: Props = $props();
|
|
|
|
const presets = [8, 25, 50, 100];
|
|
let customActive = $state(false);
|
|
let customValue = $state(8);
|
|
let holdTimer: ReturnType<typeof setInterval> | null = null;
|
|
|
|
let activeIdx = $derived.by(() => {
|
|
if (app.selectedPreset === null) return -1;
|
|
return presets.indexOf(app.selectedPreset);
|
|
});
|
|
|
|
function handlePresetClick(mb: number) {
|
|
customActive = false;
|
|
if (app.selectedPreset === mb) {
|
|
app.clearPreset();
|
|
} else {
|
|
app.setPreset(mb);
|
|
}
|
|
}
|
|
|
|
function handleCustomClick() {
|
|
if (customActive) {
|
|
customActive = false;
|
|
app.clearPreset();
|
|
return;
|
|
}
|
|
customActive = true;
|
|
customValue = 8;
|
|
app.setCustomSize(8);
|
|
}
|
|
|
|
function adjustValue(delta: number) {
|
|
customValue = Math.max(0.5, Math.round((customValue + delta) * 10) / 10);
|
|
app.setCustomSize(customValue);
|
|
}
|
|
|
|
function startHold(delta: number) {
|
|
adjustValue(delta);
|
|
let speed = 200;
|
|
let count = 0;
|
|
holdTimer = setInterval(() => {
|
|
adjustValue(delta);
|
|
count++;
|
|
// accelerate after holding
|
|
if (count > 5 && speed > 50) {
|
|
speed = 80;
|
|
if (holdTimer) clearInterval(holdTimer);
|
|
holdTimer = setInterval(() => adjustValue(delta), speed);
|
|
}
|
|
}, speed);
|
|
}
|
|
|
|
function stopHold() {
|
|
if (holdTimer) {
|
|
clearInterval(holdTimer);
|
|
holdTimer = null;
|
|
}
|
|
}
|
|
|
|
let isActive = $derived(app.selectedPreset !== null || customActive);
|
|
</script>
|
|
|
|
<div class="cp" class:cp--active={isActive}>
|
|
<div class="cp-header">
|
|
<span class="cp-label">Compress to:</span>
|
|
<!-- always rendered to prevent layout shift, visibility toggled -->
|
|
<button
|
|
type="button"
|
|
class="cp-adv-btn"
|
|
style="visibility: {showAdvanced ? 'visible' : 'hidden'}"
|
|
onclick={onAdvancedClick}
|
|
title="Advanced options"
|
|
>
|
|
<i class="ti ti-adjustments-horizontal" style="font-size: 14px"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="cp-row">
|
|
{#each presets as mb, i}
|
|
<button
|
|
type="button"
|
|
class="cp-btn"
|
|
class:cp-btn--active={activeIdx === i}
|
|
onclick={() => handlePresetClick(mb)}
|
|
>
|
|
{mb}<span class="cp-unit">MB</span>
|
|
</button>
|
|
{/each}
|
|
|
|
{#if customActive}
|
|
<!-- custom spinner replaces the Custom button -->
|
|
<div class="cp-spinner">
|
|
<button
|
|
type="button"
|
|
class="cp-spin-btn"
|
|
onpointerdown={() => startHold(-1)}
|
|
onpointerup={stopHold}
|
|
onpointerleave={stopHold}
|
|
>
|
|
<i class="ti ti-minus" style="font-size: 12px"></i>
|
|
</button>
|
|
<div class="cp-spin-value">
|
|
<input
|
|
type="number"
|
|
class="cp-spin-input"
|
|
bind:value={customValue}
|
|
oninput={() => { if (customValue > 0) app.setCustomSize(customValue); }}
|
|
onkeydown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur(); }}
|
|
min="0.1"
|
|
step="0.1"
|
|
/>
|
|
<span class="cp-spin-unit">MB</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="cp-spin-btn"
|
|
onpointerdown={() => startHold(1)}
|
|
onpointerup={stopHold}
|
|
onpointerleave={stopHold}
|
|
>
|
|
<i class="ti ti-plus" style="font-size: 12px"></i>
|
|
</button>
|
|
<button type="button" class="cp-spin-close" onclick={handleCustomClick}>
|
|
<i class="ti ti-x" style="font-size: 11px"></i>
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<button
|
|
type="button"
|
|
class="cp-btn cp-btn--custom"
|
|
onclick={handleCustomClick}
|
|
>
|
|
<i class="ti ti-pencil" style="font-size: 12px"></i>
|
|
Custom
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.cp {
|
|
padding: 12px 16px;
|
|
border-radius: var(--radius-lg);
|
|
background: transparent;
|
|
transition: background var(--transition-default);
|
|
}
|
|
.cp--active {
|
|
background: rgba(5, 150, 105, 0.06);
|
|
}
|
|
|
|
.cp-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
.cp-label {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.cp-adv-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-bg-surface);
|
|
color: var(--color-text-disabled);
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
|
|
}
|
|
.cp-adv-btn:hover {
|
|
color: var(--color-accent-compress);
|
|
border-color: var(--color-accent-compress);
|
|
background: rgba(5, 150, 105, 0.06);
|
|
}
|
|
|
|
.cp-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.cp-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
padding: 8px 0;
|
|
flex: 1;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-bg-surface);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), color var(--transition-fast),
|
|
border-color var(--transition-fast), box-shadow var(--transition-default);
|
|
}
|
|
.cp-btn:hover:not(.cp-btn--active) {
|
|
border-color: var(--color-accent-compress);
|
|
color: var(--color-text-primary);
|
|
}
|
|
.cp-btn--active {
|
|
background: var(--color-accent-compress);
|
|
border-color: var(--color-accent-compress);
|
|
color: white;
|
|
box-shadow: var(--shadow-glow-compress);
|
|
}
|
|
.cp-btn--custom {
|
|
font-family: var(--font-body);
|
|
font-weight: 600;
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
gap: 4px;
|
|
}
|
|
.cp-unit {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.cp-spinner {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--color-accent-compress);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-bg-surface);
|
|
overflow: hidden;
|
|
}
|
|
.cp-spin-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
align-self: stretch;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-accent-compress);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
.cp-spin-btn:hover {
|
|
background: rgba(5, 150, 105, 0.1);
|
|
}
|
|
.cp-spin-btn:active {
|
|
background: rgba(5, 150, 105, 0.2);
|
|
}
|
|
.cp-spin-value {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
padding: 8px 0;
|
|
border-left: 1px solid var(--color-border);
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
.cp-spin-input {
|
|
width: 48px;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
color: var(--color-accent-compress);
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
text-align: center;
|
|
-moz-appearance: textfield;
|
|
}
|
|
.cp-spin-input::-webkit-outer-spin-button,
|
|
.cp-spin-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.cp-spin-unit {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--color-text-disabled);
|
|
}
|
|
.cp-spin-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
align-self: stretch;
|
|
border: none;
|
|
border-left: 1px solid var(--color-border);
|
|
background: none;
|
|
color: var(--color-text-disabled);
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
.cp-spin-close:hover {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|