badmanners/shimmie2
badmanners/shimmie2
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[autocomplete] remove the whole completions div instead of removing each child individually

Browse source
This commit is contained in:
Shish 2023-12-29 10:42:12 +00:00
parent 6608e3c33e
commit 81f68f1e90
1 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ext/autocomplete/script.js
View file

@ -1,7 +1,3 @@
let completions_el = document.createElement('ul');
completions_el.className = 'autocomplete_completions';
completions_el.id = 'completions';
/** /**
* Find the word currently being typed in the given element * Find the word currently being typed in the given element
* *
@ -84,21 +80,21 @@ function renderCompletions(element) {
let completions = element.completions; let completions = element.completions;
let selected_completion = element.selected_completion; let selected_completion = element.selected_completion;
// if there are no completions, remove the completion block // remove any existing completion block
hideCompletions();
// if there are no completions, don't render anything
if(Object.keys(completions).length === 0) { if(Object.keys(completions).length === 0) {
completions_el.remove();
return; return;
} }
// remove all children let completions_el = document.createElement('ul');
while(completions_el.firstChild) { completions_el.className = 'autocomplete_completions';
completions_el.removeChild(completions_el.firstChild); completions_el.id = 'completions';
}
// add children for each completion, with the selected one highlighted // add children for each completion, with the selected one highlighted
Object.keys(completions).forEach((key, i) => { Object.keys(completions).forEach((key, i) => {
let value = completions[key]; let value = completions[key];
let li = document.createElement('li'); let li = document.createElement('li');
li.innerHTML = key + ' (' + value + ')'; li.innerHTML = key + ' (' + value + ')';
if(i === selected_completion) { if(i === selected_completion) {
@ -132,6 +128,16 @@ function renderCompletions(element) {
completions_el.style.top = window.scrollY + (br.top + br.height) + 'px'; completions_el.style.top = window.scrollY + (br.top + br.height) + 'px';
} }
} }
/**
* hide the completions block
*/
function hideCompletions() {
document.querySelectorAll('.autocomplete_completions').forEach((element) => {
element.remove();
});
}
/** /**
* Set the current word to the given completion * Set the current word to the given completion
* *
@ -188,9 +194,7 @@ document.addEventListener('DOMContentLoaded', () => {
// when element is blurred, remove completion block // when element is blurred, remove completion block
element.addEventListener('blur', () => { element.addEventListener('blur', () => {
// if we are blurring because we are clicking on a completion, hideCompletions();
// don't remove the completion block until the click event is done
completions_el.remove();
}); });
// when cursor is moved, change current completion // when cursor is moved, change current completion
@ -218,7 +222,8 @@ document.addEventListener('DOMContentLoaded', () => {
} }
// if escape is pressed, hide the completion block // if escape is pressed, hide the completion block
if(event.code === "Escape") { if(event.code === "Escape") {
completions_el.remove(); event.preventDefault();
hideCompletions();
} }
}); });