AsciiProgressBar

by InfinitiesLoop

HTML

<span class="asciiprogress">[-------[]-----------]</span>
<hr/>
<span class="asciiprogress">[-------[]-------]</span>
<hr/>
<span class="asciiprogress">[----[]-----------]</span>
<hr/>
<span class="asciiprogress">[-----------------------[]---------------------]</span>
<hr/>

<div style="height:200px;"></div>

CSS

.asciiprogress {
    position: relative;
    font-family: courier
}
.asciiprogress span {
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
}
.asciiprogress i {
    font-style: normal;
}

.asciiprogress span em {
    display: inline-block;
    height: 100%;
    width: 12px;
    cursor: pointer;
    margin-left: -6px;
}

JavaScript

(function($) {
    
    $.fn.asciiProgress = function() {
        return this.each(function() {
            var self = $(this);
            var raw = self.text();
            // trim the [ and ]
            raw = raw.substr(1);
            raw = raw.substr(0, raw.length-1);
            // here is our progress bar length
            var length = raw.length;
            
            // percent position of the handle
            var value = (raw.indexOf("[]") + 1) / length;
            
            // wrap with something for later manipulation
            var txt = self.wrapInner("<i/>").find("i");
            
            // add an invisible handle that can be dragged around
            var handleContainer = $("<span/>", {
                html: "",
                css: {
                    left: value*100 + "%"
                }
            });
            var handle = $("<em/>", {})
                .appendTo(handleContainer);
            
            handle
                .mousedown(startDrag)
                .mouseup(endDrag);
            
            handleContainer.appendTo(this);
    
            self.data("ascii", {
                length: length,
                value: value,
                handle: handleContainer,
                txt: txt
            });
        });
    };
    
    function startDrag(ev) {
        var handlecontainer = $(this).parent();
        var ascii = $(this).closest(".asciiprogress");
        var data = ascii.data("ascii");
        data.start = ev.pageX;
        
        $("body").bind("mousemove.ascii", function(ev) {
            var pos = ev.pageX - ascii.position().left;
            handlecontainer.css("left", pos + "px");
            var percent = Math.min(1, (pos / ascii.width()));
            percent = Math.max(0, percent);
            setValue(ascii, data, percent);
        }).one("mouseup", endDrag);
    }
    
    function setValue(ascii, data, percent) {
        var leftSide = Math.round(data.length * percent);
       ...