1
0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-25 01:37:34 +02:00

First version of the newly restructured repository

This commit is contained in:
Giulio Cesare Solaroli
2011-10-03 00:56:18 +01:00
parent 597ecfbc02
commit ef68436ac0
729 changed files with 232898 additions and 0 deletions

View File

@@ -0,0 +1,265 @@
/**
* @class YAHOO.ext.BasicLayoutRegion
* @extends YAHOO.ext.util.Observable
* This class represents a lightweight region in a layout manager. This region does not move dom nodes
* and does not have a titlebar, tabs or any other features. All it does is size and position
* panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
*/
YAHOO.ext.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
this.mgr = mgr;
this.position = pos;
this.events = {
/**
* @event beforeremove
* Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
* @param {YAHOO.ext.LayoutRegion} this
* @param {YAHOO.ext.ContentPanel} panel The panel
* @param {Object} e The cancel event object
*/
'beforeremove' : true,
/**
* @event invalidated
* Fires when the layout for this region is changed.
* @param {YAHOO.ext.LayoutRegion} this
*/
'invalidated' : true,
/**
* @event visibilitychange
* Fires when this region is shown or hidden
* @param {YAHOO.ext.LayoutRegion} this
* @param {Boolean} visibility true or false
*/
'visibilitychange' : true,
/**
* @event paneladded
* Fires when a panel is added.
* @param {YAHOO.ext.LayoutRegion} this
* @param {YAHOO.ext.ContentPanel} panel The panel
*/
'paneladded' : true,
/**
* @event panelremoved
* Fires when a panel is removed.
* @param {YAHOO.ext.LayoutRegion} this
* @param {YAHOO.ext.ContentPanel} panel The panel
*/
'panelremoved' : true,
/**
* @event collapsed
* Fires when this region is collapsed.
* @param {YAHOO.ext.LayoutRegion} this
*/
'collapsed' : true,
/**
* @event expanded
* Fires when this region is expanded.
* @param {YAHOO.ext.LayoutRegion} this
*/
'expanded' : true,
/**
* @event panelactivated
* Fires when a panel is activated.
* @param {YAHOO.ext.LayoutRegion} this
* @param {YAHOO.ext.ContentPanel} panel The activated panel
*/
'panelactivated' : true,
/**
* @event resized
* Fires when the user resizes this region.
* @param {YAHOO.ext.LayoutRegion} this
* @param {Number} newSize The new size (width for east/west, height for north/south)
*/
'resized' : true
};
/** A collection of panels in this region. @type YAHOO.ext.util.MixedCollection */
this.panels = new YAHOO.ext.util.MixedCollection();
this.panels.getKey = this.getPanelId.createDelegate(this);
this.box = null;
this.activePanel = null;
if(skipConfig !== true){
this.applyConfig(config);
}
};
YAHOO.extendX(YAHOO.ext.BasicLayoutRegion, YAHOO.ext.util.Observable, {
getPanelId : function(p){
return p.getId();
},
applyConfig : function(config){
this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
this.config = config;
},
/**
* Resizes the region to the specified size. For vertical regions (west, east) this adjusts
* the width, for horizontal (north, south) the height.
* @param {Number} newSize The new width or height
*/
resizeTo : function(newSize){
if(this.activePanel){
var el = this.activePanel.getEl();
switch(this.position){
case 'east':
case 'west':
el.setWidth(newSize);
this.fireEvent('resized', this, newSize);
break;
case 'north':
case 'south':
el.setHeight(newSize);
this.fireEvent('resized', this, newSize);
break;
}
}
},
getBox : function(){
return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
},
getMargins : function(){
return this.margins;
},
updateBox : function(box){
this.box = box;
var el = this.activePanel.getEl();
el.dom.style.left = box.x + 'px';
el.dom.style.top = box.y + 'px';
el.setSize(box.width, box.height);
},
/**
* Returns the container element for this region.
* @return {YAHOO.ext.Element}
*/
getEl : function(){
return this.activePanel;
},
/**
* Returns true if this region is currently visible.
* @return {Boolean}
*/
isVisible : function(){
return this.activePanel ? true : false;
},
setActivePanel : function(panel){
panel = this.getPanel(panel);
if(this.activePanel && this.activePanel != panel){
this.activePanel.setActiveState(false);
this.activePanel.getEl().setStyle({left:-10000,right:-10000});
}
this.activePanel = panel;
panel.setActiveState(true);
if(this.box){
panel.setSize(this.box.width, this.box.height);
}
this.fireEvent('panelactivated', this, panel);
this.fireEvent('invalidated');
},
/**
* Show the specified panel.
* @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
* @return {YAHOO.ext.ContentPanel} The shown panel or null
*/
showPanel : function(panel){
if(panel = this.getPanel(panel)){
this.setActivePanel(panel);
}
return panel;
},
/**
* Get the active panel for this region.
* @return {YAHOO.ext.ContentPanel} The active panel or null
*/
getActivePanel : function(){
return this.activePanel;
},
/**
* Add the passed ContentPanel(s)
* @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
* @return {YAHOO.ext.ContentPanel} The panel added (if only one was added)
*/
add : function(panel){
if(arguments.length > 1){
for(var i = 0, len = arguments.length; i < len; i++) {
this.add(arguments[i]);
}
return null;
}
if(this.hasPanel(panel)){
this.showPanel(panel);
return panel;
}
panel.setRegion(this);
this.panels.add(panel);
panel.getEl().setStyle('position', 'absolute');
if(!panel.background){
this.setActivePanel(panel);
if(this.config.initialSize && this.panels.getCount()==1){
this.resizeTo(this.config.initialSize);
}
}
this.fireEvent('paneladded', this, panel);
return panel;
},
/**
* Returns true if the panel is in this region.
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
* @return {Boolean}
*/
hasPanel : function(panel){
if(typeof panel == 'object'){ // must be panel obj
panel = panel.getId();
}
return this.getPanel(panel) ? true : false;
},
/**
* Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
* @param {Boolean} preservePanel Overrides the config preservePanel option
* @return {YAHOO.ext.ContentPanel} The panel that was removed
*/
remove : function(panel, preservePanel){
panel = this.getPanel(panel);
if(!panel){
return null;
}
var e = {};
this.fireEvent('beforeremove', this, panel, e);
if(e.cancel === true){
return null;
}
var panelId = panel.getId();
this.panels.removeKey(panelId);
return panel;
},
/**
* Returns the panel specified or null if it's not in this region.
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
* @return {YAHOO.ext.ContentPanel}
*/
getPanel : function(id){
if(typeof id == 'object'){ // must be panel obj
return id;
}
return this.panels.get(id);
},
/**
* Returns this regions position (north/south/east/west/center).
* @return {String}
*/
getPosition: function(){
return this.position;
}
});

View File

@@ -0,0 +1,281 @@
/**
* @class YAHOO.ext.BorderLayout
* @extends YAHOO.ext.LayoutManager
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
* please see: <br><br>
* <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
* <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
* Example:
<pre><code>
var layout = new YAHOO.ext.BorderLayout(document.body, {
north: {
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true
},
center: {
titlebar: true,
autoScroll:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150
}
});
// shorthand
var CP = YAHOO.ext.ContentPanel;
layout.beginUpdate();
layout.add('north', new CP('north', 'North'));
layout.add('south', new CP('south', {title: 'South', closable: true}));
layout.add('west', new CP('west', {title: 'West'}));
layout.add('east', new CP('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('center', new CP('center1', {title: 'Close Me', closable: true}));
layout.add('center', new CP('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.endUpdate();
</code></pre>
* @constructor
* Create a new BorderLayout
* @param {String/HTMLElement/Element} container The container this layout is bound to
* @param {Object} config Configuration options
*/
YAHOO.ext.BorderLayout = function(container, config){
config = config || {};
YAHOO.ext.BorderLayout.superclass.constructor.call(this, container);
this.factory = config.factory || YAHOO.ext.BorderLayout.RegionFactory;
/**
* True to hide the center panel while performing layouts. This helps when the center region contains
* heavy components such as a yui-ext grid.
* @type Boolean
*/
this.hideOnLayout = config.hideOnLayout || false;
for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
var target = this.factory.validRegions[i];
if(config[target]){
this.addRegion(target, config[target]);
}
}
//this.dragOverDelegate = YAHOO.ext.EventManager.wrap(this.onDragOver, this, true);
};
YAHOO.extendX(YAHOO.ext.BorderLayout, YAHOO.ext.LayoutManager, {
/**
* Creates and adds a new region if it doesn't already exist.
* @param {String} target The target region key (north, south, east, west or center).
* @param {Object} config The regions config object
* @return {BorderLayoutRegion} The new region
*/
addRegion : function(target, config){
if(!this.regions[target]){
var r = this.factory.create(target, this, config);
this.regions[target] = r;
r.on('visibilitychange', this.layout, this, true);
r.on('paneladded', this.layout, this, true);
r.on('panelremoved', this.layout, this, true);
r.on('invalidated', this.layout, this, true);
r.on('resized', this.onRegionResized, this, true);
r.on('collapsed', this.onRegionCollapsed, this, true);
r.on('expanded', this.onRegionExpanded, this, true);
}
return this.regions[target];
},
/**
* Performs a layout update.
*/
layout : function(){
if(this.updating) return;
//var bench = new YAHOO.ext.util.Bench();
//bench.start('Layout...');
var size = this.getViewSize();
var w = size.width, h = size.height;
var centerW = w, centerH = h, centerY = 0, centerX = 0;
var x = 0, y = 0;
var rs = this.regions;
var n = rs['north'], s = rs['south'], west = rs['west'], e = rs['east'], c = rs['center'];
if(this.hideOnLayout){
c.el.setStyle('display', 'none');
}
if(n && n.isVisible()){
var b = n.getBox();
var m = n.getMargins();
b.width = w - (m.left+m.right);
b.x = m.left;
b.y = m.top;
centerY = b.height + b.y + m.bottom;
centerH -= centerY;
n.updateBox(this.safeBox(b));
}
if(s && s.isVisible()){
var b = s.getBox();
var m = s.getMargins();
b.width = w - (m.left+m.right);
b.x = m.left;
var totalHeight = (b.height + m.top + m.bottom);
b.y = h - totalHeight + m.top;
centerH -= totalHeight;
s.updateBox(this.safeBox(b));
}
if(west && west.isVisible()){
var b = west.getBox();
var m = west.getMargins();
b.height = centerH - (m.top+m.bottom);
b.x = m.left;
b.y = centerY + m.top;
var totalWidth = (b.width + m.left + m.right);
centerX += totalWidth;
centerW -= totalWidth;
west.updateBox(this.safeBox(b));
}
if(e && e.isVisible()){
var b = e.getBox();
var m = e.getMargins();
b.height = centerH - (m.top+m.bottom);
var totalWidth = (b.width + m.left + m.right);
b.x = w - totalWidth + m.left;
b.y = centerY + m.top;
centerW -= totalWidth;
e.updateBox(this.safeBox(b));
}
if(c){
var m = c.getMargins();
var centerBox = {
x: centerX + m.left,
y: centerY + m.top,
width: centerW - (m.left+m.right),
height: centerH - (m.top+m.bottom)
};
if(this.hideOnLayout){
c.el.setStyle('display', 'block');
}
c.updateBox(this.safeBox(centerBox));
}
this.el.repaint();
this.fireEvent('layout', this);
//bench.stop();
//alert(bench.toString());
},
safeBox : function(box){
box.width = Math.max(0, box.width);
box.height = Math.max(0, box.height);
return box;
},
/**
* Adds a ContentPanel (or subclass) to this layout.
* @param {String} target The target region key (north, south, east, west or center).
* @param {YAHOO.ext.ContentPanel} panel The panel to add
* @return {YAHOO.ext.ContentPanel} The added panel
*/
add : function(target, panel){
target = target.toLowerCase();
return this.regions[target].add(panel);
},
/**
* Adds a ContentPanel (or subclass) to this layout.
* @param {String} target The target region key (north, south, east, west or center).
* @param {Number/String/YAHOO.ext.ContentPanel} panel The index, id or panel to remove
* @return {YAHOO.ext.ContentPanel} The removed panel
*/
remove : function(target, panel){
target = target.toLowerCase();
return this.regions[target].remove(panel);
},
/**
* Searches all regions for a panel with the specified id
* @param {String} panelId
* @return {YAHOO.ext.ContentPanel} The panel or null if it wasn't found
*/
findPanel : function(panelId){
var rs = this.regions;
for(var target in rs){
if(typeof rs[target] != 'function'){
var p = rs[target].getPanel(panelId);
if(p){
return p;
}
}
}
return null;
},
/**
* Searches all regions for a panel with the specified id and activates (shows) it.
* @param {String/ContentPanel} panelId The panels id or the panel itself
* @return {YAHOO.ext.ContentPanel} The shown panel or null
*/
showPanel : function(panelId) {
var rs = this.regions;
for(var target in rs){
var r = rs[target];
if(typeof r != 'function'){
if(r.hasPanel(panelId)){
return r.showPanel(panelId);
}
}
}
return null;
},
/**
* Restores this layouts state using YAHOO.ext.state.Manager or the state provided by the passed provider.
* @param {YAHOO.ext.state.Provider} provider (optional) An alternate state provider
*/
restoreState : function(provider){
if(!provider){
provider = YAHOO.ext.state.Manager;
}
var sm = new YAHOO.ext.LayoutStateManager();
sm.init(this, provider);
}
});
YAHOO.ext.BorderLayout.RegionFactory = {};
YAHOO.ext.BorderLayout.RegionFactory.validRegions = ['north','south','east','west','center'];
YAHOO.ext.BorderLayout.RegionFactory.create = function(target, mgr, config){
target = target.toLowerCase();
if(config.lightweight || config.basic){
return new YAHOO.ext.BasicLayoutRegion(mgr, config, target);
}
switch(target){
case 'north':
return new YAHOO.ext.NorthLayoutRegion(mgr, config);
case 'south':
return new YAHOO.ext.SouthLayoutRegion(mgr, config);
case 'east':
return new YAHOO.ext.EastLayoutRegion(mgr, config);
case 'west':
return new YAHOO.ext.WestLayoutRegion(mgr, config);
case 'center':
return new YAHOO.ext.CenterLayoutRegion(mgr, config);
}
throw 'Layout region "'+target+'" not supported.';
};

View File

@@ -0,0 +1,207 @@
/*
* These classes are private internal classes
*/
YAHOO.ext.CenterLayoutRegion = function(mgr, config){
YAHOO.ext.CenterLayoutRegion.superclass.constructor.call(this, mgr, config, 'center');
this.visible = true;
this.minWidth = config.minWidth || 20;
this.minHeight = config.minHeight || 20;
};
YAHOO.extendX(YAHOO.ext.CenterLayoutRegion, YAHOO.ext.LayoutRegion, {
hide : function(){
// center panel can't be hidden
},
show : function(){
// center panel can't be hidden
},
getMinWidth: function(){
return this.minWidth;
},
getMinHeight: function(){
return this.minHeight;
}
});
YAHOO.ext.NorthLayoutRegion = function(mgr, config){
YAHOO.ext.NorthLayoutRegion.superclass.constructor.call(this, mgr, config, 'north', 'n-resize');
if(this.split){
this.split.placement = YAHOO.ext.SplitBar.TOP;
this.split.orientation = YAHOO.ext.SplitBar.VERTICAL;
this.split.el.addClass('ylayout-split-v');
}
if(typeof config.initialSize != 'undefined'){
this.el.setHeight(config.initialSize);
}
};
YAHOO.extendX(YAHOO.ext.NorthLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
getBox : function(){
if(this.collapsed){
return this.collapsedEl.getBox();
}
var box = this.el.getBox();
if(this.split){
box.height += this.split.el.getHeight();
}
return box;
},
updateBox : function(box){
if(this.split && !this.collapsed){
box.height -= this.split.el.getHeight();
this.split.el.setLeft(box.x);
this.split.el.setTop(box.y+box.height);
this.split.el.setWidth(box.width);
}
if(this.collapsed){
this.el.setWidth(box.width);
var bodyWidth = box.width - this.el.getBorderWidth('rl');
this.bodyEl.setWidth(bodyWidth);
if(this.activePanel && this.panelSize){
this.activePanel.setSize(bodyWidth, this.panelSize.height);
}
}
YAHOO.ext.NorthLayoutRegion.superclass.updateBox.call(this, box);
}
});
YAHOO.ext.SouthLayoutRegion = function(mgr, config){
YAHOO.ext.SouthLayoutRegion.superclass.constructor.call(this, mgr, config, 'south', 's-resize');
if(this.split){
this.split.placement = YAHOO.ext.SplitBar.BOTTOM;
this.split.orientation = YAHOO.ext.SplitBar.VERTICAL;
this.split.el.addClass('ylayout-split-v');
}
if(typeof config.initialSize != 'undefined'){
this.el.setHeight(config.initialSize);
}
};
YAHOO.extendX(YAHOO.ext.SouthLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
getBox : function(){
if(this.collapsed){
return this.collapsedEl.getBox();
}
var box = this.el.getBox();
if(this.split){
var sh = this.split.el.getHeight();
box.height += sh;
box.y -= sh;
}
return box;
},
updateBox : function(box){
if(this.split && !this.collapsed){
var sh = this.split.el.getHeight();
box.height -= sh;
box.y += sh;
this.split.el.setLeft(box.x);
this.split.el.setTop(box.y-sh);
this.split.el.setWidth(box.width);
}
if(this.collapsed){
this.el.setWidth(box.width);
var bodyWidth = box.width - this.el.getBorderWidth('rl');
this.bodyEl.setWidth(bodyWidth);
if(this.activePanel && this.panelSize){
this.activePanel.setSize(bodyWidth, this.panelSize.height);
}
}
YAHOO.ext.SouthLayoutRegion.superclass.updateBox.call(this, box);
}
});
YAHOO.ext.EastLayoutRegion = function(mgr, config){
YAHOO.ext.EastLayoutRegion.superclass.constructor.call(this, mgr, config, 'east', 'e-resize');
if(this.split){
this.split.placement = YAHOO.ext.SplitBar.RIGHT;
this.split.orientation = YAHOO.ext.SplitBar.HORIZONTAL;
this.split.el.addClass('ylayout-split-h');
}
if(typeof config.initialSize != 'undefined'){
this.el.setWidth(config.initialSize);
}
};
YAHOO.extendX(YAHOO.ext.EastLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
getBox : function(){
if(this.collapsed){
return this.collapsedEl.getBox();
}
var box = this.el.getBox();
if(this.split){
var sw = this.split.el.getWidth();
box.width += sw;
box.x -= sw;
}
return box;
},
updateBox : function(box){
if(this.split && !this.collapsed){
var sw = this.split.el.getWidth();
box.width -= sw;
this.split.el.setLeft(box.x);
this.split.el.setTop(box.y);
this.split.el.setHeight(box.height);
box.x += sw;
}
if(this.collapsed){
this.el.setHeight(box.height);
var bodyHeight = this.config.titlebar ? box.height - (this.titleEl.getHeight()||0) : box.height;
bodyHeight -= this.el.getBorderWidth('tb');
this.bodyEl.setHeight(bodyHeight);
if(this.activePanel && this.panelSize){
this.activePanel.setSize(this.panelSize.width, bodyHeight);
}
}
YAHOO.ext.EastLayoutRegion.superclass.updateBox.call(this, box);
}
});
YAHOO.ext.WestLayoutRegion = function(mgr, config){
YAHOO.ext.WestLayoutRegion.superclass.constructor.call(this, mgr, config, 'west', 'w-resize');
if(this.split){
this.split.placement = YAHOO.ext.SplitBar.LEFT;
this.split.orientation = YAHOO.ext.SplitBar.HORIZONTAL;
this.split.el.addClass('ylayout-split-h');
}
if(typeof config.initialSize != 'undefined'){
this.el.setWidth(config.initialSize);
}
};
YAHOO.extendX(YAHOO.ext.WestLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
getBox : function(){
if(this.collapsed){
return this.collapsedEl.getBox();
}
var box = this.el.getBox();
if(this.split){
box.width += this.split.el.getWidth();
}
return box;
},
updateBox : function(box){
if(this.split && !this.collapsed){
var sw = this.split.el.getWidth();
box.width -= sw;
this.split.el.setLeft(box.x+box.width);
this.split.el.setTop(box.y);
this.split.el.setHeight(box.height);
}
if(this.collapsed){
this.el.setHeight(box.height);
var bodyHeight = this.config.titlebar ? box.height - (this.titleEl.getHeight()||0) : box.height;
bodyHeight -= this.el.getBorderWidth('tb');
this.bodyEl.setHeight(bodyHeight);
if(this.activePanel && this.panelSize){
this.activePanel.setSize(this.panelSize.width, bodyHeight);
}
}
YAHOO.ext.WestLayoutRegion.superclass.updateBox.call(this, box);
}
});

View File

@@ -0,0 +1,325 @@
/**
* @class YAHOO.ext.ContentPanel
* @extends YAHOO.ext.util.Observable
* A basic ContentPanel element.
* @cfg {Boolean} fitToFrame True for this panel to manually adjust it's size when the region resizes (defaults to false)
* @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a DomHelper config of the element to create
* @cfg {Boolean} closable True if the panel can be closed/removed
* @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
* @cfg {String/HTMLElement/Element} resizeEl An element to resize if fitToFrame is true (instead of this panel's element)
* @cfg {Toolbar} toolbar A toolbar for this panel
* @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with fitToFrame)
* @cfg {String} title The title for this panel
* @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a fitToFrame (default is [0, 0])
* @constructor
* Create a new ContentPanel.
* @param {String/HTMLElement/Element} el The container element for this panel
* @param {String/Object} config A string to set only the title or a config object
* @param {String} content (optional) Set the HTML content for this panel
*/
YAHOO.ext.ContentPanel = function(el, config, content){
YAHOO.ext.ContentPanel.superclass.constructor.call(this);
this.el = getEl(el, true);
if(!this.el && config && config.autoCreate){
if(typeof config.autoCreate == 'object'){
if(!config.autoCreate.id){
config.autoCreate.id = el;
}
this.el = YAHOO.ext.DomHelper.append(document.body,
config.autoCreate, true);
}else{
this.el = YAHOO.ext.DomHelper.append(document.body,
{tag: 'div', cls: 'ylayout-inactive-content', id: el}, true);
}
}
this.closable = false;
this.loaded = false;
this.active = false;
if(typeof config == 'string'){
this.title = config;
}else{
YAHOO.ext.util.Config.apply(this, config);
}
if(this.resizeEl){
this.resizeEl = getEl(this.resizeEl, true);
}else{
this.resizeEl = this.el;
}
this.events = {
/**
* @event activate
* Fires when this panel is activated.
* @param {YAHOO.ext.ContentPanel} this
*/
'activate' : new YAHOO.util.CustomEvent('activate'),
/**
* @event deactivate
* Fires when this panel is activated.
* @param {YAHOO.ext.ContentPanel} this
*/
'deactivate' : new YAHOO.util.CustomEvent('deactivate')
};
if(this.autoScroll){
this.resizeEl.setStyle('overflow', 'auto');
}
if(content){
this.setContent(content);
}
};
YAHOO.extendX(YAHOO.ext.ContentPanel, YAHOO.ext.util.Observable, {
setRegion : function(region){
this.region = region;
if(region){
this.el.replaceClass('ylayout-inactive-content', 'ylayout-active-content');
}else{
this.el.replaceClass('ylayout-active-content', 'ylayout-inactive-content');
}
},
/**
* Returns the toolbar for this Panel if one was configured
* @return {YAHOO.ext.Toolbar}
*/
getToolbar : function(){
return this.toolbar;
},
setActiveState : function(active){
this.active = active;
if(!active){
this.fireEvent('deactivate', this);
}else{
this.fireEvent('activate', this);
}
},
/**
* Updates this panel's element
* @param {String} content The new content
* @param {<i>Boolean</i>} loadScripts (optional) true to look for and process scripts
*/
setContent : function(content, loadScripts){
this.el.update(content, loadScripts);
},
/**
* Get the {@link YAHOO.ext.UpdateManager} for this panel. Enables you to perform Ajax updates.
* @return {YAHOO.ext.UpdateManager} The UpdateManager
*/
getUpdateManager : function(){
return this.el.getUpdateManager();
},
/**
* Set a URL to be used to load the content for this panel.
* @param {String/Function} url The url to load the content from or a function to call to get the url
* @param {<i>String/Object</i>} params (optional) The string params for the update call or an object of the params. See {@link YAHOO.ext.UpdateManager#update} for more details. (Defaults to null)
* @param {<i>Boolean</i>} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
* @return {YAHOO.ext.UpdateManager} The UpdateManager
*/
setUrl : function(url, params, loadOnce){
if(this.refreshDelegate){
this.removeListener('activate', this.refreshDelegate);
}
this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
this.on('activate', this._handleRefresh.createDelegate(this, [url, params, loadOnce]));
return this.el.getUpdateManager();
},
_handleRefresh : function(url, params, loadOnce){
if(!loadOnce || !this.loaded){
var updater = this.el.getUpdateManager();
updater.update(url, params, this._setLoaded.createDelegate(this));
}
},
_setLoaded : function(){
this.loaded = true;
},
/**
* Returns this panel's id
* @return {String}
*/
getId : function(){
return this.el.id;
},
/**
* Returns this panel's element
* @return {YAHOO.ext.Element}
*/
getEl : function(){
return this.el;
},
adjustForComponents : function(width, height){
if(this.toolbar){
var te = this.toolbar.getEl();
height -= te.getHeight();
te.setWidth(width);
}
if(this.adjustments){
width += this.adjustments[0];
height += this.adjustments[1];
}
return {'width': width, 'height': height};
},
setSize : function(width, height){
if(this.fitToFrame){
var size = this.adjustForComponents(width, height);
this.resizeEl.setSize(this.autoWidth ? 'auto' : size.width, size.height);
}
},
/**
* Returns this panel's title
* @return {String}
*/
getTitle : function(){
return this.title;
},
/**
* Set this panel's title
* @param {String} title
*/
setTitle : function(title){
this.title = title;
if(this.region){
this.region.updatePanelTitle(this, title);
}
},
/**
* Returns true is this panel was configured to be closable
* @return {Boolean}
*/
isClosable : function(){
return this.closable;
},
beforeSlide : function(){
this.el.clip();
this.resizeEl.clip();
},
afterSlide : function(){
this.el.unclip();
this.resizeEl.unclip();
},
/**
* Force a content refresh from the URL specified in the setUrl() method.
* Will fail silently if the setUrl method has not been called.
* This does not activate the panel, just updates its content.
*/
refresh : function(){
if(this.refreshDelegate){
this.loaded = false;
this.refreshDelegate();
}
},
/**
* Destroys this panel
*/
destroy : function(){
this.el.removeAllListeners();
var tempEl = document.createElement('span');
tempEl.appendChild(this.el.dom);
tempEl.innerHTML = '';
this.el = null;
}
});
/**
* @class YAHOO.ext.GridPanel
* @extends YAHOO.ext.ContentPanel
* @constructor
* Create a new GridPanel.
* @param {YAHOO.ext.grid.Grid} grid The grid for this panel
* @param {String/Object} config A string to set only the title or a config object
*/
YAHOO.ext.GridPanel = function(grid, config){
this.wrapper = YAHOO.ext.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
{tag: 'div', cls: 'ylayout-grid-wrapper ylayout-inactive-content'}, true);
this.wrapper.dom.appendChild(grid.container.dom);
YAHOO.ext.GridPanel.superclass.constructor.call(this, this.wrapper, config);
if(this.toolbar){
this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
}
grid.monitorWindowResize = false; // turn off autosizing
grid.autoHeight = false;
grid.autoWidth = false;
this.grid = grid;
this.grid.container.replaceClass('ylayout-inactive-content', 'ylayout-component-panel');
};
YAHOO.extendX(YAHOO.ext.GridPanel, YAHOO.ext.ContentPanel, {
getId : function(){
return this.grid.id;
},
/**
* Returns the grid for this panel
* @return {YAHOO.ext.grid.Grid}
*/
getGrid : function(){
return this.grid;
},
setSize : function(width, height){
var grid = this.grid;
var size = this.adjustForComponents(width, height);
grid.container.setSize(size.width, size.height);
grid.autoSize();
},
beforeSlide : function(){
this.grid.getView().wrapEl.clip();
},
afterSlide : function(){
this.grid.getView().wrapEl.unclip();
},
destroy : function(){
this.grid.getView().unplugDataModel(this.grid.getDataModel());
this.grid.container.removeAllListeners();
YAHOO.ext.GridPanel.superclass.destroy.call(this);
}
});
/**
* @class YAHOO.ext.NestedLayoutPanel
* @extends YAHOO.ext.ContentPanel
* @constructor
* Create a new NestedLayoutPanel.
* @param {YAHOO.ext.BorderLayout} layout The layout for this panel
* @param {String/Object} config A string to set only the title or a config object
*/
YAHOO.ext.NestedLayoutPanel = function(layout, config){
YAHOO.ext.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
layout.monitorWindowResize = false; // turn off autosizing
this.layout = layout;
this.layout.getEl().addClass('ylayout-nested-layout');
};
YAHOO.extendX(YAHOO.ext.NestedLayoutPanel, YAHOO.ext.ContentPanel, {
setSize : function(width, height){
var size = this.adjustForComponents(width, height);
this.layout.getEl().setSize(size.width, size.height);
this.layout.layout();
},
/**
* Returns the nested BorderLayout for this panel
* @return {YAHOO.ext.BorderLayout}
*/
getLayout : function(){
return this.layout;
}
});

View File

@@ -0,0 +1,135 @@
/**
* @class YAHOO.ext.LayoutManager
* @extends YAHOO.ext.util.Observable
* Base class for layout managers.
*/
YAHOO.ext.LayoutManager = function(container){
YAHOO.ext.LayoutManager.superclass.constructor.call(this);
this.el = getEl(container, true);
// ie scrollbar fix
if(this.el.dom == document.body && YAHOO.ext.util.Browser.isIE){
document.body.scroll = 'no';
}
this.id = this.el.id;
this.el.addClass('ylayout-container');
/** false to disable window resize monitoring @type Boolean */
this.monitorWindowResize = true;
this.regions = {};
this.events = {
/**
* @event layout
* Fires when a layout is performed.
* @param {YAHOO.ext.LayoutManager} this
*/
'layout' : new YAHOO.util.CustomEvent(),
/**
* @event regionresized
* Fires when the user resizes a region.
* @param {YAHOO.ext.LayoutRegion} region
* @param {Number} newSize The new size (width for east/west, height for north/south)
*/
'regionresized' : new YAHOO.util.CustomEvent(),
/**
* @event regioncollapsed
* Fires when a region is collapsed.
* @param {YAHOO.ext.LayoutRegion} region
*/
'regioncollapsed' : new YAHOO.util.CustomEvent(),
/**
* @event regionexpanded
* Fires when a region is expanded.
* @param {YAHOO.ext.LayoutRegion} region
*/
'regionexpanded' : new YAHOO.util.CustomEvent()
};
this.updating = false;
YAHOO.ext.EventManager.onWindowResize(this.onWindowResize, this, true);
};
YAHOO.extendX(YAHOO.ext.LayoutManager, YAHOO.ext.util.Observable, {
/**
* Returns true if this layout is currently being updated
* @return {Boolean}
*/
isUpdating : function(){
return this.updating;
},
/**
* Suspend the LayoutManager from doing auto-layouts while
* making multiple add or remove calls
*/
beginUpdate : function(){
this.updating = true;
},
/**
* Restore auto-layouts and optionally disable the manager from performing a layout
* @param {Boolean} noLayout true to disable a layout update
*/
endUpdate : function(noLayout){
this.updating = false;
if(!noLayout){
this.layout();
}
},
layout: function(){
},
onRegionResized : function(region, newSize){
this.fireEvent('regionresized', region, newSize);
this.layout();
},
onRegionCollapsed : function(region){
this.fireEvent('regioncollapsed', region);
},
onRegionExpanded : function(region){
this.fireEvent('regionexpanded', region);
},
/**
* Returns the size of the current view, This method normalizes document.body and element embedded layouts and
* performs box-model adjustments.
* @return {Object} The size as an object {width: (the width), height: (the height)}
*/
getViewSize : function(){
var size;
if(this.el.dom != document.body){
this.el.beginMeasure();
size = this.el.getSize();
this.el.endMeasure();
}else{
size = {width: YAHOO.util.Dom.getViewportWidth(), height: YAHOO.util.Dom.getViewportHeight()};
}
size.width -= this.el.getBorderWidth('lr')-this.el.getPadding('lr');
size.height -= this.el.getBorderWidth('tb')-this.el.getPadding('tb');
return size;
},
/**
* Returns the element this layout is bound to.
* @return {YAHOO.ext.Element}
*/
getEl : function(){
return this.el;
},
/**
* Returns the specified region.
* @param {String} target The region key
* @return {YAHOO.ext.LayoutRegion}
*/
getRegion : function(target){
return this.regions[target.toLowerCase()];
},
onWindowResize : function(){
if(this.monitorWindowResize){
this.layout();
}
}
});

View File

@@ -0,0 +1,496 @@
/**
* @class YAHOO.ext.LayoutRegion
* @extends YAHOO.ext.util.Observable
* This class represents a region in a layout manager.
* @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
* @cfg {Boolean} floatable False to disable floating (defaults to true)
* @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
* @cfg {Object} cmargins Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
* @cfg {String} tabPosition 'top' or 'bottom' (defaults to 'bottom')
* @cfg {Boolean} alwaysShowTabs True to always display tabs even when only 1 panel (defaults to false)
* @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
* @cfg {Boolean} titlebar True to display a title bar (defaults to true)
* @cfg {String} title The title for the region (overrides panel titles)
* @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
* @cfg {Float} duration The duration of the expand/collapse animation in seconds
* @cfg {Float} slideDuration The duration of the slide out/in when collapsed in seconds
* @cfg {Boolean} autoHide False to disable disable autoHide when the mouse leaves the "floated" region (defaults to true)
* @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
* @cfg {Boolean} closeOnTabs True to place the close icon on the tabs instead of the region titlebar (defaults to false)
* @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
* @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
* the space available, similar to FireFox 1.5 tabs (defaults to false)
* @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
* @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
*/
YAHOO.ext.LayoutRegion = function(mgr, config, pos){
YAHOO.ext.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
var dh = YAHOO.ext.DomHelper;
/** This regions container element @type YAHOO.ext.Element */
this.el = dh.append(mgr.el.dom, {tag: 'div', cls: 'ylayout-panel ylayout-panel-' + this.position}, true);
/** This regions title element @type YAHOO.ext.Element */
this.titleEl = dh.append(this.el.dom, {tag: 'div', unselectable: 'on', cls: 'yunselectable ylayout-panel-hd ylayout-title-'+this.position, children:[
{tag: 'span', cls: 'yunselectable ylayout-panel-hd-text', unselectable: 'on', html: '&#160;'},
{tag: 'div', cls: 'yunselectable ylayout-panel-hd-tools', unselectable: 'on'}
]}, true);
this.titleEl.enableDisplayMode();
/** This regions title text element @type HTMLElement */
this.titleTextEl = this.titleEl.dom.firstChild;
this.tools = getEl(this.titleEl.dom.childNodes[1], true);
this.closeBtn = this.createTool(this.tools.dom, 'ylayout-close');
this.closeBtn.enableDisplayMode();
this.closeBtn.on('click', this.closeClicked, this, true);
this.closeBtn.hide();
/** This regions body element @type YAHOO.ext.Element */
this.bodyEl = dh.append(this.el.dom, {tag: 'div', cls: 'ylayout-panel-body'}, true);
this.visible = false;
this.collapsed = false;
this.hide();
this.on('paneladded', this.validateVisibility, this, true);
this.on('panelremoved', this.validateVisibility, this, true);
this.applyConfig(config);
};
YAHOO.extendX(YAHOO.ext.LayoutRegion, YAHOO.ext.BasicLayoutRegion, {
applyConfig : function(config){
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 regions collapsed element @type YAHOO.ext.Element */
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);
}
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);
}
},
/**
* Returns true if this region is currently visible.
* @return {Boolean}
*/
isVisible : function(){
return this.visible;
},
getBox : function(){
var b;
if(!this.collapsed){
b = this.el.getBox(false, true);
}else{
b = this.collapsedEl.getBox(false, true);
}
return b;
},
getMargins : function(){
return this.collapsed ? this.cmargins : this.margins;
},
highlight : function(){
this.el.addClass('ylayout-panel-dragover');
},
unhighlight : function(){
this.el.removeClass('ylayout-panel-dragover');
},
updateBox : function(box){
this.box = box;
if(!this.collapsed){
this.el.dom.style.left = box.x + 'px';
this.el.dom.style.top = box.y + 'px';
this.el.setSize(box.width, box.height);
var bodyHeight = this.titleEl.isVisible() ? box.height - (this.titleEl.getHeight()||0) : box.height;
bodyHeight -= this.el.getBorderWidth('tb');
bodyWidth = box.width - this.el.getBorderWidth('rl');
this.bodyEl.setHeight(bodyHeight);
this.bodyEl.setWidth(bodyWidth);
var tabHeight = bodyHeight;
if(this.tabs){
tabHeight = this.tabs.syncHeight(bodyHeight);
if(YAHOO.ext.util.Browser.isIE) this.tabs.el.repaint();
}
this.panelSize = {width: bodyWidth, height: tabHeight};
if(this.activePanel){
this.activePanel.setSize(bodyWidth, tabHeight);
}
}else{
this.collapsedEl.dom.style.left = box.x + 'px';
this.collapsedEl.dom.style.top = box.y + 'px';
this.collapsedEl.setSize(box.width, box.height);
}
if(this.tabs){
this.tabs.autoSizeTabs();
}
},
/**
* Returns the container element for this region.
* @return {YAHOO.ext.Element}
*/
getEl : function(){
return this.el;
},
/**
* Hides this region.
*/
hide : function(){
if(!this.collapsed){
this.el.dom.style.left = '-2000px';
this.el.hide();
}else{
this.collapsedEl.dom.style.left = '-2000px';
this.collapsedEl.hide();
}
this.visible = false;
this.fireEvent('visibilitychange', this, false);
},
/**
* Shows this region if it was previously hidden.
*/
show : function(){
if(!this.collapsed){
this.el.show();
}else{
this.collapsedEl.show();
}
this.visible = true;
this.fireEvent('visibilitychange', this, true);
},
closeClicked : function(){
if(this.activePanel){
this.remove(this.activePanel);
}
},
collapseClick : function(e){
if(this.isSlid){
e.stopPropagation();
this.slideIn();
}else{
e.stopPropagation();
this.slideOut();
}
},
/**
* Collapses this region.
* @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
*/
collapse : function(skipAnim){
if(this.collapsed) return;
this.collapsed = true;
if(this.split){
this.split.el.hide();
}
if(this.config.animate && skipAnim !== true){
this.fireEvent('invalidated', this);
this.animateCollapse();
}else{
this.el.setLocation(-20000,-20000);
this.el.hide();
this.collapsedEl.show();
this.fireEvent('collapsed', this);
this.fireEvent('invalidated', this);
}
},
animateCollapse : function(){
// overridden
},
/**
* Expand this region if it was previously collapsed.
* @param {YAHOO.ext.EventObject} e The event that triggered the expand (or null if calling manually)
* @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
*/
expand : function(e, skipAnim){
if(e) e.stopPropagation();
if(!this.collapsed) return;
if(this.isSlid){
this.slideIn(this.expand.createDelegate(this));
return;
}
this.collapsed = false;
this.el.show();
if(this.config.animate && skipAnim !== true){
this.animateExpand();
}else{
if(this.split){
this.split.el.show();
}
this.collapsedEl.setLocation(-2000,-2000);
this.collapsedEl.hide();
this.fireEvent('invalidated', this);
this.fireEvent('expanded', this);
}
},
animateExpand : function(){
// overridden
},
initTabs : function(){
this.bodyEl.setStyle('overflow', 'hidden');
var ts = new YAHOO.ext.TabPanel(this.bodyEl.dom, this.bottomTabs);
if(this.config.hideTabs){
ts.stripWrap.setDisplayed(false);
}
this.tabs = ts;
ts.resizeTabs = this.config.resizeTabs === true;
ts.minTabWidth = this.config.minTabWidth || 40;
ts.maxTabWidth = this.config.maxTabWidth || 250;
ts.preferredTabWidth = this.config.preferredTabWidth || 150;
ts.monitorResize = false;
ts.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
this.panels.each(this.initPanelAsTab, this);
},
initPanelAsTab : function(panel){
var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
this.config.closeOnTab && panel.isClosable());
ti.on('activate', function(){
this.setActivePanel(panel);
}, this, true);
if(this.config.closeOnTab){
ti.on('beforeclose', function(t, e){
e.cancel = true;
this.remove(panel);
}, this, true);
}
return ti;
},
updatePanelTitle : function(panel, title){
if(this.activePanel == panel){
this.updateTitle(title);
}
if(this.tabs){
this.tabs.getTab(panel.getEl().id).setText(title);
}
},
updateTitle : function(title){
if(this.titleTextEl && !this.config.title){
this.titleTextEl.innerHTML = (typeof title != 'undefined' && title.length > 0 ? title : "&#160;");
}
},
setActivePanel : function(panel){
panel = this.getPanel(panel);
if(this.activePanel && this.activePanel != panel){
this.activePanel.setActiveState(false);
}
this.activePanel = panel;
panel.setActiveState(true);
if(this.panelSize){
panel.setSize(this.panelSize.width, this.panelSize.height);
}
this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
this.updateTitle(panel.getTitle());
this.fireEvent('panelactivated', this, panel);
},
/**
* Show the specified panel.
* @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
* @return {YAHOO.ext.ContentPanel} The shown panel or null
*/
showPanel : function(panel){
if(panel = this.getPanel(panel)){
if(this.tabs){
this.tabs.activate(panel.getEl().id);
}else{
this.setActivePanel(panel);
}
}
return panel;
},
/**
* Get the active panel for this region.
* @return {YAHOO.ext.ContentPanel} The active panel or null
*/
getActivePanel : function(){
return this.activePanel;
},
validateVisibility : function(){
if(this.panels.getCount() < 1){
this.updateTitle('&#160;');
this.closeBtn.hide();
this.hide();
}else{
if(!this.isVisible()){
this.show();
}
}
},
/**
* Add the passed ContentPanel(s)
* @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
* @return {YAHOO.ext.ContentPanel} The panel added (if only one was added)
*/
add : function(panel){
if(arguments.length > 1){
for(var i = 0, len = arguments.length; i < len; i++) {
this.add(arguments[i]);
}
return null;
}
if(this.hasPanel(panel)){
this.showPanel(panel);
return panel;
}
panel.setRegion(this);
this.panels.add(panel);
if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
this.bodyEl.dom.appendChild(panel.getEl().dom);
if(panel.background !== true){
this.setActivePanel(panel);
}
this.fireEvent('paneladded', this, panel);
return panel;
}
if(!this.tabs){
this.initTabs();
}else{
this.initPanelAsTab(panel);
}
if(panel.background !== true){
this.tabs.activate(panel.getEl().id);
}
this.fireEvent('paneladded', this, panel);
return panel;
},
/**
* Hides the tab for the specified panel.
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
*/
hidePanel : function(panel){
if(this.tabs && (panel = this.getPanel(panel))){
this.tabs.hideTab(panel.getEl().id);
}
},
/**
* Unhides the tab for a previously hidden panel.
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
*/
unhidePanel : function(panel){
if(this.tabs && (panel = this.getPanel(panel))){
this.tabs.unhideTab(panel.getEl().id);
}
},
clearPanels : function(){
while(this.panels.getCount() > 0){
this.remove(this.panels.first());
}
},
/**
* Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
* @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
* @param {Boolean} preservePanel Overrides the config preservePanel option
* @return {YAHOO.ext.ContentPanel} The panel that was removed
*/
remove : function(panel, preservePanel){
panel = this.getPanel(panel);
if(!panel){
return null;
}
var e = {};
this.fireEvent('beforeremove', this, panel, e);
if(e.cancel === true){
return null;
}
preservePanel = (typeof preservePanel != 'undefined' ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
var panelId = panel.getId();
this.panels.removeKey(panelId);
if(preservePanel){
document.body.appendChild(panel.getEl().dom);
}
if(this.tabs){
this.tabs.removeTab(panel.getEl().id);
}else if (!preservePanel){
this.bodyEl.dom.removeChild(panel.getEl().dom);
}
if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
var p = this.panels.first();
var tempEl = document.createElement('span'); // temp holder to keep IE from deleting the node
tempEl.appendChild(p.getEl().dom);
this.bodyEl.update('');
this.bodyEl.dom.appendChild(p.getEl().dom);
tempEl = null;
this.updateTitle(p.getTitle());
this.tabs = null;
this.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
this.setActivePanel(p);
}
panel.setRegion(null);
if(this.activePanel == panel){
this.activePanel = null;
}
if(this.config.autoDestroy !== false && preservePanel !== true){
try{panel.destroy();}catch(e){}
}
this.fireEvent('panelremoved', this, panel);
return panel;
},
/**
* Returns the TabPanel component used by this region
* @return {YAHOO.ext.TabPanel}
*/
getTabs : function(){
return this.tabs;
},
createTool : function(parentEl, className){
var btn = YAHOO.ext.DomHelper.append(parentEl, {tag: 'div', cls: 'ylayout-tools-button',
children: [{tag: 'div', cls: 'ylayout-tools-button-inner ' + className, html: '&#160;'}]}, true);
btn.addClassOnOver('ylayout-tools-button-over');
return btn;
}
});

View File

@@ -0,0 +1,68 @@
/*
* Private internal class for reading and applying state
*/
YAHOO.ext.LayoutStateManager = function(layout){
// default empty state
this.state = {
north: {},
south: {},
east: {},
west: {}
};
};
YAHOO.ext.LayoutStateManager.prototype = {
init : function(layout, provider){
this.provider = provider;
var state = provider.get(layout.id+'-layout-state');
if(state){
var wasUpdating = layout.isUpdating();
if(!wasUpdating){
layout.beginUpdate();
}
for(var key in state){
if(typeof state[key] != 'function'){
var rstate = state[key];
var r = layout.getRegion(key);
if(r && rstate){
if(rstate.size){
r.resizeTo(rstate.size);
}
if(rstate.collapsed == true){
r.collapse(true);
}else{
r.expand(null, true);
}
}
}
}
if(!wasUpdating){
layout.endUpdate();
}
this.state = state;
}
this.layout = layout;
layout.on('regionresized', this.onRegionResized, this, true);
layout.on('regioncollapsed', this.onRegionCollapsed, this, true);
layout.on('regionexpanded', this.onRegionExpanded, this, true);
},
storeState : function(){
this.provider.set(this.layout.id+'-layout-state', this.state);
},
onRegionResized : function(region, newSize){
this.state[region.getPosition()].size = newSize;
this.storeState();
},
onRegionCollapsed : function(region){
this.state[region.getPosition()].collapsed = true;
this.storeState();
},
onRegionExpanded : function(region){
this.state[region.getPosition()].collapsed = false;
this.storeState();
}
};

View File

@@ -0,0 +1,282 @@
/**
* @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: '&#160;'});
/** 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';
}
}
});