diff options
author | Phil Hughes <me@iamphill.com> | 2018-01-12 12:25:18 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-01-16 11:49:24 +0000 |
commit | 4b81b6a181f22ceb46ab9187bbd4c8d76edd01a3 (patch) | |
tree | afb03e3afa39b78a22cd12f9c2c66ff3aa62b851 /app/assets/javascripts/issuable_form.js | |
parent | b94b8aae29112f693bb53b60c6c28c8f7bb8fe9b (diff) | |
download | gitlab-ce-4b81b6a181f22ceb46ab9187bbd4c8d76edd01a3.tar.gz |
Improved performance of merge requests target branch dropdown
Diffstat (limited to 'app/assets/javascripts/issuable_form.js')
-rw-r--r-- | app/assets/javascripts/issuable_form.js | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js index 57dcaa0e1ac..8380499748e 100644 --- a/app/assets/javascripts/issuable_form.js +++ b/app/assets/javascripts/issuable_form.js @@ -46,6 +46,12 @@ export default class IssuableForm { }); calendar.setDate(parsePikadayDate($issuableDueDate.val())); } + + this.$targetBranchSelect = $('.js-target-branch-select', this.form); + + if (this.$targetBranchSelect.length) { + this.initTargetBranchDropdown(); + } } initAutosave() { @@ -104,4 +110,52 @@ export default class IssuableForm { addWip() { this.titleField.val(`WIP: ${(this.titleField.val())}`); } + + initTargetBranchDropdown() { + this.$targetBranchSelect.select2({ + ajax: { + url: this.$targetBranchSelect.data('endpoint'), + dataType: 'JSON', + quietMillis: 250, + data(search) { + return { + search, + }; + }, + results(data) { + return { + results: data[Object.keys(data)[0]].map(name => ({ + id: name, + text: name, + })), + }; + } + }, + initSelection(el, callback) { + const val = el.val(); + + callback({ + id: val, + text: val, + }); + }, + dropdownCss: () => { + let resultantWidth = 'auto'; + + // We have to look at the parent because + // `offsetParent` on a `display: none;` is `null` + const offsetParentWidth = this.$targetBranchSelect.parent().offsetParent().width(); + // Reset any width to let it naturally flow + this.$targetBranchSelect.css('width', 'auto'); + if (this.$targetBranchSelect.outerWidth(false) > offsetParentWidth) { + resultantWidth = offsetParentWidth; + } + + return { + width: resultantWidth, + maxWidth: offsetParentWidth, + }; + }, + }); + } } |