diff options
Diffstat (limited to 'input/checkboxes.ts')
| -rw-r--r-- | input/checkboxes.ts | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/input/checkboxes.ts b/input/checkboxes.ts new file mode 100644 index 0000000..3da7335 --- /dev/null +++ b/input/checkboxes.ts @@ -0,0 +1,172 @@ +import { WuiInputOption } from "./option.js" + +export interface WuiKeyValue { + [key: string]: string +} + +export interface WuiKeySelectOption { + [key: string]: WuiInputOption +} + +export interface WuiInputCheckboxesOpts { + label: string + name: string + options: WuiKeySelectOption + id?: string + hint?: string + is_disabled?: boolean + onChangeHandler?: (values: string[]) => void +} + +const WUI_INPUT_CHECKBOXES_CLASS = "wui_input_checkboxes" +const WUI_INPUT_CHECKBOXES_CLASS_HINT = "wui_input_checkboxes_hint" +const WUI_INPUT_CHECKBOXES_CLASS_HINT_TOGGLER = "wui_input_checkboxes_hint_toggler" +const WUI_INPUT_CHECKBOXES_CLASS_INPUT = "wui_input_checkboxes_input" +const WUI_INPUT_CHECKBOXES_CLASS_LABEL = "wui_input_checkboxes_label" + +// +// WuiInputCheckboxes create an HTML input for selecting one or more item +// using checkbox. +// +// Format of generated HTML output, +// +// <div [id=${id}] class="${WUI_INPUT_CHECKBOXES_CLASS}"> +// <label class="${WUI_INPUT_CHECKBOXES_CLASS_LABEL}">${label}</label> +// [<span class="${WUI_INPUT_CHECKBOXES_CLASS_HINT_TOGGLER}">i </span>] +// <fieldset +// class="${WUI_INPUT_CHECKBOXES_CLASS_INPUT}" +// [disabled=${is_disabled}] +// > +// ${ for key in options } +// <div> +// <input name=${name} value="${options[key].value}"> +// <label>${key}</label> +// </div> +// ${ endfor } +// </fieldset> +// [<div class="${WUI_INPUT_CHECKBOXES_CLASS_HINT}">${hint}</div>] +// </div> +// +// The "hint" option is optional, if it set the input will have a hint toggler +// to display or hide the input information. +// +// The onChangeHandler receive all checked values. +// +export class WuiInputCheckboxes { + el: HTMLElement + private el_label!: HTMLElement + private el_fieldset!: HTMLFieldSetElement + private el_hint!: HTMLElement + private el_hint_toggler!: HTMLElement + private values: string[] = [] + + constructor(public opts: WuiInputCheckboxesOpts) { + this.el = document.createElement("div") + if (opts.id) { + this.el.id = opts.id + } + this.el.classList.add(WUI_INPUT_CHECKBOXES_CLASS) + this.el.style.padding = "2px" + + this.generateLabel(this.el) + if (opts.hint) { + this.generateHintToggler(this.el) + } + this.generateInput(this.el) + + if (opts.hint) { + this.generateHint() + } + } + + private generateLabel(wrapper: HTMLElement) { + this.el_label = document.createElement("label") + this.el_label.classList.add(WUI_INPUT_CHECKBOXES_CLASS_LABEL) + this.el_label.innerHTML = `${this.opts.label} ` + wrapper.appendChild(this.el_label) + } + + private generateInput(wrapper: HTMLElement) { + this.el_fieldset = document.createElement("fieldset") + this.el_fieldset.classList.add(WUI_INPUT_CHECKBOXES_CLASS_INPUT) + + for (let key in this.opts.options) { + let option = this.opts.options[key] + let value = option.value + + let wrapper = document.createElement("div") + + let el_cb = document.createElement("input") + el_cb.type = "checkbox" + el_cb.name = this.opts.name + el_cb.value = option.value + if (option.selected) { + el_cb.checked = true + this.values.push(value) + } + el_cb.onclick = () => { + this.onClickCheckbox(el_cb.value, el_cb.checked) + } + wrapper.appendChild(el_cb) + + let el_label = document.createElement("label") + el_label.innerHTML = key + wrapper.appendChild(el_label) + + this.el_fieldset.appendChild(wrapper) + } + + if (this.opts.is_disabled) { + this.el_fieldset.disabled = true + } + + wrapper.appendChild(this.el_fieldset) + } + + private generateHintToggler(wrapper: HTMLElement) { + this.el_hint_toggler = document.createElement("span") + this.el_hint_toggler.classList.add(WUI_INPUT_CHECKBOXES_CLASS_HINT_TOGGLER) + this.el_hint_toggler.innerHTML = " ℹ" + + this.el_hint_toggler.onmouseover = () => { + this.el_hint_toggler.style.cursor = "pointer" + } + this.el_hint_toggler.onclick = () => { + this.onClickHintToggler() + } + wrapper.appendChild(this.el_hint_toggler) + } + + private generateHint() { + this.el_hint = document.createElement("div") + this.el_hint.classList.add(WUI_INPUT_CHECKBOXES_CLASS_HINT) + this.el_hint.innerHTML = this.opts.hint || "" + this.el_hint.style.display = "none" + this.el_hint.style.backgroundColor = "gainsboro" + this.el_hint.style.borderRadius = "2px" + this.el_hint.style.padding = "4px" + this.el.appendChild(this.el_hint) + } + + private onClickHintToggler() { + if (this.el_hint.style.display === "none") { + this.el_hint.style.display = "block" + } else { + this.el_hint.style.display = "none" + } + } + + private onClickCheckbox(value: string, selected: boolean) { + for (let x = 0; x < this.values.length; x++) { + if (this.values[x] === value) { + this.values.splice(x, 1) + } + } + if (selected) { + this.values.push(value) + } + if (this.opts.onChangeHandler) { + this.opts.onChangeHandler(this.values) + } + } +} |