diff --git a/src/ui/field-renderers.ts b/src/ui/field-renderers.ts index c974fee..ea7d3fe 100644 --- a/src/ui/field-renderers.ts +++ b/src/ui/field-renderers.ts @@ -262,6 +262,99 @@ function renderTags( }; } +function renderSlider( + controlEl: HTMLDivElement, + field: FormField, + initialValue?: FieldValue, +): { getValue: () => FieldValue; setValue: (v: FieldValue) => void } { + const min = field.min ?? 0; + const max = field.max ?? 100; + const step = field.step ?? 1; + const startVal = initialValue !== undefined ? Number(initialValue) : min; + + const wrapper = controlEl.createDiv({ cls: 'ff-slider-wrapper' }); + const input = wrapper.createEl('input', { + cls: 'ff-slider', + type: 'range', + }); + input.min = String(min); + input.max = String(max); + input.step = String(step); + input.value = String(startVal); + + const valueLabel = wrapper.createSpan({ + cls: 'ff-slider-value', + text: String(startVal), + }); + + input.addEventListener('input', () => { + valueLabel.textContent = input.value; + }); + + return { + getValue: () => Number(input.value), + setValue: (v) => { + input.value = String(v); + valueLabel.textContent = String(v); + }, + }; +} + +function renderColor( + controlEl: HTMLDivElement, + _field: FormField, + initialValue?: FieldValue, +): { getValue: () => FieldValue; setValue: (v: FieldValue) => void } { + const startVal = + initialValue !== undefined ? String(initialValue) : '#000000'; + + const wrapper = controlEl.createDiv({ cls: 'ff-color-wrapper' }); + const input = wrapper.createEl('input', { + cls: 'ff-color-input', + type: 'color', + }); + input.value = startVal; + + const hexLabel = wrapper.createSpan({ + cls: 'ff-color-hex', + text: startVal, + }); + + input.addEventListener('input', () => { + hexLabel.textContent = input.value; + }); + + return { + getValue: () => input.value, + setValue: (v) => { + input.value = String(v); + hexLabel.textContent = String(v); + }, + }; +} + +function renderTime( + controlEl: HTMLDivElement, + field: FormField, + initialValue?: FieldValue, +): { getValue: () => FieldValue; setValue: (v: FieldValue) => void } { + const input = controlEl.createEl('input', { + cls: 'ff-input', + type: 'time', + placeholder: field.placeholder ?? '', + }); + if (initialValue !== undefined) { + input.value = String(initialValue); + } + + return { + getValue: () => input.value, + setValue: (v) => { + input.value = String(v); + }, + }; +} + function renderNoteLink( app: App, controlEl: HTMLDivElement, @@ -495,6 +588,15 @@ export function renderField( case 'rating': accessor = renderRating(controlEl, field, initialValue); break; + case 'slider': + accessor = renderSlider(controlEl, field, initialValue); + break; + case 'color': + accessor = renderColor(controlEl, field, initialValue); + break; + case 'time': + accessor = renderTime(controlEl, field, initialValue); + break; default: accessor = renderText(controlEl, field, initialValue); break;