domConsole.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. import { LocalizedStrings } from "./../services/localizedStringsService";
  2. import * as Utils from "./../util/utils";
  3. import { Config } from "./../util/config";
  4. export class DOMConsole {
  5. static get BASH_TEMPLATE () {
  6. return `
  7. <div class="bash-title">
  8. <i id="ivprog-console-clearbtn" class="icon eraser" style="float:left;padding-left: 5px"></i>
  9. <span>Terminal</span>
  10. <i id="ivprog-console-showbtn" class="icon window maximize outline" style="float:right"></i>
  11. <i id="ivprog-console-hidebtn" class="icon window minimize outline" style="float:right"></i>
  12. </div>
  13. <div id='ivprog-term' class="bash-body"></div>`;
  14. }
  15. static get INPUT_CARET_TEMPLATE () {
  16. return `
  17. <div id="cmd">
  18. <span></span>
  19. <div id="cursor"></div>
  20. </div>`;
  21. }
  22. static get USER () {
  23. return 0;
  24. }
  25. static get INFO () {
  26. return 1;
  27. }
  28. static get ERR () {
  29. return 2;
  30. }
  31. static get INPUT () {
  32. return 3;
  33. }
  34. constructor (elementID, disableMarginTop = false) {
  35. this.disableMarginTop = disableMarginTop;
  36. this.input = null;
  37. this.cursorInterval = null;
  38. this.idleInterval = null;
  39. this.inputDiv = null;
  40. this.inputCMD = null;
  41. this.inputSpan = null;
  42. this.cursorRef = null;
  43. this.needInput = false;
  44. this.clearBtn = null;
  45. this.hideBtn = null;
  46. this.showBtn = null;
  47. this.termDiv = null;
  48. this.anyKey = false;
  49. let actualID = elementID;
  50. if (elementID[0] === "#") {
  51. actualID = elementID.substring(1);
  52. }
  53. this.parent = document.getElementById(actualID);
  54. this.setup();
  55. this.inputListeners = [];
  56. this.hideInput();
  57. this.pending_writes = [];
  58. this.last_clear = -1;
  59. }
  60. setup () {
  61. this._setupDom();
  62. this._setupEvents();
  63. }
  64. _setupEvents () {
  65. this.input.addEventListener("keydown", this.registerInput.bind(this));
  66. this.clearBtn.addEventListener("click", this.clearBtnClick.bind(this));
  67. this.hideBtn.addEventListener("click", this.hideBtnClick.bind(this));
  68. this.showBtn.addEventListener("click", this.showBtnClick.bind(this));
  69. }
  70. registerInput (event) {
  71. if (!this.needInput) {
  72. return;
  73. }
  74. const keyCode = event.which;
  75. if (keyCode === 13 || this.anyKey) {
  76. if (this.idleInterval != null) {
  77. clearInterval(this.idleInterval);
  78. this.idleInterval = null;
  79. }
  80. let text = this.input.value;
  81. text = text.replace("[\n\r]+", "");
  82. this.notifyListeners(text);
  83. this._appendUserInput(text);
  84. this.input.value = "";
  85. this.inputSpan.innerHTML = "";
  86. this.currentLine = null;
  87. }
  88. }
  89. _setupDom () {
  90. const bashNode = document.createElement("div");
  91. bashNode.classList.add("bash");
  92. bashNode.innerHTML = DOMConsole.BASH_TEMPLATE;
  93. this.termDiv = bashNode.querySelector("#ivprog-term");
  94. this.termDiv.classList.add("ivprog-term-div");
  95. this.inputDiv = document.createElement("div");
  96. this.inputDiv.id = "ivprog-terminal-inputdiv";
  97. this.inputDiv.innerHTML = DOMConsole.INPUT_CARET_TEMPLATE;
  98. this.input = document.createElement("input");
  99. this.input.setAttribute("name", "command");
  100. this.input.setAttribute("value", "");
  101. this.input.setAttribute("type", "text");
  102. this.input.setAttribute("autocomplete", "off");
  103. this.inputDiv.append(this.input);
  104. this.termDiv.append(this.inputDiv);
  105. bashNode.append(this.termDiv);
  106. this.parent.append(bashNode);
  107. this.inputCMD = this.inputDiv.querySelector("#cmd");
  108. this.cursorRef = this.inputCMD.querySelector("#cursor");
  109. this.inputSpan = this.inputCMD.querySelector("span");
  110. this.clearBtn = bashNode.querySelector("#ivprog-console-clearbtn");
  111. this.hideBtn = bashNode.querySelector("#ivprog-console-hidebtn");
  112. this.showBtn = bashNode.querySelector("#ivprog-console-showbtn");
  113. this._setupCursor();
  114. //Jquery tooltips....
  115. window
  116. .$(this.clearBtn)
  117. .popup({ content: LocalizedStrings.getUI("tooltip_terminal_clear") });
  118. window
  119. .$(this.showBtn)
  120. .popup({ content: LocalizedStrings.getUI("tooltip_terminal_show") });
  121. window
  122. .$(this.hideBtn)
  123. .popup({ content: LocalizedStrings.getUI("tooltip_terminal_hide") });
  124. }
  125. _setupCursor () {
  126. this.inputCMD.addEventListener("click", this.blinkCaretAndFocus.bind(this));
  127. //this.inputCMD.click();
  128. this.input.addEventListener("keyup", this.updateSpanText.bind(this));
  129. this.input.addEventListener("blur", this.stopBlinkCaret.bind(this));
  130. }
  131. blinkCaretAndFocus () {
  132. if (this.cursorInterval != null) {
  133. return;
  134. }
  135. this.input.focus();
  136. this.cursorInterval = window.setInterval(() => {
  137. if (this.cursorRef.style.visibility === "visible") {
  138. this.cursorRef.style.visibility = "hidden";
  139. } else {
  140. this.cursorRef.style.visibility = "visible";
  141. }
  142. }, 500);
  143. }
  144. updateSpanText () {
  145. this.inputSpan.innerHTML = this.input.value;
  146. if (this.idleInterval != null) window.clearInterval(this.idleInterval);
  147. this.scheduleNotify();
  148. }
  149. stopBlinkCaret () {
  150. clearInterval(this.cursorInterval);
  151. this.cursorInterval = null;
  152. this.cursorRef.style.visibility = "visible";
  153. }
  154. notifyListeners (text) {
  155. this.inputListeners.forEach((resolve) => resolve(text));
  156. this.inputListeners.splice(0, this.inputListeners.length);
  157. this.hideInput();
  158. this.anyKey = false;
  159. }
  160. writeRawHTML (text, channel) {
  161. this._appendTextLn(text, channel, false);
  162. }
  163. write (text, newLine = false) {
  164. this._appendText(text, DOMConsole.USER, newLine);
  165. }
  166. info (text) {
  167. this._appendTextLn(text, DOMConsole.INFO);
  168. }
  169. err (text) {
  170. this._appendTextLn(text, DOMConsole.ERR);
  171. }
  172. async _appendText (text, type, newLine = false) {
  173. // console.debug("Caling appendText");
  174. const write_time = Date.now();
  175. this.pending_writes.push(0);
  176. await Utils.sleep(3);
  177. this.pending_writes.pop();
  178. if (this.last_clear >= write_time) {
  179. return;
  180. }
  181. if (this.currentLine == null) {
  182. const divClass = this.getClassForType(type);
  183. const textDiv = document.createElement("div");
  184. textDiv.classList.add(divClass);
  185. this.termDiv.insertBefore(textDiv, this.inputDiv);
  186. this.currentLine = textDiv;
  187. }
  188. this.currentLine.innerHTML += this.getOutputText(text);
  189. if (newLine) {
  190. // console.debug("append newline");
  191. this.currentLine = null;
  192. }
  193. this.scrollTerm();
  194. }
  195. async _appendTextLn (text, type, filter = true) {
  196. const write_time = Date.now();
  197. this.pending_writes.push(0);
  198. await Utils.sleep(3);
  199. this.pending_writes.pop();
  200. if (this.last_clear >= write_time) {
  201. return;
  202. }
  203. const divClass = this.getClassForType(type);
  204. const textDiv = document.createElement("div");
  205. textDiv.classList.add(divClass);
  206. if (filter) textDiv.innerHTML = this.getOutputText(text);
  207. else textDiv.innerHTML = `<span>${text}</span>`;
  208. if (this.currentLine != null && this.currentLine.innerHTML.length === 0) {
  209. this.termDiv.removeChild(this.currentLine);
  210. }
  211. this.termDiv.insertBefore(textDiv, this.inputDiv);
  212. this.currentLine = null;
  213. this.scrollTerm();
  214. }
  215. async _appendUserInput (text) {
  216. const write_time = Date.now();
  217. this.pending_writes.push(0);
  218. await Utils.sleep(3);
  219. this.pending_writes.pop();
  220. if (this.last_clear >= write_time) {
  221. return;
  222. }
  223. const divClass = this.getClassForType(DOMConsole.INPUT);
  224. const textDiv = document.createElement("div");
  225. textDiv.innerHTML = this.getUserInputText(text);
  226. textDiv.classList.add(divClass);
  227. this.termDiv.insertBefore(textDiv, this.inputDiv);
  228. this.currentLine = null;
  229. this.scrollTerm();
  230. }
  231. getOutputText (text) {
  232. text = text.replace(/\s/g, "&#160;");
  233. return `<span>${text}</span>`;
  234. }
  235. getUserInputText (text) {
  236. if (text.trim().length == 0) {
  237. text = "&nbsp;";
  238. }
  239. return `<i class="icon keyboard outline" style="float:left"></i><span>${text}</span>`;
  240. }
  241. scrollTerm () {
  242. //scrollIt(this.inputDiv.previousSibling,200);
  243. this.termDiv.scrollTop = this.termDiv.scrollHeight;
  244. }
  245. focus () {
  246. this.termDiv.style.display = "block";
  247. // Is in draggable mode?
  248. if (!this.disableMarginTop && this.parent.style.top.length == 0) {
  249. this.parent.style.marginTop = "-160px";
  250. }
  251. if (this.needInput) {
  252. this.showInput();
  253. this.scheduleNotify();
  254. }
  255. if (!Utils.isElementInViewport(this.termDiv))
  256. this.termDiv.scrollIntoView(false);
  257. this.scrollTerm();
  258. }
  259. hide () {
  260. if (this.needInput) {
  261. clearInterval(this.idleInterval);
  262. this.hideInput();
  263. this.needInput = true;
  264. }
  265. // Is in draggable mode?
  266. if (!this.disableMarginTop && this.parent.style.top.length == 0) {
  267. this.parent.style.marginTop = "0";
  268. }
  269. this.termDiv.style.display = "none";
  270. }
  271. getClassForType (type) {
  272. switch (type) {
  273. case DOMConsole.INPUT:
  274. return "ivprog-term-userInput";
  275. case DOMConsole.USER:
  276. return "ivprog-term-userText";
  277. case DOMConsole.INFO:
  278. return "ivprog-term-info";
  279. case DOMConsole.ERR:
  280. return "ivprog-term-error";
  281. }
  282. }
  283. dispose () {
  284. this.input.removeEventListener("keyup", this.updateSpanText.bind(this));
  285. this.input.removeEventListener("blur", this.stopBlinkCaret.bind(this));
  286. this.input.removeEventListener("keydown", this.registerInput.bind(this));
  287. this.inputCMD.removeEventListener(
  288. "click",
  289. this.blinkCaretAndFocus.bind(this)
  290. );
  291. this.clearBtn.removeEventListener("click", this.clearBtnClick.bind(this));
  292. this.hideBtn.removeEventListener("click", this.hideBtnClick.bind(this));
  293. this.showBtn.removeEventListener("click", this.showBtnClick.bind(this));
  294. this.input = null;
  295. this.inputCMD = null;
  296. this.inputDiv = null;
  297. this.termDiv = null;
  298. this.inputSpan = null;
  299. this.cursorRef = null;
  300. this.clearBtn = null;
  301. this.hideBtn = null;
  302. this.showBtn = null;
  303. this.currentLine = null;
  304. const cNode = this.parent.cloneNode(false);
  305. this.parent.parentNode.replaceChild(cNode, this.parent);
  306. if (this.cursorInterval != null) {
  307. clearInterval(this.cursorInterval);
  308. }
  309. if (this.idleInterval != null) {
  310. clearInterval(this.idleInterval);
  311. }
  312. }
  313. showInput () {
  314. this.needInput = true;
  315. this.inputDiv.style.display = "block";
  316. this.inputCMD.click();
  317. //this.inputCMD.scrollIntoView();
  318. this.scrollTerm();
  319. }
  320. hideInput () {
  321. this.needInput = false;
  322. this.inputDiv.style.display = " none";
  323. clearInterval(this.cursorInterval);
  324. this.cursorInterval = null;
  325. }
  326. requestInput (anyKey = false) {
  327. const promise = new Promise((resolve, _) => {
  328. this.inputListeners.push(resolve);
  329. this.anyKey = anyKey;
  330. if (this.idleInterval == null) this.scheduleNotify();
  331. this.showInput();
  332. });
  333. return promise;
  334. }
  335. sendOutput (text) {
  336. //console.debug(text);
  337. let output = "" + text;
  338. if (output.indexOf("\n") !== -1) {
  339. //console.debug("newline");
  340. const outputList = output.split("\n");
  341. let i = 0;
  342. for (; i < outputList.length - 1; i += 1) {
  343. //console.debug("newline write");
  344. let t = outputList[i];
  345. t = t.replace(/\t/g, "&#x0020;&#x0020;");
  346. t = t.replace(/\s/g, "&#x0020;");
  347. if (t.length !== 0) {
  348. this.write(t);
  349. }
  350. this.write("", true);
  351. }
  352. let t = outputList[i];
  353. t = t.replace(/\t/g, "&#x0020;&#x0020;");
  354. t = t.replace(/\s/g, "&#x0020;");
  355. if (t.length != 0) this.write(t);
  356. } else {
  357. // console.debug("no newline");
  358. output = output.replace(/\t/g, "&#x0020;&#x0020;");
  359. output = output.replace(/\s/g, "&#x0020;");
  360. if (output.length != 0) this.write(output);
  361. }
  362. }
  363. clearPendingWrites () {
  364. this.last_clear = Date.now();
  365. }
  366. clear () {
  367. this.clearPendingWrites();
  368. while (this.inputDiv.parentElement.childNodes.length > 1) {
  369. this.inputDiv.parentElement.removeChild(
  370. this.inputDiv.parentElement.firstChild
  371. );
  372. }
  373. this.input.value = "";
  374. this.inputSpan.innerHTML = "";
  375. this.currentLine = null;
  376. }
  377. clearBtnClick () {
  378. this.clear();
  379. }
  380. showBtnClick () {
  381. this.focus();
  382. }
  383. hideBtnClick () {
  384. this.hide();
  385. }
  386. notifyIdle () {
  387. this.info(LocalizedStrings.getMessage("awaiting_input_message"));
  388. this.inputCMD.click();
  389. }
  390. scheduleNotify () {
  391. this.idleInterval = window.setInterval(
  392. this.notifyIdle.bind(this),
  393. Config.idle_input_interval
  394. );
  395. }
  396. cancelPendingInputRequests () {
  397. this.inputListeners.forEach((resolve) => resolve(""));
  398. this.inputListeners.splice(0, this.inputListeners.length);
  399. if (this.idleInterval != null) {
  400. clearInterval(this.idleInterval);
  401. this.idleInterval = null;
  402. }
  403. this.input.value = "";
  404. this.inputSpan.innerHTML = "";
  405. this.currentLine = null;
  406. this.hideInput();
  407. this.anyKey = false;
  408. }
  409. }