Major changes included: - better support for screen readers - trapping focus in modals - better tabbing order in composer - alerts on no content found/number of items found - better autofocus in modals - mini-tag-chooser is now a multi-select component - each multi-select-component will now display selection on one row
67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import Component from "@ember/component";
|
|
import { bind } from "@ember/runloop";
|
|
import { computed } from "@ember/object";
|
|
import layout from "select-kit/templates/components/select-kit/select-kit-body";
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
classNames: ["select-kit-body"],
|
|
classNameBindings: ["emptyBody:empty-body"],
|
|
|
|
emptyBody: computed("selectKit.{filter,hasNoContent}", function () {
|
|
return false;
|
|
}),
|
|
|
|
rootEventType: "click",
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
|
|
this.handleRootMouseDownHandler = bind(this, this.handleRootMouseDown);
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
|
|
this.element.style.position = "relative";
|
|
|
|
document.addEventListener(
|
|
this.rootEventType,
|
|
this.handleRootMouseDownHandler,
|
|
true
|
|
);
|
|
},
|
|
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
|
|
document.removeEventListener(
|
|
this.rootEventType,
|
|
this.handleRootMouseDownHandler,
|
|
true
|
|
);
|
|
},
|
|
|
|
handleRootMouseDown(event) {
|
|
if (!this.selectKit.isExpanded) {
|
|
return;
|
|
}
|
|
|
|
const headerElement = document.querySelector(
|
|
`#${this.selectKit.uniqueID}-header`
|
|
);
|
|
|
|
if (headerElement && headerElement.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (this.element.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (this.selectKit.mainElement()) {
|
|
this.selectKit.mainElement().open = false;
|
|
}
|
|
},
|
|
});
|