diff options
Diffstat (limited to 'static/ts/components/slider.ts')
-rw-r--r-- | static/ts/components/slider.ts | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/static/ts/components/slider.ts b/static/ts/components/slider.ts new file mode 100644 index 00000000..8be66a73 --- /dev/null +++ b/static/ts/components/slider.ts @@ -0,0 +1,151 @@ +/** + <slider-input /> + + A Web Component implementing a slider with a corresponding number input. + + TODO rename this file + + ### Parameters + + All of these are optional, see {@linkcode dflt} for defaults. + + #### min + Minimum allowed value. + + #### max + Maximum allowed value. + + #### step + How large each step of the slider/number box should be. + + @module +*/ + +export { SliderInput, Attribute, dflt } + +import { makeElement } from '../lib' + +/** Defalut values for all attributes, if not given */ +const dflt = { + min: 0, + max: 100, + step: 1, +} + +/** Valid attributes for SliderInput */ +type Attribute = 'min' | 'max' | 'step' + +/** + Component displaying an input slider, together with a corresponding numerical + input +*/ +class SliderInput extends HTMLElement { + + /* value a string since javascript kind of expects that */ + #value = "" + dflt.min + /** Minimum allowed value */ + min = dflt.min + /** Maximum allowed value */ + max = dflt.max + /** How large each step should be */ + step = dflt.step + + /** The HTML slider component */ + readonly slider: HTMLInputElement; + /** The HTML number input component */ + readonly textIn: HTMLInputElement; + + constructor(min?: number, max?: number, step?: number, value?: number) { + super(); + + this.min = min || parseFloat(this.getAttribute('min') || "" + dflt['min']); + this.max = max || parseFloat(this.getAttribute('max') || "" + dflt['max']); + this.step = step || parseFloat(this.getAttribute('step') || "" + dflt['step']); + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value + const defaultValue + = (this.max < this.min) + ? this.min + : this.min + (this.max - this.min) / 2; + + this.slider = makeElement('input', { + type: 'range', + min: this.min, + max: this.max, + step: this.step, + value: this.value, + }) as HTMLInputElement + this.textIn = makeElement('input', { + type: 'number', + min: this.min, + max: this.max, + step: this.step, + value: this.value, + }) as HTMLInputElement + + this.slider.addEventListener('input', e => this.#propagate(e)); + this.textIn.addEventListener('input', e => this.#propagate(e)); + + /* MUST be after sub components are bound */ + this.value = "" + (value || this.getAttribute('value') || defaultValue); + } + + connectedCallback() { + this.replaceChildren(this.slider, this.textIn); + } + + /** ['min', 'max', 'step'] */ + static get observedAttributes(): Attribute[] { + return ['min', 'max', 'step'] + } + + attributeChangedCallback(name: Attribute, _?: string, to?: string): void { + if (to) { + this.slider.setAttribute(name, to); + this.textIn.setAttribute(name, to); + } else { + this.slider.removeAttribute(name); + this.textIn.removeAttribute(name); + } + this[name] = parseFloat(to || "" + dflt[name]) + } + + /** + Helper for updating the value attribute + + Event listeners are bound on both the input elements, which both simply + call this. This procedure then updates the classes value field. + + TODO `oninput`? + */ + #propagate(e: Event) { + this.value = (e.target as HTMLInputElement).value; + if (e instanceof InputEvent && this.oninput) { + this.oninput(e); + } + } + + /** + Set a new numerical value. + + A number not possible due to the current `min`, `max`, and `step` + properties can be set and will work, the slider will however not + properly show it, but rather the closest value it can display. + */ + set value(value: string) { + this.slider.value = value; + this.textIn.value = value; + this.#value = value; + } + + /** Get the current numerical value */ + get value(): string { + return this.#value; + } + + /* TODO do we want to implement this? + * oninput directly on the component already works + * / + addEventListener(type: string, proc: ((e: Event) => void)) { + } + */ +} |