quodatum/basex-lsp
1
0
Fork 0
Code Issues 16 Activity Actions

[fix] list selection

Browse source
This commit is contained in:
Andy Bunce 2025-10-06 10:49:43 +01:00
parent de11f318e9
commit d98420c8d9
1 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
webapp/static/clients/codemirror/list.js
View file

@ -8,18 +8,18 @@ class ListComponent extends HTMLElement {
#iconKinds; //array from kind integer to codicon name #iconKinds; //array from kind integer to codicon name
constructor() { constructor() {
super(); super();
this.#shadow = this.attachShadow({ mode: "open" ,delegatesFocus: true}); this.#shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
this.#data = []; this.#data = [];
this.#iconKinds = []; this.#iconKinds = [];
this.render(); this.render();
} }
setData(newData,icons, append = false) { setData(newData, icons, append = false) {
if (!Array.isArray(newData)) { if (!Array.isArray(newData)) {
console.warn("Invalid format, expected an array."); console.warn("Invalid format, expected an array.");
return; return;
} }
this.#iconKinds=icons; this.#iconKinds = icons;
this.#data = append ? this.#data.concat(newData) : structuredClone(newData); this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
this.render(); this.render();
} }
@ -34,14 +34,17 @@ class ListComponent extends HTMLElement {
/* Render the list items #data */ /* Render the list items #data */
render() { render() {
const list = document.createElement('ul'); const list = document.createElement('ul');
list.style="max-height:80cqh;overflow: auto;"; list.style = "max-height:80cqh;overflow: auto;";
const shad=this.#shadow; const shad = this.#shadow;
this.#data.forEach((item, index) => { this.#data.forEach((item, index) => {
const listItem = document.createElement('li'); const listItem = document.createElement('li');
listItem.innerHTML = `<a href="#"><i class='codicon codicon-${this.#iconKinds[item.kind]}'></i> listItem.innerHTML = `<a href="#"><i class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
<span>${item.name} - ${item.detail}</span></a>`; <span>${item.name} - ${item.detail}</span></a>`;
// Adding a click event listener for user interaction
listItem.addEventListener('click', () => { listItem.addEventListener('click', function (e) {
shad.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
e.currentTarget.className = 'selected';
console.log('Item clicked:', item, listItem); console.log('Item clicked:', item, listItem);
// You can dispatch a custom event here if needed. // You can dispatch a custom event here if needed.
this.dispatchEvent(new CustomEvent('itemSelected', { this.dispatchEvent(new CustomEvent('itemSelected', {
@ -50,12 +53,6 @@ class ListComponent extends HTMLElement {
composed: true composed: true
})); }));
}); });
list.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
shad.querySelectorAll('li.selected').forEach(item=>{item.className = '';});
e.target.className = 'selected';
}
});
list.appendChild(listItem); list.appendChild(listItem);
}); });