Creare un terminale nel browser con jq-console

Recentemente, lavorando a PyBox, ho avuto la necessità di creare una UI dall’aspetto di un terminale nel browser.

Cercando in rete ho trovato jq-console, una plugin jQuery scritto in CoffeeScript, inizialmente creata da repl.it e poi utilizzata anche da Trinket che prova ad emulare un terminale di basso livello fornendo input e output.

La libreria è molto semplice da usare e con l’ultima versione di jQuery, (3.4.1 al tempo della scrittura).

Per istanziare jq-console utilizzeremo il seguente codice e successivamente vediamo cosa rappresentano le variabili indicate:

$(div).jqconsole(benvenuto, prompt, continua, autofocus);
  • div rappresenta l’elemento o il selettore, che deve essere dimensionato esplicitamente e posizionato absolute o relative.
  • benvenuto è la stringa che viene mostrata quando il terminale è mostrato per la prima volta.
  • prompt è l’etichetta che viene mostrata prima dell’input quando viene utilizzato Prompt().
  • continua è l’etichetta mostrata prima delle linee continuate dell’input quando viene utilizzato Prompt().
  • autofocus è un valore booleano (true/false) che indica se l’auto focus debba essere disabilitato o no.

Ecco come appare JQ-Console