restUI/frontend/static-web/lib/hLayout/HLayout.js

var md;

function startHLayoutEvents() {
	// Global mouse event;
	$(document).on('mousemove',function(e) {
		if(md == undefined) md = {x:e.clientX,y:e.clientY};
		md.deltaX = e.clientX - md.x;
		md.deltaY = e.clientY - md.y;
		md.x = e.clientX;
		md.y = e.clientY;
	});
	
	var $grab = undefined;
	$(document).on('mousedown','.hpane > header',function(e){
		if(e.which != 1) return;
		if(!$(e.target).is(".hpane > header")) return;
		
		e.preventDefault();
		e.stopPropagation();
		
		$grab = $(this).parent();
		$parent = $grab.parent();
		var next = $grab.next();
		var origW = $grab.width();
		var origH = $grab.height();
		
		// Check if we are root?
		
		var dim = {w: $grab.width(), h: $grab.height()};
		var pos = $grab.position();
	
		$($grab).detach().appendTo('body').addClass("detached").addClass("moving").css({width:dim.w,height:dim.h});
		
		$('.hpane:not(.detached)').addClass("discover");
		
		// All childs to pointer event none
		if($parent.is('section')) {
			// We aren't

			$child = $parent.children('.hpane, section');
			$child.attr('style','');
			$child.css('flex-basis',$parent.css('flex-basis'));
			$child.detach();
			$parent.replaceWith($child);
		}
	})
	
	var $sectionResize = null;
	$(document).on('mousedown','section',function(e) {
		
		var $target = $(e.target);
		if(!$target.is("section"))return;
		e.preventDefault();
		$sectionResize = $target;
		$sectionResize.addClass("resizing");
	});
	$(document).on('mousemove',function(e) {
		if($sectionResize == null) return;
		var $first = $sectionResize.children(':nth-child(1)');
		var $second = $sectionResize.children(':nth-child(2)');
		
		
		var common;
		var common2;
		if( $sectionResize.is(".horizontal")) {common = "height",common2 = "deltaY"};
		if( $sectionResize.is(".vertical")) {common = "width", common2 = "deltaX"};

		var parentValue = $sectionResize[common]();
		var hFirst = $first[common]();
		var hSec = $second[common]();
	
		var newVal1 = (hFirst + md[common2]) / parentValue * 100;
		var newVal2 = (hSec -md[common2]) / parentValue * 100;
			
		$first.css('flex-basis',newVal1 + "%");
		$second.css('flex-basis',newVal2 + "%");
			
	});
	$(document).on('mouseup',function(e) {
		if($sectionResize) {
			$sectionResize.removeClass("resizing");
		}

		$sectionResize = null;
	});
	
	
	$(document).on('mousemove',function(e) {
		if($grab == undefined) return;
		var pos = $grab.position();
		
		var nx = pos.left + md.deltaX;
		var ny = pos.top + md.deltaY;
		var offX = $grab.width() / 2;
		var offY = 0;
		
		$grab.css({left: e.clientX - offX, top: e.clientY -offY});
		
		// Check target
		var $target = $(e.target);
		
		if(!$target.is(".hpane")) {
			$target = $target.parents(".hpane");
		}
		
		
		if($target.is(".hpane:not(.preview)")){
			var placement = checkAttach($target,e);
			if(placement != 0 ) {
				previewPanel($grab,$target,placement);
			} else {
				removePreviews();
			}
		
		} else {
			removePreviews();
			
		}
		
	});
	
	$(document).on('mouseup',function(e) {
		if($grab == undefined) return;
		
		removePreviews();

		$grab.removeClass("moving");
		$('.hpane').removeClass("discover");

		$target = $(e.target);
		if(!$target.is(".hpane")) $target = $target.parents('.hpane');
		
		if($target.is(".hpane")){
			var placement = checkAttach($target,e);
			if(placement != 0 ) {
				$grab.removeClass("detached");
				$grab.attr('style','');
				attachPanel($grab,$target,placement);
			}
		}
		
		$grab = undefined;
		return;
	});
	
}


	
	function recalcFlex() {
		$('section.horizontal > section, section.horizontal > .hpane').each(function() {
			var parentH = $(this).parent().height();
			var curH = $(this).height();
			var flex = 100 * curH / parentH;
			$(this).css({'flex-basis':flex + "%"});
		});
		$('section.vertical > section, section.vertical > .hpane').each(function() {
			var parentW = $(this).parent().width();
			var curW = $(this).width();
			var flex = 100 * curW / parentW;
			$(this).css({'flex-basis':flex + "%"});
		});
	}	
	recalcFlex();
	
	function checkAttach($target,e) {
		
		var tW = $target.width()/3;
		var tH = $target.height()/3;
		
		var targetPos = $target.offset();
		var dim = { w: $target.width(), h: $target.height()};
		var rPos = { x: e.pageX - targetPos.left,  y: e.pageY - targetPos.top};
		//Calc dists and check the closest one
		
		
		if(rPos.x > tW && rPos.x < dim.w - tW && rPos.y < tH) {  					// 1 Top
			return 1;
		} else if(rPos.x > tW && rPos.x < dim.w - tW && rPos.y > dim.h - tH){ 		// 3 Bottom
			return 3;
		} else if(rPos.x < tW) {													// 2 Left
			return 2;
		} else if( rPos.x > dim.w - tW){											// 4 Right
			return 4;
		}
		
		return 0;
	}
	function removePreviews() {
		$('.attach-preview').hide();
	}
	function previewPanel($grab,$target,attach) {
		
		$previewDiv = $(".attach-preview");
		if($previewDiv.length == 0 ) {
			$previewDiv = $('<div class="attach-preview" style="display:none;position:fixed"></div>').appendTo('body');
		}
		
		$previewDiv.show();
		var dim = {w:$target.width(),h:$target.height()};
		var pos = $target.offset();
		
		if((attach % 2) == 1) {
			$previewDiv.css('height',dim.h/3);
			$previewDiv.css("width",dim.w);
			$previewDiv.css("left",pos.left);
			if(attach == 1) {
				$previewDiv.css('top',pos.top);
			} else {
				$previewDiv.css('top',pos.top  + dim.h - dim.h/3);
			}
		} else if((attach % 2) == 0) {
			$previewDiv.css("height",dim.h);
			$previewDiv.css('width',dim.w/3);
			$previewDiv.css("top",pos.top);
			if(attach == 2) {
				$previewDiv.css('left',pos.left);
			} else {
				$previewDiv.css('left',pos.left + dim.w - dim.w/3);
			}

		}
			
	}
	function attachPanel(what,target, attach) {
		if(attach){
			var type
			if((attach % 2) == 1)type = "horizontal";
			if((attach % 2) == 0)type = "vertical";
			$target = $(target);
			$parent = $(target).parent();
			
			$sib = $(target);
			if($sib.next().is("section, .hpane,.splitter")) {
				$section = $("<section class='" + type +"' style='flex-basis:" + $target.css('flex-basis') + "'></section>").prependTo($parent);
			} else {
				$section = $("<section class='" + type + "' style='flex-basis:" + $target.css('flex-basis') +" '></section>").appendTo($parent);
			}
			$sib.detach();
			what.css('flex-basis','33%');
			$sib.css('flex-basis','66%');
			if(attach < 3) {
				$section.append(what);
				//$section.append("<div class='splitter'></div>");
				$section.append($sib);
			} else {
				$section.append($sib);
				//$section.append("<div class='splitter'></div>");
				$section.append(what);
			}
			
		}
	
	}
	

$(function() {
	
	startHLayoutEvents();
	
});