layoutbuilder.js

jQuery(document).ready(function($) {

	//Slider
	 $(function() {
		 
		var currentHandle = -1;
		var canDelete = -1;
		var rows = 0;
		wp.customize('homepagerows', function(obj) {

				rows = obj.get();
			
			} );
		var addRow = function(i){
			$('.sliders').append('<div class="slider-wrap"><div class="slider" id="slider'+i+'"></div><div class="button sliderAddColumn" title="Add Column Divider" id="addColumn'+i+'"><div class="dashicons dashicons-plus"></div></div></div>');
			$('#addColumn'+i).click(function(){
				addColumnButton(this);
			});
			var myarr = [];
			var widths = [];
			wp.customize('homepage_'+i, function(obj) {

				widths = new String(obj.get());
			
			} );
			widths = widths.split(',');
			for(var j in widths){
				if(myarr.length == 0){
					myarr[myarr.length] = parseInt(widths[j]);
				}
				else{
					myarr[myarr.length] = parseInt(widths[j])+myarr[myarr.length-1];	
				}
				
			}
			if(myarr.length == 0) myarr[0] = 12;
			$( "#slider"+i ).slider({
				min: 0,
				max: 12,
				step: 1,
				values: myarr,
				change: function(event, ui){onSliderChange(event, ui, i);}
			});
			$( "#slider"+i ).children().last().css('display','none');
		}
		
		var addColumnButton = function(button){
			var row = $(button).attr('id').substr(-1);
			var myarr = $( "#slider"+row ).slider( "option", "values" );
			if(myarr.length == 6) return;
			myarr[myarr.length] = 12;
			myarr.sort(function(a,b){return a - b});
			$( "#slider"+row ).slider( "destroy" );
			$( "#slider"+row ).slider({
				min: 0,
				max: 12,
				step: 1,
				values: myarr,
				change: function(event, ui){onSliderChange(event, ui, row);}
			});
			$( "#slider"+row ).children().last().css('display','none');
		}
		
		var deleteColumn = function(){
			if(!currentHandle) return;
			var row = canDelete;
			//if(!$(':focus').hasClass('ui-slider-handle')) return;
			var count = 0;
			var widths = 0;
			var values = $.unique($('#slider'+row).slider( "values" ));
			if(values.indexOf(currentHandle) == -1) return;
			values.splice(values.indexOf(currentHandle),1);
			values.sort(function(a,b){return a - b});
			$( "#slider"+row ).slider( "destroy" );
			$( "#slider"+row ).slider({
				min: 0,
				max: 12,
				step: 1,
				values: values,
				change: function(event, ui){onSliderChange(event, ui, row);}
			});
			$( "#slider"+row ).children().last().css('display','none');
			for(var j in values){
				if(values[j] != 0){
					if(widths == 0) widths = values[j];
					else {
						var dif = parseInt(values[j])-parseInt(values[j-1]);
						widths = widths+','+dif
					}
				}
			}
			wp.customize('homepage_'+row, function(obj) {

				obj.set(widths);
			
			} );
			$('.sliderDeleteColumn').addClass('disabled');
		}
		
		var onSliderChange = function(event, ui, row){
			var widths = 0;
			var values = $.unique(ui.values);
			values.sort(function(a,b){return a - b});
			for(var j in values){
				if(values[j] != 0){
					if(widths == 0) widths = values[j];
					else {
						var dif = parseInt(values[j])-parseInt(values[j-1]);
						widths = widths+','+dif
					}
				}
			}
			wp.customize('homepage_'+row, function(obj) {

				obj.set(widths);
			
			} );
			currentHandle = Math.round(parseInt($(':focus').css('left').split('px')[0])/16.25);
			canDelete = row;
			$('.sliderDeleteColumn').removeClass('disabled');
		}
		
		
		for(var i=0; i<rows; i++){
			addRow(i);
		}
		
		$('.sliderAddRow').click(function(){
			if(rows == 5) return;
			$('.sliderDeleteRow').removeClass('disabled')
			addRow(rows);
			rows++;
			wp.customize('homepagerows', function(obj) {

				obj.set(rows);
			
			} );
		});
		
		$('.sliderDeleteRow').click(function(){
			if(rows == 0) return;
			rows--;
			if(rows == 0) $('.sliderDeleteRow').addClass('disabled');
			$( "#slider"+rows ).slider( "destroy" );
			$( "#slider"+rows ).remove();
			$( "#addColumn"+rows ).remove()
			wp.customize('homepagerows', function(obj) {

				obj.set(rows);
			
			} );
			currentHandle = -1;
			canDelete = -1;
			$('.sliderDeleteColumn').addClass('disabled');
		});
		
		$('.sliderDeleteColumn').click(function(){
			deleteColumn();
		});
	});
	
})