quodatum/basex-lsp
1
0
Fork 0
Code Issues 16 Activity Actions

[mod] wa fixes

Browse source
This commit is contained in:
Andy Bunce 2025-12-08 23:00:48 +00:00
parent 5c036adc0f
commit 566831c73d
9 changed files with 309 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"html.customData": ["./node_modules/@awesome.me/webawesome/dist/vscode.html-custom-data.json"]
}

0
webapp/static/clients/codemirror/index.html → index.html
View file

30
webapp/static/clients/codemirror/script.js
View file

@ -89,8 +89,8 @@ $("symList").addEventListener("itemSelected", e => {
view.dispatch({
selection: { anchor: an, head: hd },
scrollIntoView: true ,
effects: [lsp.EditorView.scrollIntoView(an,{y:"center"})]
scrollIntoView: true,
effects: [lsp.EditorView.scrollIntoView(an, { y: "center" })]
});
});
@ -141,7 +141,12 @@ $("msgIcon").onclick = e => {
e.preventDefault();
alert("NOT YET")
};
$("samples").addEventListener('wa-selection-change', e => {
const sel=e.detail.selection;
const href=sel[0].getAttribute("data-href")
if(!href) return;
$("popUrl").querySelector('wa-input[name="url"]').value=href;
});
function updateSettings(event) {
event.preventDefault();
@ -172,7 +177,7 @@ function connect() {
client.connect(transport);
$("popConnect").hidePopover();
$("tConnect").checked = true;
$("tipConnect").innerText=server;
$("tipConnect").innerText = server;
const extLsp = client.plugin(file, "xquery");
view.dispatch({
@ -190,8 +195,8 @@ function connect() {
};
// change active doc
function docSwitch(text,urlNew) {
const urlOld=$("iFile").value;
function docSwitch(text, urlNew) {
const urlOld = $("iFile").value;
client.workspace.closeFile(urlOld);
view.dispatch({
changes: {
@ -200,11 +205,18 @@ function docSwitch(text,urlNew) {
insert: text
}
})
client.workspace.openFile(urlNew,"xquery",view)
client.workspace.openFile(urlNew, "xquery", view)
$("iFile").value = urlNew;
treeAdd($("workspace"), urlNew)
};
function treeAdd(tree, txt) {
const treeItem = document.createElement('wa-tree-item');
treeItem.innerText = txt;
tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
tree.insertBefore(treeItem,tree.firstChild);
treeItem.selected=true;
};
function incoming(msg) {
const rpc = JSON.parse(msg);
log(rpc);
@ -217,7 +229,7 @@ function log(rpc) {
const msg = { name: rpc.method ?? rpc.id, detail: when.substring(1 + when.indexOf("T")), kind: 23 /* event */ };
//name,details,kind
$("msgList").setData([msg], true)
$("relative-time__live").date=new Date();
$("relative-time__live").date = new Date();
};
function formFromStore(name) {

33
webapp/static/clients/codemirror/wa-setup.js Normal file
View file

@ -0,0 +1,33 @@
import { setBasePath, registerIconLibrary } from '../../webawesome/dist-cdn/webawesome.js';
import '../../webawesome/dist-cdn/components/button/button.js';
import '../../webawesome/dist-cdn/components/button-group/button-group.js';
import '../../webawesome/dist-cdn/components/details/details.js';
import '../../webawesome/dist-cdn/components/dropdown/dropdown.js';
import '../../webawesome/dist-cdn/components/divider/divider.js';
import '../../webawesome/dist-cdn/components/icon/icon.js';
import '../../webawesome/dist-cdn/components/input/input.js';
import '../../webawesome/dist-cdn/components/relative-time/relative-time.js';
import '../../webawesome/dist-cdn/components/tooltip/tooltip.js';
import '../../webawesome/dist-cdn/components/popover/popover.js';
import '../../webawesome/dist-cdn/components/split-panel/split-panel.js';
import '../../webawesome/dist-cdn/components/tree/tree.js';
setBasePath('/static/webawesome/dist-cdn');
registerIconLibrary('tabler', {
resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.35.0/icons/outline/${name}.svg`,
mutator: svg => {
svg.style.fill = 'none';
svg.setAttribute('stroke', 'currentColor');
}
});
registerIconLibrary('codicon', {
resolver: (name, family) => {
return `/static/clients/codicon@0.0.40/icons/${name}.svg`
},
mutator: svg => {
svg.style.fill = 'none';
svg.setAttribute('stroke', 'currentColor');
}
});

151
webapp/static/clients/codemirror/wa.css Normal file
View file

@ -0,0 +1,151 @@
:root,
.wa-light,
.wa-dark .wa-invert {
--wa-color-surface-raised: var(--wa-color-neutral-95);
--wa-color-surface-default: var(--wa-color-neutral-90);
--wa-color-surface-lowered: var(--wa-color-neutral-80);
}
wa-button-group>wa-button::part(base) {
background-color: var(--wa-color-neutral-95);
border: 1px solid var(--wa-color-border-quiet);
color: var(--wa-color-on-quiet);
}
wa-button-group>wa-button::part(base):hover {
transform: scale(1.05);
background-color: var(--wa-color-neutral-80);
}
/***********************
codemirror6 search panel tweaks to show close
**********************/
.cm-panel.cm-search [name="close"] {
color: black
}
.cm-panel.cm-panel-lint [name="close"] {
color: black
}
.cm-panel.cm-search [name="search"] {
width:98%;
}
form header {
background-color: burlywood;
}
.page-wrap {
background: white;
height: 100vh;
display: grid;
grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr);
grid-template-rows: min-content min-content 1fr min-content;
}
details[open] {
flex-grow: 1;
overflow: hidden;
}
summary {
background-color: var(--quiet-neutral-fill-softer);
}
/* Set editor dimensions */
#editor {
max-width: 100%;
overflow: hidden;
height: 75cqh;
}
/* Stretch editor to fit inside its containing div */
.cm-editor {
height: 100%;
width: 100%;
overflow: auto;
}
details[open]::details-content {
padding: 0.1em;
border: thin solid grey;
overflow: auto;
}
::backdrop {
backdrop-filter: blur(2px);
}
#tConnect:state(unchecked) {
outline: dashed 4px deeppink;
outline-offset: 4px;
}
.page-header {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
background: red;
}
.page-sidebar {
grid-column: 1 / 2;
grid-row: 2 / 4;
display: flex;
flex-direction: column;
details {
display: flex;
flex-direction: column;
}
}
.page-nav {
grid-column: 2 / 3;
background: red;
}
.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;
padding: 2px;
}
wa-button.pink::part(base) {
border-radius: 6px;
border: solid 2px;
background: #ff1493;
border-top-color: #ff7ac1;
border-left-color: #ff7ac1;
border-bottom-color: #ad005c;
border-right-color: #ad005c;
color: white;
font-size: 1.125rem;
box-shadow: 0 2px 10px #0002;
transition: all var(--wa-transition-slow) var(--wa-transition-easing);
}
wa-button.pink::part(base):hover {
transform: scale(1.05);
}
wa-button.pink::part(base):active {
border-top-color: #ad005c;
border-right-color: #ff7ac1;
border-bottom-color: #ff7ac1;
border-left-color: #ad005c;
transform: translateY(1px);
}
wa-button.pink::part(base):focus-visible {
outline: dashed 2px deeppink;
outline-offset: 4px;
}

131
webapp/static/clients/codemirror/webawesome.html → webapp/static/clients/codemirror/wa.html
View file

@ -1,66 +1,37 @@
<!doctype html>
<html lang="en" class="wa-cloak wa-theme-default wa-palette-default wa-brand-blue">
<!-- also quiet-dark -->
<html lang="en" class="wa-cloak wa-theme-default wa-palette-default wa-brand-blue wa-light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codemirror6 example using BaseX LSP</title>
<link rel="stylesheet" href="../../webawesome/dist-cdn/styles/themes/default.css" render="blocking" fetchpriority="high" />
<link rel="stylesheet" href="../../webawesome/dist-cdn/styles/webawesome.css" />
<link rel="icon" type="image/png" href="../favicon.png" />
<script type="module">
import { setBasePath, registerIconLibrary } from '../../webawesome/dist-cdn/webawesome.js';
import '../../webawesome/dist-cdn/components/icon/icon.js';
import '../../webawesome/dist-cdn/components/dropdown/dropdown.js';
import '../../webawesome/dist-cdn/components/button-group/button-group.js';
import '../../webawesome/dist-cdn/components/dropdown/dropdown.js';
import '../../webawesome/dist-cdn/components/relative-time/relative-time.js';
import '../../webawesome/dist-cdn/components/tooltip/tooltip.js';
import '../../webawesome/dist-cdn/components/popover/popover.js';
import '../../webawesome/dist-cdn/components/divider/divider.js';
setBasePath('/static/webawesome/dist-cdn');
registerIconLibrary('tabler', {
resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.35.0/icons/outline/${name}.svg`,
mutator: svg => {
svg.style.fill = 'none';
svg.setAttribute('stroke', 'currentColor');
}
});
registerIconLibrary('codicon', {
resolver: (name, family) => {
return `/static/clients/codicon@0.0.40/icons/${name}.svg`
},
mutator: svg => {
svg.style.fill = 'none';
svg.setAttribute('stroke', 'currentColor');
}
});
</script>
<link rel="stylesheet" href="webawesome.css" />
<script type="module" src="wa-setup.js"></script>
<link rel="stylesheet" href="wa.css" />
</head>
<body>
<div class="page-wrap">
<header class="page-header">
<wa-dropdown>
<wa-button slot="trigger" with-caret="with-caret">File</wa-button>
<wa-button slot="trigger" with-caret>File</wa-button>
<wa-dropdown-item id="bnNew">
<wa-icon slot="icon" library="tabler" name="file"></wa-icon>New...
<div slot="details">create a new doc</div>
<div slot="details">empty document</div>
</wa-dropdown-item>
<wa-dropdown-item id="bnRead">
<wa-icon slot="icon" library="tabler" name="folder-open"></wa-icon>Open...
<div slot="details">select a local file</div>
<div slot="details">a local file</div>
</wa-dropdown-item>
<input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
<wa-dropdown-item id="popover__url">
<wa-icon slot="icon" library="tabler" name="link"></wa-icon>Url...
<div slot="details">Fetch from a url</div>
<wa-icon slot="icon" library="tabler" name="link"></wa-icon>Fetch...
<div slot="details">a url from the internet</div>
</wa-dropdown-item>
</wa-dropdown>
@ -90,30 +61,30 @@
</wa-dropdown-item>
<wa-divider></wa-divider>
</wa-dropdown>
<wa-button popovertarget="popAbout" type="button">
<button popovertarget="popAbout" type="button">
<wa-icon library="tabler" name="help" label="Home" slot="start"></wa-icon>
</wa-button>
</button>
</wa-button-group>
</header>
<main id="main" class="page-main" style="overflow: auto;">
<div class="wa-split " >
<div class="wa-split " style="font-size: 24px;">
<wa-button-group>
<wa-button id="search" title="Search" icon-label="search" >
<wa-button id="search" title="Search" icon-label="search">
<wa-icon name="search"></wa-icon>
</wa-button>
<wa-button id="lint" title="Display diagnostics" icon-label="diagnostics" >
<wa-button id="lint" title="Display diagnostics" icon-label="diagnostics">
<wa-icon library="tabler" name="message-report"></wa-icon>
</wa-button>
<wa-button id="symbols2" title="symbols" icon-label="Symbols" >
<wa-button id="symbols2" title="symbols" icon-label="Symbols">
<wa-icon library="tabler" name="icons"></wa-icon>
</wa-button>
<wa-button id="format" type="button" title="Format (Shift-Alt-f)" icon-label="Format" >
<wa-button id="format" type="button" title="Format (Shift-Alt-f)" icon-label="Format">
<wa-icon library="tabler" name="align-justified"></wa-icon>
</wa-button>
@ -128,7 +99,7 @@
<wa-icon library="codicon" name="record-keys"></wa-icon>
</wa-button>
<wa-button type="wa-button" popovertarget="popSettings" title="Settings">
<wa-button id="popover__settings" title="Settings">
<wa-icon library="codicon" name="settings"></wa-icon>
</wa-button>
@ -163,17 +134,12 @@
<aside class="page-sidebar">
<details id="workspacePanel" open="open">
<summary class='bg-info'>WORKSPACE <i class='codicon codicon-kebab-vertical' style="float:right"></i>
<summary class='bg-info'>WORKSPACE
<wa-icon library="codicon" name="kebab-vertical" style="float:right"></wa-icon>
</summary>
<quiet-listbox size="sm">
<quiet-listbox-item value="file:///some/file.xqm">file:///some/file.xqm</quiet-listbox-item>
<quiet-listbox-item value="2">Luna</quiet-listbox-item>
<quiet-listbox-item value="3">Meowy McGee</quiet-listbox-item>
<quiet-listbox-item value="4">Milo</quiet-listbox-item>
<quiet-listbox-item value="5">Mittens</quiet-listbox-item>
<quiet-listbox-item value="6">Oliver</quiet-listbox-item>
</quiet-listbox>
<wa-tree id="workspace" selection="single">
<wa-tree-item >file:///some/file.xqm</wa-tree-item>
</wa-tree>
</details>
@ -221,6 +187,12 @@
<option value="xquery">xquery</option>
<option value="xml">xml</option>
</select>
<wa-button>
aaaaa
</wa-button>
<button>
ddddd
</button>
</footer>
</div>
@ -230,17 +202,16 @@
<div style="display:flex;background: #ffecb3;">
<div style="flex: 1 1 auto;">Load a document from the web</div>
<wa-button icon-label="Close" appearance="text" data-popover="close">
<wa-icon name="x"></wa-icon>
<wa-icon name="circle-xmark" library="system" ></wa-icon>
</wa-button>
</div>
<form id="popUrl">
<quiet-text-field type="url" name="url" label="URL to fetch" placeholder="http://..." with-clear required
<wa-input type="url" name="url" label="URL to fetch" placeholder="http://..." with-clear required
style="width: 20em;">
<datalist>
<option
value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">
Pdfbox3.xqm (expkg-zone58/pdfbox) </option>
<option
value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
model.xqm (Quodatum/xqdoca)</option>
@ -255,8 +226,30 @@
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
generator.xquery</option>
</datalist>
</quiet-text-field>
<wa-button type="submit" variant="primary">Fetch</wa-button>
</wa-input>
<wa-button type="submit" variant="primary">Fetch</wa-button>
<hr/>
<wa-tree id="samples" selection="leaf">
<wa-tree-item>
XQuery 3.1
<wa-tree-item
data-href="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm"
>Pdfbox3.xqm (expkg-zone58/pdfbox)</wa-tree-item>
<wa-tree-item
data-href="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
model.xqm (Quodatum/xqdoca)</option></wa-tree-item>
<wa-tree-item>Item X</wa-tree-item>
</wa-tree-item>
<wa-tree-item>
XQuery 4
<wa-tree-item>Item B</wa-tree-item>
<wa-tree-item>Item C</wa-tree-item>
</wa-tree-item>
<wa-tree-item>Item 2</wa-tree-item>
<wa-tree-item>Item 3</wa-tree-item>
</wa-tree>
</form>
</wa-popover>
@ -309,7 +302,7 @@
</dialog>
<!-- <popup-info id="popHelp">hhhh</popup-info> -->
<dialog id="popSettings" popover>
<wa-popover for="popover__settings">
<form id="fSettings">
<header>Editor configuration
<button type="button" class="btn-close" aria-label="Close"
@ -334,11 +327,11 @@
<button type="submit" class="btn btn-primary">Apply</button>
</div>
</form>
</dialog>
<!-- CodeMirror 6 -->
<script src="./lsp.bundle.js"></script>
<script src="./script.js"></script>
<script src="./wc-qd-list.js"></script>
</wa-popover>
<!-- CodeMirror 6 -->
<script src="./lsp.bundle.js"></script>
<script src="./script.js"></script>
<script src="./wc-qd-list.js"></script>
</body>

34
webapp/static/clients/codemirror/wa2.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<html lang="en" class="wa-cloak wa-theme-default wa-palette-default wa-brand-blue">
<!-- also quiet-dark -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>awesome test</title>
<link rel="stylesheet" href="../../webawesome/dist-cdn/styles/webawesome.css" />
<link rel="icon" type="image/png" href="../favicon.png" />
<script type="module" src="wa-setup.js"></script>
<link rel="stylesheet" href="wa.css" />
</head>
<body>
<div class="page-wrap">
<wa-button appearance="filled-outlined" variant="neutral">Filled-Outlined</wa-button>
<button>
ddddd
</button>
</div>
</body>
</html>

122
webapp/static/clients/codemirror/webawesome.css
View file

@ -1,122 +0,0 @@
:root {
color-scheme: light dark;
--quiet-primary-seed: #e98d61;
--quiet-content-spacing: 0.75rem;
--quiet-form-control-height-md:0.9rem;
--quiet-focus-width: 2px;
--quiet-focus-offset: 0px;
}
form header {
background-color: burlywood;
}
.page-wrap {
background: white;
height: 100vh ;
display: grid;
grid-template-columns: minmax(10px, 1fr) minmax(10px, 4fr);
grid-template-rows: min-content min-content 1fr min-content;
details {
}
details[open] {
flex-grow: 1;
overflow: hidden;
}
summary {
background-color: var(--quiet-neutral-fill-softer);
}
/* Set editor dimensions */
#editor {
max-width: 100%;
overflow: hidden;
height: 75cqh;
}
/* Stretch editor to fit inside its containing div */
.cm-editor {
height: 100%;
width: 100%;
overflow: auto;
}
details[open]::details-content {
padding: 0.1em;
border: thin solid grey;
overflow: auto;
}
::backdrop {
backdrop-filter: blur(2px);
}
@media (max-width: 600px) {
grid-template-columns: 100%;
grid-template-rows: auto;
>* {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
}
}
#tConnect:state(unchecked) {
outline: dashed 4px deeppink;
outline-offset: 4px;
}
.page-header {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
background: red;
}
.page-sidebar {
grid-column: 1 / 2;
grid-row: 2 / 4;
display: flex;
flex-direction: column;
details {
display: flex;
flex-direction: column;
}
}
.page-nav {
grid-column: 2 / 3;
background: red;
}
.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;
padding:2px;
}

1
webapp/static/clients/codicon@0.0.40/icons/kebab-vertical.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5ZM8 9C7.44771 9 7 8.55229 7 8C7 7.44772 7.44771 7 8 7C8.55228 7 9 7.44772 9 8C9 8.55229 8.55228 9 8 9ZM7 12C7 12.5523 7.44771 13 8 13C8.55228 13 9 12.5523 9 12C9 11.4477 8.55228 11 8 11C7.44771 11 7 11.4477 7 12Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 433 B