splitter.min.js

"undefined"==typeof Array.prototype.forEach&&(Array.prototype.forEach=function(a){for(var b=0;b<this.length;b++)a.apply(this,[this[b],b,this])});function NodeListAsArray(a){for(var b=[],c=-1,d=a.length>>>0;++c!==d;b[c]=a[c]);return b}function addEvent(a,b,c){a.addEventListener?a.addEventListener(b,c):a.attachEvent("on"+b,c)}HTMLCollection.prototype.filterByTagName=function(a){var b=[];a=a.toLowerCase();for(var c=0;c<this.length;c++)this.item(c).tagName.toLowerCase()==a&&b.push(this.item(c));return b};
Element.prototype.hasClass=function(a){return this.classList?this.classList.contains(a):RegExp("(^| )"+a+"( |$)","gi").test(this.className)};Element.prototype.css=function(a){if("undefined"==typeof a.css){var b=this;a.css=function(a){return b.css(a)}}for(var c in a)"css"!=c&&(this.style[c]=a[c]);return a};
var splitMe={currentElement:null,crutch:null,resizes:[],up:function(a){splitMe.currentElement&&(splitMe.currentElement.splitter.className=splitMe.currentElement.vertical?"divider_vertical":"divider_horizontal",splitMe.currentElement=null)},move:function(a){if(splitMe.currentElement){var b=splitMe.currentElement.vertical,c=b?splitMe.currentElement.splitter.offsetWidth:splitMe.currentElement.splitter.offsetHeight,d=b?splitMe.currentElement.clientWidth:splitMe.currentElement.clientHeight,b=(b?a.clientX:
a.clientY)-splitMe.currentElement.getBoundingClientRect()[b?"left":"top"]-c/2;splitMe.currentElement.percent=(0>b?0:b>d-c?d-c:b)/d*100;splitMe.update(splitMe.currentElement);a&&a.preventDefault();return!1}},update:function(a){var b=a.vertical?a.clientWidth:a.clientHeight,c=a.percent/100*b,d=(c+(a.vertical?a.splitter.offsetWidth:a.splitter.offsetHeight))/b*100+"%";console.log(c);b=(b-c)/b*100+"%";a.splitter.style[a.vertical?"left":"top"]=a.percent+"%";a.vertical?(a.b.css({left:d,right:0,top:0,bottom:0}),
a.a.css({right:b,left:0,top:0,bottom:0})):(a.b.css({top:d,bottom:0,left:0,right:0}),a.a.css({bottom:b,top:0,left:0,right:0}))},init:function(){splitMe.resizes=NodeListAsArray(document.querySelectorAll(".vertically_divided")).concat(NodeListAsArray(document.querySelectorAll(".horizontally_divided")));splitMe.resizes.forEach(function(a){var b=a.hasClass("vertically_divided");a.vertical=b;var c=a.children.filterByTagName("div"),d=c[0],c=c[1];c.css(d.css({position:"absolute",overflow:"hidden",top:0,bottom:0,
left:0})).css({right:0});a.css({overflow:"hidden",position:"absolute"==a.style.position?"absolute":"relative"});b?(d.style.bottom="0",c.style.top="0"):(d.style.right="0",c.style.left="0");a.a=d;a.b=c;a.percent=50;d=document.createElement("div");d.className=b?"divider_vertical":"divider_horizontal";d.style.cssText=b?"top:0;bottom:0;position:absolute;":"left:0;right:0;position:absolute;";d.onmousedown=function(b){a.splitter.className+=" dragged";splitMe.currentElement=a;b&&b.preventDefault();return!1};
a.splitter=d;a.appendChild(d);splitMe.update(a)});addEvent(document,"mousemove",splitMe.move);addEvent(document,"mouseup",splitMe.up);addEvent(window,"resize",function(){setTimeout(function(){for(var a in splitMe.resizes)splitMe.update(splitMe.resizes[a])},20)})}};addEvent(window,"load",function(){splitMe.init()});