generated from itdominator/Python-With-Gtk-Template
Effort on LSP settings UI
This commit is contained in:
parent
c268a7ef1a
commit
14100b09e3
@ -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>
|
||||
<input id="lsp-search" class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search" />
|
||||
<div id="lsp-settings" class="list-group scroller">
|
||||
</div>
|
||||
<div class="col max-height-800">
|
||||
<pre id="preview-editor"></pre>
|
||||
|
||||
<input id="lsp-search" class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search" />
|
||||
</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>
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
@ -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();
|
||||
}
|
||||
}
|
@ -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 = "");
|
||||
|
@ -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 lspSettingsUI = document.getElementById('lsp-settings');
|
||||
|
||||
|
||||
let editor = null;
|
||||
|
@ -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);
|
||||
};
|
@ -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": {}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user