Merge branch 'html-ouput' of LInE/iVProg into master

js/io/domConsole.js

@@ -1,5 +1,5 @@
 import { LocalizedStrings } from "./../services/localizedStringsService";
-import { isElementInViewport } from "./../util/utils";
+import * as Utils from "./../util/utils";
 import { Config } from "./../util/config";
 
 export class DOMConsole {
@@ -136,7 +136,7 @@ export class DOMConsole {
   }
 
   blinkCaretAndFocus () {
-    if(this.cursorInterval != null) {
+    if (this.cursorInterval != null) {
       return;
     }
     this.input.focus();
@@ -151,7 +151,7 @@ export class DOMConsole {
 
   updateSpanText () {
     this.inputSpan.innerHTML = this.input.value;
-    if(this.idleInterval != null)
+    if (this.idleInterval != null)
       window.clearInterval(this.idleInterval);
     this.scheduleNotify()
   }
@@ -174,45 +174,46 @@ export class DOMConsole {
   }
 
   info (text) {
-    this._appendText(text, DOMConsole.INFO);
+    this._appendText(text, DOMConsole.INFO, false);
   }
 
   err (text) {
-    this._appendText(text, DOMConsole.ERR);
+    this._appendText(text, DOMConsole.ERR, false);
   }
 
-  _appendText (text, type) {
+  async _appendText (text, type, filter = true) {
     const write_time = Date.now();
-    const pending_write = setTimeout(() => {
-      this.pending_writes.shift();
-      if(this.last_clear >= write_time) {
-        return;
-      }
-      const divClass = this.getClassForType(type);
-      const textDiv = document.createElement('div');
-      textDiv.classList.add(divClass);
+    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);
-      this.termDiv.insertBefore(textDiv, this.inputDiv);
-      this.scrollTerm();
-    }, 5);
-    this.pending_writes.push(pending_write);
+    else
+      textDiv.innerHTML = `<span>${text}</span>)`;
+    this.termDiv.insertBefore(textDiv, this.inputDiv);
+    this.scrollTerm();
   }
 
-  _appendUserInput (text) {
+  async _appendUserInput (text) {
     const write_time = Date.now();
-    const pending_write = setTimeout(() => {
-      this.pending_writes.shift();
-      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.scrollTerm();
-    }, 5);
-    this.pending_writes.push(pending_write);
+    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.scrollTerm();
   }
 
   getOutputText (text) {
@@ -221,7 +222,7 @@ export class DOMConsole {
   }
 
   getUserInputText (text) {
-    if(text.trim().length == 0) {
+    if (text.trim().length == 0) {
       text = "&nbsp;";
     }
     return `<i class="icon keyboard outline" style="float:left"></i><span>${text}</span>`;
@@ -235,26 +236,26 @@ export class DOMConsole {
   focus () {
     this.termDiv.style.display = 'block';
     // Is in draggable mode?
-    if(!this.disableMarginTop && this.parent.style.top.length == 0) {
+    if (!this.disableMarginTop && this.parent.style.top.length == 0) {
       this.parent.style.marginTop = "-160px";
     }
-    if(this.needInput) {
+    if (this.needInput) {
       this.showInput();
       this.scheduleNotify();
     }
-    if(!isElementInViewport(this.termDiv))
+    if (!Utils.isElementInViewport(this.termDiv))
       this.termDiv.scrollIntoView(false);
     this.scrollTerm();
   }
 
   hide () {
-    if(this.needInput) {
+    if (this.needInput) {
       clearInterval(this.idleInterval);
       this.hideInput();
       this.needInput = true;
     }
     // Is in draggable mode?
-    if(!this.disableMarginTop && this.parent.style.top.length == 0) {
+    if (!this.disableMarginTop && this.parent.style.top.length == 0) {
       this.parent.style.marginTop = "0";
     }
     this.termDiv.style.display = 'none';
@@ -292,10 +293,10 @@ export class DOMConsole {
     this.showBtn = null;
     const cNode = this.parent.cloneNode(false);
     this.parent.parentNode.replaceChild(cNode, this.parent);
-    if(this.cursorInterval != null) {
+    if (this.cursorInterval != null) {
       clearInterval(this.cursorInterval);
     }
-    if(this.idleInterval != null) {
+    if (this.idleInterval != null) {
       clearInterval(this.idleInterval);
     }
   }
@@ -319,7 +320,7 @@ export class DOMConsole {
     const promise = new Promise( (resolve, _) => {
       this.inputListeners.push(resolve);
       this.anyKey = anyKey;
-      if(this.idleInterval == null)
+      if (this.idleInterval == null)
         this.scheduleNotify();
       this.showInput();
     });
@@ -337,15 +338,11 @@ export class DOMConsole {
 
   clearPendingWrites () {
     this.last_clear = Date.now();
-    for(const id in this.pending_writes) {
-      clearTimeout(id);
-    }
   }
 
   clear () {
-    this.clearPendingWrites();
-    this.pending_writes = [];
-    while(this.inputDiv.parentElement.childNodes.length > 1) {
+    this.clearPendingWrites()
+    while (this.inputDiv.parentElement.childNodes.length > 1) {
       this.inputDiv.parentElement.removeChild(this.inputDiv.parentElement.firstChild);
     }
     this.input.value = "";
@@ -376,7 +373,7 @@ export class DOMConsole {
   cancelPendingInputRequests () {
     this.inputListeners.forEach(resolve => resolve(''));
     this.inputListeners.splice(0, this.inputListeners.length);
-    if(this.idleInterval != null) {
+    if (this.idleInterval != null) {
       clearInterval(this.idleInterval);
       this.idleInterval = null;
     }