SplitLayoutRegion.js
/**
* @class YAHOO.ext.SplitLayoutRegion
* @extends YAHOO.ext.LayoutRegion
* Adds a splitbar and other (private) useful functionality to a LayoutRegion
*/
YAHOO.ext.SplitLayoutRegion = function(mgr, config, pos, cursor){
this.cursor = cursor;
YAHOO.ext.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
if(config.split){
this.hide();
}
};
YAHOO.extendX(YAHOO.ext.SplitLayoutRegion, YAHOO.ext.LayoutRegion, {
applyConfig : function(config){
YAHOO.ext.SplitLayoutRegion.superclass.applyConfig.call(this, config);
if(config.split){
if(!this.split){
var splitEl = YAHOO.ext.DomHelper.append(this.mgr.el.dom,
{tag: 'div', id: this.el.id + '-split', cls: 'ylayout-split ylayout-split-'+this.position, html: ' '});
/** The SplitBar for this region @type YAHOO.ext.SplitBar */
this.split = new YAHOO.ext.SplitBar(splitEl, this.el);
this.split.onMoved.subscribe(this.onSplitMove, this, true);
this.split.useShim = config.useShim === true;
YAHOO.util.Dom.setStyle([this.split.el.dom, this.split.proxy], 'cursor', this.cursor);
this.split.getMaximumSize = this.getMaxSize.createDelegate(this);
}
if(typeof config.minSize != 'undefined'){
this.split.minSize = config.minSize;
}
if(typeof config.maxSize != 'undefined'){
this.split.maxSize = config.maxSize;
}
}
},
getMaxSize : function(){
var cmax = this.config.maxSize || 10000;
var center = this.mgr.getRegion('center');
return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
},
onSplitMove : function(split, newSize){
this.fireEvent('resized', this, newSize);
},
/**
* Returns the SplitBar for this region.
* @return {YAHOO.ext.SplitBar}
*/
getSplitBar : function(){
return this.split;
},
hide : function(){
if(this.split){
this.split.el.setLocation(-2000,-2000);
this.split.el.hide();
}
YAHOO.ext.SplitLayoutRegion.superclass.hide.call(this);
},
show : function(){
if(this.split){
this.split.el.show();
}
YAHOO.ext.SplitLayoutRegion.superclass.show.call(this);
},
beforeSlide: function(){
if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
this.bodyEl.clip();
if(this.tabs) this.tabs.bodyEl.clip();
if(this.activePanel){
this.activePanel.getEl().clip();
if(this.activePanel.beforeSlide){
this.activePanel.beforeSlide();
}
}
}
},
afterSlide : function(){
if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
this.bodyEl.unclip();
if(this.tabs) this.tabs.bodyEl.unclip();
if(this.activePanel){
this.activePanel.getEl().unclip();
if(this.activePanel.afterSlide){
this.activePanel.afterSlide();
}
}
}
},
slideOut : function(){
if(!this.slideEl){
this.slideEl = new YAHOO.ext.Actor(
YAHOO.ext.DomHelper.append(this.mgr.el.dom, {tag: 'div', cls:'ylayout-slider'}));
if(this.config.autoHide !== false){
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 sl = this.slideEl, c = this.collapsedEl, cm = this.cmargins;
this.isSlid = true;
this.snapshot = {
'left': this.el.getLeft(true),
'top': this.el.getTop(true),
'colbtn': this.collapseBtn.isVisible(),
'closebtn': this.closeBtn.isVisible()
};
this.collapseBtn.hide();
this.closeBtn.hide();
this.el.show();
this.el.setLeftTop(0,0);
sl.startCapture(true);
var size;
switch(this.position){
case 'west':
sl.setLeft(c.getRight(true));
sl.setTop(c.getTop(true));
size = this.el.getWidth();
break;
case 'east':
sl.setRight(this.mgr.getViewSize().width-c.getLeft(true));
sl.setTop(c.getTop(true));
size = this.el.getWidth();
break;
case 'north':
sl.setLeft(c.getLeft(true));
sl.setTop(c.getBottom(true));
size = this.el.getHeight();
break;
case 'south':
sl.setLeft(c.getLeft(true));
sl.setBottom(this.mgr.getViewSize().height-c.getTop(true));
size = this.el.getHeight();
break;
}
sl.dom.appendChild(this.el.dom);
YAHOO.util.Event.on(document.body, 'click', this.slideInIf, this, true);
sl.setSize(this.el.getWidth(), this.el.getHeight());
this.beforeSlide();
if(this.activePanel){
this.activePanel.setSize(this.bodyEl.getWidth(), this.bodyEl.getHeight());
}
sl.slideShow(this.getAnchor(), size, this.slideDuration, null, false);
sl.play(function(){
this.afterSlide();
}.createDelegate(this));
},
slideInIf : function(e){
var t = YAHOO.util.Event.getTarget(e);
if(!YAHOO.util.Dom.isAncestor(this.el.dom, t)){
this.slideIn();
}
},
slideIn : function(callback){
if(this.isSlid && !this.slideEl.playlist.isPlaying()){
YAHOO.util.Event.removeListener(document.body, 'click', this.slideInIf, this, true);
this.slideEl.startCapture(true);
this.slideEl.slideHide(this.getAnchor(), this.slideDuration, null);
this.beforeSlide();
this.slideEl.play(function(){
this.isSlid = false;
this.el.setPositioning(this.snapshot);
this.collapseBtn.setVisible(this.snapshot.colbtn);
this.closeBtn.setVisible(this.snapshot.closebtn);
this.afterSlide();
this.mgr.el.dom.appendChild(this.el.dom);
if(typeof callback == 'function'){
callback();
}
}.createDelegate(this));
}
},
animateExpand : function(){
var em = this.margins, cm = this.cmargins;
var c = this.collapsedEl, el = this.el;
var direction, distance;
switch(this.position){
case 'west':
direction = 'right';
el.setLeft(-(el.getWidth() + (em.right+em.left)));
el.setTop(c.getTop(true)-cm.top+em.top);
distance = el.getWidth() + (em.right+em.left);
break;
case 'east':
direction = 'left';
el.setLeft(this.mgr.getViewSize().width + em.left);
el.setTop(c.getTop(true)-cm.top+em.top);
distance = el.getWidth() + (em.right+em.left);
break;
case 'north':
direction = 'down';
el.setLeft(em.left);
el.setTop(-(el.getHeight() + (em.top+em.bottom)));
distance = el.getHeight() + (em.top+em.bottom);
break;
case 'south':
direction = 'up';
el.setLeft(em.left);
el.setTop(this.mgr.getViewSize().height + em.top);
distance = el.getHeight() + (em.top+em.bottom);
break;
}
this.beforeSlide();
el.setStyle('z-index', '100');
el.show();
c.setLocation(-2000,-2000);
c.hide();
el.move(direction, distance, true, this.duration, function(){
this.afterSlide();
el.setStyle('z-index', '');
if(this.split){
this.split.el.show();
}
this.fireEvent('invalidated', this);
this.fireEvent('expanded', this);
}.createDelegate(this), this.config.easing || YAHOO.util.Easing.easeOut);
},
animateCollapse : function(){
var em = this.margins, cm = this.cmargins;
var c = this.collapsedEl, el = this.el;
var direction, distance;
switch(this.position){
case 'west':
direction = 'left';
distance = el.getWidth() + (em.right+em.left);
break;
case 'east':
direction = 'right';
distance = el.getWidth() + (em.right+em.left);
break;
case 'north':
direction = 'up';
distance = el.getHeight() + (em.top+em.bottom);
break;
case 'south':
direction = 'down';
distance = el.getHeight() + (em.top+em.bottom);
break;
}
this.el.setStyle('z-index', '100');
this.beforeSlide();
this.el.move(direction, distance, true, this.duration, function(){
this.afterSlide();
this.el.setStyle('z-index', '');
this.el.setLocation(-20000,-20000);
this.el.hide();
this.collapsedEl.show();
this.fireEvent('collapsed', this);
}.createDelegate(this), YAHOO.util.Easing.easeIn);
},
getAnchor : function(){
switch(this.position){
case 'west':
return 'left';
case 'east':
return 'right';
case 'north':
return 'top';
case 'south':
return 'bottom';
}
}
});
yui-ext - Copyright © 2006 Jack Slocum. |
Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.