d3-sort-visualization/js/visualizer-dom.js

'use strict';

/**
 *
 */
Visualizer.prototype.initSvg = function() {
    var svg = d3.select(this.parent).append('svg').attr('class', 'sorter-svg');
    var groups = [];

    groups.push(svg.append('g')
        .attr('transform', `translate(0, 0)`)
    );

    groups.push(svg.append('g')
        .attr('transform', `translate(0, ${Visualizer.padding + Visualizer.itemH})`)
    );

    groups.push(svg.append('g')
        .attr('transform', `translate(0, ${Visualizer.padding * 2 + Visualizer.itemH * 2})`)
    );

    return groups;
};

/**
 *
 */
Visualizer.prototype.initMessages = function() {
    var container = document.createElement('div');
    container.className = 'message-container';

    var div1 = document.createElement('div');
    div1.className = 'message';

    var div2 = document.createElement('div');
    div2.className = 'message';

    var div3 = document.createElement('div');
    div3.className = 'message';

    var div4 = document.createElement('div');
    div4.className = 'message';

    var div5 = document.createElement('div');
    div5.className = 'message';

    div1.innerHTML = ' ';
    div2.innerHTML = ' ';
    div3.innerHTML = ' ';
    div4.innerHTML = ' ';
    div5.innerHTML = ' ';

    container.appendChild(div1);
    container.appendChild(div2);
    container.appendChild(div3);
    container.appendChild(div4);
    container.appendChild(div5);

    return container;
};

/**
 *
 */
Visualizer.prototype.initRange = function() {
    var rangeInput = function(label, event) {
        label.innerHTML = 'Number of items (n) = ' + event.target.value;
    };

    var rangeChange = function(event) {
        this.initItems(event.target.value);
        this.reset();
    };

    var container = document.createElement('div');
    container.className = 'range-container';

    var msg = document.createElement('div');
    msg.className = 'msg';
    msg.innerHTML = "Number of items (n) = 10";

    var range = document.createElement('input');
    range.setAttribute('type', 'range');
    range.setAttribute('value', 10);
    range.setAttribute('min', 10);
    range.setAttribute('max', 40);
    range.addEventListener('change', rangeChange.bind(this));
    range.addEventListener('input', rangeInput.bind(null, msg));

    container.appendChild(range);
    container.appendChild(msg);

    return container;
},

/**
 *
 */
Visualizer.prototype.initControls = function() {
    var _this = this;

    var updatePlayPause = function(paused) {
        if (paused === true) {
            play.className = 'fa fa-play';
        }
        else {
            play.className = 'fa fa-pause';
        }
    };

    var playclick = function() {
        this.paused = !this.paused;
        updatePlayPause(this.paused);

        if (this.actionIndex === this.actions.length) {
            this.reset();
            this.paused = false;
            this.go();
        }
        else {
            this.go();
        }
    };

    var forwardclick = function() {
        this.paused = true;
        this.go();
        this.actionIndex++;
    };

    var restartclick = function() {
        this.paused = true;
        updatePlayPause(this.paused);
        this.reset();
    };

    var play = document.createElement('button');
    play.className = 'fa fa-play';
    play.title = 'Play'
    play.addEventListener('click', playclick.bind(this));

    var forward = document.createElement('button');
    forward.className = 'fa fa-step-forward'
    forward.title = 'Step Forward';
    forward.addEventListener('click', forwardclick.bind(this));

    var reset = document.createElement('button');
    reset.className = 'fa fa-undo';
    reset.title = 'Restart'
    reset.addEventListener('click', restartclick.bind(this));

    var container = document.createElement('div');
    container.className = 'controls-container';

    container.appendChild(reset);
    container.appendChild(play);
    container.appendChild(forward);

    return container;
};

Visualizer.prototype.initProperties = function() {
    // Div 1
    var div1 = document.createElement('div');
    div1.className = 'property p1';

    var title1 = document.createElement('div');
    title1.innerHTML = 'Stable';
    title1.className = 'title';
    div1.appendChild(title1);

    var value1 = document.createElement('div');
    value1.className = 'value';
    value1.innerHTML = this.parent.attributes['data-stable'].value;
    div1.appendChild(value1);

    // Div 2
    var div2 = document.createElement('div');
    div2.className = 'property p2';

    var title2 = document.createElement('div');
    title2.innerHTML = 'Adaptive';
    title2.className = 'title';
    div2.appendChild(title2);

    var value2 = document.createElement('div');
    value2.className = 'value';
    value2.innerHTML = this.parent.attributes['data-adaptive'].value;
    div2.appendChild(value2);

    // Div 3
    var div3 = document.createElement('div');
    div3.className = 'property p3';

    var title3 = document.createElement('div');
    title3.innerHTML = 'Worst Performance';
    title3.className = 'title';
    div3.appendChild(title3);

    var value3 = document.createElement('div');
    value3.className = 'value';
    value3.innerHTML = this.parent.attributes['data-worst-perf'].value;
    div3.appendChild(value3);

    // Div 4
    var div4 = document.createElement('div');
    div4.className = 'property p4';

    var title4 = document.createElement('div');
    title4.innerHTML = 'Average Performance';
    title4.className = 'title';
    div4.appendChild(title4);

    var value4 = document.createElement('div');
    value4.className = 'value';
    value4.innerHTML = this.parent.attributes['data-avg-perf'].value;
    div4.appendChild(value4);

    // Div 5
    var div5 = document.createElement('div');
    div5.className = 'property p5';

    var title5 = document.createElement('div');
    title5.innerHTML = 'Best Performance';
    title5.className = 'title';
    div5.appendChild(title5);

    var value5 = document.createElement('div');
    value5.className = 'value';
    value5.innerHTML = this.parent.attributes['data-best-perf'].value;
    div5.appendChild(value5);

    // Div 6
    var div6 = document.createElement('div');
    div6.className = 'property p6';

    var title6 = document.createElement('div');
    title6.innerHTML = 'Worst Memory';
    title6.className = 'title';
    div6.appendChild(title6);

    var value6 = document.createElement('div');
    value6.className = 'value';
    value6.innerHTML = this.parent.attributes['data-worst-memory'].value;
    div6.appendChild(value6);

    // Container
    var container = document.createElement('div');
    container.className = 'sorter-properties';

    container.appendChild(div1);
    container.appendChild(div2);
    container.appendChild(div3);
    container.appendChild(div4);
    container.appendChild(div5);
    container.appendChild(div6);

    return container;
};