Bubble sort visualization using ES6

index.html

<div class="messy-array">
</div>

PqaQbJ.markdown

Bubble sort visualization using ES6

A Pen by Yuval Saraf on CodePen.

License.

script.js

'use strict';
const numberWidth = 70;
const delayBetweenAnimations = 500;
/**
 * bubbleSort method
 */
Array.prototype.bubbleSortGen = function*() {
  let swap = function(elms, i1, i2) {
    const t = elms[i1];
    elms[i1] = elms[i2];
    elms[i2] = t;
  }
  for (let i = 0, len = this.length; i < len; i++) {
    for (let j = 0, last = len - i; j < last; j++) {
      if (this[j] > this[j + 1]) {
        yield j;
        swap(this, j, j + 1);
      }
    }
  }
}
Array.prototype.bubbleSort = function() {
  // Run generator until end
  while (this.bubbleSortGen().next().done === false);
  return this;
}

let loopThroughGeneratorWithDelay = function() {
  let i = 0;
  let runNext = function(generator, fn, delay) {
    let next = generator.next();
    if (next.done === false) {
      fn(next.value);
      setTimeout(runNext.apply.bind(runNext, null, arguments), delay);
    }
  }
  runNext.apply(this, arguments);
}

let CALLBACK = function(givenArray) {
  let divsArray = new Array(givenArray.length);

  let frag = document.createDocumentFragment();
  givenArray.forEach((value, index) => {
    var div = document.createElement("div");

    div.classList.add('num');
    div.innerHTML = value;
    div.style.width = numberWidth + 'px';
    div.style.left = (numberWidth * index) + 'px';
    div.style.backgroundColor = "#" + ("000000" + (Math.floor(Math.random() * 0xFFFFFF)).toString(16)).substr(-6);

    divsArray[index] = div;
    frag.appendChild(div);
  });
  document.getElementsByClassName('messy-array')[0].appendChild(frag);

  // Start sorting
  let gen = givenArray.bubbleSortGen();
  loopThroughGeneratorWithDelay(givenArray.bubbleSortGen(), function(value) {
    const bigElement = divsArray[value];
    const smallElement = divsArray[value + 1];

    // Swap
    divsArray[value] = smallElement;
    divsArray[value + 1] = bigElement;

    // Change Css accordingly
    smallElement.style.left = (numberWidth * value) + 'px';
    bigElement.style.left = (numberWidth * (value + 1)) + 'px';
  }, delayBetweenAnimations);
}

CALLBACK([17, 190, 4, 33, 18, 61, 68, 77, 62, 60, 43, 1]);

scripts

<script src="http://codepen.io/Janaka-Steph/pen/MwVWQr"></script>

style.css

.messy-array{
  position: relative;
}
.messy-array>.num{
  position: absolute;
  height: 70px;
  transition: left 0.3s ease-in-out;
}