|
@@ -3,7 +3,6 @@ import * as Utils from "./../util/utils";
|
|
|
import { Config } from "./../util/config";
|
|
|
|
|
|
export class DOMConsole {
|
|
|
-
|
|
|
static get BASH_TEMPLATE () {
|
|
|
return `
|
|
|
<div class="bash-title">
|
|
@@ -54,11 +53,11 @@ export class DOMConsole {
|
|
|
this.showBtn = null;
|
|
|
this.termDiv = null;
|
|
|
this.anyKey = false;
|
|
|
- let actualID = elementID
|
|
|
- if (elementID[0] === '#') {
|
|
|
+ let actualID = elementID;
|
|
|
+ if (elementID[0] === "#") {
|
|
|
actualID = elementID.substring(1);
|
|
|
}
|
|
|
- this.parent = document.getElementById(actualID)
|
|
|
+ this.parent = document.getElementById(actualID);
|
|
|
this.setup();
|
|
|
this.inputListeners = [];
|
|
|
this.hideInput();
|
|
@@ -72,10 +71,10 @@ export class DOMConsole {
|
|
|
}
|
|
|
|
|
|
_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));
|
|
|
+ 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) {
|
|
@@ -89,18 +88,18 @@ export class DOMConsole {
|
|
|
this.idleInterval = null;
|
|
|
}
|
|
|
let text = this.input.value;
|
|
|
- text = text.replace('[\n\r]+', '');
|
|
|
+ text = text.replace("[\n\r]+", "");
|
|
|
this.notifyListeners(text);
|
|
|
this._appendUserInput(text);
|
|
|
- this.input.value = '';
|
|
|
- this.inputSpan.innerHTML = '';
|
|
|
+ this.input.value = "";
|
|
|
+ this.inputSpan.innerHTML = "";
|
|
|
this.currentLine = null;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
_setupDom () {
|
|
|
- const bashNode = document.createElement('div');
|
|
|
- bashNode.classList.add('bash');
|
|
|
+ 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");
|
|
@@ -117,23 +116,29 @@ export class DOMConsole {
|
|
|
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.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")});
|
|
|
+ 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.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));
|
|
|
+ this.input.addEventListener("keyup", this.updateSpanText.bind(this));
|
|
|
+ this.input.addEventListener("blur", this.stopBlinkCaret.bind(this));
|
|
|
}
|
|
|
|
|
|
blinkCaretAndFocus () {
|
|
@@ -142,29 +147,28 @@ export class DOMConsole {
|
|
|
}
|
|
|
this.input.focus();
|
|
|
this.cursorInterval = window.setInterval(() => {
|
|
|
- if (this.cursorRef.style.visibility === 'visible') {
|
|
|
- this.cursorRef.style.visibility = 'hidden';
|
|
|
+ if (this.cursorRef.style.visibility === "visible") {
|
|
|
+ this.cursorRef.style.visibility = "hidden";
|
|
|
} else {
|
|
|
- this.cursorRef.style.visibility = 'visible';
|
|
|
+ this.cursorRef.style.visibility = "visible";
|
|
|
}
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
updateSpanText () {
|
|
|
this.inputSpan.innerHTML = this.input.value;
|
|
|
- if (this.idleInterval != null)
|
|
|
- window.clearInterval(this.idleInterval);
|
|
|
- this.scheduleNotify()
|
|
|
+ if (this.idleInterval != null) window.clearInterval(this.idleInterval);
|
|
|
+ this.scheduleNotify();
|
|
|
}
|
|
|
|
|
|
stopBlinkCaret () {
|
|
|
clearInterval(this.cursorInterval);
|
|
|
this.cursorInterval = null;
|
|
|
- this.cursorRef.style.visibility = 'visible';
|
|
|
+ this.cursorRef.style.visibility = "visible";
|
|
|
}
|
|
|
|
|
|
notifyListeners (text) {
|
|
|
- this.inputListeners.forEach(resolve => resolve(text));
|
|
|
+ this.inputListeners.forEach((resolve) => resolve(text));
|
|
|
this.inputListeners.splice(0, this.inputListeners.length);
|
|
|
this.hideInput();
|
|
|
this.anyKey = false;
|
|
@@ -187,7 +191,7 @@ export class DOMConsole {
|
|
|
}
|
|
|
|
|
|
async _appendText (text, type, newLine = false) {
|
|
|
- console.debug('Caling appendText');
|
|
|
+ console.debug("Caling appendText");
|
|
|
const write_time = Date.now();
|
|
|
this.pending_writes.push(0);
|
|
|
await Utils.sleep(5);
|
|
@@ -198,10 +202,10 @@ export class DOMConsole {
|
|
|
|
|
|
if (this.currentLine == null) {
|
|
|
const divClass = this.getClassForType(type);
|
|
|
- const textDiv = document.createElement('div');
|
|
|
+ const textDiv = document.createElement("div");
|
|
|
textDiv.classList.add(divClass);
|
|
|
this.termDiv.insertBefore(textDiv, this.inputDiv);
|
|
|
- this.currentLine = textDiv
|
|
|
+ this.currentLine = textDiv;
|
|
|
}
|
|
|
this.currentLine.innerHTML += this.getOutputText(text);
|
|
|
if (newLine) {
|
|
@@ -220,12 +224,10 @@ export class DOMConsole {
|
|
|
return;
|
|
|
}
|
|
|
const divClass = this.getClassForType(type);
|
|
|
- const textDiv = document.createElement('div');
|
|
|
+ const textDiv = document.createElement("div");
|
|
|
textDiv.classList.add(divClass);
|
|
|
- if (filter)
|
|
|
- textDiv.innerHTML = this.getOutputText(text);
|
|
|
- else
|
|
|
- textDiv.innerHTML = `<span>${text}</span>`;
|
|
|
+ if (filter) textDiv.innerHTML = this.getOutputText(text);
|
|
|
+ else textDiv.innerHTML = `<span>${text}</span>`;
|
|
|
this.termDiv.insertBefore(textDiv, this.inputDiv);
|
|
|
this.currentLine = null;
|
|
|
this.scrollTerm();
|
|
@@ -240,7 +242,7 @@ export class DOMConsole {
|
|
|
return;
|
|
|
}
|
|
|
const divClass = this.getClassForType(DOMConsole.INPUT);
|
|
|
- const textDiv = document.createElement('div');
|
|
|
+ const textDiv = document.createElement("div");
|
|
|
textDiv.innerHTML = this.getUserInputText(text);
|
|
|
textDiv.classList.add(divClass);
|
|
|
this.termDiv.insertBefore(textDiv, this.inputDiv);
|
|
@@ -266,7 +268,7 @@ export class DOMConsole {
|
|
|
}
|
|
|
|
|
|
focus () {
|
|
|
- this.termDiv.style.display = 'block';
|
|
|
+ this.termDiv.style.display = "block";
|
|
|
// Is in draggable mode?
|
|
|
if (!this.disableMarginTop && this.parent.style.top.length == 0) {
|
|
|
this.parent.style.marginTop = "-160px";
|
|
@@ -290,7 +292,7 @@ export class DOMConsole {
|
|
|
if (!this.disableMarginTop && this.parent.style.top.length == 0) {
|
|
|
this.parent.style.marginTop = "0";
|
|
|
}
|
|
|
- this.termDiv.style.display = 'none';
|
|
|
+ this.termDiv.style.display = "none";
|
|
|
}
|
|
|
|
|
|
getClassForType (type) {
|
|
@@ -307,15 +309,18 @@ export class DOMConsole {
|
|
|
}
|
|
|
|
|
|
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.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.inputCMD = null;
|
|
|
this.inputDiv = null;
|
|
|
this.termDiv = null;
|
|
|
this.inputSpan = null;
|
|
@@ -336,7 +341,7 @@ export class DOMConsole {
|
|
|
|
|
|
showInput () {
|
|
|
this.needInput = true;
|
|
|
- this.inputDiv.style.display = 'block';
|
|
|
+ this.inputDiv.style.display = "block";
|
|
|
this.inputCMD.click();
|
|
|
//this.inputCMD.scrollIntoView();
|
|
|
this.scrollTerm();
|
|
@@ -344,53 +349,49 @@ export class DOMConsole {
|
|
|
|
|
|
hideInput () {
|
|
|
this.needInput = false;
|
|
|
- this.inputDiv.style.display = ' none';
|
|
|
+ this.inputDiv.style.display = " none";
|
|
|
clearInterval(this.cursorInterval);
|
|
|
this.cursorInterval = null;
|
|
|
}
|
|
|
|
|
|
requestInput (anyKey = false) {
|
|
|
- const promise = new Promise( (resolve, _) => {
|
|
|
+ const promise = new Promise((resolve, _) => {
|
|
|
this.inputListeners.push(resolve);
|
|
|
this.anyKey = anyKey;
|
|
|
- if (this.idleInterval == null)
|
|
|
- this.scheduleNotify();
|
|
|
+ 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');
|
|
|
+ // 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");
|
|
|
+ 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," ");
|
|
|
+ t = t.replace(/\t/g, "  ");
|
|
|
+ t = t.replace(/\s/g, " ");
|
|
|
if (t.length == 0) {
|
|
|
// t = " ";
|
|
|
- console.debug('Empty string');
|
|
|
+ // console.debug('Empty string');
|
|
|
this.currentLine = null;
|
|
|
- } else
|
|
|
- this.write(t, true);
|
|
|
+ } 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);
|
|
|
+ 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," ");
|
|
|
+ // console.debug("no newline");
|
|
|
+ output = output.replace(/\t/g, "  ");
|
|
|
+ output = output.replace(/\s/g, " ");
|
|
|
this.write(output);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
clearPendingWrites () {
|
|
@@ -398,12 +399,14 @@ export class DOMConsole {
|
|
|
}
|
|
|
|
|
|
clear () {
|
|
|
- this.clearPendingWrites()
|
|
|
+ this.clearPendingWrites();
|
|
|
while (this.inputDiv.parentElement.childNodes.length > 1) {
|
|
|
- this.inputDiv.parentElement.removeChild(this.inputDiv.parentElement.firstChild);
|
|
|
+ this.inputDiv.parentElement.removeChild(
|
|
|
+ this.inputDiv.parentElement.firstChild
|
|
|
+ );
|
|
|
}
|
|
|
- this.input.value = '';
|
|
|
- this.inputSpan.innerHTML = '';
|
|
|
+ this.input.value = "";
|
|
|
+ this.inputSpan.innerHTML = "";
|
|
|
this.currentLine = null;
|
|
|
}
|
|
|
|
|
@@ -420,23 +423,26 @@ export class DOMConsole {
|
|
|
}
|
|
|
|
|
|
notifyIdle () {
|
|
|
- this.info(LocalizedStrings.getMessage('awaiting_input_message'));
|
|
|
+ this.info(LocalizedStrings.getMessage("awaiting_input_message"));
|
|
|
this.inputCMD.click();
|
|
|
}
|
|
|
|
|
|
scheduleNotify () {
|
|
|
- this.idleInterval = window.setInterval(this.notifyIdle.bind(this), Config.idle_input_interval);
|
|
|
+ this.idleInterval = window.setInterval(
|
|
|
+ this.notifyIdle.bind(this),
|
|
|
+ Config.idle_input_interval
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
cancelPendingInputRequests () {
|
|
|
- this.inputListeners.forEach(resolve => resolve(''));
|
|
|
+ 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.input.value = "";
|
|
|
+ this.inputSpan.innerHTML = "";
|
|
|
this.currentLine = null;
|
|
|
this.hideInput();
|
|
|
this.anyKey = false;
|