Difference between revisions of "MediaWiki:Clidemo.js"
From Asenjo
(Created page with "→* * CLI Demo * http://edewata.fedorapeople.org/cli-demo/ * * @author Endi S. Dewata <edewata@redhat.com>: (function($) { var cli_demo = function() { va...") |
|||
Line 188: | Line 188: | ||
}(jQuery)); | }(jQuery)); | ||
+ | |||
+ | $('#clidemo').html('any HTML'); |
Revision as of 14:50, 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('any HTML');