Renamed to CLI Demo.

author: Endi S. Dewata <edewata@redhat.com> 2013-11-25 06:49:47 +0000
committer: Endi S. Dewata <edewata@redhat.com> 2013-11-25 06:49:47 +0000
commit: bf774eaa59db068accb5ef4629aad4d30cb65871 (patch)
tree: 8a3035c1d0e4da842c5c28de4b38e418b2d61105
parent: 28545042084a2f4212b2d97c267a267aae47d55f (diff)
download: cli-demo-bf774eaa59db068accb5ef4629aad4d30cb65871.tar.gz
cli-demo-bf774eaa59db068accb5ef4629aad4d30cb65871.tar.xz
cli-demo-bf774eaa59db068accb5ef4629aad4d30cb65871.zip
6 files changed, 71 insertions, 47 deletions
diff --git a/css/terminal-animation.css b/css/cli-demo.css
index e270376..38ac595 100644
--- a/css/terminal-animation.css
+++ b/css/cli-demo.css
@@ -1,4 +1,4 @@
-.terminal-animation {
+.cli-demo {
     position: relative;
     width: 700px;
     min-height: 300px;
@@ -19,7 +19,7 @@
     color: lightgray;
 }
 
-.terminal-animation-console {
+.cli-demo-console {
     position: absolute;
     top: 0px;
     left: 0px;
@@ -30,14 +30,14 @@
     overflow: auto;
 }
 
-.terminal-animation-content {
+.cli-demo-content {
 }
 
-.terminal-animation-caret {
+.cli-demo-caret {
     background: lightgray;
 }
 
-.terminal-animation-control {
+.cli-demo-control {
     position: absolute;
     left: 0px;
     right: 0px;
@@ -49,7 +49,7 @@
     color: black;
 }
 
-.terminal-animation-button {
+.cli-demo-button {
     margin: 1px 2px;
     padding: 5px 10px;
     vertical-align: bottom;
@@ -64,20 +64,20 @@
     color: white;
 }
 
-.terminal-animation-button:hover {
+.cli-demo-button:hover {
     background: lightgray;
     color: black;
 }
 
-.terminal-animation-input {
+.cli-demo-input {
     font-weight: bold;
     color: white;
 }
 
-.terminal-animation-input:hover {
+.cli-demo-input:hover {
     background: #303233;
 }
 
-.terminal-animation-output:hover {
+.cli-demo-output:hover {
     background: #303233;
 }
diff --git a/examples/MediaWiki.html b/examples/MediaWiki.html
new file mode 100644
index 0000000..e7b098d
--- /dev/null
+++ b/examples/MediaWiki.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>MediaWiki</title>
+    <link href="../css/cli-demo.css" rel="stylesheet" type="text/css"/>
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script src="../js/cli-demo.js"></script>
+    <script src="../js/init.js"></script>
+</head>
+<body>
+
+<pre class="cli-demo">$ &lt;span class="cli-demo-input"&gt;ls /usr/lib&lt;/span&gt;
+anaconda-runtime  games  locale     rpm       sendmail.postfix
+ConsoleKit        gcc    python2.6  sendmail  yum-plugins
+$ &lt;span class="cli-demo-input"&gt;ls /var/lib&lt;/span&gt;
+alternatives  dhclient          nfs       random-seed  stateless
+authconfig    games             plymouth  rhsm         udev
+cs            logrotate.status  polkit-1  rpm          up2date
+dbus          misc              postfix   rsyslog      yum
+$ </pre>
+
+</body>
+</html>
diff --git a/examples/basic.html b/examples/basic.html
index 92e7fe6..7a08d7c 100644
--- a/examples/basic.html
+++ b/examples/basic.html
@@ -2,18 +2,18 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Basic Terminal</title>
-    <link href="../css/terminal-animation.css" rel="stylesheet" type="text/css"/>
+    <title>Basic Example</title>
+    <link href="../css/cli-demo.css" rel="stylesheet" type="text/css"/>
     <script src="http://code.jquery.com/jquery.js"></script>
-    <script src="../js/terminal-animation.js"></script>
+    <script src="../js/cli-demo.js"></script>
     <script src="../js/init.js"></script>
 </head>
 <body>
 
-<div class="terminal-animation">$ <span class="terminal-animation-input">ls /usr/lib</span>
+<div class="cli-demo">$ <span class="cli-demo-input">ls /usr/lib</span>
 anaconda-runtime  games  locale     rpm       sendmail.postfix
 ConsoleKit        gcc    python2.6  sendmail  yum-plugins
-$ <span class="terminal-animation-input">ls /var/lib</span>
+$ <span class="cli-demo-input">ls /var/lib</span>
 alternatives  dhclient          nfs       random-seed  stateless
 authconfig    games             plymouth  rhsm         udev
 cs            logrotate.status  polkit-1  rpm          up2date
diff --git a/index.html b/index.html
index d11df07..8be8e99 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,12 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Terminal Animation</title>
+    <title>CLI Demo</title>
     <link href="https://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css" rel="stylesheet" type="text/css" />
-    <link href="css/terminal-animation.css" rel="stylesheet" type="text/css" />
+    <link href="css/cli-demo.css" rel="stylesheet" type="text/css" />
     <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
     <script src="http://code.jquery.com/jquery.js"></script>
-    <script src="js/terminal-animation.js"></script>
+    <script src="js/cli-demo.js"></script>
     <script src="js/init.js"></script>
     <style>
 body {
@@ -16,7 +16,7 @@ body {
     </style>
 </head>
 <body>
-<h1>Terminal Animation</h1>
+<h1>CLI Demo</h1>
 
 <h2>Overview</h2>
 
@@ -37,17 +37,17 @@ dbus          misc              postfix   rsyslog      yum
 $  
 </pre>
 
-Copy and paste the content of the terminal into a &lt;div class="terminal-animation"&gt; in an HTML page. Mark the parts that are manually typed with &lt;span class="terminal-animation-input"&gt;.
+Copy and paste the content of the terminal into a &lt;div class="cli-demo"&gt; in an HTML page. Mark the parts that are manually typed with &lt;span class="cli-demo-input"&gt;.
 
 <pre class="prettyprint" style="width: 700px; margin: 1em 0px;">
 &lt;html&gt;
 &lt;head&gt; ... &lt;/head&gt;
 &lt;body&gt;
 
-&lt;div class="terminal-animation"&gt;$ &lt;span class="terminal-animation-input"&gt;ls /usr/lib&lt;/span&gt;
+&lt;div class="cli-demo"&gt;$ &lt;span class="cli-demo-input"&gt;ls /usr/lib&lt;/span&gt;
 anaconda-runtime  games  locale     rpm       sendmail.postfix
 ConsoleKit        gcc    python2.6  sendmail  yum-plugins
-$ &lt;span class="terminal-animation-input"&gt;ls /var/lib&lt;/span&gt;
+$ &lt;span class="cli-demo-input"&gt;ls /var/lib&lt;/span&gt;
 alternatives  dhclient          nfs       random-seed  stateless
 authconfig    games             plymouth  rhsm         udev
 cs            logrotate.status  polkit-1  rpm          up2date
@@ -63,12 +63,12 @@ Include the JS and CSS files in the header and execute the plugin:
 <pre class="prettyprint" style="width: 700px; margin: 1em 0px;">
 &lt;html&gt;
 &lt;head&gt;
-    &lt;link href="css/terminal-animation.css" rel="stylesheet" type="text/css"/&gt;
+    &lt;link href="css/cli-demo.css" rel="stylesheet" type="text/css"/&gt;
     &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
-    &lt;script src="js/terminal-animation.js"&gt;&lt;/script&gt;
+    &lt;script src="js/cli-demo.js"&gt;&lt;/script&gt;
     &lt;script&gt;
 $(function() {
-    $(".terminal-animation").terminal_animation();
+    $(".cli-demo").cli_demo();
 });
     &lt;/script&gt;
 &lt;/head&gt;
@@ -80,10 +80,10 @@ $(function() {
 
 Result:
 
-<div class="terminal-animation">$ <span class="terminal-animation-input">ls /usr/lib</span>
+<div class="cli-demo">$ <span class="cli-demo-input">ls /usr/lib</span>
 anaconda-runtime  games  locale     rpm       sendmail.postfix
 ConsoleKit        gcc    python2.6  sendmail  yum-plugins
-$ <span class="terminal-animation-input">ls /var/lib</span>
+$ <span class="cli-demo-input">ls /var/lib</span>
 alternatives  dhclient          nfs       random-seed  stateless
 authconfig    games             plymouth  rhsm         udev
 cs            logrotate.status  polkit-1  rpm          up2date
@@ -99,7 +99,7 @@ $ </div>
 
 <h2>Repository</h2>
 <pre>
-git://fedorapeople.org/home/fedora/edewata/public_git/pki.git
+git://fedorapeople.org/home/fedora/edewata/public_git/cli-demo.git
 </pre>
 
 </body>
diff --git a/js/terminal-animation.js b/js/cli-demo.js
index 28f1833..e7be617 100644
--- a/js/terminal-animation.js
+++ b/js/cli-demo.js
@@ -1,13 +1,13 @@
 /**
- * Terminal Animation
- * http://edewata.fedorapeople.org/terminal-animation/
+ * CLI Demo
+ * http://edewata.fedorapeople.org/cli-demo/
  *
  * @author Endi S. Dewata <edewata@redhat.com>
  */
 
 (function($) {
 
-    var terminal_animation = function() {
+    var cli_demo = function() {
 
         var $this = $(this);
         var interval = 2000;
@@ -19,47 +19,47 @@
             var list = $this.contents().detach();
 
             $this.console = $('<div/>', {
-                'class': 'terminal-animation-console'
+                'class': 'cli-demo-console'
             }).appendTo($this);
 
             $this.content = $('<span/>', {
-                'class': 'terminal-animation-content'
+                'class': 'cli-demo-content'
             }).appendTo($this.console);
 
             $this.elements = $('<span/>', {
-                'class': 'terminal-animation-hidden'
+                'class': 'cli-demo-hidden'
             }).hide().appendTo($this.console);
 
             $this.caret = $('<span/>', {
                 'text': ' ',
-                'class': 'terminal-animation-caret'
+                'class': 'cli-demo-caret'
             }).appendTo($this.console);
 
             $this.control = $('<div/>', {
-                'class': 'terminal-animation-control'
+                'class': 'cli-demo-control'
             }).appendTo($this);
 
             $this.playButton = $('<button/>', {
                 'html': 'Play',
-                'class': 'terminal-animation-button',
+                'class': 'cli-demo-button',
                 'click': function() { $this.play(); }
             }).appendTo($this.control);
 
             $this.prevButton = $('<button/>', {
                 'html': 'Prev',
-                'class': 'terminal-animation-button',
+                'class': 'cli-demo-button',
                 'click': function() { $this.prev(); }
             }).appendTo($this.control);
 
             $this.nextButton = $('<button/>', {
                 'html': 'Next',
-                'class': 'terminal-animation-button',
+                'class': 'cli-demo-button',
                 'click': function() { $this.next(); }
             }).appendTo($this.control);
 
             $this.resetButton = $('<button/>', {
                 'html': 'Reset',
-                'class': 'terminal-animation-button',
+                'class': 'cli-demo-button',
                 'click': function() { $this.reset(); }
             }).appendTo($this.control);
 
@@ -82,7 +82,7 @@
                 }
 
                 var element = $this.elements.contents().first();
-                if (!element.hasClass('terminal-animation-input')) {
+                if (!element.hasClass('cli-demo-input')) {
                     $this.next(run);
                     return;
                 }
@@ -113,11 +113,11 @@
             $this.elements.prepend(element);
 
             var text = element.text();
-            if (element.hasClass('terminal-animation-input') && text.length > 0) return;
+            if (element.hasClass('cli-demo-input') && text.length > 0) return;
 
             if ($this.content.contents().length > 0) {
                 element = $this.content.contents().last();
-                if (element.hasClass('terminal-animation-input')) return;
+                if (element.hasClass('cli-demo-input')) return;
                 element.detach();
                 $this.elements.prepend(element);
             }
@@ -136,7 +136,7 @@
 
             var element = $this.elements.contents().first().detach();
 
-            if (element.hasClass('terminal-animation-input')) {
+            if (element.hasClass('cli-demo-input')) {
                 var text = element.text();
                 if (text.length == 0) {
                     $this.content.append(element);
@@ -182,8 +182,8 @@
         return $this;
     };
 
-    $.fn.terminal_animation = function() {
-        return this.each(terminal_animation);
+    $.fn.cli_demo = function() {
+        return this.each(cli_demo);
     };
 
 }(jQuery));
diff --git a/js/init.js b/js/init.js
index 56d2f4f..2669257 100644
--- a/js/init.js
+++ b/js/init.js
@@ -1,3 +1,3 @@
 $(function() {
-    $(".terminal-animation").terminal_animation();
+    $(".cli-demo").cli_demo();
 });
author	Endi S. Dewata <edewata@redhat.com>	2013-11-25 06:49:47 +0000
committer	Endi S. Dewata <edewata@redhat.com>	2013-11-25 06:49:47 +0000
commit	bf774eaa59db068accb5ef4629aad4d30cb65871 (patch)
tree	8a3035c1d0e4da842c5c28de4b38e418b2d61105
parent	28545042084a2f4212b2d97c267a267aae47d55f (diff)
download	cli-demo-bf774eaa59db068accb5ef4629aad4d30cb65871.tar.gz cli-demo-bf774eaa59db068accb5ef4629aad4d30cb65871.tar.xz cli-demo-bf774eaa59db068accb5ef4629aad4d30cb65871.zip