From bf774eaa59db068accb5ef4629aad4d30cb65871 Mon Sep 17 00:00:00 2001 From: "Endi S. Dewata" Date: Mon, 25 Nov 2013 06:49:47 +0000 Subject: Renamed to CLI Demo. --- css/cli-demo.css | 83 ++++++++++++++++++++ css/terminal-animation.css | 83 -------------------- examples/MediaWiki.html | 24 ++++++ examples/basic.html | 10 +-- index.html | 26 +++---- js/cli-demo.js | 189 +++++++++++++++++++++++++++++++++++++++++++++ js/init.js | 2 +- js/terminal-animation.js | 189 --------------------------------------------- 8 files changed, 315 insertions(+), 291 deletions(-) create mode 100644 css/cli-demo.css delete mode 100644 css/terminal-animation.css create mode 100644 examples/MediaWiki.html create mode 100644 js/cli-demo.js delete mode 100644 js/terminal-animation.js diff --git a/css/cli-demo.css b/css/cli-demo.css new file mode 100644 index 0000000..38ac595 --- /dev/null +++ b/css/cli-demo.css @@ -0,0 +1,83 @@ +.cli-demo { + position: relative; + width: 700px; + min-height: 300px; + padding: 5px; + margin: 1em 0px; + + font-family: courier, fixed; + font-size: 13px; + white-space: pre-wrap; + + border: 1px solid gray; + border-radius: 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; + color: lightgray; +} + +.cli-demo-console { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 40px; + + padding: 5px; + overflow: auto; +} + +.cli-demo-content { +} + +.cli-demo-caret { + background: lightgray; +} + +.cli-demo-control { + position: absolute; + left: 0px; + right: 0px; + bottom: 0px; + height: 30px; + + padding: 5px; + background: gray; + color: black; +} + +.cli-demo-button { + margin: 1px 2px; + padding: 5px 10px; + vertical-align: bottom; + + border: 1px solid white; + border-radius: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: dimgray; + color: white; +} + +.cli-demo-button:hover { + background: lightgray; + color: black; +} + +.cli-demo-input { + font-weight: bold; + color: white; +} + +.cli-demo-input:hover { + background: #303233; +} + +.cli-demo-output:hover { + background: #303233; +} diff --git a/css/terminal-animation.css b/css/terminal-animation.css deleted file mode 100644 index e270376..0000000 --- a/css/terminal-animation.css +++ /dev/null @@ -1,83 +0,0 @@ -.terminal-animation { - position: relative; - width: 700px; - min-height: 300px; - padding: 5px; - margin: 1em 0px; - - font-family: courier, fixed; - font-size: 13px; - white-space: pre-wrap; - - border: 1px solid gray; - border-radius: 8px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - - background: black; - color: lightgray; -} - -.terminal-animation-console { - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 40px; - - padding: 5px; - overflow: auto; -} - -.terminal-animation-content { -} - -.terminal-animation-caret { - background: lightgray; -} - -.terminal-animation-control { - position: absolute; - left: 0px; - right: 0px; - bottom: 0px; - height: 30px; - - padding: 5px; - background: gray; - color: black; -} - -.terminal-animation-button { - margin: 1px 2px; - padding: 5px 10px; - vertical-align: bottom; - - border: 1px solid white; - border-radius: 5px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - - background: dimgray; - color: white; -} - -.terminal-animation-button:hover { - background: lightgray; - color: black; -} - -.terminal-animation-input { - font-weight: bold; - color: white; -} - -.terminal-animation-input:hover { - background: #303233; -} - -.terminal-animation-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 @@ + + + + + MediaWiki + + + + + + + +
$ <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="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
+dbus          misc              postfix   rsyslog      yum
+$
+ + + 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 @@ - Basic Terminal - + Basic Example + - + -
$ ls /usr/lib +
$ ls /usr/lib anaconda-runtime games locale rpm sendmail.postfix ConsoleKit gcc python2.6 sendmail yum-plugins -$ ls /var/lib +$ ls /var/lib 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 @@ - Terminal Animation + CLI Demo - + - + -

Terminal Animation

+

CLI Demo

Overview

@@ -37,17 +37,17 @@ dbus misc postfix rsyslog yum $ -Copy and paste the content of the terminal into a <div class="terminal-animation"> in an HTML page. Mark the parts that are manually typed with <span class="terminal-animation-input">. +Copy and paste the content of the terminal into a <div class="cli-demo"> in an HTML page. Mark the parts that are manually typed with <span class="cli-demo-input">. 
 <html>
 <head> ... </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
@@ -63,12 +63,12 @@ Include the JS and CSS files in the header and execute the plugin:
 
 <html>
 <head>
-    <link href="css/terminal-animation.css" rel="stylesheet" type="text/css"/>
+    <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>
 $(function() {
-    $(".terminal-animation").terminal_animation();
+    $(".cli-demo").cli_demo();
 });
     </script>
 </head>
@@ -80,10 +80,10 @@ $(function() {
 
 Result:
 
-
$ ls /usr/lib
+
$ ls /usr/lib
 anaconda-runtime  games  locale     rpm       sendmail.postfix
 ConsoleKit        gcc    python2.6  sendmail  yum-plugins
-$ ls /var/lib
+$ ls /var/lib
 alternatives  dhclient          nfs       random-seed  stateless
 authconfig    games             plymouth  rhsm         udev
 cs            logrotate.status  polkit-1  rpm          up2date
@@ -99,7 +99,7 @@ $ 

 
 
Repository

 
-git://fedorapeople.org/home/fedora/edewata/public_git/pki.git
+git://fedorapeople.org/home/fedora/edewata/public_git/cli-demo.git
 

 
 
diff --git a/js/cli-demo.js b/js/cli-demo.js
new file mode 100644
index 0000000..e7be617
--- /dev/null
+++ b/js/cli-demo.js
@@ -0,0 +1,189 @@
+/**
+ * CLI Demo
+ * http://edewata.fedorapeople.org/cli-demo/
+ *
+ * @author Endi S. Dewata 
+ */
+
+(function($) {
+
+    var cli_demo = function() {
+
+        var $this = $(this);
+        var interval = 2000;
+        var speed = 80;
+
+        $this.init = function() {
+
+            var text = $this.text();
+            var list = $this.contents().detach();
+
+            $this.console = $('
', {
+                'class': 'cli-demo-console'
+            }).appendTo($this);
+
+            $this.content = $('', {
+                'class': 'cli-demo-content'
+            }).appendTo($this.console);
+
+            $this.elements = $('', {
+                'class': 'cli-demo-hidden'
+            }).hide().appendTo($this.console);
+
+            $this.caret = $('', {
+                'text': ' ',
+                'class': 'cli-demo-caret'
+            }).appendTo($this.console);
+
+            $this.control = $('
', {
+                'class': 'cli-demo-control'
+            }).appendTo($this);
+
+            $this.playButton = $('