debian-mirror-gitlab/app/assets/javascripts/issuable/auto_width_dropdown_select.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

57 lines
1.5 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2021-02-22 17:27:13 +05:30
import { loadCSSFile } from '../lib/utils/css_utils';
2018-05-09 12:01:36 +05:30
2017-08-17 22:00:37 +05:30
let instanceCount = 0;
class AutoWidthDropdownSelect {
constructor(selectElement) {
this.$selectElement = $(selectElement);
this.dropdownClass = `js-auto-width-select-dropdown-${instanceCount}`;
instanceCount += 1;
}
init() {
2018-11-08 19:23:39 +05:30
const { dropdownClass } = this;
2019-03-02 22:35:43 +05:30
import(/* webpackChunkName: 'select2' */ 'select2/select2')
.then(() => {
2021-02-22 17:27:13 +05:30
// eslint-disable-next-line promise/no-nesting
loadCSSFile(gon.select2_css_path)
.then(() => {
this.$selectElement.select2({
dropdownCssClass: dropdownClass,
...AutoWidthDropdownSelect.selectOptions(this.dropdownClass),
});
})
.catch(() => {});
2019-03-02 22:35:43 +05:30
})
.catch(() => {});
2018-03-17 18:26:18 +05:30
return this;
}
static selectOptions(dropdownClass) {
return {
2017-08-17 22:00:37 +05:30
dropdownCss() {
let resultantWidth = 'auto';
const $dropdown = $(`.${dropdownClass}`);
// We have to look at the parent because
// `offsetParent` on a `display: none;` is `null`
2021-03-08 18:12:59 +05:30
const offsetParentWidth = $(this).parent().offsetParent().width();
2017-08-17 22:00:37 +05:30
// Reset any width to let it naturally flow
$dropdown.css('width', 'auto');
if ($dropdown.outerWidth(false) > offsetParentWidth) {
resultantWidth = offsetParentWidth;
}
return {
width: resultantWidth,
maxWidth: offsetParentWidth,
};
},
2018-03-17 18:26:18 +05:30
};
2017-08-17 22:00:37 +05:30
}
}
export default AutoWidthDropdownSelect;