diff options
Diffstat (limited to '')
-rw-r--r-- | static/_slider_input.scss | 10 | ||||
-rw-r--r-- | static/components/slider.ts | 101 | ||||
-rw-r--r-- | static/elements.ts | 2 | ||||
-rw-r--r-- | static/style.scss | 9 |
4 files changed, 115 insertions, 7 deletions
diff --git a/static/_slider_input.scss b/static/_slider_input.scss new file mode 100644 index 00000000..adae56ae --- /dev/null +++ b/static/_slider_input.scss @@ -0,0 +1,10 @@ +/* See components/slider.ts */ + +slider-input { + display: flex; + + input { + min-width: 0; + } +} + diff --git a/static/components/slider.ts b/static/components/slider.ts new file mode 100644 index 00000000..a48d5a40 --- /dev/null +++ b/static/components/slider.ts @@ -0,0 +1,101 @@ +export { SliderInput } + +import { makeElement } from '../lib' + +const dflt = { + min: 0, + max: 100, + step: 1, +} + +type Attribute = 'min' | 'max' | 'step' + +class SliderInput extends HTMLElement { + + /* value a string since javascript kind of expects that */ + #value = "0"; + min = 0; + max = 100; + step = 1; + + readonly slider: HTMLInputElement; + 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); + } + + + static get observedAttributes(): Attribute[] { + return ['min', 'max', 'step'] + } + + attributeChangedCallback(name: Attribute, _: string|null, to: string|null): 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]) + } + + propagate(e: Event) { + this.value = (e.target as HTMLInputElement).value; + if (e instanceof InputEvent && this.oninput) { + this.oninput(e); + } + } + + set value(value: string) { + this.slider.value = value; + this.textIn.value = value; + this.#value = 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)) { + } + */ +} diff --git a/static/elements.ts b/static/elements.ts index 199839f6..f714815d 100644 --- a/static/elements.ts +++ b/static/elements.ts @@ -8,6 +8,7 @@ import { InputList } from './components/input-list' import { EditRRule } from './components/edit-rrule' import { TabGroupElement } from './components/tab-group-element' import { VEventChangelog } from './components/changelog' +import { SliderInput } from './components/slider' export { initialize_components } @@ -28,6 +29,7 @@ function initialize_components() { customElements.define('date-time-input', DateTimeInput /*, { extends: 'input' } */) customElements.define('input-list', InputList); + customElements.define('slider-input', SliderInput); /* These maybe also require that the global maps are initialized */ customElements.define('popup-element', PopupElement) diff --git a/static/style.scss b/static/style.scss index c5705e24..e351fb5d 100644 --- a/static/style.scss +++ b/static/style.scss @@ -283,15 +283,10 @@ Each event within the eventlist margin: 0; } - .input-group { - display: flex; - - input { - min-width: 0; - } - } } +@import 'slider_input'; + /* Calendar List ---------------------------------------- The list of all the loaded calendars, |