basex-lsp/webapp/static/clients/codemirror/grail.html
2025-10-27 23:02:21 +00:00

264 lines
No EOL
11 KiB
HTML

<!doctype html>
<html lang="en" class="quiet-cloak">
<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="icon" type="image/png" href="../favicon.png" />
<!-- Quiet theme + autoloader -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.4.0/dist/themes/quiet.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.4.0/dist/quiet.loader.js"></script>
<link rel="stylesheet" href="grail.css" />
</head>
<body>
<div class="page-wrap">
<header class="page-header">
<div>XQuery 4.0 LSP client </div>
<quiet-toggle-icon id="tConnect" label="Connection status" size="md"
style="--checked-color: green;--unchecked-color: red;">
<quiet-icon slot="unchecked" name="network-off" family="outline"></quiet-icon>
<quiet-icon slot="checked" name="network" family="outline"></quiet-icon>
</quiet-toggle-icon>
<quiet-button-group label="Links">
<quiet-button href="#" variant="primary" aria-current="page" size="sm">
Editor
</quiet-button>
<quiet-button href="/app/home" target="lsp" rel="noreferrer noopener" size="sm">
LSP Manager
</quiet-button>
<quiet-button href="/dba/logs" target="dba" rel="noreferrer noopener" size="sm">
Dba
</quiet-button>
</quiet-button-group>
<select id="load">
<option selected value="">load..</option>
<optgroup label="XQuery3">
<option
value="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">
Pdfbox3.xqm</option>
<option
value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
model.xqm</option>
</optgroup>
<optgroup label="XQuery4">
<option
value="https://git.quodatum.duckdns.org/quodatum/basex-lsp/raw/branch/main/webapp/lsp/lsp-text.xqm">
lsp-text.xqm</option>
<option value="../../../lsp/lsp-text.xqm">
lsp-text.xqm</option>
</optgroup>
<optgroup label="xpath">
<option
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
generator.xquery</option>
</optgroup>
</select>
<button popovertarget="popAbout" type="button">
<i class="codicon codicon-info"></i>
</button>
</header>
<main class="page-main" style="overflow: auto;">
<quiet-toolbar>
<quiet-button-group>
<label for="file">File:</label>
<input id="iFile" type="url" value="file:///some/file.xqm" />
<label for="symbols">Symbols:</label><select id="symbols" disabled="disabled"></select>
</quiet-button-group>
<quiet-button-group>
<button id="search" title="Search" type="button" class="btn btn-light"><i
class="codicon codicon-search"></i></button>
<button id="lint" title="Display diagnostics" type="button" class="btn btn-light"><i
class="codicon codicon-report"></i></button>
<button id="symbols2" type="button" class="btn btn-light" title="symbols">
<i class="codicon codicon-symbol-misc"></i></button>
<button id="format" type="button" class="btn btn-light" title="Format (Shift-Alt-f)"><i
class="codicon codicon-list-flat"></i></button>
<button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
<i class="codicon codicon-sync"></i>
</button>
<button id="cmdList" type="button" class="btn btn-light" title="Command and key mapping help">
<i class="codicon codicon-record-keys"></i>
</button>
<button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings">
<i class="codicon codicon-settings"></i></button>
</quiet-button-group>
<quiet-button-group>
<button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
<i class="codicon codicon-screen-full"></i>
</button>
<button id="bnNew" type="button" class="btn btn-light" title="New file"><i
class="codicon codicon-new-file"></i></button>
<button id="bnRead" type="button" class="btn btn-light" title="LOad local file"><i
class="codicon codicon-cloud-upload"></i></button>
<input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
<button id="bnSave" type="button" class="btn btn-light" title="save view">
<i class="codicon codicon-git-stash"></i></button>
<button id="bnLoad" type="button" class="btn btn-light" title="load view">
<i class="codicon codicon-git-stash-pop"></i></button>
<button id="bnWordAt" type="button" class="btn btn-light" title="word at">
<i class="codicon codicon-whole-word"></i></button>
</quiet-button-group>
</quiet-toolbar>
<!-- Editor goes in here -->
<div id="editor"></div>
</main>
<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>
<ul id="traffic" style="overflow: scroll;">
<li>-</li>
</ul>
</details>
<details id="symPanel">
<summary>OutLine <i class='codicon codicon-kebab-vertical' style="float:right"></i></summary>
<qd-list id="symList" style="flex-grow:1;"></qd-list>
</details>
<details id="msgPanel">
<summary>Messages
<i id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
</summary>
<qd-list id="msgList" style="flex-grow:1;"></qd-list>
</details>
</aside>
<footer class="page-footer">
<select id="language">
<option selected>Language</option>
<option value="plaintext">plaintext</option>
<option value="xquery">xquery</option>
<option value="xml">xml</option>
</select>
<quiet-relative-time live id="relative-time__live" style="width:10em;"></quiet-relative-time>
<quiet-dropdown id="dropdown__checkboxes">
<quiet-button slot="trigger"><i class='codicon codicon-kebab-vertical'></i></quiet-button>
<quiet-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</quiet-dropdown-item>
<quiet-divider></quiet-divider>
<quiet-radio orientation="vertical" name="sortBy">
<quiet-radio-item value="position">sort by: position</quiet-radio-item>
<quiet-radio-item value="name">sort by: name</quiet-radio-item>
<quiet-radio-item value="category">sort by: category</quiet-radio-item>
</quiet-radio>
</quiet-dropdown>
</footer>
</div>
<!-- dialogs -->
<!-- Popovers -->
<dialog id="popConnect" popover>
<form>
<header>Connect to LSP
<button type="button" class="btn-close" aria-label="Close"
onclick="$('popConnect').hidePopover(); "></button>
</header>
<div class="modal-body">
<div id="state">🔴</div>
<input id="iServer" type="text" style="width:25em" />
</div>
<div class="modal-footer">
<button id="connect">connect</button>
</div>
</form>
</dialog>
<dialog id="popCmds" popover>
<form>
<header>Commands and keys
<button type="button" class="btn-close" aria-label="Close"
onclick="$('popCmds').hidePopover(); "></button>
</header>
<div id="popHelpInfo" class="modal-body" style="height: 50vh;overflow:scroll;">
</div>
<div class="modal-footer">
</div>
</form>
</dialog>
<dialog id="popAbout" popover>
<form>
<header>Help</header>
<div class="modal-body" style="height: 50vh;overflow:scroll;">
<p>TODO help info</p>
</div>
<div class="modal-footer">
</div>
</form>
</dialog>
<!-- <popup-info id="popHelp">hhhh</popup-info> -->
<dialog id="popSettings" popover>
<form id="fSettings">
<header>Editor configuration
<button type="button" class="btn-close" aria-label="Close"
onclick="$('popSettings').hidePopover(); "></button>
</header>
<div class="modal-body">
<div class="mb-3 form-check">
<input name="wrapLines" type="checkbox" class="form-check-input" id="lineWrap">
<label class="form-check-label" for="lineWrap">Wrap lines</label>
</div>
<div class="mb-3 form-check">
<input name="highlightWhitespace" type="checkbox" class="form-check-input" id="highlightWhitespace">
<label class="form-check-label" for="highlightWhitespace">highlight Whitespace</label>
</div>
<div class="mb-3 form-check">
<input name="minimap" type="checkbox" class="form-check-input" id="minimap">
<label class="form-check-label" for="minimap">Show minimap</label>
</div>
</div>
<div class="modal-footer">
<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>
</body>
</html>