wsrpc/sample/canvas/web/vendor/hLayout/hLayout.js

var md;

function startHLayoutEvents() {
	document.addEventListener("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;

	})
	// 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.addEventListener("mousedown",function(e) {
		console.log("Target",e.target);
	})
	/*$(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() {
	console.log("Recalculating flex");
	var elems;
	elems = document.querySelectorAll("section.horizontal > section, section.horizontal > .hpane");
	for( var i = 0 ; i < elems.length; i++ ) {
		var elem = elems[i];
		var parentH = elem.parentElem.innerHeight;
		var curH = elem.innerHeight;
		var flex = 100 * curH / parentH;
		elem.style["flex-basis"] = flex +"%"
	}
	elems = document.querySelectorAll("section.vertical > section, section.vertical > .hpane");
	for( var i = 0 ; i < elems.length; i++ ) {
		var elem = elems[i];
		var parentW = elem.parentElem.innerWidth;
		var curW = elem.innerWidth;
		var flex = 100 * curH / parentH;
		elem.style["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);
		}
			
	}
	
}
	

window.onload = function() {
	startHLayoutEvents();
	
};