Fixed LSP Setting window loading JSON to HTML

This commit is contained in:
itdominator 2024-04-05 22:44:24 -05:00
parent 4fe2c7ed8f
commit 99e9e9d3ef
5 changed files with 166 additions and 74 deletions

View File

@ -74,6 +74,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button onclick="loadSettingsFileToUI()">Load LSP Settings</button>
<button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button> <button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
</div> </div>
</div> </div>
@ -94,14 +95,14 @@
</div> </div>
</section> </section>
</template> </template>
<template id="input-list-template"> <template id="input-dict-template">
<style> <style>
ul, li { ul, li {
list-style: none; list-style: none;
} }
ul { ul {
padding: 5px; padding-left: 2em;
} }
.selected { .selected {
@ -109,7 +110,27 @@
} }
</style> </style>
<section> <section>
<h1 id="title"></h1> <h3 id="title"></h3>
<ul id="input-dict">
</ul>
</section>
</template>
<template id="input-list-template">
<style>
ul, li {
list-style: none;
}
ul {
padding-left: 2em;
}
.selected {
background-color: rgba(255, 255, 255, 0.64);
}
</style>
<section>
<h3 id="title"></h3>
<ul id="input-list"> <ul id="input-list">
</ul> </ul>
</section> </section>
@ -125,6 +146,12 @@
<input id="input-entry" /> <input id="input-entry" />
</li> </li>
</template> </template>
<template id="input-checkbox-template">
<style>
</style>
<label id="title" for="input-checkbox"></label>
<input id="input-checkbox" type="checkbox"/>
</template>

View File

@ -33,6 +33,41 @@ class LspConfigContainer extends HTMLElement {
} }
} }
class InputDictContainer extends HTMLElement {
constructor() {
super();
}
loadShaddowRoot(tag = "input-dict-template") {
let template = document.getElementById(tag);
let templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild( templateContent.cloneNode(true) );
}
setTitle(title = "[NO TITLE]") {
this.shadowRoot.getElementById("title").innerText = title;
}
append(elm = null) {
if (!elm) return;
this.shadowRoot.getElementById("input-dict").appendChild(elm);
}
remove(elm = null) {
if (!elm) return;
this.shadowRoot.getElementById("input-dict").remove(elm);
}
serialize() {
let tags = this.shadowRoot.children;
for (var i = 0; i < tags.length; i++) {
data = tags[i].serialize();
}
}
}
class InputListContainer extends HTMLElement { class InputListContainer extends HTMLElement {
constructor() { constructor() {
super(); super();
@ -68,7 +103,6 @@ class InputListContainer extends HTMLElement {
} }
} }
class InputListItemContainer extends HTMLElement { class InputListItemContainer extends HTMLElement {
constructor() { constructor() {
super(); super();
@ -84,7 +118,6 @@ class InputListItemContainer extends HTMLElement {
setTitle(textStr = "") { setTitle(textStr = "") {
if (Object.getPrototypeOf(textStr) !== String.prototype) return; if (Object.getPrototypeOf(textStr) !== String.prototype) return;
this.shadowRoot.getElementById("title").innerText = textStr; this.shadowRoot.getElementById("title").innerText = textStr;
} }
@ -94,7 +127,6 @@ class InputListItemContainer extends HTMLElement {
setText(textStr = "") { setText(textStr = "") {
if (Object.getPrototypeOf(textStr) !== String.prototype) return; if (Object.getPrototypeOf(textStr) !== String.prototype) return;
this.shadowRoot.getElementById("input-entry").value = textStr; this.shadowRoot.getElementById("input-entry").value = textStr;
} }
@ -107,6 +139,44 @@ class InputListItemContainer extends HTMLElement {
} }
} }
class InputCheckboxContainer extends HTMLElement {
constructor() {
super();
}
loadShaddowRoot(tag = "input-checkbox-template") {
let template = document.getElementById(tag);
let templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild( templateContent.cloneNode(true) );
}
setTitle(textStr = "") {
if (Object.getPrototypeOf(textStr) !== String.prototype) return;
this.shadowRoot.getElementById("title").innerText = textStr;
}
toggle() {
let elm = this.shadowRoot.getElementById("input-checkbox");
elm.checked = !elm.checked;
}
on() {
let elm = this.shadowRoot.getElementById("input-checkbox").checked = true;
}
off() {
let elm = this.shadowRoot.getElementById("input-checkbox").checked = false;
}
serialize() {
return this.shadowRoot.getElementById("input-checkbox").value;
}
}
class LspConfig extends LspConfigContainer { class LspConfig extends LspConfigContainer {
constructor() { constructor() {
@ -115,6 +185,13 @@ class LspConfig extends LspConfigContainer {
} }
} }
class InputDict extends InputDictContainer {
constructor() {
super();
this.loadShaddowRoot();
}
}
class InputList extends InputListContainer { class InputList extends InputListContainer {
constructor() { constructor() {
super(); super();
@ -128,3 +205,10 @@ class InputListItem extends InputListItemContainer {
this.loadShaddowRoot(); this.loadShaddowRoot();
} }
} }
class InputCheckbox extends InputCheckboxContainer {
constructor() {
super();
this.loadShaddowRoot();
}
}

View File

@ -17,8 +17,10 @@ window.onload = (eve) => {
const defineCustomElements = () => { const defineCustomElements = () => {
customElements.define("lsp-config", LspConfig, { extends: 'div' }); customElements.define("lsp-config", LspConfig, { extends: 'div' });
customElements.define("input-dict", InputDict, { extends: 'ul' });
customElements.define("input-list", InputList, { extends: 'ul' }); customElements.define("input-list", InputList, { extends: 'ul' });
customElements.define("input-list-item", InputListItem, { extends: 'li' }); customElements.define("input-list-item", InputListItem, { extends: 'li' });
customElements.define("input-checkbox", InputCheckbox, { extends: 'input' });
} }
const loadLSPClientJSFiles = () => { const loadLSPClientJSFiles = () => {

View File

@ -28,7 +28,7 @@ const loadPythonLSPFromBlobURLs = () => {
modes: "python|python3", modes: "python|python3",
type: "socket", // "socket|worker" type: "socket", // "socket|worker"
socket: new WebSocket( "${ lspServersConfig['python']['socket'] }" ), socket: new WebSocket( "${ lspServersConfig['python']['socket'] }" ),
initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization_options'] ) } initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization-options'] ) }
} }
); );
}() }()
@ -67,7 +67,7 @@ const loadPythonLSPFromNetwork = () => {
modes: "python|python3", modes: "python|python3",
type: "socket", // "socket|worker" type: "socket", // "socket|worker"
socket: new WebSocket( "${ lspServersConfig['python']['socket'] }" ), socket: new WebSocket( "${ lspServersConfig['python']['socket'] }" ),
initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization_options'] ) } initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization-options'] ) }
}); });
}() }()
`; `;
@ -89,125 +89,104 @@ const loadPythonLSPFromNetwork = () => {
const loadSettingsFileToUI = async () => { const loadSettingsFileToUI = async () => {
generateElement(lspServersConfig); let config = lspServersConfig;
let languages = Object.keys(config);
// let config = lspServersConfig; clearChildNodes(lspSettingsUI);
// let keys = Object.keys(lspServersConfig); for (let i = 0; i < languages.length; i++) {
let elm = document.createElement("lsp-config");
let lang = languages[i];
// for (let i = 0; i < languages.length; i++) { elm.setTitle(lang);
// let elm = document.createElement("lsp-config"); lspSettingsUI.appendChild( elm );
// let lang = languages[i];
// elm.setTitle(lang); generateElement(config[lang], "", elm);
// lspSettingsUI.appendChild( elm ); }
// generateElement(lang, elm, lspServersConfig[lang]);
// }
} }
const saveSettingsFileFromUI = () => { const saveSettingsFileFromUI = () => {
console.log("Stub...");
} }
const generateElement = (config = {}, parent = "", elm = null) => { const generateElement = (config = {}, parent = "", elm = null) => {
const proto = Object.getPrototypeOf(config) const proto = Object.getPrototypeOf(config);
console.log(config, parent, elm);
switch (proto) { switch (proto) {
case String.prototype: case String.prototype:
handleString(config, elm); handleString(config, parent, elm);
// lspSettingsUI.appendChild( target );
break; break;
case Array.prototype: case Array.prototype:
handleList(config, elm); handleList(config, parent, elm);
// lspSettingsUI.appendChild( target );
break; break;
case Boolean.prototype: case Boolean.prototype:
handleBoolean(config, parent, elm);
break; break;
case Map.prototype: case Map.prototype:
console.log("Map generatable HTML type stub...");
break; break;
default: default:
if ( isDict(config) ) { if ( isDict(config) ) {
if (parent === "" && elm === null) { handleDictionary(config, parent, elm);
handleRoot(config);
// let elm = document.createElement("lsp-config");
// let lang = languages[i];
break; break;
} }
handleDictionary(config, elm); console.log("No generatable HTML type...");
// target = handleDictionary(config, elm);
// lspSettingsUI.appendChild( target );
// let elm = document.createElement("lsp-config");
// let lang = languages[i];
break;
}
console.log("No generatable HTML type...")
} }
} }
const handleDictionary = (config, parent, elm) => {
let listElm = document.createElement("input-dict");
const handleRoot = (config) => {
let keys = Object.keys(config);
for (let i = 0; i < keys.length; i++) {
let elm = document.createElement("lsp-config");
let key = keys[i];
elm.setTitle(key);
lspSettingsUI.appendChild( elm );
generateElement(config[key], key, elm);
}
}
const handleDictionary = (config, elm) => {
let keys = Object.keys(config); let keys = Object.keys(config);
listElm.setTitle( parent );
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
let key = keys[i]; let key = keys[i];
generateElement(config[key], key, elm); generateElement(config[key], key, listElm);
}
} }
const handleList = (config, elm) => { elm.append(listElm);
return elm;
}
const handleList = (config, parent, elm) => {
let listElm = document.createElement("input-list"); let listElm = document.createElement("input-list");
listElm.setTitle( parent );
for (var i = 0; i < config.length; i++) { for (var i = 0; i < config.length; i++) {
let inputElm = document.createElement("input-list-item"); let inputElm = document.createElement("input-list-item");
inputElm.setText( config[i] ); inputElm.setText( config[i] );
listElm.append(inputElm); listElm.append(inputElm);
} }
elm.append(listElm); elm.append(listElm);
return elm; return elm;
} }
const handleString = (config, elm) => { const handleString = (config, parent, elm) => {
console.log(config, elm);
let inputElm = document.createElement("input-list-item"); let inputElm = document.createElement("input-list-item");
inputElm.setTitle(parent); inputElm.setTitle(parent);
inputElm.setText(config); inputElm.setText(config);
elm.append(inputElm); elm.append(inputElm);
} }
const handleBoolean = (config, parent, elm) => {
let inputElm = document.createElement("input-checkbox");
inputElm.setTitle(parent);
(config === true) ? inputElm.on() : inputElm.off();
elm.append(inputElm);
}

View File

@ -4,14 +4,14 @@
"alt-command": "", "alt-command": "",
"command": "", "command": "",
"socket": "ws://127.0.0.1:3030/?name=shell", "socket": "ws://127.0.0.1:3030/?name=shell",
"initialization_options": {} "initialization-options": {}
}, },
"python": { "python": {
"info": "https://github.com/python-lsp/python-lsp-server", "info": "https://github.com/python-lsp/python-lsp-server",
"alt-command": "pylsp --ws --port 3030", "alt-command": "pylsp --ws --port 3030",
"command": "lsp-ws-proxy --listen 3030 -- pylsp", "command": "lsp-ws-proxy --listen 3030 -- pylsp",
"socket": "ws://127.0.0.1:3030/?name=pylsp", "socket": "ws://127.0.0.1:3030/?name=pylsp",
"initialization_options": { "initialization-options": {
"pylsp.plugins.rope_autoimport.enabled": true, "pylsp.plugins.rope_autoimport.enabled": true,
"pylsp.plugins.rope_completion.enabled": true, "pylsp.plugins.rope_completion.enabled": true,
"pylsp.plugins.rope_completion.eager": true, "pylsp.plugins.rope_completion.eager": true,
@ -26,7 +26,7 @@
"alt-command": "jedi-language-server", "alt-command": "jedi-language-server",
"command": "lsp-ws-proxy --listen 3030 -- jedi-language-server", "command": "lsp-ws-proxy --listen 3030 -- jedi-language-server",
"socket": "ws://127.0.0.1:3030/?name=jedi-language-server", "socket": "ws://127.0.0.1:3030/?name=jedi-language-server",
"initialization_options": { "initialization-options": {
"jediSettings": { "jediSettings": {
"autoImportModules": [], "autoImportModules": [],
"caseInsensitiveCompletion": true, "caseInsensitiveCompletion": true,
@ -53,20 +53,20 @@
"alt-command": "clangd", "alt-command": "clangd",
"command": "lsp-ws-proxy --listen 3030 -- clangd", "command": "lsp-ws-proxy --listen 3030 -- clangd",
"socket": "ws://127.0.0.1:3030/?name=clangd", "socket": "ws://127.0.0.1:3030/?name=clangd",
"initialization_options": {} "initialization-options": {}
}, },
"cpp": { "cpp": {
"info": "https://clangd.llvm.org/", "info": "https://clangd.llvm.org/",
"alt-command": "clangd", "alt-command": "clangd",
"command": "lsp-ws-proxy --listen 3030 -- clangd", "command": "lsp-ws-proxy --listen 3030 -- clangd",
"socket": "ws://127.0.0.1:3030/?name=clangd", "socket": "ws://127.0.0.1:3030/?name=clangd",
"initialization_options": {} "initialization-options": {}
}, },
"java": { "java": {
"info": "https://download.eclipse.org/jdtls/", "info": "https://download.eclipse.org/jdtls/",
"alt-command": "java-language-server", "alt-command": "java-language-server",
"command": "lsp-ws-proxy --listen 3030 -- java-language-server", "command": "lsp-ws-proxy --listen 3030 -- java-language-server",
"socket": "ws://127.0.0.1:3030/?name=java-language-server", "socket": "ws://127.0.0.1:3030/?name=java-language-server",
"initialization_options": {} "initialization-options": {}
} }
} }