From a576afb0188b5927ea734f215ca38a4e7a6cffcf Mon Sep 17 00:00:00 2001
From: Jon Johnson <jonjonsonjr@gmail.com>
Date: Tue, 24 Jun 2014 13:37:01 -0400
Subject: [PATCH] Fix terminal carousel on landing page of docs

This isn't perfect, but it is a step in the right direction. This fixes
the prev button not working at all and the next button having some
undesirable behavior.

This seems to work for the most part, but I noticed that if I leave this
open and go to a different tab in my browser, there's some strange
behavior when I come back to the landing page: there are multiple
outputs playing at once. This is similar to the current behavior, where
clicking the next button multiple times does the same thing.
---
 docs/_themes/jrnl/index.html           |  4 +-
 docs/_themes/jrnl/static/js/landing.js | 51 +++++++++++++++++---------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/docs/_themes/jrnl/index.html b/docs/_themes/jrnl/index.html
index b74e5d54..1ffbb851 100755
--- a/docs/_themes/jrnl/index.html
+++ b/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">
diff --git a/docs/_themes/jrnl/static/js/landing.js b/docs/_themes/jrnl/static/js/landing.js
index 0f704aa9..4a5eb91a 100644
--- a/docs/_themes/jrnl/static/js/landing.js
+++ b/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);
-    reveal(++current % phrases.length);
-    setTimeout(next, 5000);
+    current = (current + 1) % phrases.length;
+    reveal(current);
+    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_input_text = phrases[old_dix][1]
-    var old_output_text =phrases[old_dix][2]
+    var old_args_text   = args.innerHTML;
+    var old_input_text  = input.innerHTML;
+    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);