1
0

domConsole.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. import { LocalizedStrings } from "./../services/localizedStringsService";
  2. import { isElementInViewport } 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. }
  58. setup () {
  59. this._setupDom();
  60. this._setupEvents();
  61. }
  62. _setupEvents () {
  63. this.input.addEventListener('keydown', this.registerInput.bind(this));
  64. this.clearBtn.addEventListener('click', this.clearBtnClick.bind(this));
  65. this.hideBtn.addEventListener('click', this.hideBtnClick.bind(this));
  66. this.showBtn.addEventListener('click', this.showBtnClick.bind(this));
  67. }
  68. registerInput (event) {
  69. if (!this.needInput) {
  70. return;
  71. }
  72. const keyCode = event.which;
  73. if (keyCode === 13 || this.anyKey) {
  74. if(this.idleInterval != null) {
  75. clearInterval(this.idleInterval);
  76. this.idleInterval = null;
  77. }
  78. let text = this.input.value;
  79. text = text.replace('[\n\r]+', '');
  80. this.notifyListeners(text);
  81. this._appendUserInput(text);
  82. this.input.value = '';
  83. this.inputSpan.innerHTML = '';
  84. }
  85. }
  86. _setupDom () {
  87. const bashNode = document.createElement('div');
  88. bashNode.classList.add('bash');
  89. bashNode.innerHTML = DOMConsole.BASH_TEMPLATE;
  90. this.termDiv = bashNode.querySelector("#ivprog-term");
  91. this.termDiv.classList.add("ivprog-term-div");
  92. this.inputDiv = document.createElement("div");
  93. this.inputDiv.id = "ivprog-terminal-inputdiv";
  94. this.inputDiv.innerHTML = DOMConsole.INPUT_CARET_TEMPLATE;
  95. this.input = document.createElement("input");
  96. this.input.setAttribute("name", "command");
  97. this.input.setAttribute("value", "");
  98. this.input.setAttribute("type", "text");
  99. this.inputDiv.append(this.input);
  100. this.termDiv.append(this.inputDiv);
  101. bashNode.append(this.termDiv);
  102. this.parent.append(bashNode);
  103. this.inputCMD = this.inputDiv.querySelector("#cmd");
  104. this.cursorRef = this.inputCMD.querySelector("#cursor");
  105. this.inputSpan = this.inputCMD.querySelector('span');
  106. this.clearBtn = bashNode.querySelector('#ivprog-console-clearbtn');
  107. this.hideBtn = bashNode.querySelector('#ivprog-console-hidebtn');
  108. this.showBtn = bashNode.querySelector('#ivprog-console-showbtn');
  109. this._setupCursor();
  110. //Jquery tooltips....
  111. $(this.clearBtn).popup({content:LocalizedStrings.getUI("tooltip_terminal_clear")});
  112. $(this.showBtn).popup({content:LocalizedStrings.getUI("tooltip_terminal_show")});
  113. $(this.hideBtn).popup({content:LocalizedStrings.getUI("tooltip_terminal_hide")});
  114. }
  115. _setupCursor () {
  116. this.inputCMD.addEventListener('click', this.blinkCaretAndFocus.bind(this));
  117. this.inputCMD.click();
  118. this.input.addEventListener('keyup', this.updateSpanText.bind(this));
  119. this.input.addEventListener('blur', this.stopBlinkCaret.bind(this));
  120. }
  121. blinkCaretAndFocus () {
  122. if(this.cursorInterval != null) {
  123. return;
  124. }
  125. this.input.focus();
  126. const outerRef = this;
  127. this.cursorInterval = window.setInterval(function() {
  128. if (outerRef.cursorRef.style.visibility === 'visible') {
  129. outerRef.cursorRef.style.visibility = 'hidden';
  130. } else {
  131. outerRef.cursorRef.style.visibility = 'visible';
  132. }
  133. }, 500);
  134. }
  135. updateSpanText () {
  136. this.inputSpan.innerHTML = this.input.value;
  137. if(this.idleInterval != null)
  138. window.clearInterval(this.idleInterval);
  139. this.scheduleNotify()
  140. }
  141. stopBlinkCaret () {
  142. clearInterval(this.cursorInterval);
  143. this.cursorInterval = null;
  144. this.cursorRef.style.visibility = 'visible';
  145. }
  146. notifyListeners (text) {
  147. this.inputListeners.forEach(resolve => resolve(text));
  148. this.inputListeners.splice(0, this.inputListeners.length);
  149. this.hideInput();
  150. this.anyKey = false;
  151. }
  152. write (text) {
  153. this._appendText(text, DOMConsole.USER);
  154. }
  155. info (text) {
  156. this._appendText(text, DOMConsole.INFO);
  157. }
  158. err (text) {
  159. this._appendText(text, DOMConsole.ERR);
  160. }
  161. _appendText (text, type) {
  162. const divClass = this.getClassForType(type);
  163. const textDiv = document.createElement('div');
  164. textDiv.classList.add(divClass);
  165. textDiv.innerHTML = this.getOutputText(text);
  166. this.termDiv.insertBefore(textDiv, this.inputDiv);
  167. this.scrollTerm();
  168. }
  169. _appendUserInput (text) {
  170. const divClass = this.getClassForType(DOMConsole.INPUT);
  171. const textDiv = document.createElement('div');
  172. textDiv.innerHTML = this.getUserInputText(text);
  173. textDiv.classList.add(divClass);
  174. this.termDiv.insertBefore(textDiv, this.inputDiv);
  175. this.scrollTerm();
  176. }
  177. getOutputText (text) {
  178. if(text.trim().length == 0) {
  179. text = "&nbsp;";
  180. }
  181. return `<span>${text}</span>`;
  182. }
  183. getUserInputText (text) {
  184. if(text.trim().length == 0) {
  185. text = "&nbsp;";
  186. }
  187. return `<i class="icon keyboard outline" style="float:left"></i><span>${text}</span>`;
  188. }
  189. scrollTerm () {
  190. //scrollIt(this.inputDiv.previousSibling,200);
  191. this.termDiv.scrollTop = this.termDiv.scrollHeight;
  192. }
  193. focus () {
  194. this.termDiv.style.display = 'block';
  195. // Is in draggable mode?
  196. if(!this.disableMarginTop && this.parent.style.top.length == 0) {
  197. this.parent.style.marginTop = "-160px";
  198. }
  199. if(!isElementInViewport(this.termDiv))
  200. this.termDiv.scrollIntoView(false);
  201. this.scrollTerm();
  202. }
  203. hide () {
  204. // Is in draggable mode?
  205. if(!this.disableMarginTop && this.parent.style.top.length == 0) {
  206. this.parent.style.marginTop = "0";
  207. }
  208. this.termDiv.style.display = 'none';
  209. }
  210. getClassForType (type) {
  211. switch (type) {
  212. case DOMConsole.INPUT:
  213. return "ivprog-term-userInput";
  214. case DOMConsole.USER:
  215. return "ivprog-term-userText";
  216. case DOMConsole.INFO:
  217. return "ivprog-term-info";
  218. case DOMConsole.ERR:
  219. return "ivprog-term-error";
  220. }
  221. }
  222. dispose () {
  223. this.input.removeEventListener('keyup', this.updateSpanText.bind(this));
  224. this.input.removeEventListener('blur', this.stopBlinkCaret.bind(this));
  225. this.input.removeEventListener('keydown', this.registerInput.bind(this));
  226. this.inputCMD.removeEventListener('click', this.blinkCaretAndFocus.bind(this));
  227. this.clearBtn.removeEventListener('click', this.clearBtnClick.bind(this));
  228. this.hideBtn.removeEventListener('click', this.hideBtnClick.bind(this));
  229. this.showBtn.removeEventListener('click', this.showBtnClick.bind(this));
  230. this.input = null;
  231. this.inputCMD = null;
  232. this.inputDiv = null;
  233. this.termDiv = null;
  234. this.inputSpan = null;
  235. this.cursorRef = null;
  236. this.clearBtn = null;
  237. this.hideBtn = null;
  238. this.showBtn = null;
  239. const cNode = this.parent.cloneNode(false);
  240. this.parent.parentNode.replaceChild(cNode, this.parent);
  241. if(this.cursorInterval != null) {
  242. clearInterval(this.cursorInterval);
  243. }
  244. if(this.idleInterval != null) {
  245. clearInterval(this.idleInterval);
  246. }
  247. }
  248. showInput () {
  249. this.needInput = true;
  250. this.inputDiv.style.display = 'block';
  251. this.inputCMD.click();
  252. //this.inputCMD.scrollIntoView();
  253. this.scrollTerm();
  254. }
  255. hideInput () {
  256. this.needInput = false;
  257. this.inputDiv.style.display = ' none';
  258. clearInterval(this.cursorInterval);
  259. this.cursorInterval = null;
  260. }
  261. requestInput (callback, anyKey = false) {
  262. this.inputListeners.push(callback);
  263. this.anyKey = anyKey;
  264. if(this.idleInterval == null)
  265. this.scheduleNotify();
  266. this.showInput();
  267. }
  268. sendOutput (text) {
  269. const output = ""+text;
  270. output.split("\n").forEach(t => {
  271. t = t.replace(/\t/g,'&nbsp;&nbsp;');
  272. t = t.replace(/\s/g,"&nbsp;");
  273. this.write(t)
  274. });
  275. }
  276. clear () {
  277. while(this.inputDiv.parentElement.childNodes.length > 1) {
  278. this.inputDiv.parentElement.removeChild(this.inputDiv.parentElement.firstChild);
  279. }
  280. this.input.value = "";
  281. this.inputSpan.innerHTML = '';
  282. }
  283. clearBtnClick () {
  284. this.clear();
  285. }
  286. showBtnClick () {
  287. this.focus();
  288. }
  289. hideBtnClick () {
  290. this.hide();
  291. }
  292. notifyIdle () {
  293. this.info(LocalizedStrings.getMessage('awaiting_input_message'));
  294. this.inputCMD.click();
  295. }
  296. scheduleNotify () {
  297. this.idleInterval = window.setInterval(this.notifyIdle.bind(this), Config.idle_input_interval);
  298. }
  299. }