Added: able to write keystrokes into command line

This commit is contained in:
Filip Rojek 2023-12-15 14:54:15 +01:00
parent f137aceb6e
commit e7e8b78904
4 changed files with 63 additions and 0 deletions

4
content/console.md Normal file
View File

@ -0,0 +1,4 @@
+++
title = "Console"
template = "console.html"
+++

5
sass/console.scss Normal file
View File

@ -0,0 +1,5 @@
.console {
background: gray;
width: 80vw;
min-height: 20vh;
}

43
static/js/console.js Normal file
View File

@ -0,0 +1,43 @@
const c = document.querySelector(".console")
const ps1 = "[fr@website ~]$ "
function write(key) {
console.log("KEY:", key)
switch(key) {
case "Enter":
c.innerHTML += "<br>"
c.innerHTML += ps1
return
case "000ctrll":
c.innerHTML = ""
c.innerHTML += ps1
return
default:
c.innerHTML += key
}
}
function customCtrlShortcuts(plusKey) {
document.addEventListener("keydown", e => {
if(e.ctrlKey && e.key == plusKey) {
e.preventDefault()
write("000ctrl"+plusKey)
}
})
}
// On load init the terminal
window.addEventListener("load", () => {
write("000ctrll")
})
// Capture the keypress
window.addEventListener("keypress", e => {
console.log(e)
write(e.key)
})
// Register custom ctrl shortcuts
customCtrlShortcuts("l") // ctrl + l
customCtrlShortcuts("c") // ctrl + c

11
templates/console.html Normal file
View File

@ -0,0 +1,11 @@
{% extends "base.html" %}
{% block styles %}
<link rel="stylesheet" href="/console.css">
{% endblock styles %}
{% block content %}
<section class="console content">
</section>
<script src="/js/console.js" defer></script>
{% endblock content %}