41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
import { on } from "ember-addons/ember-computed-decorators";
|
||
import computed from "ember-addons/ember-computed-decorators";
|
||
import SelectBoxKitHeaderComponent from "select-box-kit/components/select-box-kit/select-box-kit-header";
|
||
|
||
export default SelectBoxKitHeaderComponent.extend({
|
||
attributeBindings: ["names:data-name"],
|
||
classNames: "multi-combobox-header",
|
||
layoutName: "select-box-kit/templates/components/multi-combo-box/multi-combo-box-header",
|
||
|
||
@computed("filter", "selectedContent.[]", "isFocused", "selectBoxIsExpanded")
|
||
shouldDisplayFilterPlaceholder(filter, selectedContent, isFocused) {
|
||
if (Ember.isEmpty(selectedContent)) {
|
||
if (filter.length > 0) { return false; }
|
||
if (isFocused === true) { return false; }
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
},
|
||
|
||
@on("didRender")
|
||
_positionFilter() {
|
||
this.$(".filter").width(0);
|
||
|
||
const leftHeaderOffset = this.$().offset().left;
|
||
const leftFilterOffset = this.$(".filter").offset().left;
|
||
const offset = leftFilterOffset - leftHeaderOffset;
|
||
const width = this.$().outerWidth(false);
|
||
const availableSpace = width - offset;
|
||
|
||
// TODO: avoid magic number 8
|
||
// TODO: make sure the filter doesn’t end up being very small
|
||
this.$(".filter").width(availableSpace - 8);
|
||
},
|
||
|
||
@computed("selectedContent.[]")
|
||
names(selectedContent) {
|
||
return selectedContent.map(sc => sc.name).join(",");
|
||
}
|
||
});
|