Enabled multiline input to easily paste several lines from an external editor. Sth like backslash in bash doesn't work; don't see the need for that

This commit is contained in:
Sander Hautvast 2021-02-14 16:54:01 +01:00
parent 31944186e1
commit 9dabe938f9
3 changed files with 53 additions and 21 deletions

View file

@ -61,12 +61,25 @@ svg {
bottom: 0; bottom: 0;
} }
#command_input{ .multiline{
border-top: 1px slategray solid;
border-left: 1px slategray solid;
border-right: 1px slategray solid;
border-bottom: none transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.single_line{
border: none transparent; border: none transparent;
background: black; }
#command_input{
background: #111;
color: greenyellow; color: greenyellow;
outline: none; outline: none;
width: 39vw; width: 39vw;
height: 1em;
} }
#command_history{ #command_history{

View file

@ -6,10 +6,21 @@
const command_input_element = document.getElementById('command_input'); const command_input_element = document.getElementById('command_input');
const command_history_element = document.getElementById('command_history'); const command_history_element = document.getElementById('command_history');
command_input_element.value = ''; command_input_element.value = '';
let command_history = []; let command_history = [''];
let command_history_index = 0; let command_history_index = 0;
let adjust_input_element_height = function(){
let num_lines=command_input_element.value.split(/\n/).length;
command_input_element.setAttribute('style', 'height: ' + num_lines + 'em');
if (num_lines>1){
command_input_element.setAttribute('class','multiline');
} else {
command_input_element.setAttribute('class','single_line');
}
}
command_input_element.onkeyup = function handle_key_input(event) { command_input_element.onkeyup = function handle_key_input(event) {
adjust_input_element_height();
if (event.key === 'ArrowUp') { if (event.key === 'ArrowUp') {
if (command_history_index > -1) { if (command_history_index > -1) {
command_input_element.value = command_history[command_history_index]; command_input_element.value = command_history[command_history_index];
@ -27,7 +38,13 @@
} }
} }
if (event.key === 'Enter') { if (event.key === 'Enter') {
let command = command_input_element.value; let commands = command_input_element.value;
command_input_element.value='';
adjust_input_element_height();
let command_array = commands.split(/\n/);
for (let i = 0; i < command_array.length; i++) {
let command = command_array[i];
if (command.length > 0) {
command_history_element.innerText += command + "\n"; command_history_element.innerText += command + "\n";
command_input_element.value = ''; command_input_element.value = '';
command_history_index = command_history.length; command_history_index = command_history.length;
@ -46,6 +63,8 @@
command_history.push(command); command_history.push(command);
command_history_element.scrollTo(0, command_history_element.scrollHeight); command_history_element.scrollTo(0, command_history_element.scrollHeight);
} }
}
}
}; };
let visit_expression = function (expr) { let visit_expression = function (expr) {
@ -134,7 +153,7 @@
return object_wrapper.object[method_or_property.name].apply(object_wrapper, method_or_property.arguments); return object_wrapper.object[method_or_property.name].apply(object_wrapper, method_or_property.arguments);
} else { // property } else { // property
if (!object_wrapper.object.hasOwnProperty(method_or_property.name)){ if (!object_wrapper.object.hasOwnProperty(method_or_property.name)) {
throw {message: `property ${method_or_property.name} not found on ${object_wrapper.type}`}; throw {message: `property ${method_or_property.name} not found on ${object_wrapper.type}`};
} }
return object_wrapper.object[method_or_property.name]; return object_wrapper.object[method_or_property.name];

View file

@ -9,7 +9,7 @@
<div id="console"> <div id="console">
<div id="command_history"><div id="bottom"></div></div> <div id="command_history"><div id="bottom"></div></div>
<label id="prompt">&gt; <label id="prompt">&gt;
<input id="command_input" type="text" autofocus/> <textarea id="command_input" class="single_line" autofocus></textarea>
</label> </label>
</div> </div>
<script type="application/ecmascript" src="index.js"></script> <script type="application/ecmascript" src="index.js"></script>