hippie/source/view/demo/examples/ui/cli.liquid

---
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>&gt;</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 %}