hippie/source/screens/demo/examples/ui/cli.njk

---
title: CLI
tags:
	- ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_cli" %}

{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_io.njk" as io %}

{% block title %}{{ title }}
{% endblock %}

{% block links %}
	{{ super() }}
	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% 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>&gt;</textarea>
			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
		</div>
	</div>
{% endblock %}

{%- block script %}
	{{ 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 %}