f0062f5cbe
This exposes an api for <ToggleButton /> so you can call it from elsewhere, specifically here we use the api.click to close the dropdown menus which is required is the DOM containing the toggle button isn't redrawn as is the case with external links in a dropdown menu
63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
import Component from '@ember/component';
|
|
import { inject as service } from '@ember/service';
|
|
|
|
export default Component.extend({
|
|
dom: service('dom'),
|
|
tagName: '',
|
|
checked: false,
|
|
onchange: function() {},
|
|
// TODO: reserved for the moment but we don't need it yet
|
|
onblur: function() {},
|
|
init: function() {
|
|
this._super(...arguments);
|
|
this.guid = this.dom.guid(this);
|
|
this._listeners = this.dom.listeners();
|
|
},
|
|
willDestroyElement: function() {
|
|
this._super(...arguments);
|
|
this._listeners.remove();
|
|
},
|
|
didReceiveAttrs: function() {
|
|
this._super(...arguments);
|
|
if (this.checked) {
|
|
this.addClickOutsideListener();
|
|
} else {
|
|
this._listeners.remove();
|
|
}
|
|
},
|
|
addClickOutsideListener: function() {
|
|
// default onblur event
|
|
this._listeners.remove();
|
|
this._listeners.add(this.dom.document(), 'click', e => {
|
|
if (this.dom.isOutside(this.label, e.target)) {
|
|
if (this.dom.isOutside(this.label.nextElementSibling, e.target)) {
|
|
if (this.input.checked) {
|
|
this.input.checked = false;
|
|
// TODO: This should be an event
|
|
this.onchange({ target: this.input });
|
|
}
|
|
this._listeners.remove();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
actions: {
|
|
click: function(e) {
|
|
this.input.checked = !this.input.checked;
|
|
// manually dispatched mouse events have a detail = 0
|
|
// real mouse events have the number of click counts
|
|
if (e.detail !== 0) {
|
|
e.target.blur();
|
|
}
|
|
this.actions.change.apply(this, [e]);
|
|
},
|
|
change: function(e) {
|
|
if (this.input.checked) {
|
|
this.addClickOutsideListener();
|
|
}
|
|
// TODO: This should be an event
|
|
this.onchange({ target: this.input });
|
|
},
|
|
},
|
|
});
|