Remove most of jquery dependencies from the DomConsole

De-coupled all console functions and actions from the visual code

js/io/domConsole.js

@@ -1,3 +1,5 @@
+import { LocalizedStrings } from "./../services/localizedStringsService";
+
 export class DOMConsole {
 
   static get USER () {
@@ -24,9 +26,16 @@ export class DOMConsole {
     this.inputSpan = null;
     this.cursorRef = null;
     this.needInput = false;
+    this.clearBtn = null;
+    this.hideBtn = null;
+    this.showBtn = null;
     this.termDiv = null;
     this.anyKey = false;
-    this.parent = $(elementID);
+    let actualID = elementID
+    if (elementID[0] === '#') {
+      actualID = elementID.substring(1);
+    }
+    this.parent = document.getElementById(actualID)
     this.setup();
     this.inputListeners = [];
     this.hideInput();
@@ -38,71 +47,99 @@ export class DOMConsole {
   }
 
   _setupEvents () {
-    this.input.on("keydown", (event) => {
-      if (!this.needInput) {
-        return;
-      }
-      const keyCode = event.which;
-      if (keyCode === 13 || this.anyKey) {
-        let text = this.input.val();
-        text = text.replace('[\n\r]+', '');
-        this.notifyListeners(text);
-        this._appendUserInput(text);
-        this.input.val("");
-        this.inputSpan.text("");
-      }
-    });
+    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) {
+      let text = this.input.value;
+      text = text.replace('[\n\r]+', '');
+      this.notifyListeners(text);
+      this._appendUserInput(text);
+      this.input.value = '';
+      this.inputSpan.innerHTML = '';
+    }
   }
 
   _setupDom () {
-    this.termDiv = $("<div></div>");
-    this.termDiv.addClass("ivprog-term-div");
-    this.inputDiv = $(`
-      <div id="ivprog-terminal-inputdiv">
-        <div id="cmd">
-          <span></span>
-          <div id="cursor"></div>
-        </div>
-      </div>
-    `);
-    this.input = $('<input type="text" name="command" value=""/>');
+    const bashNode = document.createElement('div');
+    bashNode.classList.add('bash');
+    bashNode.innerHTML = `
+    <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>`;
+    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 = `
+      <div id="cmd">
+        <span></span>
+        <div id="cursor"></div>
+      </div>`;
+    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.cursorRef = $(this.inputDiv.find("#cursor")[0]);
-    this.inputSpan = $(this.inputDiv.find("#cmd").children('span')[0]);
-    this.inputCMD = $(this.inputDiv.find("#cmd")[0]);
-    //this.input.addClass("ivprog-term-input");
     this.termDiv.append(this.inputDiv);
-    this.parent.append(this.termDiv);
+    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....
+    $(this.clearBtn).popup({content:LocalizedStrings.getUI("terminal_clear")});
+    $(this.showBtn).popup({content:LocalizedStrings.getUI("terminal_show")});
+    $(this.hideBtn).popup({content:LocalizedStrings.getUI("terminal_hide")});
   }
 
   _setupCursor () {
-    const outerRef = this
-    this.inputCMD.click(function() {
-      if(outerRef.cursorInterval != null) {
-        return;
-      }
-      outerRef.input.focus();
-      outerRef.cursorInterval = window.setInterval(function() {
-        if (outerRef.cursorRef.css('visibility') === 'visible') {
-          outerRef.cursorRef.css({visibility: 'hidden'});
-        } else {
-          outerRef.cursorRef.css({visibility: 'visible'});
-        }
-      }, 550);
-    });
-
+    this.inputCMD.addEventListener('click', this.blinkCaretAndFocus.bind(this));
     this.inputCMD.click();
     
-    this.input.keyup(function() {
-      outerRef.inputSpan.text(outerRef.input.val());
-    });
+    this.input.addEventListener('keyup', this.updateSpanText.bind(this));
+    this.input.addEventListener('blur', this.stopBlinkCaret.bind(this));
+  }
 
-    this.input.blur(function() {
-      clearInterval(outerRef.cursorInterval);
-      outerRef.cursorInterval = null;
-      outerRef.cursorRef.css({visibility: 'visible'});
-    });
+  blinkCaretAndFocus () {
+    if(this.cursorInterval != null) {
+      return;
+    }
+    this.input.focus();
+    const outerRef = this;
+    this.cursorInterval = window.setInterval(function() {
+      if (outerRef.cursorRef.style.visibility === 'visible') {
+        outerRef.cursorRef.style.visibility = 'hidden';
+      } else {
+        outerRef.cursorRef.style.visibility = 'visible';
+      }
+    }, 500);
+  }
+
+  updateSpanText () {
+    this.inputSpan.innerHTML = this.input.value;
+  }
+
+  stopBlinkCaret () {
+    clearInterval(this.cursorInterval);
+    this.cursorInterval = null;
+    this.cursorRef.style.visibility = 'visible';
   }
 
   notifyListeners (text) {
@@ -126,39 +163,38 @@ export class DOMConsole {
 
   _appendText (text, type) {
     const divClass = this.getClassForType(type);
-    const textDiv = $("<div></div>");
-    textDiv.addClass(divClass);
-    textDiv.append(text);
-    textDiv.insertBefore(this.inputDiv);
+    const textDiv = document.createElement('div');
+    textDiv.classList.add(divClass);
+    textDiv.innerHTML = `<span>${text}</span>`;
+    this.termDiv.insertBefore(textDiv, this.inputDiv);
     this.scrollTerm();
   }
 
   _appendUserInput (text) {
     const divClass = this.getClassForType(DOMConsole.INPUT);
-    const textDiv = $(`<div>
+    const textDiv = document.createElement('div');
+    textDiv.innerHTML = `
       <i class="icon keyboard outline" style="float:left"></i>
-      <span>${text}</span>
-    </div>`);
-    textDiv.addClass(divClass);
-    textDiv.insertBefore(this.inputDiv);
+      <span>${text}</span>`;
+    textDiv.classList.add(divClass);
+    this.termDiv.insertBefore(textDiv, this.inputDiv);
     this.scrollTerm();
   }
 
   scrollTerm () {
-    this.termDiv.animate({
-      scrollTop: this.termDiv.prop('scrollHeight')
-    }, 0);
+    //scrollIt(this.inputDiv.previousSibling,200);
+    this.inputDiv.previousSibling.scrollIntoView();
   }
 
   focus () {
-    this.parent.show();
-    const prev = this.inputDiv.prev();
-    if(prev.length > 0)
-      prev[0].scrollIntoView();
+    this.termDiv.style.display = 'block';
+    const prev = this.inputDiv.closest('div');
+    if(prev != null)
+      prev.scrollIntoView();
   }
 
   hide () {
-    this.parent.hide();
+    this.termDiv.style.display = 'none';
   }
 
   getClassForType (type) {
@@ -175,26 +211,39 @@ export class DOMConsole {
   }
 
   dispose () {
-    this.parent.off();
-    this.input.off();
+    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.parent.empty();
+    this.inputCMD =  null;
+    this.inputDiv = null;
+    this.termDiv = null;
+    this.inputSpan = null;
+    this.cursorRef = null;
+    this.clearBtn = null;
+    this.hideBtn = null;
+    this.showBtn = null;
+    const cNode = this.parent.cloneNode(false);
+    this.parent.parentNode.replaceChild(cNode, this.parent);
     if(this.cursorInterval != null) {
       clearInterval(this.cursorInterval);
     }
-    this.inputCMD.off();
   }
 
   showInput () {
     this.needInput = true;
-    this.inputDiv.show();
+    this.inputDiv.style.display = 'block';
     this.inputCMD.click();
-    this.inputCMD[0].scrollIntoView();
+    this.inputCMD.scrollIntoView();
   }
 
   hideInput () {
     this.needInput = false;
-    this.inputDiv.hide();
+    this.inputDiv.style.display = ' none';
     clearInterval(this.cursorInterval);
     this.cursorInterval = null;
   }
@@ -214,8 +263,22 @@ export class DOMConsole {
   }
 
   clear () {
-    this.inputDiv.parent().children().not(this.inputDiv).remove();
-    this.input.val("");
-    this.inputSpan.text("");
+    while(this.inputDiv.parentElement.childNodes.length > 1) {
+      this.inputDiv.parentElement.removeChild(this.inputDiv.parentElement.firstChild);
+    }
+    this.input.value = "";
+    this.inputSpan.innerHTML = '';
+  }
+
+  clearBtnClick () {
+    this.clear();
+  }
+
+  showBtnClick () {
+    this.focus();
+  }
+
+  hideBtnClick () {
+    this.hide();
   }
 }

js/visualUI/functions.js

@@ -712,7 +712,7 @@ export function initVisualUI () {
   // const mainDiv = $('#visual-main-div');
   // fill mainDiv with functions and globals...
   // renderAlgorithm()...
-  domConsole = new DOMConsole("#ivprog-term");
+  domConsole = new DOMConsole("ivprog-term-div");
   domConsole.hide();
   $('.add_function_button').on('click', () => {
     addFunctionHandler();
@@ -749,26 +749,6 @@ export function initVisualUI () {
     window.open('https://www.usp.br/line/ivprog/', '_blank');
   });
   $('.main_title h2').prop('title', LocalizedStrings.getUI('text_ivprog_description'));
-  $('#ivprog-console-clearbtn').on('click', () => {
-    if (domConsole != null) {
-      domConsole.clear();
-    }
-  });
-  $('#ivprog-console-clearbtn').popup({content:LocalizedStrings.getUI("terminal_clear")});
-
-  $('#ivprog-console-showbtn').on('click', () => {
-    if (domConsole != null) {
-      domConsole.focus();
-    }
-  });
-  $('#ivprog-console-showbtn').popup({content:LocalizedStrings.getUI("terminal_show")});
-
-  $('#ivprog-console-hidebtn').on('click', () => {
-    if (domConsole != null) {
-      domConsole.hide();
-    }
-  });
-  $('#ivprog-console-hidebtn').popup({content:LocalizedStrings.getUI("terminal_hide")});
 
   var time_show = 750;
   $('.visual_coding_button').popup({

templates/index.html

@@ -94,16 +94,7 @@
           <textarea class="ivprog_textual_code" readonly></textarea>
         </div>
         <div id='ivprog-term-div' class="six column wide">
-          <div class="bash">
-            <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>
-          </div>
+          
         </div>
       </div>