Shift array zero to right

by konglie

HTML

<input id='arr' value='3,5,0,8,7,0,6,3,0,8' placeholder='ketikkan array, dipisahkan dengan koma, misalnya 1,2,3'/>
<button id='doit'>Proses</button>

<div id='result'>

</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

* {
  box-sizing: border-box;
}

input {
  font: inherit;
  padding: 5px;
  width: 80%;
}

#doit {
  position: relative;
  float: right;
  width: 19.5%;
  font: inherit;
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#result {
  clear: both;
  font: inherit;
}

.array_holder span {
  font-family: monospace;
  font-size: 14px;
  margin: 5px;
}

.current {
  font-weight: bold;
  font-size: 20px !important;
}

.array_holder:last-child span {
  font-size: 22px !important;
  font-weight: bold;
}

.text {
  font-size: 11px;
  font-style: italic;
}

JavaScript

/**
by konglie [at] kurungkurawal.com
http://www.kurungkurawal.com

javascript might be not optimized,
but you got the idea.
*/

function runUntil(until, fn, delay){
  var dorun = function(index){
  	self = arguments.callee;
  	fn.apply(null, [index]);
    if(index++ < until){
    	setTimeout(function(){
      	self.apply(null, [index])
      }, delay);
    }
  }
  dorun(0);
}

$('#doit').click(function(){
	var result = $('#result').empty();
  var text = function(s){
  	$('<div>').addClass('text').html(s).appendTo(result);
  }
  
  var drawArr = function(arr){
  	var arrDiv = $('<div>').addClass('array_holder').appendTo(result);
    for(var s in arr) {
      $('<span>').appendTo(arrDiv).text(arrs[s]);
    }
    return arrDiv;
  }
  
  var arrs = $('#arr').val().replace(/\s+/g, '').split(',');
  text('Original Array');
  var boxes = drawArr(arrs);
  
  var pos = 0;
  var len = $('span', boxes).length;
  
  runUntil(len, function(index){
  	$('.current', boxes).removeClass('current');
    var curr = $('span:nth-child(' + index + ')', boxes).addClass('current');
    var t = $(curr).text();
    var isZero = (t == 0);
    
    
    if(!isZero){
    	// kenapa index -1 ?
      // karena di level UI, nth-child(n) itu mengharuskan n dimulai dari 1, sedangkan array, indexnya dari 0
      arrs[pos++] = arrs[index-1];
      text(t + ' Bukan Nol, maka pos = ' + pos + ', kondisi array:');
      drawArr(arrs);
    }
    
    // loop sudah selesai
    if(index >= len){
    	text('<h4>Loop Selesai</h4>');
      text('<h4>pos = ' + pos + ', mulai dari posisi ini, isi dengan NOL</h4>');
      runUntil((len - pos - 1), function(idx){
        arrs[pos++] = 0;
        var box = drawArr(arrs);
        $('span:nth-child('+pos+')', box).addClass('current');
      }, 1000)
    }
  }, 1500);
})