60 lines
1.3 KiB
Text
60 lines
1.3 KiB
Text
|
---
|
||
|
|
title: CLI
|
||
|
|
tags:
|
||
|
|
- ui
|
||
|
|
---
|
||
|
|
{% assign bodyClass = "body_cli" -%}
|
||
|
|
{% layout "hippie/app.liquid" %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<div id="cli">
|
||
|
|
<div id="history">
|
||
|
|
<pre>Previous prompt</pre>
|
||
|
|
</div>
|
||
|
|
<div id="line">
|
||
|
|
<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>></textarea>
|
||
|
|
<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{%- block script %}
|
||
|
|
{{ block.super -}}
|
||
|
|
<script>
|
||
|
|
function resizeTextArea(textarea) {
|
||
|
|
const {style, value} = textarea;
|
||
|
|
|
||
|
|
style.height = style.minHeight = 'auto';
|
||
|
|
style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
|
||
|
|
style.height = `${textarea.scrollHeight}px`;
|
||
|
|
}
|
||
|
|
|
||
|
|
const textarea = document.getElementById('prompt');
|
||
|
|
|
||
|
|
document
|
||
|
|
.body
|
||
|
|
.addEventListener('click', () => {
|
||
|
|
textarea.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
textarea.addEventListener('input', () => {
|
||
|
|
resizeTextArea(textarea);
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("keydown", (event) => {
|
||
|
|
if (event.key === 'Enter' && !event.shiftKey) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
const p = document.createElement("pre");
|
||
|
|
|
||
|
|
p.textContent = event.target.value;
|
||
|
|
document
|
||
|
|
.getElementById("history")
|
||
|
|
.appendChild(p);
|
||
|
|
// window.scrollTo(0, document.body.scrollHeight);
|
||
|
|
|
||
|
|
event.target.value = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|