Site updated: 2018-11-03 18:12:30

js/term.js

+function Terminal(settings) {
+  this.prefixChar = settings.prompt || "";
+  this.cursorChar = settings.cursor || "|";
+  this.target = $(settings.target);
+  this.autoplay = settings.auto || true;
+  this.position = -1;
+  this.continue = true;
+  var script = []
+  this.target.find(".history").children("span").each(function(index) {
+    var datavals = $(this).data();
+    var scriptNode = {};
+    for (var key in datavals) {
+
+      scriptNode[key] = datavals[key];
+      // console.log(index+" : "+key + " : " + datavals[key]);
+    }
+    if (scriptNode.action) {
+      script.push(scriptNode);
+    }
+
+
+  })
+
+  this.script = script;
+  this.target.html("");
+
+  var head = $("<header>");
+  var button1 = $("<div>", {
+    "class": "button green"
+  });
+  head.append(button1);
+  var button2 = $("<div>", {
+    "class": "button yellow"
+  });
+  head.append(button2);
+  var button3 = $("<div>", {
+    "class": "button red"
+  });
+  head.append(button3);
+  this.target.append(head);
+
+  var sect = $("<section>", {
+    "class": "terminal"
+  });
+  var his = $("<div>", {
+    "class": "history"
+  });
+  sect.append(his);
+  var pre = $("<span>", {
+    "class": "prefix"
+  });
+  sect.append(pre);
+  this.promptName = "prompt" + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+
+  console.log(this.promptName);
+  var prom = $("<span>", {
+    "class": this.promptName
+  });
+  sect.append(prom);
+  this.target.append(sect);
+
+
+  this.prompt = this.target.find("." + this.promptName);
+  this.prefix = this.target.find(".prefix");
+  this.history = this.target.find(".history");
+
+  this.MoveToHis = function(callback) {
+    var history = this.history.html();
+    if (this.script[this.position]["action"] == "prompt") {
+      this.history.html(history + this.prefix.html() + this.prompt.html() + "<br>")
+    } else {
+      this.history.html(history + this.prefixChar + this.prompt.html() + "<br>")
+    }
+
+    this.position = this.position + 1;
+    this.prefix.html(this.prefixChar);
+    this.prompt.text("");
+    callback()
+
+  }
+
+  this.TypeCallback = function() {
+    if (this.position == -1) {
+      this.position = this.position + 1;
+      if (this.autoplay) {
+        this.Play()
+      }
+      return
+    }
+    var bound = this.Play.bind(this);
+    var hist = this.MoveToHis.bind(this);
+    var delay = parseInt(this.script[this.position].delay) || 1000;
+    setTimeout(function() {
+      hist(bound)
+    }, delay);
+
+    // $('section.terminal').scrollTop($('section.terminal').height());
+  }
+
+
+  this.maketyper = function() {
+    this.prefix.html(this.prefixChar);
+    var bound = this.TypeCallback.bind(this);
+
+    this.typer = new Typed("." + this.promptName, {
+      strings: [""],
+      cursorChar: this.cursorChar,
+      typeSpeed: 30,
+      onComplete: bound,
+    })
+    this.cursor = this.target.find(".typed-cursor");
+
+  }
+
+  this.maketyper();
+
+  this.Prompt = function() {
+    this.prefix.html(this.script[this.position].prompt);
+    this.prompt.removeData(); //cleanup
+    this.cursor.text('');
+    // console.log(this.script[this.position].prompt);
+    //
+    this.typer.strings = this.script[this.position]["strings"].split(':;');
+    this.typer.reset();
+    // this.prompt.html(this.script[this.position].prompt);
+
+  }
+
+
+  this.Print = function() {
+    this.prefix.html("");
+    this.prompt.removeData();
+    this.cursor.text('');
+    var history = this.history.html();
+    this.history.html(history + this.script[this.position]["strings"] + "<br>")
+
+    this.prompt.html();
+    var bound = this.Play.bind(this);
+    this.position = this.position + 1;
+
+    section = this.target.find("section");
+    section.scrollTop(section.height());
+
+    if (this.position < this.script.length) {
+      setTimeout(bound, this.script[this.position - 1].delay || 0);
+    }
+
+  }
+
+  this.Type = function() {
+    this.prefix.html(this.prefixChar);
+    this.prompt.removeData(); //cleanup
+    this.cursor.text('');
+
+    this.typer.strings = this.script[this.position]["strings"].split(':;');
+    this.typer.reset();
+
+  }
+
+  this.Empty = function() {
+    this.prefix.html(this.prefixChar);
+    this.prompt.removeData(); //cleanup
+    this.cursor.text('');
+  }
+
+  this.Test = function() {
+    this.Step(2)
+  }
+
+  this.Step = function(pos) {
+    this.continue = false
+    this.position = pos;
+    switch (this.script[this.position]["action"]) {
+      case "type":
+        this.Type()
+        break;
+      case "prompt":
+        this.Prompt();
+        break;
+      case "print":
+        this.Print();
+        break;
+    }
+  }
+
+  this.Restart = function() {
+    this.position = 0;
+    this.history.html("");
+    this.Play();
+  }
+
+  this.Play = function() {
+    // scroll to bottom of screen
+    section = this.target.find("section");
+    section.scrollTop(section.height());
+    if (this.position >= this.script.length - 1) {
+      this.position = 0;
+
+      var bound = this.Restart.bind(this);
+
+      setTimeout(bound, 15000);
+      return;
+    }
+
+    if (this.continue) {
+      switch (this.script[this.position]["action"]) {
+        case "type":
+          this.Type()
+          break;
+        case "prompt":
+          this.Prompt();
+          break;
+        case "print":
+          this.Print();
+          break;
+        case "empty":
+          this.Empty();
+          break;
+      }
+    }
+
+  }
+}
\ No newline at end of file

sitemap.xml

@@ -4,7 +4,7 @@
   <url>
     <loc>http://blog.thebestjohn.com/posts/setting-up-hexo-auto-deploy-from-gitlab/</loc>
     
-    <lastmod>2018-11-02T14:16:15.769Z</lastmod>
+    <lastmod>2018-11-03T18:11:22.621Z</lastmod>
     
   </url>
   
@@ -30,28 +30,28 @@
   </url>
   
   <url>
-    <loc>http://blog.thebestjohn.com/posts/matrix-keypad/</loc>
+    <loc>http://blog.thebestjohn.com/posts/static-what-generator/</loc>
     
     <lastmod>2018-10-30T19:10:38.180Z</lastmod>
     
   </url>
   
   <url>
-    <loc>http://blog.thebestjohn.com/posts/the-plasma-speaker-saga-pt-iii/</loc>
+    <loc>http://blog.thebestjohn.com/posts/matrix-keypad/</loc>
     
     <lastmod>2018-10-30T19:10:38.180Z</lastmod>
     
   </url>
   
   <url>
-    <loc>http://blog.thebestjohn.com/posts/static-what-generator/</loc>
+    <loc>http://blog.thebestjohn.com/posts/table-based-design/</loc>
     
     <lastmod>2018-10-30T19:10:38.180Z</lastmod>
     
   </url>
   
   <url>
-    <loc>http://blog.thebestjohn.com/posts/table-based-design/</loc>
+    <loc>http://blog.thebestjohn.com/posts/the-plasma-speaker-saga-pt-iii/</loc>
     
     <lastmod>2018-10-30T19:10:38.180Z</lastmod>