Merge branch 'fixScroll' of LInE/ivprog into master

css/ivprog-term.css

@@ -129,13 +129,13 @@
   text-decoration: underline;
 }
 
-.bash-body li:before {
+/* .bash-body li:before {
   content: '$';
   color: #F8F8FF;
   position: absolute;
   left: 0;
   top: 0;
-}
+} */
 
 .bash-body i {
   cursor: text;

i18n/pt/message.json

@@ -2,5 +2,5 @@
   "test_case_success": "Caso de teste $0: OK",
   "test_case_duration": "Levou $0ms",
   "test_suite_grade": "A sua solução alcançou $0% da nota.",
-  "awaiting_input_message": "O seu programa está em execução e aguardando uma entrada! Digite alguma coisa..."
+  "awaiting_input_message": "O seu programa está em execução e aguardando uma entrada! Digite algo e pressione ENTER..."
 }

js/io/domConsole.js

@@ -1,4 +1,5 @@
 import { LocalizedStrings } from "./../services/localizedStringsService";
+import { isElementInViewport } from "./../util/utils";
 import { Config } from "./../util/config";
 
 export class DOMConsole {
@@ -206,7 +207,7 @@ export class DOMConsole {
 
   scrollTerm () {
     //scrollIt(this.inputDiv.previousSibling,200);
-    this.inputDiv.previousSibling.scrollIntoView();
+    this.termDiv.scrollTop = this.termDiv.scrollHeight;
   }
 
   focus () {
@@ -216,9 +217,9 @@ export class DOMConsole {
     if(this.parent.style.top.length == 0) {
       this.parent.style.marginTop = "-160px";
     }
-    const prev = this.inputDiv.closest('div');
-    if(prev != null)
-      prev.scrollIntoView();
+    if(!isElementInViewport(this.termDiv))
+      this.termDiv.scrollIntoView(false);
+    this.scrollTerm();
   }
 
   hide () {
@@ -274,7 +275,8 @@ export class DOMConsole {
     this.needInput = true;
     this.inputDiv.style.display = 'block';
     this.inputCMD.click();
-    this.inputCMD.scrollIntoView();
+    //this.inputCMD.scrollIntoView();
+    this.scrollTerm();
   }
 
   hideInput () {

js/util/utils.js

@@ -0,0 +1,96 @@
+
+/** 
+ * source: https://pawelgrzybek.com/page-scroll-in-vanilla-javascript/ 
+ * 
+*/
+export function scrollIt (destination, duration = 200, easing = 'linear', callback = null) {
+
+  const easings = {
+    linear(t) {
+      return t;
+    },
+    easeInQuad(t) {
+      return t * t;
+    },
+    easeOutQuad(t) {
+      return t * (2 - t);
+    },
+    easeInOutQuad(t) {
+      return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    },
+    easeInCubic(t) {
+      return t * t * t;
+    },
+    easeOutCubic(t) {
+      return (--t) * t * t + 1;
+    },
+    easeInOutCubic(t) {
+      return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+    },
+    easeInQuart(t) {
+      return t * t * t * t;
+    },
+    easeOutQuart(t) {
+      return 1 - (--t) * t * t * t;
+    },
+    easeInOutQuart(t) {
+      return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
+    },
+    easeInQuint(t) {
+      return t * t * t * t * t;
+    },
+    easeOutQuint(t) {
+      return 1 + (--t) * t * t * t * t;
+    },
+    easeInOutQuint(t) {
+      return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
+    }
+  };
+
+  const start = window.pageYOffset;
+  const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
+
+  const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
+  const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop;
+  const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset);
+
+  if ('requestAnimationFrame' in window === false) {
+    window.scroll(0, destinationOffsetToScroll);
+    if (callback) {
+      callback();
+    }
+    return;
+  }
+
+  function scroll() {
+    const now = 'now' in window.performance ? performance.now() : new Date().getTime();
+    const time = Math.min(1, ((now - startTime) / duration));
+    const timeFunction = easings[easing](time);
+    window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));
+
+    if (window.pageYOffset === destinationOffsetToScroll) {
+      if (callback) {
+        callback();
+      }
+      return;
+    }
+
+    requestAnimationFrame(scroll);
+  }
+
+  scroll();
+}
+
+/**
+ * 
+ * source: https://stackoverflow.com/a/16270434
+ */
+export function isElementInViewport (el) {
+  const rect = el.getBoundingClientRect();
+
+  return rect.bottom > 0 &&
+    rect.right > 0 &&
+    rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+    rect.top < (window.innerHeight || document.documentElement.clientHeight);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ivprog",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "IMA para o ensino de programação",
   "main": "js/main.js",
   "scripts": {