[add] lsp manager
This commit is contained in:
parent
38a1909570
commit
c4f92f0402
39 changed files with 3481 additions and 25 deletions
|
|
@ -63,6 +63,12 @@ form header {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
details[open]::details-content {
|
||||
color: dodgerblue;
|
||||
padding: 0.1em;
|
||||
border: thin solid grey;
|
||||
overflow:auto;
|
||||
}
|
||||
::backdrop {
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
|
@ -78,6 +84,7 @@ form header {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
grid-column: 1 / -1;
|
||||
background: #ffcdd2;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<a class="nav-link active" aria-current="page" href="#">Editor</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">LSP UI</a>
|
||||
<a class="nav-link" href="/app/home" target="lsp">LSP Manager</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dba/logs" target="dba">Dba</a>
|
||||
|
|
@ -57,7 +57,11 @@
|
|||
generator.xquery</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<button popovertarget="popAbout" type="button" class="btn btn-light">
|
||||
<i class="codicon codicon-info"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
<nav class="page-nav">
|
||||
|
|
@ -144,8 +148,8 @@
|
|||
<option value="xquery">xquery</option>
|
||||
<option value="xml">xml</option>
|
||||
</select>
|
||||
<button popovertarget="popHelp"><i class="codicon codicon-info"></i></button>
|
||||
<button id="cmd" type="button" class="btn btn-light" title="Command and key mapping help">
|
||||
|
||||
<button id="cmdList" type="button" class="btn btn-light" title="Command and key mapping help">
|
||||
<i class="codicon codicon-record-keys"></i>
|
||||
</button>
|
||||
</footer>
|
||||
|
|
@ -167,21 +171,31 @@
|
|||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="popHelp" popover>
|
||||
<dialog id="popCmds" popover>
|
||||
<form>
|
||||
<header>Commands and keys
|
||||
<button type="button" class="btn-close" aria-label="Close"
|
||||
onclick="$('popHelp').hidePopover(); "></button>
|
||||
onclick="$('popCmds').hidePopover(); "></button>
|
||||
</header>
|
||||
<div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
|
||||
TODO
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<dialog id="popAbout" popover>
|
||||
<form>
|
||||
<header>Help</header>
|
||||
<div class="modal-body" style="height: 50vh;overflow:scroll;">
|
||||
<p>TODO help info</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<!-- <popup-info id="popHelp">hhhh</popup-info> -->
|
||||
|
||||
<dialog id="popSettings" popover>
|
||||
|
|
|
|||
|
|
@ -85,15 +85,15 @@ $("symbols2").onclick = e => {
|
|||
});
|
||||
};
|
||||
|
||||
$("cmd").onclick = e => {
|
||||
$("cmdList").onclick = e => {
|
||||
let cmds = lsp.listCommands(view);
|
||||
let result="";
|
||||
[...cmds.keys()].sort().forEach(key => {
|
||||
result+=`<li>${key} ${cmds.get(key).key}</li>`
|
||||
});
|
||||
$("popHelpInfo").innerHTML=`<ul>${result}</ul>`
|
||||
$("popHelp").showPopover()
|
||||
console.log(result)
|
||||
$("popCmds").showPopover()
|
||||
|
||||
};
|
||||
|
||||
$("symList").addEventListener("itemSelected", e => {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ class ListComponent extends HTMLElement {
|
|||
/* Render the list items #data */
|
||||
render() {
|
||||
const list = document.createElement('ul');
|
||||
list.style = "max-height:80cqh;overflow: auto;";
|
||||
list.style = "max-height:45cqh;overflow: auto;";
|
||||
|
||||
const select = e => {
|
||||
if(e.type ==="keyup" && !(e.key==="Enter" )) return;
|
||||
|
|
@ -65,7 +65,7 @@ class ListComponent extends HTMLElement {
|
|||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@import url("../codicon@0.0.40/codicon.css");
|
||||
ul { list-style-type: none; padding:0;margin:0;max-height:80cqh;overflow: auto;
|
||||
ul { list-style-type: none; padding:0;margin:0;overflow: auto;
|
||||
background-color: #f8f9fa;font-size: 80%;}
|
||||
li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
|
||||
li:not(.selected) :hover { background-color: #ccc; }
|
||||
|
|
@ -83,4 +83,88 @@ class ListComponent extends HTMLElement {
|
|||
}
|
||||
|
||||
/* Define the new custom element */
|
||||
customElements.define('qd-list', ListComponent);
|
||||
customElements.define('qd-list', ListComponent);
|
||||
|
||||
class PanelComponent extends HTMLElement {
|
||||
#shadow;
|
||||
#data;
|
||||
#iconKinds; //array from kind integer to codicon name
|
||||
constructor() {
|
||||
super();
|
||||
this.#shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
|
||||
this.#data = [];
|
||||
this.#iconKinds = [];
|
||||
this.render();
|
||||
}
|
||||
|
||||
setData(newData, icons, append = false) {
|
||||
if (!Array.isArray(newData)) {
|
||||
console.warn("Invalid format, expected an array.");
|
||||
return;
|
||||
}
|
||||
this.#iconKinds = icons;
|
||||
this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
|
||||
this.render();
|
||||
}
|
||||
|
||||
set data(value) {
|
||||
this.setData(value, false);
|
||||
}
|
||||
get data() {
|
||||
return this.#data;
|
||||
}
|
||||
|
||||
/* Render the list items #data */
|
||||
render() {
|
||||
const list = document.createElement('ul');
|
||||
list.style = "max-height:45cqh;overflow: auto;";
|
||||
|
||||
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,this.#data[i]);
|
||||
// You can dispatch a custom event here if needed.
|
||||
this.dispatchEvent(new CustomEvent('itemSelected', {
|
||||
detail: this.#data[i],
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
};
|
||||
this.#data.forEach((item, index) => {
|
||||
const listItem = document.createElement('li');
|
||||
listItem.setAttribute("tabindex", "0")
|
||||
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', select);
|
||||
listItem.addEventListener('keyup', select);
|
||||
list.appendChild(listItem);
|
||||
});
|
||||
|
||||
this.#shadow.innerHTML = '';
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@import url("../codicon@0.0.40/codicon.css");
|
||||
ul { list-style-type: none; padding:0;margin:0;overflow: auto;
|
||||
background-color: #f8f9fa;font-size: 80%;}
|
||||
li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
|
||||
li:not(.selected) :hover { background-color: #ccc; }
|
||||
.selected { background-color: #0d6efd;color: #ffff;}
|
||||
i {vertical-align: middle;}
|
||||
`;
|
||||
this.#shadow.appendChild(style);
|
||||
this.#shadow.appendChild(list);
|
||||
}
|
||||
|
||||
/* Render an error message if JSON fetching fails */
|
||||
renderError(error) {
|
||||
this.#shadow.innerHTML = `<p>Error loading data: ${error.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* Define the new custom element */
|
||||
customElements.define('qd-panel', PanelComponent);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue