open-consul/ui/packages/consul-ui/app/components/toggle-button/index.js
John Cowen c98130cc08
ui: Move to Workspaced Structure (#8994)
* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target
2020-10-21 15:23:16 +01:00

68 lines
2 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) {
// only preventDefault if the target isn't an external link
// TODO: this should be changed for an explicit close
if ((e.target.rel || '').indexOf('noopener') === -1) {
e.preventDefault();
}
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 });
},
},
});