MediaWiki:Clidemo.js

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('
<pre class="cli-demo">
$ <span class="cli-demo-input">
</pre>');