diff options
| author | Endi S. Dewata <edewata@redhat.com> | 2013-10-30 06:28:19 +0000 |
|---|---|---|
| committer | Endi S. Dewata <edewata@redhat.com> | 2013-10-30 20:49:52 +0000 |
| commit | 02e7b534871ce513f72b0fe038ff824a662cc58b (patch) | |
| tree | 126bcdd45afc8ca804af08247b41e65fa294c79a | |
| download | cli-demo-02e7b534871ce513f72b0fe038ff824a662cc58b.tar.gz cli-demo-02e7b534871ce513f72b0fe038ff824a662cc58b.tar.xz cli-demo-02e7b534871ce513f72b0fe038ff824a662cc58b.zip | |
Initial commit.
| -rw-r--r-- | css/terminal-animation.css | 82 | ||||
| -rw-r--r-- | examples/basic.html | 24 | ||||
| -rw-r--r-- | index.html | 105 | ||||
| -rw-r--r-- | js/init.js | 3 | ||||
| -rw-r--r-- | js/terminal-animation.js | 175 |
5 files changed, 389 insertions, 0 deletions
diff --git a/css/terminal-animation.css b/css/terminal-animation.css new file mode 100644 index 0000000..3db81db --- /dev/null +++ b/css/terminal-animation.css @@ -0,0 +1,82 @@ +.terminal-animation { + position: relative; + width: 700px; + min-height: 300px; + 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/basic.html b/examples/basic.html new file mode 100644 index 0000000..92e7fe6 --- /dev/null +++ b/examples/basic.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<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"/> + <script src="http://code.jquery.com/jquery.js"></script> + <script src="../js/terminal-animation.js"></script> + <script src="../js/init.js"></script> +</head> +<body> + +<div class="terminal-animation">$ <span class="terminal-animation-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> +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ </div> + +</body> +</html> diff --git a/index.html b/index.html new file mode 100644 index 0000000..628eac4 --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Terminal Animation</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" /> + <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/init.js"></script> + <style> +body { + font: small sans-serif; +} + </style> +</head> +<body> +<h1>Terminal Animation</h1> + +<h2>Overview</h2> + +This jQuery plugin provides a simple way to create animations of terminal activities for demonstration purposes. + +<h2>Quick Start</h2> + +Execute the actual operations in the terminal: +<pre class="prettyprint" style="width: 700px; margin: 1em 0px;"> +$ ls /usr/lib +anaconda-runtime games locale rpm sendmail.postfix +ConsoleKit gcc python2.6 sendmail yum-plugins +$ ls /var/lib +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ +</pre> + +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">. + +<pre class="prettyprint" style="width: 700px; margin: 1em 0px;"> +<html> +<head> ... </head> +<body> + +<div class="terminal-animation">$ <span class="terminal-animation-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> +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ </div> + +</body> +</html> +</pre> + +Include the JS and CSS files in the header and execute the plugin: + +<pre class="prettyprint" style="width: 700px; margin: 1em 0px;"> +<html> +<head> + <link href="css/terminal-animation.css" rel="stylesheet" type="text/css"/> + <script src="http://code.jquery.com/jquery.js"></script> + <script src="js/terminal-animation.js"></script> + <script> +$(function() { + $(".terminal-animation").terminal_animation(); +}); + </script> +</head> +<body> + ... +</body> +</html> +</pre> + +Result: + +<div class="terminal-animation">$ <span class="terminal-animation-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> +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ </div> + +<h2>Examples</h2> + +<ul> +<li><a href="examples/basic.html">Basic example</a></li> +</ul> + +<h2>Repository</h2> +<pre> +git://fedorapeople.org/home/fedora/edewata/public_git/pki.git +</pre> + +</body> +</html> 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)); |