Difference between revisions of "MediaWiki:Clidemo.js"
From Asenjo
(One intermediate revision by the same user not shown) | |||
Line 189: | Line 189: | ||
}(jQuery)); | }(jQuery)); | ||
− | $('#clidemo').html(' | + | $('#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> | ||
+ | |||
+ | '); |
Latest revision as of 15:02, 25 September 2014
/**
* 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>
');