123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444 |
- import { LocalizedStrings } from "./../services/localizedStringsService";
- import * as Utils from "./../util/utils";
- import { Config } from "./../util/config";
- export class DOMConsole {
- static get BASH_TEMPLATE () {
- return `
- <div class="bash-title">
- <i id="ivprog-console-clearbtn" class="icon eraser" style="float:left;padding-left: 5px"></i>
- <span>Terminal</span>
- <i id="ivprog-console-showbtn" class="icon window maximize outline" style="float:right"></i>
- <i id="ivprog-console-hidebtn" class="icon window minimize outline" style="float:right"></i>
- </div>
- <div id='ivprog-term' class="bash-body"></div>`;
- }
- static get INPUT_CARET_TEMPLATE () {
- return `
- <div id="cmd">
- <span></span>
- <div id="cursor"></div>
- </div>`;
- }
- static get USER () {
- return 0;
- }
- static get INFO () {
- return 1;
- }
- static get ERR () {
- return 2;
- }
- static get INPUT () {
- return 3;
- }
- constructor (elementID, disableMarginTop = false) {
- this.disableMarginTop = disableMarginTop;
- this.input = null;
- this.cursorInterval = null;
- this.idleInterval = null;
- this.inputDiv = null;
- this.inputCMD = null;
- this.inputSpan = null;
- this.cursorRef = null;
- this.needInput = false;
- this.clearBtn = null;
- this.hideBtn = null;
- this.showBtn = null;
- this.termDiv = null;
- this.anyKey = false;
- let actualID = elementID
- if (elementID[0] === '#') {
- actualID = elementID.substring(1);
- }
- this.parent = document.getElementById(actualID)
- this.setup();
- this.inputListeners = [];
- this.hideInput();
- this.pending_writes = [];
- this.last_clear = -1;
- }
- setup () {
- this._setupDom();
- this._setupEvents();
- }
- _setupEvents () {
- this.input.addEventListener('keydown', this.registerInput.bind(this));
- this.clearBtn.addEventListener('click', this.clearBtnClick.bind(this));
- this.hideBtn.addEventListener('click', this.hideBtnClick.bind(this));
- this.showBtn.addEventListener('click', this.showBtnClick.bind(this));
- }
- registerInput (event) {
- if (!this.needInput) {
- return;
- }
- const keyCode = event.which;
- if (keyCode === 13 || this.anyKey) {
- if (this.idleInterval != null) {
- clearInterval(this.idleInterval);
- this.idleInterval = null;
- }
- let text = this.input.value;
- text = text.replace('[\n\r]+', '');
- this.notifyListeners(text);
- this._appendUserInput(text);
- this.input.value = '';
- this.inputSpan.innerHTML = '';
- this.currentLine = null;
- }
- }
- _setupDom () {
- const bashNode = document.createElement('div');
- bashNode.classList.add('bash');
- bashNode.innerHTML = DOMConsole.BASH_TEMPLATE;
- this.termDiv = bashNode.querySelector("#ivprog-term");
- this.termDiv.classList.add("ivprog-term-div");
- this.inputDiv = document.createElement("div");
- this.inputDiv.id = "ivprog-terminal-inputdiv";
- this.inputDiv.innerHTML = DOMConsole.INPUT_CARET_TEMPLATE;
- this.input = document.createElement("input");
- this.input.setAttribute("name", "command");
- this.input.setAttribute("value", "");
- this.input.setAttribute("type", "text");
- this.inputDiv.append(this.input);
- this.termDiv.append(this.inputDiv);
- bashNode.append(this.termDiv);
- this.parent.append(bashNode);
- this.inputCMD = this.inputDiv.querySelector("#cmd");
- this.cursorRef = this.inputCMD.querySelector("#cursor");
- this.inputSpan = this.inputCMD.querySelector('span');
- this.clearBtn = bashNode.querySelector('#ivprog-console-clearbtn');
- this.hideBtn = bashNode.querySelector('#ivprog-console-hidebtn');
- this.showBtn = bashNode.querySelector('#ivprog-console-showbtn');
- this._setupCursor();
- //Jquery tooltips....
- window.$(this.clearBtn).popup({content:LocalizedStrings.getUI("tooltip_terminal_clear")});
- window.$(this.showBtn).popup({content:LocalizedStrings.getUI("tooltip_terminal_show")});
- window.$(this.hideBtn).popup({content:LocalizedStrings.getUI("tooltip_terminal_hide")});
- }
- _setupCursor () {
- this.inputCMD.addEventListener('click', this.blinkCaretAndFocus.bind(this));
- //this.inputCMD.click();
- this.input.addEventListener('keyup', this.updateSpanText.bind(this));
- this.input.addEventListener('blur', this.stopBlinkCaret.bind(this));
- }
- blinkCaretAndFocus () {
- if (this.cursorInterval != null) {
- return;
- }
- this.input.focus();
- this.cursorInterval = window.setInterval(() => {
- if (this.cursorRef.style.visibility === 'visible') {
- this.cursorRef.style.visibility = 'hidden';
- } else {
- this.cursorRef.style.visibility = 'visible';
- }
- }, 500);
- }
- updateSpanText () {
- this.inputSpan.innerHTML = this.input.value;
- if (this.idleInterval != null)
- window.clearInterval(this.idleInterval);
- this.scheduleNotify()
- }
- stopBlinkCaret () {
- clearInterval(this.cursorInterval);
- this.cursorInterval = null;
- this.cursorRef.style.visibility = 'visible';
- }
- notifyListeners (text) {
- this.inputListeners.forEach(resolve => resolve(text));
- this.inputListeners.splice(0, this.inputListeners.length);
- this.hideInput();
- this.anyKey = false;
- }
- writeRawHTML (text, channel) {
- this._appendTextLn(text, channel, false);
- }
- write (text, newLine = false) {
- this._appendText(text, DOMConsole.USER, newLine);
- }
- info (text) {
- this._appendTextLn(text, DOMConsole.INFO);
- }
- err (text) {
- this._appendTextLn(text, DOMConsole.ERR);
- }
- async _appendText (text, type, newLine = false) {
- console.debug('Caling appendText');
- const write_time = Date.now();
- this.pending_writes.push(0);
- await Utils.sleep(5);
- this.pending_writes.pop();
- if (this.last_clear >= write_time) {
- return;
- }
- if (this.currentLine == null) {
- const divClass = this.getClassForType(type);
- const textDiv = document.createElement('div');
- textDiv.classList.add(divClass);
- this.termDiv.insertBefore(textDiv, this.inputDiv);
- this.currentLine = textDiv
- }
- this.currentLine.innerHTML += this.getOutputText(text);
- if (newLine) {
- console.debug("append newline");
- this.currentLine = null;
- }
- this.scrollTerm();
- }
- async _appendTextLn (text, type, filter = true) {
- const write_time = Date.now();
- this.pending_writes.push(0);
- await Utils.sleep(5);
- this.pending_writes.pop();
- if (this.last_clear >= write_time) {
- return;
- }
- const divClass = this.getClassForType(type);
- const textDiv = document.createElement('div');
- textDiv.classList.add(divClass);
- if (filter)
- textDiv.innerHTML = this.getOutputText(text);
- else
- textDiv.innerHTML = `<span>${text}</span>`;
- this.termDiv.insertBefore(textDiv, this.inputDiv);
- this.currentLine = null;
- this.scrollTerm();
- }
- async _appendUserInput (text) {
- const write_time = Date.now();
- this.pending_writes.push(0);
- await Utils.sleep(5);
- this.pending_writes.pop();
- if (this.last_clear >= write_time) {
- return;
- }
- const divClass = this.getClassForType(DOMConsole.INPUT);
- const textDiv = document.createElement('div');
- textDiv.innerHTML = this.getUserInputText(text);
- textDiv.classList.add(divClass);
- this.termDiv.insertBefore(textDiv, this.inputDiv);
- this.currentLine = null;
- this.scrollTerm();
- }
- getOutputText (text) {
- text = text.replace(/\s/g, " ");
- return `<span>${text}</span>`;
- }
- getUserInputText (text) {
- if (text.trim().length == 0) {
- text = " ";
- }
- return `<i class="icon keyboard outline" style="float:left"></i><span>${text}</span>`;
- }
- scrollTerm () {
- //scrollIt(this.inputDiv.previousSibling,200);
- this.termDiv.scrollTop = this.termDiv.scrollHeight;
- }
- focus () {
- this.termDiv.style.display = 'block';
- // Is in draggable mode?
- if (!this.disableMarginTop && this.parent.style.top.length == 0) {
- this.parent.style.marginTop = "-160px";
- }
- if (this.needInput) {
- this.showInput();
- this.scheduleNotify();
- }
- if (!Utils.isElementInViewport(this.termDiv))
- this.termDiv.scrollIntoView(false);
- this.scrollTerm();
- }
- hide () {
- if (this.needInput) {
- clearInterval(this.idleInterval);
- this.hideInput();
- this.needInput = true;
- }
- // Is in draggable mode?
- if (!this.disableMarginTop && this.parent.style.top.length == 0) {
- this.parent.style.marginTop = "0";
- }
- this.termDiv.style.display = 'none';
- }
- getClassForType (type) {
- switch (type) {
- case DOMConsole.INPUT:
- return "ivprog-term-userInput";
- case DOMConsole.USER:
- return "ivprog-term-userText";
- case DOMConsole.INFO:
- return "ivprog-term-info";
- case DOMConsole.ERR:
- return "ivprog-term-error";
- }
- }
- dispose () {
- this.input.removeEventListener('keyup', this.updateSpanText.bind(this));
- this.input.removeEventListener('blur', this.stopBlinkCaret.bind(this));
- this.input.removeEventListener('keydown', this.registerInput.bind(this));
- this.inputCMD.removeEventListener('click', this.blinkCaretAndFocus.bind(this));
- this.clearBtn.removeEventListener('click', this.clearBtnClick.bind(this));
- this.hideBtn.removeEventListener('click', this.hideBtnClick.bind(this));
- this.showBtn.removeEventListener('click', this.showBtnClick.bind(this));
- this.input = null;
- this.inputCMD = null;
- this.inputDiv = null;
- this.termDiv = null;
- this.inputSpan = null;
- this.cursorRef = null;
- this.clearBtn = null;
- this.hideBtn = null;
- this.showBtn = null;
- this.currentLine = null;
- const cNode = this.parent.cloneNode(false);
- this.parent.parentNode.replaceChild(cNode, this.parent);
- if (this.cursorInterval != null) {
- clearInterval(this.cursorInterval);
- }
- if (this.idleInterval != null) {
- clearInterval(this.idleInterval);
- }
- }
- showInput () {
- this.needInput = true;
- this.inputDiv.style.display = 'block';
- this.inputCMD.click();
- //this.inputCMD.scrollIntoView();
- this.scrollTerm();
- }
- hideInput () {
- this.needInput = false;
- this.inputDiv.style.display = ' none';
- clearInterval(this.cursorInterval);
- this.cursorInterval = null;
- }
- requestInput (anyKey = false) {
- const promise = new Promise( (resolve, _) => {
- this.inputListeners.push(resolve);
- this.anyKey = anyKey;
- if (this.idleInterval == null)
- this.scheduleNotify();
- this.showInput();
- });
- return promise;
- }
- sendOutput (text) {
- console.debug(text);
- let output = ""+text;
- if (output.indexOf('\n') !== -1) {
- console.debug("newline");
- const outputList = output.split('\n');
- let i = 0;
- for ( ; i < outputList.length - 1; i += 1) {
- console.debug("newline write");
- let t = outputList[i];
- t = t.replace(/\t/g,'  ');
- t = t.replace(/\s/g," ");
- if (t.length == 0) {
- // t = " ";
- console.debug('Empty string');
- this.currentLine = null;
- } else
- this.write(t, true);
- }
- let t = outputList[i];
- t = t.replace(/\t/g,'  ');
- t = t.replace(/\s/g," ");
- if (t.length != 0)
- this.write(t);
- } else {
- console.debug("no newline");
- output = output.replace(/\t/g,'  ');
- output = output.replace(/\s/g," ");
- this.write(output);
- }
- }
- clearPendingWrites () {
- this.last_clear = Date.now();
- }
- clear () {
- this.clearPendingWrites()
- while (this.inputDiv.parentElement.childNodes.length > 1) {
- this.inputDiv.parentElement.removeChild(this.inputDiv.parentElement.firstChild);
- }
- this.input.value = '';
- this.inputSpan.innerHTML = '';
- this.currentLine = null;
- }
- clearBtnClick () {
- this.clear();
- }
- showBtnClick () {
- this.focus();
- }
- hideBtnClick () {
- this.hide();
- }
- notifyIdle () {
- this.info(LocalizedStrings.getMessage('awaiting_input_message'));
- this.inputCMD.click();
- }
- scheduleNotify () {
- this.idleInterval = window.setInterval(this.notifyIdle.bind(this), Config.idle_input_interval);
- }
- cancelPendingInputRequests () {
- this.inputListeners.forEach(resolve => resolve(''));
- this.inputListeners.splice(0, this.inputListeners.length);
- if (this.idleInterval != null) {
- clearInterval(this.idleInterval);
- this.idleInterval = null;
- }
- this.input.value = '';
- this.inputSpan.innerHTML = '';
- this.currentLine = null;
- this.hideInput();
- this.anyKey = false;
- }
- }
|