added proper server connection dialog

This commit is contained in:
ari melody 2023-10-03 01:21:34 +01:00
parent d3c35e7b8c
commit 6ced824e1c
No known key found for this signature in database
GPG key ID: 12A070A0ACDCA45F
4 changed files with 134 additions and 2 deletions

View file

@ -51,6 +51,13 @@
<li><a href="https://github.com/mellodoot/openterminal" target="_blank">source</a></li>
</ul>
</footer>
<div id="dialog-backdrop"></div>
<div id="connect-dialog">
<button id="connect-close">X</button>
<p>Enter the address of the server you would like to connect to:</p>
<input id="connect-url" name="server" type="text" spellcheck="false">
<button id="connect-submit">Connect</button>
</div>
<div id="overlay"></div>
</body>
</html>

View file

@ -5,10 +5,50 @@ document.addEventListener("DOMContentLoaded", () => {
Visual.bind();
Terminal.start();
document.getElementById("connect").addEventListener("click", () => {
var new_server = prompt("Enter the address of the server you would like to connect to:");
const dialog_backdrop = document.getElementById("dialog-backdrop");
const connect_button = document.getElementById("connect");
const connect_dialog = document.getElementById("connect-dialog");
const connect_url = document.getElementById("connect-url");
const connect_submit = document.getElementById("connect-submit");
const connect_close = document.getElementById("connect-close");
connect_url.placeholder = window.location.host;
connect_button.addEventListener("click", () => {
connect_url.value = "";
connect_dialog.classList.add("show");
dialog_backdrop.classList.add("show");
connect_url.focus();
Terminal.set_enable_input(false);
});
connect_submit.addEventListener("click", () => {
connect_close.click();
const new_server = connect_url.value;
if (!new_server) return;
Terminal.connect(new_server);
});
connect_dialog.addEventListener("keydown", event => {
switch (event.key) {
case "Enter":
connect_submit.click();
break;
case "Escape":
connect_close.click();
break;
}
return;
});
connect_close.addEventListener("click", () => {
connect_dialog.classList.remove("show");
dialog_backdrop.classList.remove("show");
Terminal.set_enable_input(true);
});
dialog_backdrop.addEventListener("click", () => {
connect_close.click();
});
});

View file

@ -10,6 +10,7 @@ var client;
var my_colour = false;
var pre_buffer_chars = 0;
var server_url = "";
var enable_input = true;
const DATA_TYPES = {
ping: 0,
@ -223,11 +224,22 @@ function new_caret() {
content.appendChild(new_caret);
}
/**
* sets whether or not the terminal should accept user input
* (handy for not interfering with dialogs)
* @param {value} boolean
*/
export function set_enable_input(value) {
enable_input = value;
}
/**
* the input handler for the document.
* automatically scrolls to the bottom of the page on valid key presses.
*/
function handle_input(event) {
if (!enable_input) return;
if (event.key == "'") {
event.preventDefault();
}

View file

@ -135,6 +135,7 @@ div#overlay {
pointer-events: none;
animation: linear .05s infinite alternate overlay-flicker;
mix-blend-mode: overlay;
z-index: 100;
}
body.lcd div#overlay {
@ -173,3 +174,75 @@ body.lcd pre#content {
pointer-events: none;
}
#dialog-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
background: black;
opacity: .25;
z-index: 99;
}
#connect-dialog {
position: fixed;
top: 50%;
left: 50%;
max-width: calc(100vw - 4rem);
width: 16rem;
margin: auto auto;
padding: 1rem;
display: none;
transform: translate(-50%, -50%);
border: 1px solid var(--colour);
color: var(--colour);
background: var(--bgcolour);
text-shadow: 0 0 2em;
z-index: 99;
}
#dialog-backdrop.show,
#connect-dialog.show {
display: block;
}
#connect-dialog p {
margin: 0 0 1em 0;
}
#connect-dialog input {
font-family: inherit;
color: var(--colour);
border: 1px solid var(--colour);
background: transparent;
}
#connect-dialog input::placeholder {
font-family: inherit;
color: var(--colour);
opacity: .25;
}
#connect-dialog button {
font-family: inherit;
border: 1px solid var(--colour);
color: var(--colour);
background: transparent;
cursor: pointer;
}
#connect-dialog #connect-close {
position: absolute;
top: -0.7em;
right: 1rem;
border: none;
background: var(--bgcolour);
}
*:focus {
outline: none;
box-shadow: 0 0 4px;
}