63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
|
import ngModule from '../../module';
|
||
|
|
import Component from '../../lib/component';
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Base component with common logic and styles for checkbox and radio button.
|
||
|
|
*
|
||
|
|
* @property {String} label Label to display along the component
|
||
|
|
* @property {any} field The value with which the element is linked
|
||
|
|
* @property {Boolean} checked Whether the checkbox is checked
|
||
|
|
* @property {Boolean} disabled Put component in disabled mode
|
||
|
|
*/
|
||
|
|
export default class Toggle extends Component {
|
||
|
|
constructor($element, $) {
|
||
|
|
super($element, $);
|
||
|
|
|
||
|
|
let element = this.element;
|
||
|
|
element.tabIndex = 0;
|
||
|
|
element.addEventListener('click', e => this.onClick(e));
|
||
|
|
element.addEventListener('keydown', e => this.onKeydown(e));
|
||
|
|
element.classList.add('vn-toggle');
|
||
|
|
}
|
||
|
|
|
||
|
|
set disabled(value) {
|
||
|
|
this.element.tabIndex = !value ? 0 : -1;
|
||
|
|
this.element.classList.toggle('disabled', Boolean(value));
|
||
|
|
this._disabled = value;
|
||
|
|
}
|
||
|
|
|
||
|
|
get disabled() {
|
||
|
|
return this._disabled;
|
||
|
|
}
|
||
|
|
|
||
|
|
onKeydown(event) {
|
||
|
|
if (event.code == 'Space')
|
||
|
|
this.onClick(event);
|
||
|
|
}
|
||
|
|
|
||
|
|
onClick(event) {
|
||
|
|
if (this.disabled || event.defaultPrevented)
|
||
|
|
return true;
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
changed() {
|
||
|
|
this.$.$applyAsync();
|
||
|
|
this.element.dispatchEvent(new Event('change'));
|
||
|
|
this.emit('change', {value: this.field});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Toggle.$inject = ['$element', '$scope'];
|
||
|
|
|
||
|
|
ngModule.component('vnToggle', {
|
||
|
|
controller: Toggle,
|
||
|
|
bindings: {
|
||
|
|
label: '@?',
|
||
|
|
field: '=?',
|
||
|
|
disabled: '<?',
|
||
|
|
checked: '<?'
|
||
|
|
}
|
||
|
|
});
|