Initial commit.

2 files changed, 178 insertions, 0 deletions

diff --git a/js/init.js b/js/init.js
new file mode 100644
index 0000000..56d2f4f
--- /dev/null
+++ b/js/init.js
@@ -0,0 +1,3 @@
+$(function() {
+    $(".terminal-animation").terminal_animation();
+});
diff --git a/js/terminal-animation.js b/js/terminal-animation.js
new file mode 100644
index 0000000..9189589
--- /dev/null
+++ b/js/terminal-animation.js
@@ -0,0 +1,175 @@
+/**
+ * Terminal Animation
+ * http://edewata.fedorapeople.org/terminal-animation/
+ *
+ * @author Endi S. Dewata <edewata@redhat.com>
+ */
+
+(function($) {
+
+    var terminal_animation = function() {
+
+        var $this = $(this);
+        var interval = 2000;
+        var speed = 80;
+
+        $this.init = function() {
+
+            $this.elements = $this.contents().detach();
+            $this.position = 0;
+
+            $this.console = $('<div/>', {
+                'class': 'terminal-animation-console'
+            }).appendTo($this);
+
+            $this.content = $('<span/>', {
+                'class': 'terminal-animation-content'
+            }).appendTo($this.console);
+
+            $this.caret = $('<span/>', {
+                'text': ' ',
+                'class': 'terminal-animation-caret'
+            }).appendTo($this.console);
+
+            $this.control = $('<div/>', {
+                'class': 'terminal-animation-control'
+            }).appendTo($this);
+
+            $this.playButton = $('<button/>', {
+                'html': 'Play',
+                'class': 'terminal-animation-button',
+                'click': function() { $this.play(); }
+            }).appendTo($this.control);
+
+            $this.prevButton = $('<button/>', {
+                'html': 'Prev',
+                'class': 'terminal-animation-button',
+                'click': function() { $this.prev(); }
+            }).appendTo($this.control);
+
+            $this.nextButton = $('<button/>', {
+                'html': 'Next',
+                'class': 'terminal-animation-button',
+                'click': function() { $this.next(); }
+            }).appendTo($this.control);
+
+            $this.resetButton = $('<button/>', {
+                'html': 'Reset',
+                'class': 'terminal-animation-button',
+                'click': function() { $this.reset(); }
+            }).appendTo($this.control);
+
+            $this.flush();
+        };
+
+        $this.flush = function() {
+            var done = function() {
+                var height = $this.console.height();
+                $this.console.scrollTop(height);
+            };
+
+            var run = function() {
+                if ($this.position >= $this.elements.length) {
+                    done.call();
+                    return;
+                }
+
+                var element = $($this.elements.get($this.position));
+                if (!element.hasClass('terminal-animation-input')) {
+                    $this.next(run);
+                    return;
+                }
+
+                done.call();
+            };
+
+            run.call();
+        };
+
+        $this.play = function() {
+
+            var run = function() {
+                if ($this.position >= $this.elements.length) return;
+
+                $this.next(function() {
+                    setTimeout(run, interval);
+                });
+            };
+
+            run.call();
+        };
+
+        $this.prev = function() {
+            if ($this.position <= 0) return;
+
+            $this.position--;
+            var element = $this.content.contents().last().detach();
+            var text = element.text();
+            if (element.hasClass('terminal-animation-input') && text.length > 0) return;
+
+            if ($this.content.contents().size() > 0) {
+                element = $this.content.contents().last();
+                if (element.hasClass('terminal-animation-input')) return;
+                $this.position--;
+                element.detach();
+            }
+
+            $this.flush();
+        };
+
+        $this.next = function(callback) {
+            if ($this.animator || $this.position >= $this.elements.length) {
+                return;
+            }
+
+            var element = $($this.elements.get($this.position));
+
+            if (element.hasClass('terminal-animation-input')) {
+                var text = element.text();
+                if (text.length == 0) {
+                    $this.content.append(element);
+                    $this.position++;
+                    $this.next(callback);
+
+                } else {
+                    element.text('');
+                    var i = 0;
+
+                    $this.content.append(element);
+                    $this.animator = setInterval(function() {
+                        if (i <= text.length) {
+                            element.text(text.substring(0, i));
+                            i++;
+                        } else {
+                            clearInterval($this.animator);
+                            delete $this.animator;
+                            $this.position++;
+                            if (callback) callback.call();
+                        }
+                    }, speed);
+                }
+
+            } else {
+                $this.content.append(element);
+                $this.position++;
+                $this.flush();
+                if (callback) callback.call();
+            }
+        };
+
+        $this.reset = function() {
+            $this.content.contents().detach();
+            $this.position = 0;
+            $this.flush();
+        };
+
+        $this.init();
+
+        return $this;
+    };
+
+    $.fn.terminal_animation = function() {
+        return this.each(terminal_animation);
+    };
+
+}(jQuery));