Merge pull request #175 from jonjonsonjr/master

Fix terminal carousel on landing page of docs

docs/_themes/jrnl/index.html

@@ -24,9 +24,9 @@
                 <h1>Collect your thoughts and notes <br />without leaving the command line</h1>
             </div>
             <div id="prompt">
-                <div class="pleft" onlick="next(); return false;"><i class="icon left"></i></div>
+                <div class="pleft" onclick="reset(); prev(); return false;"><i class="icon left"></i></div>
                 <div class="terminal">$ jrnl <span id="args"></span><span id="input">today: Started writing my memoirs. On the command line. Like a boss.</span><div id="output"></div></div>
-                <div class="pright" onclick="next(); return false;"><i class="icon right"></i></div>
+                <div class="pright" onclick="reset(); next(); return false;"><i class="icon right"></i></div>
             </div>
         </div>
         <div id="nav">

docs/_themes/jrnl/static/js/landing.js

@@ -11,18 +11,23 @@ var phrases = [
 var args = document.getElementById("args");
 var input = document.getElementById("input");
 var output = document.getElementById("output");
-var right = document.getElementById("right");
-var left = document.getElementById("left");
 var current = 0
 var timer = null;
+var fadeInTimer = null;
+var fadeOutTimer = null;
+var letterTimer = null;
+var unletterTimer = null;
 
 var next = function() {
-    clearTimeout(timer);
+    current = (current + 1) % phrases.length;
-    reveal(++current % phrases.length);
+    reveal(current);
-    setTimeout(next, 5000);
+    timer = setTimeout(next, 5000);
 }
+
 var prev = function() {
-    reveal(--current % phrases.length);
+    current = (current === 0) ? phrases.length - 1 : current - 1;
+    reveal(current);
+    timer = setTimeout(next, 5000);
 }
 
 var reveal = function(idx) {
@@ -31,9 +36,9 @@ var reveal = function(idx) {
     var output_text    = phrases[idx][2];
     var old_dix = idx == 0 ? phrases.length - 1 : idx - 1;
     console.log(idx, old_dix, "++++++++++++")
-    var old_args_text  = phrases[old_dix][0]
+    var old_args_text   = args.innerHTML;
-    var old_input_text = phrases[old_dix][1]
+    var old_input_text  = input.innerHTML;
-    var old_output_text =phrases[old_dix][2]
+    var old_output_text = output.innerHTML;
     console.log(args_text, input_text, output_text)
     console.log(old_args_text, old_input_text, old_output_text)
     var s4 = function() {fadeIn(output_text, output);}
@@ -42,23 +47,23 @@ var reveal = function(idx) {
     var s1 = function() {unletter(old_args_text, args, s2);}
     var s0 = function() {unletter(old_input_text, input, s1);}
     fadeOut(old_output_text, output, s0, 10);
-    // letter(input_text, input);
-    // output.innerHTML = output_text;
 }
+
 var fadeIn = function(text, element, next, step) {
     step = step || 0
     var nx = function() { fadeIn(text, element, next, ++step); }
     if (step==0) {
         element.innerHTML = "";
-        setTimeout(nx, 550);
+        fadeInTimer = setTimeout(nx, 550);
         return;
     }
     if (step==1) {element.innerHTML = text;}
     if (step>10 || !text) { if (next) {next(); return;} else return;}
     element.style.opacity = (step-1)/10;
     element.style.filter = 'alpha(opacity=' + (step-1)*10 + ')';
-    setTimeout(nx, 50);
+    fadeInTimer = setTimeout(nx, 50);
 }
+
 var fadeOut = function(text, element, next, step) {
     if (step===10) element.innerHTML = text;
     if (step<0 || !text) {
@@ -69,7 +74,7 @@ var fadeOut = function(text, element, next, step) {
     element.style.opacity = step/10;
     element.style.filter = 'alpha(opacity=' + step*10 + ')';
     var nx = function() { fadeOut(text, element, next, --step); }
-    setTimeout(nx, 50);
+    fadeOutTimer = setTimeout(nx, 50);
 }
 
 var unletter = function(text, element, next, timeout, index) {
@@ -78,7 +83,7 @@ var unletter = function(text, element, next, timeout, index) {
     if (index==-1 || !text.length) { if (next) {next(); return;} else return;}
     element.innerHTML = text.substring(0, index);
     var nx = function() { unletter(text, element, next, timeout, --index); }
-    setTimeout(nx, timeout);
+    unletterTimer = setTimeout(nx, timeout);
 }
 
 var letter = function(text, element, next, timeout, index) {
@@ -87,6 +92,18 @@ var letter = function(text, element, next, timeout, index) {
     if (index > text.length || !text.length) { if (next) {next(); return;} else return;}
     element.innerHTML = text.substring(0, index);
     var nx = function() { letter(text, element, next, timeout, ++index); }
-    setTimeout(nx, timeout);
+    letterTimer = setTimeout(nx, timeout);
 }
-setTimeout(next, 3000);
+
+var reset = function() {
+    var timers = [timer, fadeInTimer, fadeOutTimer, letterTimer, unletterTimer];
+    timers.forEach(function (t) {
+      clearTimeout(t);
+    });
+
+    args.innerHTML = "";
+    input.innerHTML = "";
+    output.innerHTML = "";
+}
+
+timer = setTimeout(next, 3000);