mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 02:30:57 +08:00
cb59681d86
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
83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
import { guidFor } from "@ember/object/internals";
|
|
import { computed, get } from "@ember/object";
|
|
import Component from "@ember/component";
|
|
import UtilsMixin from "select-kit/mixins/utils";
|
|
import layout from "select-kit/templates/components/selected-name";
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
|
import { reads } from "@ember/object/computed";
|
|
|
|
export default Component.extend(UtilsMixin, {
|
|
tagName: "",
|
|
layout,
|
|
name: null,
|
|
value: null,
|
|
headerTitle: null,
|
|
headerLang: null,
|
|
headerLabel: null,
|
|
id: null,
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
|
|
this.set("id", guidFor(this));
|
|
},
|
|
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
|
|
// we can't listen on `item.nameProperty` given it's variable
|
|
this.setProperties({
|
|
headerLabel: this.getProperty(this.item, "labelProperty"),
|
|
headerTitle: this.getProperty(this.item, "titleProperty"),
|
|
headerLang: this.getProperty(this.item, "langProperty"),
|
|
name: this.getName(this.item),
|
|
value:
|
|
this.item === this.selectKit.noneItem ? null : this.getValue(this.item),
|
|
});
|
|
},
|
|
|
|
lang: reads("headerLang"),
|
|
|
|
ariaLabel: computed("item", "sanitizedTitle", function () {
|
|
return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
|
|
}),
|
|
|
|
// this might need a more advanced solution
|
|
// but atm it's the only case we have to handle
|
|
sanitizedTitle: computed("title", function () {
|
|
return String(this.title).replace("…", "");
|
|
}),
|
|
|
|
title: computed("headerTitle", "item", function () {
|
|
return (
|
|
this.headerTitle ||
|
|
this._safeProperty("title", this.item) ||
|
|
this.name ||
|
|
""
|
|
);
|
|
}),
|
|
|
|
label: computed("headerLabel", "title", "name", function () {
|
|
return (
|
|
this.headerLabel ||
|
|
this._safeProperty("label", this.item) ||
|
|
this.title ||
|
|
this.name
|
|
);
|
|
}),
|
|
|
|
icons: computed("item.{icon,icons}", function () {
|
|
const icon = makeArray(this._safeProperty("icon", this.item));
|
|
const icons = makeArray(this._safeProperty("icons", this.item));
|
|
return icon.concat(icons).filter(Boolean);
|
|
}),
|
|
|
|
_safeProperty(name, content) {
|
|
if (!content) {
|
|
return null;
|
|
}
|
|
|
|
return get(content, name);
|
|
},
|
|
});
|