ember-basic-dropdown
ember-basic-dropdown copied to clipboard
cibernox
define destination using CSS selector instead of element Id
I need my dropdowns appended directly to the <body> instead of inside some "wormhole" element (in that case there were CSS conflicts that misaligned the dropdowns).
In order to achieve this I had to override some ember-basic-dropdown Js so that the user can pass a CSS selector as a destination instead of a unique Id.
import EmberBasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
import { computed } from '@ember/object';
import { getOwner } from '@ember/application';
export default EmberBasicDropdown.extend({
_getDestinationSelector() {
let config = getOwner(this).resolveRegistration('config:environment');
return config['ember-basic-dropdown'] && config['ember-basic-dropdown'].destination || 'body';
},
destination: computed({
get() {
return this._getDestinationSelector();
},
set(_, v) {
return v === undefined ? this._getDestinationSelector() : v;
}
}),
reposition() {
this.destinationElement = document.querySelector(this.get('destination'));
this._super(...arguments);
}
});
and
import EmberBasicDropdownContent from 'ember-basic-dropdown/components/basic-dropdown/content';
import { computed } from '@ember/object';
export default EmberBasicDropdownContent.extend({
destinationElement: computed('destination', function() {
return document.querySelector(this.get('destination'));
})
});
is this a safe override and if so, could I make a PR to turn the above into an optional feature of this addon?
If you make a PR in a way that all current usages work and you allow more flexibility, feel free to do it. I think that converting prefixing the id with # and using document.querySelector might be a good attack plan.
If you want current usages to continue working in a subsequent release then I'll need to leave config['ember-basic-dropdown'].destination to its current behaviour, i.e. it will continue to only accept ids (otherwise, I have no way of testing whether the user is passing an ID or a CSS selector to it).
I will create a new ['ember-basic-dropdown].destinationSelector where the user you will be able to pass a CSS selector to it instead.