diff --git a/webapp/static/clients/codemirror/grail.css b/webapp/static/clients/codemirror/grail.css index 0cabf08..aa7a296 100644 --- a/webapp/static/clients/codemirror/grail.css +++ b/webapp/static/clients/codemirror/grail.css @@ -83,11 +83,15 @@ details[open]::details-content { } } } - + #tConnect:state(unchecked) { + outline: dashed 4px deeppink; + outline-offset: 4px; + } .page-header { grid-column: 1 / -1; - background: #ffcdd2; + display:flex; + justify-content:space-between; } .page-sidebar { @@ -110,9 +114,13 @@ details[open]::details-content { .page-main { grid-column: 2 / 3; + display: flex; + flex-direction: column; } .page-footer { grid-column: 1 / -1; background: #ffecb3; + display: flex; + justify-content: space-between; } \ No newline at end of file diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html index 88ca5ca..bb83247 100644 --- a/webapp/static/clients/codemirror/grail.html +++ b/webapp/static/clients/codemirror/grail.html @@ -1,12 +1,17 @@ - + Codemirror6 example using BaseX LSP - + + + + + + @@ -14,69 +19,65 @@
-
- +
- + + + + +
@@ -130,7 +132,8 @@
+ + +
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js index 990f27d..df30a57 100644 --- a/webapp/static/clients/codemirror/script.js +++ b/webapp/static/clients/codemirror/script.js @@ -5,8 +5,8 @@ const view = new lsp.EditorView({ let doc = "xquery version '3.1';\n(:~ comment:)\nmodule namespace pdfbox='ns';\n"; var client; var extLint; -var workspace={ - "file:///some/file.xqm":null +var workspace = { + "file:///some/file.xqm": null }; function $(id) { return document.getElementById(id) }; @@ -25,7 +25,7 @@ window.addEventListener('load', () => { $("iServer").value = svr; formFromStore('fSettings'); view.setState(lsp.EditorState.create({ doc: doc, extensions: lsp.baseExts })); - lsp.updateCompartment(objectFromForm('fSettings')) + lsp.updateCompartment(objectFromForm('fSettings')) connect(); }); @@ -55,27 +55,27 @@ $("symbols2").onclick = e => { .then(r => { console.log("symbols", r) $("symPanel").open = true; - + $("symList").setData(r); }); }; $("cmdList").onclick = e => { let cmds = lsp.listCommands(view); - let result=""; + let result = ""; [...cmds.keys()].sort().forEach(key => { - result+=`
  • ${key} ${cmds.get(key).key}
    • ` + result += `
  • ${key} ${cmds.get(key).key}
    • ` }); - $("popHelpInfo").innerHTML=`` + $("popHelpInfo").innerHTML = `` $("popCmds").showPopover() }; -$("symList").addEventListener("itemSelected", e => { - const sel=e.detail.selectionRange; - console.log("SYM selection range",sel); - const an=17*e.detail.kind - view.dispatch({selection: {anchor: an,head:an+34},scrollIntoView:true}); +$("symList").addEventListener("itemSelected", e => { + const sel = e.detail.selectionRange; + console.log("SYM selection range", sel); + const an = 17 * e.detail.kind + view.dispatch({ selection: { anchor: an, head: an + 34 }, scrollIntoView: true }); }); $("lint").onclick = async e => { @@ -85,20 +85,20 @@ $("lint").onclick = async e => { $("sync").onclick = e => { client.sync(); console.log("XXXsync"); }; // state a state -$("bnSave").onclick = e => { workspace[iFile]=view.state; }; -$("bnLoad").onclick = e => { const v=workspace[iFile];if(v)view.setState(v)}; +$("bnSave").onclick = e => { workspace[iFile] = view.state; }; +$("bnLoad").onclick = e => { const v = workspace[iFile]; if (v) view.setState(v) }; // select local file $("bnRead").onclick = e => { $("fileElem").click(); }; -$("fileElem").onchange= e=> { - let fr = new FileReader(); - fr.onload = function () { - alert( fr.result); - } - fr.readAsText(e.target.files[0]); +$("fileElem").onchange = e => { + let fr = new FileReader(); + fr.onload = function () { + alert(fr.result); + } + fr.readAsText(e.target.files[0]); }; -$("format").onclick = e => { console.log("FMT", lsp.formatDocument(view));}; +$("format").onclick = e => { console.log("FMT", lsp.formatDocument(view)); }; $("load").onchange = e => { const url = e.target.value; @@ -119,8 +119,10 @@ $("load").onchange = e => { }); $("load").value = ""; }; - -$("msgIcon").onclick=e=>{ +$("tConnect").addEventListener('quiet-change', event => { + $("popConnect").showPopover() + }); +$("msgIcon").onclick = e => { e.preventDefault(); alert("NOT YET") }; @@ -131,9 +133,9 @@ function updateSettings(event) { console.log("COPTS", lsp.curOpts); const opts = { - lineWrap: $("lineWrap").checked, + lineWrap: $("lineWrap").checked, highlightWhitespace: $("highlightWhitespace").checked, - minimap: $("minimap").checked + minimap: $("minimap").checked } console.log(opts) lsp.updateCompartment(opts); @@ -154,7 +156,7 @@ function connect() { client = new lsp.LSPClient({ extensions: lsp.languageServerExtensions() }); client.connect(transport); $("popConnect").hidePopover(); - connectStatus(true); + $("tConnect").checked=true; let extLsp = client.plugin(file, "xquery"); view.dispatch({ @@ -165,23 +167,14 @@ function connect() { }) .catch(e => { console.log(e); + $("tConnect").checked=false; connectStatus(false); alert("connection failed: " + server) }); }; -function connectStatus(bool) { - if (bool) { - $("popcon").querySelector("i").classList.value = "codicon codicon-vm-active"; - $("popcon").classList.remove("btn-danger") - $("popcon").classList.add("btn-success") - } else { - $("popcon").querySelector("i").classList.value = "codicon codicon-vm-outline"; - $("popcon").classList.add("btn-danger") - $("popcon").classList.remove("btn-success") - } -}; + function incoming(msg) { const rpc = JSON.parse(msg); @@ -192,10 +185,10 @@ function incoming(msg) { function log(rpc) { console.log("<-", rpc) if (rpc.id) return; - const when=(new Date()).toISOString(); - const msg = {name:rpc.method, detail:when.substring(1+when.indexOf("T")), kind:23 /* event */ }; + const when = (new Date()).toISOString(); + const msg = { name: rpc.method, detail: when.substring(1 + when.indexOf("T")), kind: 23 /* event */ }; //name,details,kind - $("msgList").setData([msg],true) + $("msgList").setData([msg], true) }; function formFromStore(name) {