Learning Y.Resize
CSS
.yui3-widget-bd {
background-color: #eee;
}
JavaScript
YUI().use('resize-plugin', 'resize-constrain', 'dd-plugin', 'panel', function (Y) {
var panel, panelBody, panelHeader, panelNode, heightOffset;
function getNodeRect(node) {
return node ? node.getDOMNode().getBoundingClientRect() : {width: 0, height: 0};
}
Y.one('body').addClass('yui3-skin-sam');
panel = new Y.Panel({
bodyContent: 'Yaba Daba Doo',
headerContent: 'Hello',
modal: false,
zIndex: 100,
hideOn: [],
plugins: [Y.Plugin.Drag],
render: Y.Node.create('<div id="hello"/>'),
buttons: ['close'],
centered : true
});
panel.dd.addHandle('.yui3-widget-hd');
panel.plug(Y.Plugin.Resize, {handles: 't, b'});
panelBody = panel.getStdModNode('body'),
panelHeader = panel.getStdModNode('header');
panelNode = panel.get('boundingBox');
Y.on('available', function () {
var boundingRect = getNodeRect(panelNode),
normalWidth = boundingRect.width,
normal = true;
panel.resize.plug(Y.Plugin.ResizeConstrained, {
minHeight: boundingRect.height
});
panelHeader.on('dblclick', function (){
panelBody.toggleView();
normal = !normal;
if (normal) {
panelBody.set('width', normalWidth);
}
});
}, '#hello', 'body');
Y.one('body').append(panel.get('render'));
panel.show();
});