You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.8 KiB
56 lines
1.8 KiB
<script lang="ts">
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import * as TimePicker from '$soma/components/time-picker';
|
|
import * as Slider from '$soma/components/slider';
|
|
import { getTimePickerVisualContext } from './context.svelte';
|
|
import type { TimePickerSliderProps } from './types';
|
|
|
|
type Props = TimePickerSliderProps & {
|
|
/** Show the labelled scale below the track. Falls back to the
|
|
* picker-level `showScales` flag (default `true`). */
|
|
showScales?: boolean;
|
|
};
|
|
|
|
let { children, showScales, ...rest }: Props = $props();
|
|
|
|
const tickValues = [0, 15, 30, 45, 59];
|
|
const min = 0;
|
|
const max = 59;
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const visual = getTimePickerVisualContext();
|
|
const scalesVisible = $derived(showScales ?? visual?.getShowScales() ?? true);
|
|
// Only shown when the picker granularity reaches seconds.
|
|
const granularity = $derived(visual?.getGranularity() ?? 'minute');
|
|
const label = $derived(eidos.langs.ts('#?common.time.second|Second'));
|
|
|
|
function percent(v: number): string {
|
|
const t = (v - min) / (max - min);
|
|
return `${Math.max(0, Math.min(1, t)) * 100}%`;
|
|
}
|
|
</script>
|
|
|
|
{#if granularity === 'second'}
|
|
<div data-time-picker-second-slider class="time-picker-slider time-picker-second-slider">
|
|
<span class="time-picker-slider-label" aria-hidden="true">{label}</span>
|
|
<TimePicker.SecondSlider {...rest}>
|
|
{#if children}
|
|
{@render children?.()}
|
|
{:else}
|
|
<Slider.Range />
|
|
<Slider.Thumb />
|
|
{/if}
|
|
</TimePicker.SecondSlider>
|
|
{#if scalesVisible}
|
|
<div class="time-picker-scale time-picker-scale-below" aria-hidden="true">
|
|
{#each tickValues as v}
|
|
<span class="time-picker-scale-tick" style:left={percent(v)}>
|
|
<span class="time-picker-scale-mark"></span>
|
|
<span class="time-picker-scale-label">{String(v).padStart(2, '0')}</span>
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|