72ff1f0607
* ui: Change action-group to use new popup-menu component in intentions * ui: Slight amends to aria-menu to prevent scrolling * ui: Begin to use aria-menu/popover-menu for other elements * Use a simpler, hackier method to fix up zIndexing * ui: Implement new confirmation dialogs in other list views (#7080) This includes another amend to the popover-menu in order to allow mutiple confirmations/subpanels in the same popover menu. The functionality added here to allow this is likely to change in the future.
65 lines
2.1 KiB
JavaScript
65 lines
2.1 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,
|
|
checked: false,
|
|
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;
|
|
// 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) {
|
|
// 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();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// TODO: This should be an event
|
|
this.onchange({ target: this.input });
|
|
},
|
|
},
|
|
});
|