MediaWiki:Clidemo.js
From Asenjo
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/**
* CLI Demo
* http://edewata.fedorapeople.org/cli-demo/
*
* @author Endi S. Dewata <edewata@redhat.com>
*/
(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 = $('<div/>', {
'class': 'cli-demo-console'
}).appendTo($this);
$this.content = $('<span/>', {
'class': 'cli-demo-content'
}).appendTo($this.console);
$this.elements = $('<span/>', {
'class': 'cli-demo-hidden'
}).hide().appendTo($this.console);
$this.caret = $('<span/>', {
'text': ' ',
'class': 'cli-demo-caret'
}).appendTo($this.console);
$this.control = $('<div/>', {
'class': 'cli-demo-control'
}).appendTo($this);
$this.playButton = $('<button/>', {
'html': 'Play',
'class': 'cli-demo-button',
'click': function() { $this.play(); }
}).appendTo($this.control);
$this.prevButton = $('<button/>', {
'html': 'Prev',
'class': 'cli-demo-button',
'click': function() { $this.prev(); }
}).appendTo($this.control);
$this.nextButton = $('<button/>', {
'html': 'Next',
'class': 'cli-demo-button',
'click': function() { $this.next(); }
}).appendTo($this.control);
$this.resetButton = $('<button/>', {
'html': 'Reset',
'class': 'cli-demo-button',
'click': function() { $this.reset(); }
}).appendTo($this.control);
if ($this.is('pre')) {
$this.content.html(text);
} else {
$this.content.append(list);
}
$this.flush(function() {
$this.console.scrollTop(0);
});
};
$this.flush = function(done) {
var run = function() {
if ($this.elements.contents().length == 0) {
if (done) done.call();
return;
}
var element = $this.elements.contents().first();
if (!element.hasClass('cli-demo-input')) {
$this.next(run);
return;
}
done.call();
};
run.call();
};
$this.play = function() {
var run = function() {
if ($this.elements.contents().length == 0) return;
$this.next(function() {
setTimeout(run, interval);
});
};
run.call();
};
$this.prev = function() {
if ($this.content.contents().length == 0) return;
var element = $this.content.contents().last().detach();
$this.elements.prepend(element);
var text = element.text();
if (element.hasClass('cli-demo-input') && text.length > 0) return;
if ($this.content.contents().length > 0) {
element = $this.content.contents().last();
if (element.hasClass('cli-demo-input')) return;
element.detach();
$this.elements.prepend(element);
}
$this.flush(function() {
var height = $this.content.height();
$this.console.scrollTop(height);
});
};
$this.next = function(callback) {
if ($this.animator || $this.elements.contents().length == 0) {
return;
}
var element = $this.elements.contents().first().detach();
if (element.hasClass('cli-demo-input')) {
var text = element.text();
if (text.length == 0) {
$this.content.append(element);
$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;
if (callback) callback.call();
}
}, speed);
}
} else {
$this.content.append(element);
$this.flush(function() {
var height = $this.content.height();
$this.console.scrollTop(height);
});
if (callback) callback.call();
}
};
$this.reset = function() {
$this.elements.append($this.content.contents().detach());
$this.flush(function() {
var height = $this.content.height();
$this.console.scrollTop(height);
});
};
$this.init();
return $this;
};
$.fn.cli_demo = function() {
return this.each(cli_demo);
};
}(jQuery));
$('#clidemo').html('
<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="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
$ </div>
');