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

[fix] list

Browse source
This commit is contained in:
Andy Bunce 2025-10-06 14:51:38 +01:00
parent d98420c8d9
commit 9934a08485
2 changed files with 50 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
webapp/static/clients/codemirror/grail.html
View file

@ -166,6 +166,21 @@
</form> </form>
</dialog> </dialog>
<dialog id="popHelp" popover>
<form>
<header>Help
<button type="button" class="btn-close" aria-label="Close"
onclick="$('popHelp').hidePopover(); "></button>
</header>
<div id=popHelpInfo" class="modal-body">
TODO
</div>
<div class="modal-footer">
</div>
</form>
</dialog>
<!-- <popup-info id="popHelp">hhhh</popup-info> --> <!-- <popup-info id="popHelp">hhhh</popup-info> -->
<dialog id="popSettings" popover> <dialog id="popSettings" popover>

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

@ -30,29 +30,45 @@ class ListComponent extends HTMLElement {
get data() { get data() {
return this.#data; return this.#data;
} }
select(e) {
this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
e.currentTarget.className = 'selected';
console.log('Item clicked:', item, listItem);
// You can dispatch a custom event here if needed.
this.dispatchEvent(new CustomEvent('itemSelected', {
detail: item,
bubbles: true,
composed: true
}));
}
/* 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 select = e => {
if(e.type ==="keyup" && !(e.key==="Enter" )) return;
this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
e.currentTarget.className = 'selected';
const i=e.currentTarget.getAttribute("data-index")
console.log('Item index clicked:', i);
// You can dispatch a custom event here if needed.
this.dispatchEvent(new CustomEvent('itemSelected', {
detail: i,
bubbles: true,
composed: true
}));
};
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.setAttribute("tabindex", "0")
<span>${item.name} - ${item.detail}</span></a>`; listItem.setAttribute("data-index", index)
listItem.innerHTML = `<i class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
<span >${item.name} - ${item.detail}</span>`;
listItem.addEventListener('click', function (e) { listItem.addEventListener('click', select);
shad.querySelectorAll('li.selected').forEach(item => { item.className = ''; }); listItem.addEventListener('keyup', select);
e.currentTarget.className = 'selected';
console.log('Item clicked:', item, listItem);
// You can dispatch a custom event here if needed.
this.dispatchEvent(new CustomEvent('itemSelected', {
detail: item,
bubbles: true,
composed: true
}));
});
list.appendChild(listItem); list.appendChild(listItem);
}); });
@ -60,10 +76,10 @@ class ListComponent extends HTMLElement {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = ` style.textContent = `
@import url("../codicon@0.0.40/codicon.css"); @import url("../codicon@0.0.40/codicon.css");
ul { list-style-type: none; padding: 0; margin: 0; } ul { list-style-type: none; padding:0;margin:0; }
li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; } li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
li :not(.selected) :hover { background: #ccc; } li:hover { background-color: #ccc; }
.selected { background: lightgreen;} .selected { background-color: #0d6efd;color: #ffff;}
i {vertical-align: middle;} i {vertical-align: middle;}
`; `;
this.#shadow.appendChild(style); this.#shadow.appendChild(style);