Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Refactor autocomplete scrolling element detection (#19706) 

Rather than hardcoding `.hashtag-autocomplete__fadeout` as the
div element to scroll in autocomplete, instead pass it in as
an option via `scrollElementSelector`, then we don't have hashtag
template specific things in the autocomplete lib.
This commit is contained in:
Martin Brennan 2023-01-04 14:11:52 +10:00 committed by GitHub
parent 81c3c746d3
commit 42cf32169d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/app/lib/autocomplete.js
View File

@ -94,7 +94,7 @@ export default function (options) {
let completeEnd = null;
let me = this;
let div = null;
let fadeoutDiv = null;
let scrollElement = null;
let prevTerm = null;
// By default, when the autocomplete popup is rendered it has the
@ -119,28 +119,29 @@ export default function (options) {
}
function scrollAutocomplete() {
if (!fadeoutDiv && !div) {
if (!scrollElement && !div) {
return;
}
const scrollingDivElement = fadeoutDiv?.length > 0 ? fadeoutDiv[0] : div[0];
const scrollingElement =
scrollElement?.length > 0 ? scrollElement[0] : div[0];
const selectedElement = getSelectedOptionElement();
const selectedElementTop = selectedElement.offsetTop;
const selectedElementBottom =
selectedElementTop + selectedElement.clientHeight;
// the top of the item is above the top of the fadeoutDiv, so scroll UP
if (selectedElementTop <= scrollingDivElement.scrollTop) {
scrollingDivElement.scrollTo(0, selectedElementTop);
// the top of the item is above the top of the scrollElement, so scroll UP
if (selectedElementTop <= scrollingElement.scrollTop) {
scrollingElement.scrollTo(0, selectedElementTop);
// the bottom of the item is below the bottom of the div, so scroll DOWN
} else if (
selectedElementBottom >=
scrollingDivElement.scrollTop + scrollingDivElement.clientHeight
scrollingElement.scrollTop + scrollingElement.clientHeight
) {
scrollingDivElement.scrollTo(
scrollingElement.scrollTo(
0,
scrollingDivElement.scrollTop + selectedElement.clientHeight
scrollingElement.scrollTop + selectedElement.clientHeight
);
}
}
@ -152,7 +153,7 @@ export default function (options) {
div.hide().remove();
}
div = null;
fadeoutDiv = null;
scrollElement = null;
completeStart = null;
autocompleteOptions = null;
prevTerm = null;
@ -377,7 +378,9 @@ export default function (options) {
me.parent().append(div);
}
fadeoutDiv = div.find(".hashtag-autocomplete__fadeout");
if (options.scrollElementSelector) {
scrollElement = div.find(options.scrollElementSelector);
}
if (isInput || options.treatAsTextarea) {
_autoCompletePopper && _autoCompletePopper.destroy();

1
app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
View File

@ -123,6 +123,7 @@ function _setupExperimental(
key: "#",
afterComplete: autocompleteOptions.afterComplete,
treatAsTextarea: autocompleteOptions.treatAsTextarea,
scrollElementSelector: ".hashtag-autocomplete__fadeout",
autoSelectFirstSuggestion: true,
transformComplete: (obj) => obj.ref,
dataSource: (term) => {