[mod] ui
This commit is contained in:
parent
9331800656
commit
9f34c28efc
6 changed files with 264 additions and 146 deletions
|
|
@ -6,65 +6,42 @@
|
|||
<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" />
|
||||
|
||||
<link href="../bootstrap@5.3.7.css" rel="stylesheet"
|
||||
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<link href="../bootstrap@5.3.7.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="popover.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<a class="navbar-brand">BaseX LSP client</a>
|
||||
<a class="navbar-brand">XQuery 4.0 LSP client</a>
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Editor</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Msgs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dba/logs" target="dba">Dba</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button id="popcon" popovertarget="popConnect" class="btn btn-danger">
|
||||
<i class="bi bi-router"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<a href="/dba/logs" target="dba">#</a>
|
||||
</nav>
|
||||
<div class="row">
|
||||
<div>
|
||||
<select id="language">
|
||||
<option selected>Language</option>
|
||||
<option value="plaintext">plaintext</option>
|
||||
<option value="xquery">xquery</option>
|
||||
<option value="xml">xml</option>
|
||||
</select>
|
||||
<label for="file">File:</label>
|
||||
<input id="iFile" type="url" value="file:///some/file.xqm" />
|
||||
|
||||
|
||||
|
||||
<!-- <div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div> -->
|
||||
<div class="btn-group btn-group-sm " role="group" aria-label="Second group">
|
||||
<button id="search" type="button" class="btn btn-light"><i
|
||||
class="bi bi-search"></i></button>
|
||||
<button id="lint" type="button" class="btn btn-light"><i
|
||||
class="bi bi-info-square"></i></button>
|
||||
<button id="sync" type="button" class="btn btn-light">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-light" title="Format"><i class="bi bi-justify-left"></i></button>
|
||||
|
||||
<button type="button" class="btn btn-light"
|
||||
popovertarget="popSettings" title="Settings">
|
||||
<i class="bi bi-gear"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
|
@ -101,23 +78,70 @@
|
|||
</div>
|
||||
|
||||
<div class="col flex-grow-1" style="overflow: auto;">
|
||||
<div>
|
||||
<select id="language">
|
||||
<option selected>Language</option>
|
||||
<option value="plaintext">plaintext</option>
|
||||
<option value="xquery">xquery</option>
|
||||
<option value="xml">xml</option>
|
||||
</select>
|
||||
<label for="file">File:</label>
|
||||
<input id="iFile" type="url" value="file:///some/file.xqm" />
|
||||
|
||||
|
||||
<!-- <div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div> -->
|
||||
<div class="btn-group btn-group-sm " role="group" aria-label="Second group">
|
||||
<button id="search" type="button" class="btn btn-light"><i class="bi bi-search"></i></button>
|
||||
<button id="lint" type="button" class="btn btn-light"><i class="bi bi-info-square"></i></button>
|
||||
<button id="sync" type="button" class="btn btn-light">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-light" title="Format"><i
|
||||
class="bi bi-justify-left"></i></button>
|
||||
|
||||
<button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings">
|
||||
<i class="bi bi-gear"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor goes in here -->
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Popovers -->
|
||||
<div id="popConnect" popover>
|
||||
<h2>Connect to LSP</h2>
|
||||
<div id="state">🔴</div>
|
||||
<input id="iServer" type="text" value="ws://localhost:3000/ws/lsp" style="width:25em" />
|
||||
<button id="connect">connect</button>
|
||||
</div>
|
||||
<dialog id="popConnect" popover>
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Connect to LSP</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="state">🔴</div>
|
||||
<input id="iServer" type="text" value="ws://localhost:3000/ws/lsp" style="width:25em" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="connect">connect</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<div id="popSettings" popover>
|
||||
<h2>Settings</h2>
|
||||
<div>TODO</div>
|
||||
</div>
|
||||
<dialog id="popSettings" popover >
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Editor configuration</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@TODO
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="connect">ok</button>
|
||||
</div>
|
||||
</dialog>
|
||||
<!-- CodeMirror 6 -->
|
||||
<script src="./lsp.bundle.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
|
|
|
|||
84
webapp/static/clients/codemirror/popover.js
Normal file
84
webapp/static/clients/codemirror/popover.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
// Create a class for the element
|
||||
class PopupInfo extends HTMLElement {
|
||||
constructor() {
|
||||
// Always call super first in constructor
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Create a shadow root
|
||||
const shadow = this.attachShadow({ mode: "open" });
|
||||
|
||||
// Create spans
|
||||
const wrapper = document.createElement("span");
|
||||
wrapper.setAttribute("class", "wrapper");
|
||||
|
||||
const icon = document.createElement("span");
|
||||
icon.setAttribute("class", "icon");
|
||||
icon.setAttribute("tabindex", 0);
|
||||
|
||||
const info = document.createElement("span");
|
||||
info.setAttribute("class", "info");
|
||||
|
||||
// Take attribute content and put it inside the info span
|
||||
const text = this.getAttribute("data-text");
|
||||
info.textContent = text;
|
||||
|
||||
// Insert icon
|
||||
let imgUrl;
|
||||
if (this.hasAttribute("img")) {
|
||||
imgUrl = this.getAttribute("img");
|
||||
} else {
|
||||
imgUrl = "img/default.png";
|
||||
}
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.src = imgUrl;
|
||||
icon.appendChild(img);
|
||||
|
||||
// Create some CSS to apply to the shadow dom
|
||||
const style = document.createElement("style");
|
||||
console.log(style.isConnected);
|
||||
|
||||
style.textContent = `
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 0.8rem;
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
transition: 0.6s all;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.2rem;
|
||||
}
|
||||
|
||||
.icon:hover + .info, .icon:focus + .info {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
// Attach the created elements to the shadow dom
|
||||
shadow.appendChild(style);
|
||||
console.log(style.isConnected);
|
||||
shadow.appendChild(wrapper);
|
||||
wrapper.appendChild(icon);
|
||||
wrapper.appendChild(info);
|
||||
}
|
||||
}
|
||||
|
||||
// Define the new element
|
||||
customElements.define("popup-info", PopupInfo);
|
||||
|
||||
|
|
@ -18,3 +18,9 @@
|
|||
nav {
|
||||
background-color: burlywood!;
|
||||
}
|
||||
.nav-pills > li > a
|
||||
{
|
||||
/* adjust padding for height*/
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue