Floatable and stickable LayoutRegion

[mbarto]

I extended LayoutRegion to implement these 2 behaviours:
1) have a floatable but not collapsible region ({floatable: true,collapsible:false} in config).
2) have a floatable and stickable region: you can make the region sticky through a new toolbutton ({collapsible:false,floatable:true, stickable:true} in config.

This is the code:


YAHOO.ext.LayoutRegion.prototype.stickClick = function(){
this.config.autoHide=!this.config.autoHide;
if(this.slideEl) {
this.slideEl.removeAllListeners();
if(this.config.autoHide) {
var slideInTask = new YAHOO.ext.util.DelayedTask(this.slideIn, this);
this.slideEl.mon('mouseout', function(e){
var to = e.getRelatedTarget();
if(to && to != this.slideEl.dom && !YAHOO.util.Dom.isAncestor(this.slideEl.dom, to)){
slideInTask.delay(500);
}
}, this, true);
this.slideEl.mon('mouseover', function(e){
slideInTask.cancel();
}, this, true);
}

}
var stickEl=getEl(this.stickBtn.dom.firstChild);
if(!this.config.autoHide) {

stickEl.removeClass('ylayout-stick-'+this.position);
stickEl.addClass('ylayout-sticked-'+this.position);
} else {
stickEl.removeClass('ylayout-sticked-'+this.position);
stickEl.addClass('ylayout-stick-'+this.position);
}

};

YAHOO.ext.LayoutRegion.prototype.applyConfig = function(config){
this.stick=false;
if(config.collapsible && this.position != 'center' && !this.collapsedEl){
var dh = YAHOO.ext.DomHelper;
this.collapseBtn = this.createTool(this.tools.dom, 'ylayout-collapse-'+this.position);
this.collapseBtn.mon('click', this.collapse, this, true);

this.collapsedEl = dh.append(this.mgr.el.dom, {tag: 'div', cls: 'ylayout-collapsed ylayout-collapsed-'+this.position, children:[
{tag: 'div', cls: 'ylayout-collapsed-tools'}
]}, true);
if(config.floatable !== false){
this.collapsedEl.addClassOnOver('ylayout-collapsed-over');
this.collapsedEl.mon('click', this.collapseClick, this, true);
}
this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild, 'ylayout-expand-'+this.position);
this.expandBtn.mon('click', this.expand, this, true);
} else if(config.floatable !== false) {
var dh = YAHOO.ext.DomHelper;
this.collapseBtn = this.createTool(this.tools.dom, 'ylayout-collapse-'+this.position);
this.collapseBtn.mon('click', this.collapse, this, true);

this.collapsedEl = dh.append(this.mgr.el.dom, {tag: 'div', cls: 'ylayout-collapsed ylayout-collapsed-'+this.position, children:[
{tag: 'div', cls: 'ylayout-collapsed-tools'}
]}, true);

this.collapsedEl.addClassOnOver('ylayout-collapsed-over');
this.collapsedEl.mon('click', this.collapseClick, this, true);

if(config.stickable) {
if(config.autoHide!==false) {
config.autoHide=true;
this.stickBtn = this.createTool(this.tools.dom, 'ylayout-stick-'+this.position);
} else
this.stickBtn = this.createTool(this.tools.dom, 'ylayout-sticked-'+this.position);

this.stickBtn.mon('click', this.stickClick, this, true);
}

}
if(this.collapseBtn){
this.collapseBtn.setVisible(config.collapsible == true);
}
this.cmargins = config.cmargins || this.cmargins ||
(this.position == 'west' || this.position == 'east' ?
{top: 0, left: 2, right:2, bottom: 0} :
{top: 2, left: 0, right:0, bottom: 2});
this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
this.bottomTabs = config.tabPosition != 'top';
this.autoScroll = config.autoScroll || false;
if(this.autoScroll){
this.bodyEl.setStyle('overflow', 'auto');
}else{
this.bodyEl.setStyle('overflow', 'hidden');
}
if((!config.titlebar && !config.title) || config.titlebar === false){
this.titleEl.hide();
}else{
this.titleEl.show();
if(config.title){
this.titleTextEl.innerHTML = config.title;
}
}
this.duration = config.duration || .30;
this.slideDuration = config.slideDuration || .45;
this.config = config;
if(config.collapsed){
this.collapse(true);
}
};


You need to add these classes in css (I used west region as an example):


.ylayout-stick-west{
background: transparent url(stick.gif) no-repeat;
}

.ylayout-sticked-west{
background: transparent url(sticked.gif) no-repeat;
}


These are the images I used for the stick buttons:

http://www.infosia.it/test/stick.gif
http://www.infosia.it/test/sticked.gif

[Animal]

Can we see a demo please?

[sjivan]

Jack, would you be able to host demo apps from users? It seems that many users have developed stuff but may not have access to a internet accessible site to host thier demos and hence just post code here. Seeing a demo is always nicer :)

[jack.slocum]

Of course. I will put it up if anyone sends me a complete working archive. :)

[mbarto]

I uploaded a simple demo at http://www.infosia.it/test/.

Click on the west region collapsed bar and the region will be floated, then click on the stick-unstick button on the titlebar to block-unblock the floated region.

[brian.moeskau]

So the intention is to stick the panel over the center region without resizing the center region? What's the purpose of sticking the panel so that it obscures the main content? Or am I missing something? I do kind of like the little sticky icon being directly on the panel header, but I would still expect the behavior to be like what's already in BorderLayout when you stick a panel.

[mbarto]

The purpose was to have a floatable region (one that doesn't resize the center panel but floats over it) without the need to make it expandable too. The stick button is useful to allow the user to enable/disable the autohiding feature (config.autoHide option) on demand.

It's certainly possible to change the stick button behaviour to achieve what you say (resize the main panel) but it was not my purpose :)

[Animal]

It's a nifty piece of code/CSS/image work, and it works well.

I don't know if it would add much extra usability if added to the base lib. As far as I can see it's just a way of sticking the sliding "preview" pane to get a better look at it without resizing the center pane.

Not a major saving over expanding the pane to take a look at it, and then collapsing it again.

But Thanks for sharing, it could be just what some people need.

Perhaps there could be a repository of these extras which are not part of the base Ext library, but may be downloaded. Things which have been examined by the Ext "community", and seen to be well written, bug free, and useful.

[jgarcia@tdg-i.com]

i can't see it working in FF 1.5.0.9

[mbarto]

I tried it in Firefox 1.5.0.9 on Windows 2000 and it works well. Which OS are you using?