289 lines
No EOL
12 KiB
HTML
289 lines
No EOL
12 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="quiet-cloak quiet-blue"> <!-- also quiet-dark -->
|
|
|
|
<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 -->
|
|
<!-- Default theme (if not already installed) -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/themes/quiet.css">
|
|
|
|
<!-- Quiet Restyle -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/themes/restyle.css">
|
|
|
|
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/quiet.loader.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="grail.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page-wrap">
|
|
<header class="page-header">
|
|
|
|
<h4> XQuery 4.0 LSP client
|
|
<quiet-toggle-icon id="tConnect" label="Connection status" size="lg"
|
|
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-tooltip id="tipConnect" for="tConnect">I'm a tooltip</quiet-tooltip>
|
|
</h4>
|
|
<quiet-button-group>
|
|
<quiet-button id="bnNew" title="New file">
|
|
<quiet-icon slot="start" name="file"></quiet-icon>New
|
|
</quiet-button>
|
|
|
|
<quiet-button id="bnRead" title="Open local file">
|
|
<quiet-icon slot="start" name="folder-open"></quiet-icon>Open
|
|
</quiet-button>
|
|
<input type="file" id="fileElem" multiple accept="*/*" style="display: none;" />
|
|
|
|
<quiet-button id="popover__url" title="Open web file">
|
|
<quiet-icon slot="start" name="link"></quiet-icon>Web
|
|
</quiet-button>
|
|
|
|
|
|
</quiet-button-group>
|
|
|
|
<quiet-button-group>
|
|
<quiet-dropdown>
|
|
<quiet-button slot="trigger" with-caret>Links</quiet-button>
|
|
<quiet-dropdown-item href="/app/home" target="lsp" rel="noreferrer noopener">
|
|
LSP Manager <quiet-icon name="external-link" slot="icon"></quiet-icon></quiet-dropdown-item>
|
|
<quiet-dropdown-item href="/dba/logs" target="dba" rel="noreferrer noopener">
|
|
Dba <quiet-icon name="external-link" slot="icon"></quiet-icon></quiet-dropdown-item>
|
|
<quiet-divider></quiet-divider>
|
|
</quiet-dropdown>
|
|
<button popovertarget="popAbout" type="button">
|
|
<quiet-icon name="help"></quiet-icon>
|
|
</button>
|
|
</quiet-button-group>
|
|
</header>
|
|
|
|
|
|
<main id="main" class="page-main" style="overflow: auto;">
|
|
<quiet-toolbar>
|
|
|
|
<quiet-button-group>
|
|
<button id="search" title="Search" type="button"><i class="codicon codicon-search"></i></button>
|
|
|
|
<button id="lint" title="Display diagnostics" type="button"><i
|
|
class="codicon codicon-report"></i></button>
|
|
|
|
<button id="symbols2" type="button" title="symbols">
|
|
<i class="codicon codicon-symbol-misc"></i></button>
|
|
|
|
<button id="format" type="button" title="Format (Shift-Alt-f)"><i
|
|
class="codicon codicon-list-flat"></i></button>
|
|
|
|
<button id="sync" title="Sync changes to server" type="button">
|
|
<i class="codicon codicon-sync"></i>
|
|
</button>
|
|
|
|
<button id="cmdList" type="button" title="Command and key mapping help">
|
|
<i class="codicon codicon-record-keys"></i>
|
|
</button>
|
|
|
|
<button type="button" 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">
|
|
<i class="codicon codicon-screen-full"></i>
|
|
</button>
|
|
|
|
<button id="bnSave" type="button" title="save view">
|
|
<i class="codicon codicon-git-stash"></i></button>
|
|
|
|
<button id="bnLoad" type="button" title="load view">
|
|
<i class="codicon codicon-git-stash-pop"></i></button>
|
|
|
|
<button id="bnWordAt" type="button" 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>
|
|
<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>
|
|
|
|
</details>
|
|
|
|
<details id="symPanel">
|
|
<summary>OUTLINE
|
|
<quiet-dropdown id="symOptions" style="display:inline-block;float:right;">
|
|
<quiet-icon id="symTrigger" name="dots-vertical" slot="trigger"></quiet-icon>
|
|
<quiet-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</quiet-dropdown-item>
|
|
|
|
<quiet-divider></quiet-divider>
|
|
<quiet-dropdown-item type="checkbox" value="position" checked>sort by:
|
|
Position</quiet-dropdown-item>
|
|
<quiet-dropdown-item type="checkbox" value="name">sort by: Name</quiet-dropdown-item>
|
|
<quiet-dropdown-item type="checkbox" value="category">sort by: Category</quiet-dropdown-item>
|
|
</quiet-dropdown>
|
|
</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">
|
|
<div style="display:flex;">
|
|
|
|
<div>
|
|
<label for="iFile">File:</label>
|
|
<input id="iFile" type="url" value="file:///some/file.xqm"
|
|
style="width:20em;display:inline-block;" />
|
|
|
|
<label for="symbols">Symbols:</label>
|
|
<select id="symbols" disabled="disabled" style="width:10em;display:inline-block;"></select>
|
|
</div>
|
|
</div>
|
|
<quiet-relative-time live id="relative-time__live" style="width:10em;"></quiet-relative-time>
|
|
<select id="language" style="width:10em;display:inline-block;">
|
|
<option selected>Language</option>
|
|
<option value="plaintext">plaintext</option>
|
|
<option value="xquery">xquery</option>
|
|
<option value="xml">xml</option>
|
|
</select>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
<!-- dialogs -->
|
|
<quiet-popover id="popWeb" for="popover__url">
|
|
<form id="popUrl" style="background: #ffecb3;">
|
|
<quiet-text-field 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>
|
|
<option
|
|
value="https://git.quodatum.duckdns.org/api/v1/repos/quodatum/basex-lsp/raw/webapp/lsp/lsp-text.xqm">
|
|
lsp-text.xqm (quodatum/basex-lsp FORGEIO)</option>
|
|
<option
|
|
value="https://raw.githubusercontent.com/dnovatchev/Articles/refs/heads/main/Generators/Code/generator.xq">
|
|
generator.xquery</option>
|
|
</datalist>
|
|
</quiet-text-field>
|
|
<quiet-button type="submit" variant="primary">Fetch</quiet-button>
|
|
<quiet-button data-popover="close" variant="neutral">Cancel</quiet-button>
|
|
|
|
</form>
|
|
|
|
</quiet-popover>
|
|
|
|
|
|
|
|
|
|
<!-- 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> |