mirror of https://github.com/status-im/consul.git
55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
|
import Component from '@ember/component';
|
||
|
|
import { inject as service } from '@ember/service';
|
||
|
|
import { set } from '@ember/object';
|
||
|
|
|
||
|
|
export default Component.extend({
|
||
|
|
dom: service('dom'),
|
||
|
|
// TODO(octane): Remove when we can move to glimmer components
|
||
|
|
// so we aren't using ember-test-selectors
|
||
|
|
// supportsDataTestProperties: true,
|
||
|
|
// the above doesn't seem to do anything so still need to find a way
|
||
|
|
// to pass through data-test-properties
|
||
|
|
tagName: '',
|
||
|
|
// TODO: reserved for the moment but we don't need it yet
|
||
|
|
onblur: null,
|
||
|
|
onchange: function() {},
|
||
|
|
init: function() {
|
||
|
|
this._super(...arguments);
|
||
|
|
this.guid = this.dom.guid(this);
|
||
|
|
this._listeners = this.dom.listeners();
|
||
|
|
},
|
||
|
|
didInsertElement: function() {
|
||
|
|
this._super(...arguments);
|
||
|
|
// TODO(octane): move to ref
|
||
|
|
set(this, 'input', this.dom.element(`#toggle-button-${this.guid}`));
|
||
|
|
set(this, 'label', this.input.nextElementSibling);
|
||
|
|
},
|
||
|
|
willDestroyElement: function() {
|
||
|
|
this._super(...arguments);
|
||
|
|
this._listeners.remove();
|
||
|
|
},
|
||
|
|
actions: {
|
||
|
|
click: function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.input.checked = !this.input.checked;
|
||
|
|
this.actions.change.apply(this, [e]);
|
||
|
|
},
|
||
|
|
change: function(e) {
|
||
|
|
if (this.input.checked) {
|
||
|
|
// default onblur event
|
||
|
|
this._listeners.remove();
|
||
|
|
this._listeners.add(this.dom.document(), 'click', e => {
|
||
|
|
if (this.dom.isOutside(this.label, e.target)) {
|
||
|
|
this.input.checked = false;
|
||
|
|
// TODO: This should be an event
|
||
|
|
this.onchange(this.input.checked);
|
||
|
|
this._listeners.remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// TODO: This should be an event
|
||
|
|
this.onchange(this.input.checked);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|