basex-lsp/webapp/static/clients/codemirror/index.html

325 lines
No EOL
12 KiB
HTML

<!doctype html>
<html lang="en" class="wa-cloak wa-brand-blue wa-dark">
<!-- 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="wa2.css" />
</head>
<body>
<header class="header">
<wa-dropdown>
<wa-button slot="trigger" with-caret appearance="plain" variant="neutral">File</wa-button>
<wa-dropdown-item id="bnNew">
<wa-icon slot="icon" library="tabler" name="file"></wa-icon>New...
<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">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>Fetch...
<div slot="details">a url from the internet</div>
</wa-dropdown-item>
</wa-dropdown>
<div>
<span class="h4">XQuery 4.0 LSP client</span>
<wa-button id="bConnect" variant="danger">
<wa-icon library="tabler" name="network-off"></wa-icon>
</wa-button>
<wa-tooltip id="tipConnect" for="bConnect">Not connected</wa-tooltip>
</div>
<wa-button-group style="margin-right: 0.2rem;">
<wa-dropdown>
<wa-button slot="trigger" with-caret appearance="plain" variant="neutral">Dev tools</wa-button>
<wa-dropdown-item>
<wa-icon slot="icon" library="tabler" name="external-link"></wa-icon>
<a href="/app/home" target="lsp" rel="noreferrer noopener">LSP Manager</a>
</wa-dropdown-item>
<wa-dropdown-item>
<wa-icon slot="icon" library="tabler" name="external-link"></wa-icon>
<a href="/dba/logs" target="dba" rel="noreferrer noopener">Dba</a>
</wa-dropdown-item>
<wa-divider></wa-divider>
</wa-dropdown>
<wa-button popovertarget="popAbout" appearance="plain" variant="neutral">
<wa-icon library="tabler" name="help" label="Home"></wa-icon>
</wa-button>
</wa-button-group>
</header>
<main class="main-content">
<!-- Left Column - Details Panels Only (1/4 width) -->
<div class="left-column">
<div class="left-column-header">EXPLORER</div>
<div class="details-container">
<div class="details-wrapper">
<wa-details id="workspacePanel" open="open" icon-placement="start">
<div slot="summary">
WORKSPACE
<wa-dropdown id="workspaceOptions" style="display:inline-block;float:right;">
<wa-icon id="workspaceTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
<wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
<wa-divider></wa-divider>
<wa-dropdown-item type="checkbox" value="position" checked>sort by:
Position</wa-dropdown-item>
<wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
<wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
</wa-dropdown>
</div>
<div style="overflow: scroll;">
<wa-tree id="workspace" selection="single">
<wa-tree-item>file:///some/file.xqm</wa-tree-item>
</wa-tree>
</div>
</wa-details>
<wa-details id="symPanel" open icon-placement="start">
<div slot="summary">OUTLINE
<wa-dropdown id="symOptions" style="float:right;">
<wa-icon id="symTrigger" library="tabler" name="dots-vertical" slot="trigger"></wa-icon>
<wa-dropdown-item type="checkbox" value="canvas" checked>Follow cursor</wa-dropdown-item>
<wa-divider></wa-divider>
<wa-dropdown-item type="checkbox" value="position" checked>sort by:
Position</wa-dropdown-item>
<wa-dropdown-item type="checkbox" value="name">sort by: Name</wa-dropdown-item>
<wa-dropdown-item type="checkbox" value="category">sort by: Category</wa-dropdown-item>
</wa-dropdown>
</summary>
<qd-list id="symList" style="flex-grow:1;"></qd-list>
</div>
</wa-details>
<wa-details id="msgPanel" icon-placement="start">
<div slot="summary">MESSAGES
<i id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
</div>
<qd-list id="msgList" style="flex-grow:1;"></qd-list>
</wa-details>
</div>
</div>
</div>
<!-- Right Column - Controls and Information (3/4 width) -->
<div class="right-column">
<div class="right-column-header">
<div class="wa-split " style="font-size: 24px;">
<wa-button-group>
<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-icon library="tabler" name="message-report"></wa-icon>
</wa-button>
<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-icon library="tabler" name="align-justified"></wa-icon>
</wa-button>
</wa-button-group>
<wa-button-group>
<wa-button id="sync" title="Sync changes to server">
<wa-icon library="codicon" name="sync"></wa-icon>
</wa-button>
<wa-button id="cmdList" title="Command and key mapping help">
<wa-icon library="codicon" name="record-keys"></wa-icon>
</wa-button>
<wa-button id="popover__settings" title="Settings">
<wa-icon library="codicon" name="settings"></wa-icon>
</wa-button>
<wa-button id="fullscreen" title="Full screen editor">
<wa-icon library="codicon" name="screen-full"></wa-icon>
</wa-button>
<wa-button id="bnSave" title="save view">
<wa-icon library="codicon" name="git-stash"></wa-icon>
</wa-button>
<wa-button id="bnLoad" title="load view">
<wa-icon library="codicon" name="git-stash-pop"></wa-icon>
</wa-button>
<wa-button id="bnWordAt" type="wa-button" title="word at">
<wa-icon library="codicon" name="whole-word"></wa-icon>
</wa-button>
<wa-button id="bnDebug" title="Debug " icon-label="debug">
<wa-icon library="codicon" name="debug"></wa-icon>
</wa-button>
</wa-button-group>
<div></div>
</div>
</div>
<div class="right-column-content">
<!-- Editor goes in here -->
<div id="editor"></div>
</div>
</div>
</main>
<footer class="footer">
<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>
<wa-relative-time live id="relative-time__live" sync second="numeric" format='short'
style="width:10em;"></wa-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>
<!-- dialogs -->
<wa-popover id="popWeb" for="popover__url">
<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="circle-xmark" library="system"></wa-icon>
</wa-button>
</div>
<form id="popUrl">
<input type="url" name="url" label="URL to fetch" placeholder="http://..." with-clear required
style="width: 20em;">
</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)</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>
<!-- 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> -->
<wa-popover for="popover__settings">
<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>
</wa-popover>
<!-- CodeMirror 6 -->
<script src="./lsp.bundle.js"></script>
<script src="./script.js"></script>
<script src="./wc-qd-list.js"></script>
</body>
</html>