Effort on LSP settings UI

This commit is contained in:
itdominator 2024-03-28 01:06:53 -05:00
parent c268a7ef1a
commit 14100b09e3
7 changed files with 221 additions and 15 deletions

View File

@ -63,21 +63,19 @@
<h3>LSPs:</h3>
</div>
<div class="modal-body margin-bottom-neg-200">
<div class="modal-body">
<div class="row">
<div class="col max-height-600 noselect">
<ul id="lsp-selection" class="list-group scroller">
</ul>
<button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
<div id="lsp-settings" class="list-group scroller">
</div>
<input id="lsp-search" class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search" />
</div>
<div class="col max-height-800">
<pre id="preview-editor"></pre>
</div>
</div>
</div>
<div class="modal-footer">
<button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
</div>
</div>
</div>
@ -86,6 +84,41 @@
<!-- Template Tags... -->
<template id="input-list-template">
<style>
ul, li {
list-style: none;
}
ul {
padding: 5px;
}
.selected {
background-color: rgba(255, 255, 255, 0.64);
}
</style>
<section>
<hr/>
<h2 id="title"></h2>
<ul id="input-list">
</ul>
</section>
</template>
<template id="input-list-item-template">
<style>
li {
}
</style>
<li id="input-list-item">
<label id="title"></label>
<input id="input-entry" />
</li>
</template>
<script nomodule>
console.info(`Your browser doesn't support native JavaScript modules.`);
</script>
@ -111,6 +144,7 @@
<!-- For Application... -->
<script src="resources/js/newton/globals.js"></script>
<script src="resources/js/newton/components.js"></script>
<script src="resources/js/newton/lsp-manager.js"></script>
<script src="resources/js/newton/utils.js"></script>
<script src="resources/js/newton/post-ajax.js"></script>

View File

@ -120,7 +120,9 @@ const importScriptFromBackendResponse = async (scriptName, dataStr) => {
scriptStr = atob(dataStr);
SCRIPT_BLOB_URLs[scriptName] = await importScriptFromScriptStr(scriptStr);
if (scriptName === "lsp_servers_config.json") {
// TODO: Look to move this out of here as soon as can determin how.
if (scriptName === "lsp-servers-config.json") {
lspServersConfig = JSON.parse(scriptStr);
loadSettingsFileToUI();
}
}

View File

@ -0,0 +1,87 @@
class InputListContainer extends HTMLElement {
constructor() {
super();
}
loadShaddowRoot(tag = "input-list-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-list").appendChild(elm);
}
remove(elm = null) {
if (!elm) return;
this.shadowRoot.getElementById("input-list").remove(elm);
}
serialize() {
let tags = this.shadowRoot.children;
for (var i = 0; i < tags.length; i++) {
data = tags[i].serialize();
}
}
}
class InputListItemContainer extends HTMLElement {
constructor() {
super();
}
loadShaddowRoot(tag = "input-list-item-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;
}
getText() {
return this.shadowRoot.getElementById("input-entry").value;
}
setText(textStr = "") {
if (Object.getPrototypeOf(textStr) !== String.prototype) return;
this.shadowRoot.getElementById("input-entry").value = textStr;
}
clear() {
this.shadowRoot.getElementById("input-entry").value = "";
}
serialize() {
return this.shadowRoot.getElementById("input-entry").value;
}
}
class InputList extends InputListContainer {
constructor() {
super();
this.loadShaddowRoot();
}
}
class InputListItem extends InputListItemContainer {
constructor() {
super();
this.loadShaddowRoot();
}
}

View File

@ -1,6 +1,9 @@
window.onload = (eve) => {
console.log("Window Loaded...");
console.log("Defining custom elements...");
defineCustomElements();
console.log("Loading LSP client files...");
loadLSPClientJSFiles();
@ -12,6 +15,11 @@ window.onload = (eve) => {
}
const defineCustomElements = () => {
customElements.define("input-list", InputList, { extends: 'ul' });
customElements.define("input-list-item", InputListItem, { extends: 'li' });
}
const loadLSPClientJSFiles = () => {
sendMessage(topic = "load_javascript", ftype = "", fhash = "", fpath = LSP_SERVER_CONFG, content = "");
sendMessage(topic = "load_javascript", ftype = "", fhash = "", fpath = `${BASE_LINK}/ace-linters.js`, content = "");

View File

@ -18,12 +18,13 @@ const EDITOR_OPTS = {
}
const BASE_LINK = `${window.location.href}resources/js/libs/ace_editor/lsp`;
const LSP_SERVER_CONFG = `${window.location.href}../lsp_servers_config.json`;
const LSP_SERVER_CONFG = `${window.location.href}../lsp-servers-config.json`;
const BASE_LSP_LINK = "http://0.0.0.0:4880";
const SCRIPT_BLOB_URLs = {};
let lspProvider = null;
let lspServersConfig = null;
let lspProvider = null;
let lspServersConfig = null;
let lspSettingsUI = document.getElementById('lsp-settings');
let editor = null;

View File

@ -86,3 +86,73 @@ const loadPythonLSPFromNetwork = () => {
});
}
const loadSettingsFileToUI = async () => {
let languages = Object.keys(lspServersConfig);
for (let i = 0; i < languages.length; i++) {
let lang = languages[i];
let elm = document.createElement("input-list");
elm.setTitle(lang);
lspSettingsUI.appendChild( elm );
generateElement(lang, elm, lspServersConfig[lang]);
}
}
const saveSettingsFileFromUI = () => {
}
const generateElement = (parent, elm, config) => {
const proto = Object.getPrototypeOf(config)
switch (proto) {
case String.prototype:
let inputElm = document.createElement("input-list-item");
inputElm.setTitle(parent);
inputElm.setText(config);
elm.append(inputElm);
break;
case Array.prototype:
let inputListElm = document.createElement("input-list");
for (var i = 0; i < config.length; i++) {
let inputElm = document.createElement("input-list-item");
inputElm.setText( config[i] );
inputListElm.append(inputElm);
}
elm.append(inputListElm);
break;
case Boolean.prototype:
break;
case Map.prototype:
break;
default:
if ( isDict(config) ) {
let keys = Object.keys(config);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
generateElement(key, elm, config[key] );
}
break;
}
console.log("No generatable HTML type...")
}
}
const isDict = (dict) => {
return typeof dict === "object" && !Array.isArray(dict);
};

View File

@ -1,7 +1,8 @@
{
"sh": {
"info": "",
"command": [],
"command": "",
"socket": "ws://127.0.0.1:3030/shell",
"initialization_options": {}
},
"python": {
@ -46,17 +47,20 @@
},
"c": {
"info": "https://clangd.llvm.org/",
"command": ["/usr/bin/clangd"],
"command": "/usr/bin/clangd",
"socket": "ws://127.0.0.1:3030/c",
"initialization_options": {}
},
"cpp": {
"info": "https://clangd.llvm.org/",
"command": ["/usr/bin/clangd"],
"command": "/usr/bin/clangd",
"socket": "ws://127.0.0.1:3030/cpp",
"initialization_options": {}
},
"java": {
"info": "https://download.eclipse.org/jdtls/",
"command": ["java-language-server"],
"command": "java-language-server",
"socket": "ws://127.0.0.1:3030/java",
"initialization_options": {}
}
}