diff --git a/webapp/static/clients/codemirror/grail.css b/webapp/static/clients/codemirror/grail.css index aa7a296..0cabf08 100644 --- a/webapp/static/clients/codemirror/grail.css +++ b/webapp/static/clients/codemirror/grail.css @@ -83,15 +83,11 @@ details[open]::details-content { } } } - #tConnect:state(unchecked) { - outline: dashed 4px deeppink; - outline-offset: 4px; - } + .page-header { grid-column: 1 / -1; - display:flex; - justify-content:space-between; + background: #ffcdd2; } .page-sidebar { @@ -114,13 +110,9 @@ 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 bb83247..88ca5ca 100644 --- a/webapp/static/clients/codemirror/grail.html +++ b/webapp/static/clients/codemirror/grail.html @@ -1,17 +1,12 @@ - + Codemirror6 example using BaseX LSP - - - - - - + @@ -19,65 +14,69 @@
+
- +
- - +
@@ -132,8 +130,7 @@
- - -
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js index df30a57..337b5c2 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 => { @@ -84,21 +84,16 @@ $("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) }; - -// 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]); -}; - -$("format").onclick = e => { console.log("FMT", lsp.formatDocument(view)); }; +$("bnSave").onclick = e => { workspace[iFile]=view.state; }; +$("bnLoad").onclick = e => { const v=workspace[iFile];if(v)view.setState(v)}; +$("bnRead").onclick = e => { const c=$("fileElem"); + c.click(); + const f=c.files[0]; + if(!f)return; + c.value=null; + alert(f.name); + }; +$("format").onclick = e => { console.log("FMT", lsp.formatDocument(view));}; $("load").onchange = e => { const url = e.target.value; @@ -119,10 +114,8 @@ $("load").onchange = e => { }); $("load").value = ""; }; -$("tConnect").addEventListener('quiet-change', event => { - $("popConnect").showPopover() - }); -$("msgIcon").onclick = e => { + +$("msgIcon").onclick=e=>{ e.preventDefault(); alert("NOT YET") }; @@ -133,9 +126,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); @@ -156,7 +149,7 @@ function connect() { client = new lsp.LSPClient({ extensions: lsp.languageServerExtensions() }); client.connect(transport); $("popConnect").hidePopover(); - $("tConnect").checked=true; + connectStatus(true); let extLsp = client.plugin(file, "xquery"); view.dispatch({ @@ -167,14 +160,23 @@ 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); @@ -185,10 +187,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) {