AlloyUI - Resizable panels in AlloyUI - FULL WIDTH

http://stackoverflow.com/questions/25900012/resizable-panels-in-alloyui

by katalin_2003

HTML

<!--<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>-->
<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<div id="mainLayout">
    <div id="rightPanel">
        <div id="graph">
          <span class="whiteText">graph</span>
        </div>
        <div id="details">
          <span class="whiteText">details</span>
        </div>
    </div>
    <div id="filter">
      <span class="whiteText">filter</span>
    </div>
</div>

CSS

body {
  font-family: sans-serif;
}
#mainLayout {
    position: absolute;
    height: 300px;
    width: 100%;
}
#rightPanel {
    position: absolute;
    right: 0;
    height: 300px;
    width: 50%;
}
#graph {
    position: absolute;
    height: 200px;
    width: 100%;
    background: orange;
}
#details {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: navy;
}
#filter {
    position: absolute;
    left: 0;
    height: 100%;
    width: 50%;
    background: darkcyan;
}

.whiteText {
  color: #FFFFFF;
}

JavaScript

YUI().use('resize-constrain', 'resize-plugin', 'node', function (Y) {

    var graphNode = Y.one('#graph');
    var detailsNode = Y.one('#details');

    graphNode.plug(Y.Plugin.Resize, {
        handles: ['b']
    });

    graphNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#rightPanel'
    });

    graphNode.resize.on('resize:resize', function (event) {
        var graphHeight = parseInt(graphNode.getStyle('height'), 10);
        detailsNode.setStyle('height', (300 - graphHeight) + 'px');
    });

    var filterNode = Y.one('#filter');
    var rightPanelNode = Y.one('#rightPanel');

    filterNode.plug(Y.Plugin.Resize, {
        handles: ['r']
    });

    filterNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#mainLayout'
    });

    filterNode.resize.on('resize:resize', function (event) {
        var filterWidth = parseInt(filterNode.getStyle('width'), 10);
        var Wwidth = window.innerWidth;
        var rightPanelResizedWidth = (Wwidth - filterWidth) + 'px';
        rightPanelNode.setStyle('width', rightPanelResizedWidth);
        // YUI sets the height using the `style` attribute, so it must be overwritten using `setStyle()` becuase the CSS has been overriden.
        graphNode.setStyle('width', rightPanelResizedWidth);
        console.log(filterWidth);
    });
});