Layout Manager

by Nick Karnik

HTML

<div id=left>LEFT</div>
<div id=leftsplitter></div>
<div id=content></div>
<div id=rightsplitter></div>
<div id=right>RIGHT</div>
<div id=top>TOP</div>
<div id=topsplitter>TTTT</div>
<div id=bottom>BOTTOM</div>

CSS

html, body {
    margin:0;
    height:100%;
    padding: 0px;
    background-color: gray;
    bottom: 0;
}

#left {
    right: 80%;
    left: 0;
    top: 100px;
    bottom:0;
    background-color: lightblue;
    position:absolute;
}

#content {
    left: 20%;
    right: 20%;
    top:100px;
    bottom: 0;
    background-color: wheat;
    height:100%;
    position:absolute;
}
#right {
    top:100px;
    right: 0px;
    left:80%;
    bottom:100px;
    background-color: lightgray;
    position:absolute;
    bottom: 0;
}
#top {
    width:100%;
    top: 0;
    left: 0;
    right: 20%;
    background-color: coral;
    height:100px;
    position:absolute;
}
#bottom {
    right: 0;
    background-color: lightgreen;
    height:100px;
    position:absolute;
    bottom: 0;
    left: 0;
}

JavaScript

function createSplitter(leftElement, rightElement, splitter, orientation, collapseDirection, options) {

    var bounds = leftElement.getClientRects()[0];

    if (orientation == 'vertical') {

        options.splitter = options.splitter | {};

        splitter.style.top = (options.splitter.top | bounds.top) + "px";

        splitter.style.bottom = (bounds.bottom - bounds.height) + "px";

        splitter.style.left = bounds.right + "px";
        splitter.style.width = '4px';
        splitter.style.zIndex = 999999;
        splitter.style.position = 'absolute';
        splitter.style.background = 'linear-gradient(to right, #21374c 0%,#004966 30%,#21374c 100%)';

        var clicked = false;
        var expandLocation = '20%';
        var e1Left = leftElement.clientLeft;
        var e2Left = rightElement.clientLeft;

        splitter.onmouseover = function () {
            splitter.style.cursor = 'col-resize';
        };

        splitter.onmousedown = function () {
            document.body.style.cursor = 'col-resize';
            clicked = true;
        };

        splitter.ondblclick = function () {

            if (collapseDirection == 'left') {
                if (splitter.style.left == '0px') {
                    leftElement.style.right = expandLocation;
                    splitter.style.left = expandLocation;
                    rightElement.style.left = expandLocation;

                    leftElement.style.visibility = 'visible';
                } else {
                    expandLocation = splitter.style.left;
                    e1Left = leftElement.clientLeft;
                    e2Left = rightElement.clientLeft;

                    splitter.style.left = '0px';
                    rightElement.style.left = 0;

                    leftElement.style.visibility = 'hidden';
                }
            } else if (collapseDirection == 'right') {
                if (splitter.style.right == '0px') {
                    leftElement.style.right =...