|
|
|
import appStateManager from "../lib/appManagers/appStateManager";
|
|
|
|
import { getDeepProperty } from "../helpers/object";
|
|
|
|
import { ripple } from "./ripple";
|
|
|
|
import { LangPackKey, _i18n } from "../lib/langPack";
|
|
|
|
|
|
|
|
export type CheckboxFieldOptions = {
|
|
|
|
text?: LangPackKey,
|
|
|
|
textArgs?: any[],
|
|
|
|
name?: string,
|
|
|
|
round?: boolean,
|
|
|
|
stateKey?: string,
|
|
|
|
disabled?: boolean,
|
|
|
|
checked?: boolean,
|
|
|
|
restriction?: boolean,
|
|
|
|
withRipple?: boolean
|
|
|
|
};
|
|
|
|
export default class CheckboxField {
|
|
|
|
public input: HTMLInputElement;
|
|
|
|
public label: HTMLLabelElement;
|
|
|
|
public span: HTMLSpanElement;
|
|
|
|
|
|
|
|
constructor(options: CheckboxFieldOptions = {}) {
|
|
|
|
const label = this.label = document.createElement('label');
|
|
|
|
label.classList.add('checkbox-field');
|
|
|
|
|
|
|
|
if(options.restriction) {
|
|
|
|
label.classList.add('checkbox-field-restriction');
|
|
|
|
}
|
|
|
|
|
|
|
|
if(options.round) {
|
|
|
|
label.classList.add('checkbox-field-round');
|
|
|
|
}
|
|
|
|
|
|
|
|
if(options.disabled) {
|
|
|
|
label.classList.add('checkbox-disabled');
|
|
|
|
}
|
|
|
|
|
|
|
|
const input = this.input = document.createElement('input');
|
|
|
|
input.type = 'checkbox';
|
|
|
|
if(options.name) {
|
|
|
|
input.id = 'input-' + name;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(options.checked) {
|
|
|
|
input.checked = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(options.stateKey) {
|
|
|
|
appStateManager.getState().then(state => {
|
|
|
|
this.checked = getDeepProperty(state, options.stateKey);
|
|
|
|
|
|
|
|
input.addEventListener('change', () => {
|
|
|
|
appStateManager.setByKey(options.stateKey, input.checked);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let span: HTMLSpanElement;
|
|
|
|
if(options.text) {
|
|
|
|
span = this.span = document.createElement('span');
|
|
|
|
span.classList.add('checkbox-caption');
|
|
|
|
_i18n(span, options.text, options.textArgs);
|
|
|
|
} else {
|
|
|
|
label.classList.add('checkbox-without-caption');
|
|
|
|
}
|
|
|
|
|
|
|
|
const box = document.createElement('div');
|
|
|
|
box.classList.add('checkbox-box');
|
|
|
|
|
|
|
|
const checkSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
|
|
checkSvg.classList.add('checkbox-box-check');
|
|
|
|
checkSvg.setAttributeNS(null, 'viewBox', '0 0 24 24');
|
|
|
|
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
|
|
|
use.setAttributeNS(null, 'href', '#check');
|
|
|
|
use.setAttributeNS(null, 'x', '-1');
|
|
|
|
checkSvg.append(use);
|
|
|
|
|
|
|
|
const bg = document.createElement('div');
|
|
|
|
bg.classList.add('checkbox-box-background');
|
|
|
|
|
|
|
|
const border = document.createElement('div');
|
|
|
|
border.classList.add('checkbox-box-border');
|
|
|
|
|
|
|
|
box.append(border, bg, checkSvg);
|
|
|
|
|
|
|
|
label.append(input, box);
|
|
|
|
|
|
|
|
if(span) {
|
|
|
|
label.append(span);
|
|
|
|
}
|
|
|
|
|
|
|
|
if(options.withRipple) {
|
|
|
|
label.classList.add('checkbox-ripple', 'hover-effect');
|
|
|
|
ripple(label, undefined, undefined, true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
get checked() {
|
|
|
|
return this.input.checked;
|
|
|
|
}
|
|
|
|
|
|
|
|
set checked(checked: boolean) {
|
|
|
|
this.setValueSilently(checked);
|
|
|
|
|
|
|
|
const event = new Event('change', {bubbles: true, cancelable: true});
|
|
|
|
this.input.dispatchEvent(event);
|
|
|
|
}
|
|
|
|
|
|
|
|
public setValueSilently(checked: boolean) {
|
|
|
|
this.input.checked = checked;
|
|
|
|
}
|
|
|
|
}
|