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 = $('').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 = $("
").prependTo($parent); } else { $section = $("
").appendTo($parent); } $sib.detach(); what.css('flex-basis','33%'); $sib.css('flex-basis','66%'); if(attach < 3) { $section.append(what); //$section.append("
"); $section.append($sib); } else { $section.append($sib); //$section.append("
"); $section.append(what); } } } window.onload = function() { startHLayoutEvents(); };