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:
265
frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js
Normal file
265
frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js
Normal 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;
|
||||
}
|
||||
});
|
||||
281
frontend/beta/js/YUI-extensions/layout/BorderLayout.js
Normal file
281
frontend/beta/js/YUI-extensions/layout/BorderLayout.js
Normal 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.';
|
||||
};
|
||||
207
frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js
Normal file
207
frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js
Normal 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);
|
||||
}
|
||||
});
|
||||
325
frontend/beta/js/YUI-extensions/layout/ContentPanels.js
Normal file
325
frontend/beta/js/YUI-extensions/layout/ContentPanels.js
Normal 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;
|
||||
}
|
||||
});
|
||||
135
frontend/beta/js/YUI-extensions/layout/LayoutManager.js
Normal file
135
frontend/beta/js/YUI-extensions/layout/LayoutManager.js
Normal 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();
|
||||
}
|
||||
}
|
||||
});
|
||||
496
frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
Normal file
496
frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
Normal 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: ' '},
|
||||
{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 : " ");
|
||||
}
|
||||
},
|
||||
|
||||
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(' ');
|
||||
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: ' '}]}, true);
|
||||
btn.addClassOnOver('ylayout-tools-button-over');
|
||||
return btn;
|
||||
}
|
||||
});
|
||||
68
frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js
Normal file
68
frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js
Normal 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();
|
||||
}
|
||||
};
|
||||
282
frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js
Normal file
282
frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js
Normal 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: ' '});
|
||||
/** 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';
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user