d3-sort-visualization/js/visualizer.js

/**
 *
 */
function Visualizer(parent) {
    this.instructions = [];
    this.parent = parent;
    this.sorter = null;
    this.paused = true;

    var sorterSidebarContainer = document.createElement('div');
    sorterSidebarContainer.className = 'sorter-sidebar';
    parent.appendChild(sorterSidebarContainer);

    var properties = this.initProperties();
    parent.appendChild(properties);

    var controls = this.initControls();
    parent.querySelector('.sorter-sidebar').appendChild(controls);

    var messages = this.initMessages();
    parent.querySelector('.sorter-sidebar').appendChild(messages);

    var range = this.initRange();
    parent.querySelector('.sorter-sidebar').appendChild(range);

    switch(parent.attributes['data-algorithm'].value) {
        case 'quick':
            this.sorter = new QuickSort(this);
            break;

        case 'merge':
            this.sorter = new MergeSort(this);
            break;

        case 'selection':
            this.sorter = new SelectionSort(this);
            break;

        case 'bubble':
            this.sorter = new BubbleSort(this);
            break;

        case 'insertion':
            this.sorter = new InsertionSort(this);
            break;

        case 'shell':
            this.sorter = new ShellSort(this);
            break;

        case 'radix':
            this.sorter = new RadixSort(this);
            break;

        default:
            throw new Error('Unrecognized sort type.');
    }

    this.initItems(10);
};

// Static properties (mutable)
Visualizer.spacerW  = 5;
Visualizer.itemW    = 14;
Visualizer.itemH    = 50;
Visualizer.itemY    = 20;

/**
 * Static.
 */
Visualizer.calculateX = function(index) {
    return Visualizer.spacerW + index * (Visualizer.itemW + Visualizer.spacerW)
};

/**
 *
 */
Visualizer.prototype.instruct = function() {
    this.instructions.push(arguments);
    return this;
};

/**
 * Instructions contain a string with the name of a function in this object which is called to perform an action.
 */
Visualizer.prototype.followInstruction = function() {
    if (this.instructionIndex >= this.instructions.length) {
        return;
    }

    var obj = this.instructions[this.instructionIndex];
    var instruction = new Array();

    for (var key in obj) {
        if (obj[key].hasOwnProperty) {
            instruction.push(obj[key]);
        }
    }

    var delay = instruction[1];
    var args = instruction.slice(1);

    // TODO finalize play button behavior
    // TODO add tabs for best/worst cases
    // TODO add links to stats
    // TODO fade unfade
    // TODO heap sort
    // TODO extra memory

    // NOTE interesting (anti?)pattern here.
    // NOTE use of call() vs apply() (apply only delivered first array item as string)
    // if (typeof operation === 'function') {
    //     operation.call(this, instruction);

    instruction[0].apply(this, args);

    if (delay === 0) {
        this.instructionIndex++;
        this.followInstruction();
    }
    else if (this.paused === false) {
        this.instructionIndex++;
        setTimeout(this.followInstruction.bind(this), delay);
    }
    // }
    // else {
    //     console.error(i);
    //     throw new Error('Unidentified instruction.');
    // }
};