Added support for MediaWiki.

3 files changed, 26 insertions, 17 deletions

diff --git a/css/terminal-animation.css b/css/terminal-animation.css
index 3db81db..e270376 100644
--- a/css/terminal-animation.css
+++ b/css/terminal-animation.css
@@ -2,6 +2,7 @@
     position: relative;
     width: 700px;
     min-height: 300px;
+    padding: 5px;
     margin: 1em 0px;
 
     font-family: courier, fixed;
diff --git a/index.html b/index.html
index 628eac4..d11df07 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,8 @@ $ </div>
 <h2>Examples</h2>
 
 <ul>
-<li><a href="examples/basic.html">Basic example</a></li>
+<li><a href="examples/basic.html">Basic</a></li>
+<li><a href="examples/MediaWiki.html">MediaWiki</a></li>
 </ul>
 
 <h2>Repository</h2>
diff --git a/js/terminal-animation.js b/js/terminal-animation.js
index 9189589..1648b3e 100644
--- a/js/terminal-animation.js
+++ b/js/terminal-animation.js
@@ -15,8 +15,8 @@
 
         $this.init = function() {
 
-            $this.elements = $this.contents().detach();
-            $this.position = 0;
+            var text = $this.text();
+            var list = $this.contents().detach();
 
             $this.console = $('<div/>', {
                 'class': 'terminal-animation-console'
@@ -26,6 +26,10 @@
                 'class': 'terminal-animation-content'
             }).appendTo($this.console);
 
+            $this.elements = $('<span/>', {
+                'class': 'terminal-animation-hidden'
+            }).hide().appendTo($this.console);
+
             $this.caret = $('<span/>', {
                 'text': ' ',
                 'class': 'terminal-animation-caret'
@@ -59,6 +63,12 @@
                 'click': function() { $this.reset(); }
             }).appendTo($this.control);
 
+            if ($this.is('pre')) {
+                $this.elements.html(text);
+            } else {
+                $this.elements.append(list);
+            }
+
             $this.flush();
         };
 
@@ -69,12 +79,12 @@
             };
 
             var run = function() {
-                if ($this.position >= $this.elements.length) {
+                if ($this.elements.contents().length == 0) {
                     done.call();
                     return;
                 }
 
-                var element = $($this.elements.get($this.position));
+                var element = $this.elements.contents().first();
                 if (!element.hasClass('terminal-animation-input')) {
                     $this.next(run);
                     return;
@@ -89,7 +99,7 @@
         $this.play = function() {
 
             var run = function() {
-                if ($this.position >= $this.elements.length) return;
+                if ($this.elements.contents().length == 0) return;
 
                 $this.next(function() {
                     setTimeout(run, interval);
@@ -100,35 +110,35 @@
         };
 
         $this.prev = function() {
-            if ($this.position <= 0) return;
+            if ($this.content.contents().length == 0) return;
 
-            $this.position--;
             var element = $this.content.contents().last().detach();
+            $this.elements.prepend(element);
+
             var text = element.text();
             if (element.hasClass('terminal-animation-input') && text.length > 0) return;
 
-            if ($this.content.contents().size() > 0) {
+            if ($this.content.contents().length > 0) {
                 element = $this.content.contents().last();
                 if (element.hasClass('terminal-animation-input')) return;
-                $this.position--;
                 element.detach();
+                $this.elements.prepend(element);
             }
 
             $this.flush();
         };
 
         $this.next = function(callback) {
-            if ($this.animator || $this.position >= $this.elements.length) {
+            if ($this.animator || $this.elements.contents().length == 0) {
                 return;
             }
 
-            var element = $($this.elements.get($this.position));
+            var element = $this.elements.contents().first().detach();
 
             if (element.hasClass('terminal-animation-input')) {
                 var text = element.text();
                 if (text.length == 0) {
                     $this.content.append(element);
-                    $this.position++;
                     $this.next(callback);
 
                 } else {
@@ -143,7 +153,6 @@
                         } else {
                             clearInterval($this.animator);
                             delete $this.animator;
-                            $this.position++;
                             if (callback) callback.call();
                         }
                     }, speed);
@@ -151,15 +160,13 @@
 
             } else {
                 $this.content.append(element);
-                $this.position++;
                 $this.flush();
                 if (callback) callback.call();
             }
         };
 
         $this.reset = function() {
-            $this.content.contents().detach();
-            $this.position = 0;
+            $this.elements.append($this.content.contents().detach());
             $this.flush();
         };