summaryrefslogtreecommitdiff
path: root/frontend/beta/js/YUI-extensions/layout
Unidiff
Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout') (more/less context) (ignore whitespace changes)
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js265
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BorderLayout.js281
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js207
-rw-r--r--frontend/beta/js/YUI-extensions/layout/ContentPanels.js325
-rw-r--r--frontend/beta/js/YUI-extensions/layout/LayoutManager.js135
-rw-r--r--frontend/beta/js/YUI-extensions/layout/LayoutRegion.js496
-rw-r--r--frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js68
-rw-r--r--frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js282
8 files changed, 2059 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js
new file mode 100644
index 0000000..b7ea273
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js
@@ -0,0 +1,265 @@
1/**
2 * @class YAHOO.ext.BasicLayoutRegion
3 * @extends YAHOO.ext.util.Observable
4 * This class represents a lightweight region in a layout manager. This region does not move dom nodes
5 * and does not have a titlebar, tabs or any other features. All it does is size and position
6 * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
7 */
8YAHOO.ext.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
9 this.mgr = mgr;
10 this.position = pos;
11 this.events = {
12 /**
13 * @event beforeremove
14 * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
15 * @param {YAHOO.ext.LayoutRegion} this
16 * @param {YAHOO.ext.ContentPanel} panel The panel
17 * @param {Object} e The cancel event object
18 */
19 'beforeremove' : true,
20 /**
21 * @event invalidated
22 * Fires when the layout for this region is changed.
23 * @param {YAHOO.ext.LayoutRegion} this
24 */
25 'invalidated' : true,
26 /**
27 * @event visibilitychange
28 * Fires when this region is shown or hidden
29 * @param {YAHOO.ext.LayoutRegion} this
30 * @param {Boolean} visibility true or false
31 */
32 'visibilitychange' : true,
33 /**
34 * @event paneladded
35 * Fires when a panel is added.
36 * @param {YAHOO.ext.LayoutRegion} this
37 * @param {YAHOO.ext.ContentPanel} panel The panel
38 */
39 'paneladded' : true,
40 /**
41 * @event panelremoved
42 * Fires when a panel is removed.
43 * @param {YAHOO.ext.LayoutRegion} this
44 * @param {YAHOO.ext.ContentPanel} panel The panel
45 */
46 'panelremoved' : true,
47 /**
48 * @event collapsed
49 * Fires when this region is collapsed.
50 * @param {YAHOO.ext.LayoutRegion} this
51 */
52 'collapsed' : true,
53 /**
54 * @event expanded
55 * Fires when this region is expanded.
56 * @param {YAHOO.ext.LayoutRegion} this
57 */
58 'expanded' : true,
59 /**
60 * @event panelactivated
61 * Fires when a panel is activated.
62 * @param {YAHOO.ext.LayoutRegion} this
63 * @param {YAHOO.ext.ContentPanel} panel The activated panel
64 */
65 'panelactivated' : true,
66 /**
67 * @event resized
68 * Fires when the user resizes this region.
69 * @param {YAHOO.ext.LayoutRegion} this
70 * @param {Number} newSize The new size (width for east/west, height for north/south)
71 */
72 'resized' : true
73 };
74 /** A collection of panels in this region. @type YAHOO.ext.util.MixedCollection */
75 this.panels = new YAHOO.ext.util.MixedCollection();
76 this.panels.getKey = this.getPanelId.createDelegate(this);
77 this.box = null;
78 this.activePanel = null;
79 if(skipConfig !== true){
80 this.applyConfig(config);
81 }
82};
83
84YAHOO.extendX(YAHOO.ext.BasicLayoutRegion, YAHOO.ext.util.Observable, {
85 getPanelId : function(p){
86 return p.getId();
87 },
88
89 applyConfig : function(config){
90 this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
91 this.config = config;
92 },
93
94 /**
95 * Resizes the region to the specified size. For vertical regions (west, east) this adjusts
96 * the width, for horizontal (north, south) the height.
97 * @param {Number} newSize The new width or height
98 */
99 resizeTo : function(newSize){
100 if(this.activePanel){
101 var el = this.activePanel.getEl();
102 switch(this.position){
103 case 'east':
104 case 'west':
105 el.setWidth(newSize);
106 this.fireEvent('resized', this, newSize);
107 break;
108 case 'north':
109 case 'south':
110 el.setHeight(newSize);
111 this.fireEvent('resized', this, newSize);
112 break;
113 }
114 }
115 },
116
117 getBox : function(){
118 return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
119 },
120
121 getMargins : function(){
122 return this.margins;
123 },
124
125 updateBox : function(box){
126 this.box = box;
127 var el = this.activePanel.getEl();
128 el.dom.style.left = box.x + 'px';
129 el.dom.style.top = box.y + 'px';
130 el.setSize(box.width, box.height);
131 },
132
133 /**
134 * Returns the container element for this region.
135 * @return {YAHOO.ext.Element}
136 */
137 getEl : function(){
138 return this.activePanel;
139 },
140
141 /**
142 * Returns true if this region is currently visible.
143 * @return {Boolean}
144 */
145 isVisible : function(){
146 return this.activePanel ? true : false;
147 },
148
149 setActivePanel : function(panel){
150 panel = this.getPanel(panel);
151 if(this.activePanel && this.activePanel != panel){
152 this.activePanel.setActiveState(false);
153 this.activePanel.getEl().setStyle({left:-10000,right:-10000});
154 }
155 this.activePanel = panel;
156 panel.setActiveState(true);
157 if(this.box){
158 panel.setSize(this.box.width, this.box.height);
159 }
160 this.fireEvent('panelactivated', this, panel);
161 this.fireEvent('invalidated');
162 },
163
164 /**
165 * Show the specified panel.
166 * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
167 * @return {YAHOO.ext.ContentPanel} The shown panel or null
168 */
169 showPanel : function(panel){
170 if(panel = this.getPanel(panel)){
171 this.setActivePanel(panel);
172 }
173 return panel;
174 },
175
176 /**
177 * Get the active panel for this region.
178 * @return {YAHOO.ext.ContentPanel} The active panel or null
179 */
180 getActivePanel : function(){
181 return this.activePanel;
182 },
183
184 /**
185 * Add the passed ContentPanel(s)
186 * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
187 * @return {YAHOO.ext.ContentPanel} The panel added (if only one was added)
188 */
189 add : function(panel){
190 if(arguments.length > 1){
191 for(var i = 0, len = arguments.length; i < len; i++) {
192 this.add(arguments[i]);
193 }
194 return null;
195 }
196 if(this.hasPanel(panel)){
197 this.showPanel(panel);
198 return panel;
199 }
200 panel.setRegion(this);
201 this.panels.add(panel);
202 panel.getEl().setStyle('position', 'absolute');
203 if(!panel.background){
204 this.setActivePanel(panel);
205 if(this.config.initialSize && this.panels.getCount()==1){
206 this.resizeTo(this.config.initialSize);
207 }
208 }
209 this.fireEvent('paneladded', this, panel);
210 return panel;
211 },
212
213 /**
214 * Returns true if the panel is in this region.
215 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
216 * @return {Boolean}
217 */
218 hasPanel : function(panel){
219 if(typeof panel == 'object'){ // must be panel obj
220 panel = panel.getId();
221 }
222 return this.getPanel(panel) ? true : false;
223 },
224
225 /**
226 * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
227 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
228 * @param {Boolean} preservePanel Overrides the config preservePanel option
229 * @return {YAHOO.ext.ContentPanel} The panel that was removed
230 */
231 remove : function(panel, preservePanel){
232 panel = this.getPanel(panel);
233 if(!panel){
234 return null;
235 }
236 var e = {};
237 this.fireEvent('beforeremove', this, panel, e);
238 if(e.cancel === true){
239 return null;
240 }
241 var panelId = panel.getId();
242 this.panels.removeKey(panelId);
243 return panel;
244 },
245
246 /**
247 * Returns the panel specified or null if it's not in this region.
248 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
249 * @return {YAHOO.ext.ContentPanel}
250 */
251 getPanel : function(id){
252 if(typeof id == 'object'){ // must be panel obj
253 return id;
254 }
255 return this.panels.get(id);
256 },
257
258 /**
259 * Returns this regions position (north/south/east/west/center).
260 * @return {String}
261 */
262 getPosition: function(){
263 return this.position;
264 }
265});
diff --git a/frontend/beta/js/YUI-extensions/layout/BorderLayout.js b/frontend/beta/js/YUI-extensions/layout/BorderLayout.js
new file mode 100644
index 0000000..0529c24
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/BorderLayout.js
@@ -0,0 +1,281 @@
1/**
2 * @class YAHOO.ext.BorderLayout
3 * @extends YAHOO.ext.LayoutManager
4 * This class represents a common layout manager used in desktop applications. For screenshots and more details,
5 * please see: <br><br>
6 * <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>
7 * <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>
8 * Example:
9 <pre><code>
10 var layout = new YAHOO.ext.BorderLayout(document.body, {
11 north: {
12 initialSize: 25,
13 titlebar: false
14 },
15 west: {
16 split:true,
17 initialSize: 200,
18 minSize: 175,
19 maxSize: 400,
20 titlebar: true,
21 collapsible: true
22 },
23 east: {
24 split:true,
25 initialSize: 202,
26 minSize: 175,
27 maxSize: 400,
28 titlebar: true,
29 collapsible: true
30 },
31 south: {
32 split:true,
33 initialSize: 100,
34 minSize: 100,
35 maxSize: 200,
36 titlebar: true,
37 collapsible: true
38 },
39 center: {
40 titlebar: true,
41 autoScroll:true,
42 resizeTabs: true,
43 minTabWidth: 50,
44 preferredTabWidth: 150
45 }
46});
47
48// shorthand
49var CP = YAHOO.ext.ContentPanel;
50
51layout.beginUpdate();
52layout.add('north', new CP('north', 'North'));
53layout.add('south', new CP('south', {title: 'South', closable: true}));
54layout.add('west', new CP('west', {title: 'West'}));
55layout.add('east', new CP('autoTabs', {title: 'Auto Tabs', closable: true}));
56layout.add('center', new CP('center1', {title: 'Close Me', closable: true}));
57layout.add('center', new CP('center2', {title: 'Center Panel', closable: false}));
58layout.getRegion('center').showPanel('center1');
59layout.endUpdate();
60</code></pre>
61* @constructor
62* Create a new BorderLayout
63* @param {String/HTMLElement/Element} container The container this layout is bound to
64* @param {Object} config Configuration options
65 */
66YAHOO.ext.BorderLayout = function(container, config){
67 config = config || {};
68 YAHOO.ext.BorderLayout.superclass.constructor.call(this, container);
69 this.factory = config.factory || YAHOO.ext.BorderLayout.RegionFactory;
70 /**
71 * True to hide the center panel while performing layouts. This helps when the center region contains
72 * heavy components such as a yui-ext grid.
73 * @type Boolean
74 */
75 this.hideOnLayout = config.hideOnLayout || false;
76 for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
77 var target = this.factory.validRegions[i];
78 if(config[target]){
79 this.addRegion(target, config[target]);
80 }
81 }
82 //this.dragOverDelegate = YAHOO.ext.EventManager.wrap(this.onDragOver, this, true);
83};
84
85YAHOO.extendX(YAHOO.ext.BorderLayout, YAHOO.ext.LayoutManager, {
86 /**
87 * Creates and adds a new region if it doesn't already exist.
88 * @param {String} target The target region key (north, south, east, west or center).
89 * @param {Object} config The regions config object
90 * @return {BorderLayoutRegion} The new region
91 */
92 addRegion : function(target, config){
93 if(!this.regions[target]){
94 var r = this.factory.create(target, this, config);
95 this.regions[target] = r;
96 r.on('visibilitychange', this.layout, this, true);
97 r.on('paneladded', this.layout, this, true);
98 r.on('panelremoved', this.layout, this, true);
99 r.on('invalidated', this.layout, this, true);
100 r.on('resized', this.onRegionResized, this, true);
101 r.on('collapsed', this.onRegionCollapsed, this, true);
102 r.on('expanded', this.onRegionExpanded, this, true);
103 }
104 return this.regions[target];
105 },
106
107 /**
108 * Performs a layout update.
109 */
110 layout : function(){
111 if(this.updating) return;
112 //var bench = new YAHOO.ext.util.Bench();
113 //bench.start('Layout...');
114 var size = this.getViewSize();
115 var w = size.width, h = size.height;
116 var centerW = w, centerH = h, centerY = 0, centerX = 0;
117 var x = 0, y = 0;
118
119 var rs = this.regions;
120 var n = rs['north'], s = rs['south'], west = rs['west'], e = rs['east'], c = rs['center'];
121 if(this.hideOnLayout){
122 c.el.setStyle('display', 'none');
123 }
124 if(n && n.isVisible()){
125 var b = n.getBox();
126 var m = n.getMargins();
127 b.width = w - (m.left+m.right);
128 b.x = m.left;
129 b.y = m.top;
130 centerY = b.height + b.y + m.bottom;
131 centerH -= centerY;
132 n.updateBox(this.safeBox(b));
133 }
134 if(s && s.isVisible()){
135 var b = s.getBox();
136 var m = s.getMargins();
137 b.width = w - (m.left+m.right);
138 b.x = m.left;
139 var totalHeight = (b.height + m.top + m.bottom);
140 b.y = h - totalHeight + m.top;
141 centerH -= totalHeight;
142 s.updateBox(this.safeBox(b));
143 }
144 if(west && west.isVisible()){
145 var b = west.getBox();
146 var m = west.getMargins();
147 b.height = centerH - (m.top+m.bottom);
148 b.x = m.left;
149 b.y = centerY + m.top;
150 var totalWidth = (b.width + m.left + m.right);
151 centerX += totalWidth;
152 centerW -= totalWidth;
153 west.updateBox(this.safeBox(b));
154 }
155 if(e && e.isVisible()){
156 var b = e.getBox();
157 var m = e.getMargins();
158 b.height = centerH - (m.top+m.bottom);
159 var totalWidth = (b.width + m.left + m.right);
160 b.x = w - totalWidth + m.left;
161 b.y = centerY + m.top;
162 centerW -= totalWidth;
163 e.updateBox(this.safeBox(b));
164 }
165 if(c){
166 var m = c.getMargins();
167 var centerBox = {
168 x: centerX + m.left,
169 y: centerY + m.top,
170 width: centerW - (m.left+m.right),
171 height: centerH - (m.top+m.bottom)
172 };
173 if(this.hideOnLayout){
174 c.el.setStyle('display', 'block');
175 }
176 c.updateBox(this.safeBox(centerBox));
177 }
178 this.el.repaint();
179 this.fireEvent('layout', this);
180 //bench.stop();
181 //alert(bench.toString());
182 },
183
184 safeBox : function(box){
185 box.width = Math.max(0, box.width);
186 box.height = Math.max(0, box.height);
187 return box;
188 },
189
190 /**
191 * Adds a ContentPanel (or subclass) to this layout.
192 * @param {String} target The target region key (north, south, east, west or center).
193 * @param {YAHOO.ext.ContentPanel} panel The panel to add
194 * @return {YAHOO.ext.ContentPanel} The added panel
195 */
196 add : function(target, panel){
197 target = target.toLowerCase();
198 return this.regions[target].add(panel);
199 },
200
201 /**
202 * Adds a ContentPanel (or subclass) to this layout.
203 * @param {String} target The target region key (north, south, east, west or center).
204 * @param {Number/String/YAHOO.ext.ContentPanel} panel The index, id or panel to remove
205 * @return {YAHOO.ext.ContentPanel} The removed panel
206 */
207 remove : function(target, panel){
208 target = target.toLowerCase();
209 return this.regions[target].remove(panel);
210 },
211
212 /**
213 * Searches all regions for a panel with the specified id
214 * @param {String} panelId
215 * @return {YAHOO.ext.ContentPanel} The panel or null if it wasn't found
216 */
217 findPanel : function(panelId){
218 var rs = this.regions;
219 for(var target in rs){
220 if(typeof rs[target] != 'function'){
221 var p = rs[target].getPanel(panelId);
222 if(p){
223 return p;
224 }
225 }
226 }
227 return null;
228 },
229
230 /**
231 * Searches all regions for a panel with the specified id and activates (shows) it.
232 * @param {String/ContentPanel} panelId The panels id or the panel itself
233 * @return {YAHOO.ext.ContentPanel} The shown panel or null
234 */
235 showPanel : function(panelId) {
236 var rs = this.regions;
237 for(var target in rs){
238 var r = rs[target];
239 if(typeof r != 'function'){
240 if(r.hasPanel(panelId)){
241 return r.showPanel(panelId);
242 }
243 }
244 }
245 return null;
246 },
247
248 /**
249 * Restores this layouts state using YAHOO.ext.state.Manager or the state provided by the passed provider.
250 * @param {YAHOO.ext.state.Provider} provider (optional) An alternate state provider
251 */
252 restoreState : function(provider){
253 if(!provider){
254 provider = YAHOO.ext.state.Manager;
255 }
256 var sm = new YAHOO.ext.LayoutStateManager();
257 sm.init(this, provider);
258 }
259});
260
261YAHOO.ext.BorderLayout.RegionFactory = {};
262YAHOO.ext.BorderLayout.RegionFactory.validRegions = ['north','south','east','west','center'];
263YAHOO.ext.BorderLayout.RegionFactory.create = function(target, mgr, config){
264 target = target.toLowerCase();
265 if(config.lightweight || config.basic){
266 return new YAHOO.ext.BasicLayoutRegion(mgr, config, target);
267 }
268 switch(target){
269 case 'north':
270 return new YAHOO.ext.NorthLayoutRegion(mgr, config);
271 case 'south':
272 return new YAHOO.ext.SouthLayoutRegion(mgr, config);
273 case 'east':
274 return new YAHOO.ext.EastLayoutRegion(mgr, config);
275 case 'west':
276 return new YAHOO.ext.WestLayoutRegion(mgr, config);
277 case 'center':
278 return new YAHOO.ext.CenterLayoutRegion(mgr, config);
279 }
280 throw 'Layout region "'+target+'" not supported.';
281};
diff --git a/frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js b/frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js
new file mode 100644
index 0000000..9b4a09f
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/BorderLayoutRegions.js
@@ -0,0 +1,207 @@
1/*
2 * These classes are private internal classes
3 */
4YAHOO.ext.CenterLayoutRegion = function(mgr, config){
5 YAHOO.ext.CenterLayoutRegion.superclass.constructor.call(this, mgr, config, 'center');
6 this.visible = true;
7 this.minWidth = config.minWidth || 20;
8 this.minHeight = config.minHeight || 20;
9};
10
11YAHOO.extendX(YAHOO.ext.CenterLayoutRegion, YAHOO.ext.LayoutRegion, {
12 hide : function(){
13 // center panel can't be hidden
14 },
15
16 show : function(){
17 // center panel can't be hidden
18 },
19
20 getMinWidth: function(){
21 return this.minWidth;
22 },
23
24 getMinHeight: function(){
25 return this.minHeight;
26 }
27});
28
29
30YAHOO.ext.NorthLayoutRegion = function(mgr, config){
31 YAHOO.ext.NorthLayoutRegion.superclass.constructor.call(this, mgr, config, 'north', 'n-resize');
32 if(this.split){
33 this.split.placement = YAHOO.ext.SplitBar.TOP;
34 this.split.orientation = YAHOO.ext.SplitBar.VERTICAL;
35 this.split.el.addClass('ylayout-split-v');
36 }
37 if(typeof config.initialSize != 'undefined'){
38 this.el.setHeight(config.initialSize);
39 }
40};
41YAHOO.extendX(YAHOO.ext.NorthLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
42 getBox : function(){
43 if(this.collapsed){
44 return this.collapsedEl.getBox();
45 }
46 var box = this.el.getBox();
47 if(this.split){
48 box.height += this.split.el.getHeight();
49 }
50 return box;
51 },
52
53 updateBox : function(box){
54 if(this.split && !this.collapsed){
55 box.height -= this.split.el.getHeight();
56 this.split.el.setLeft(box.x);
57 this.split.el.setTop(box.y+box.height);
58 this.split.el.setWidth(box.width);
59 }
60 if(this.collapsed){
61 this.el.setWidth(box.width);
62 var bodyWidth = box.width - this.el.getBorderWidth('rl');
63 this.bodyEl.setWidth(bodyWidth);
64 if(this.activePanel && this.panelSize){
65 this.activePanel.setSize(bodyWidth, this.panelSize.height);
66 }
67 }
68 YAHOO.ext.NorthLayoutRegion.superclass.updateBox.call(this, box);
69 }
70});
71
72YAHOO.ext.SouthLayoutRegion = function(mgr, config){
73 YAHOO.ext.SouthLayoutRegion.superclass.constructor.call(this, mgr, config, 'south', 's-resize');
74 if(this.split){
75 this.split.placement = YAHOO.ext.SplitBar.BOTTOM;
76 this.split.orientation = YAHOO.ext.SplitBar.VERTICAL;
77 this.split.el.addClass('ylayout-split-v');
78 }
79 if(typeof config.initialSize != 'undefined'){
80 this.el.setHeight(config.initialSize);
81 }
82};
83YAHOO.extendX(YAHOO.ext.SouthLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
84 getBox : function(){
85 if(this.collapsed){
86 return this.collapsedEl.getBox();
87 }
88 var box = this.el.getBox();
89 if(this.split){
90 var sh = this.split.el.getHeight();
91 box.height += sh;
92 box.y -= sh;
93 }
94 return box;
95 },
96
97 updateBox : function(box){
98 if(this.split && !this.collapsed){
99 var sh = this.split.el.getHeight();
100 box.height -= sh;
101 box.y += sh;
102 this.split.el.setLeft(box.x);
103 this.split.el.setTop(box.y-sh);
104 this.split.el.setWidth(box.width);
105 }
106 if(this.collapsed){
107 this.el.setWidth(box.width);
108 var bodyWidth = box.width - this.el.getBorderWidth('rl');
109 this.bodyEl.setWidth(bodyWidth);
110 if(this.activePanel && this.panelSize){
111 this.activePanel.setSize(bodyWidth, this.panelSize.height);
112 }
113 }
114 YAHOO.ext.SouthLayoutRegion.superclass.updateBox.call(this, box);
115 }
116});
117
118YAHOO.ext.EastLayoutRegion = function(mgr, config){
119 YAHOO.ext.EastLayoutRegion.superclass.constructor.call(this, mgr, config, 'east', 'e-resize');
120 if(this.split){
121 this.split.placement = YAHOO.ext.SplitBar.RIGHT;
122 this.split.orientation = YAHOO.ext.SplitBar.HORIZONTAL;
123 this.split.el.addClass('ylayout-split-h');
124 }
125 if(typeof config.initialSize != 'undefined'){
126 this.el.setWidth(config.initialSize);
127 }
128};
129YAHOO.extendX(YAHOO.ext.EastLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
130 getBox : function(){
131 if(this.collapsed){
132 return this.collapsedEl.getBox();
133 }
134 var box = this.el.getBox();
135 if(this.split){
136 var sw = this.split.el.getWidth();
137 box.width += sw;
138 box.x -= sw;
139 }
140 return box;
141 },
142
143 updateBox : function(box){
144 if(this.split && !this.collapsed){
145 var sw = this.split.el.getWidth();
146 box.width -= sw;
147 this.split.el.setLeft(box.x);
148 this.split.el.setTop(box.y);
149 this.split.el.setHeight(box.height);
150 box.x += sw;
151 }
152 if(this.collapsed){
153 this.el.setHeight(box.height);
154 var bodyHeight = this.config.titlebar ? box.height - (this.titleEl.getHeight()||0) : box.height;
155 bodyHeight -= this.el.getBorderWidth('tb');
156 this.bodyEl.setHeight(bodyHeight);
157 if(this.activePanel && this.panelSize){
158 this.activePanel.setSize(this.panelSize.width, bodyHeight);
159 }
160 }
161 YAHOO.ext.EastLayoutRegion.superclass.updateBox.call(this, box);
162 }
163});
164
165YAHOO.ext.WestLayoutRegion = function(mgr, config){
166 YAHOO.ext.WestLayoutRegion.superclass.constructor.call(this, mgr, config, 'west', 'w-resize');
167 if(this.split){
168 this.split.placement = YAHOO.ext.SplitBar.LEFT;
169 this.split.orientation = YAHOO.ext.SplitBar.HORIZONTAL;
170 this.split.el.addClass('ylayout-split-h');
171 }
172 if(typeof config.initialSize != 'undefined'){
173 this.el.setWidth(config.initialSize);
174 }
175};
176YAHOO.extendX(YAHOO.ext.WestLayoutRegion, YAHOO.ext.SplitLayoutRegion, {
177 getBox : function(){
178 if(this.collapsed){
179 return this.collapsedEl.getBox();
180 }
181 var box = this.el.getBox();
182 if(this.split){
183 box.width += this.split.el.getWidth();
184 }
185 return box;
186 },
187
188 updateBox : function(box){
189 if(this.split && !this.collapsed){
190 var sw = this.split.el.getWidth();
191 box.width -= sw;
192 this.split.el.setLeft(box.x+box.width);
193 this.split.el.setTop(box.y);
194 this.split.el.setHeight(box.height);
195 }
196 if(this.collapsed){
197 this.el.setHeight(box.height);
198 var bodyHeight = this.config.titlebar ? box.height - (this.titleEl.getHeight()||0) : box.height;
199 bodyHeight -= this.el.getBorderWidth('tb');
200 this.bodyEl.setHeight(bodyHeight);
201 if(this.activePanel && this.panelSize){
202 this.activePanel.setSize(this.panelSize.width, bodyHeight);
203 }
204 }
205 YAHOO.ext.WestLayoutRegion.superclass.updateBox.call(this, box);
206 }
207});
diff --git a/frontend/beta/js/YUI-extensions/layout/ContentPanels.js b/frontend/beta/js/YUI-extensions/layout/ContentPanels.js
new file mode 100644
index 0000000..7cfdde7
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/ContentPanels.js
@@ -0,0 +1,325 @@
1/**
2 * @class YAHOO.ext.ContentPanel
3 * @extends YAHOO.ext.util.Observable
4 * A basic ContentPanel element.
5 * @cfg {Boolean} fitToFrame True for this panel to manually adjust it's size when the region resizes (defaults to false)
6 * @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a DomHelper config of the element to create
7 * @cfg {Boolean} closable True if the panel can be closed/removed
8 * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
9 * @cfg {String/HTMLElement/Element} resizeEl An element to resize if fitToFrame is true (instead of this panel's element)
10 * @cfg {Toolbar} toolbar A toolbar for this panel
11 * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with fitToFrame)
12 * @cfg {String} title The title for this panel
13 * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a fitToFrame (default is [0, 0])
14 * @constructor
15 * Create a new ContentPanel.
16 * @param {String/HTMLElement/Element} el The container element for this panel
17 * @param {String/Object} config A string to set only the title or a config object
18 * @param {String} content (optional) Set the HTML content for this panel
19 */
20YAHOO.ext.ContentPanel = function(el, config, content){
21 YAHOO.ext.ContentPanel.superclass.constructor.call(this);
22 this.el = getEl(el, true);
23 if(!this.el && config && config.autoCreate){
24 if(typeof config.autoCreate == 'object'){
25 if(!config.autoCreate.id){
26 config.autoCreate.id = el;
27 }
28 this.el = YAHOO.ext.DomHelper.append(document.body,
29 config.autoCreate, true);
30 }else{
31 this.el = YAHOO.ext.DomHelper.append(document.body,
32 {tag: 'div', cls: 'ylayout-inactive-content', id: el}, true);
33 }
34 }
35 this.closable = false;
36 this.loaded = false;
37 this.active = false;
38 if(typeof config == 'string'){
39 this.title = config;
40 }else{
41 YAHOO.ext.util.Config.apply(this, config);
42 }
43 if(this.resizeEl){
44 this.resizeEl = getEl(this.resizeEl, true);
45 }else{
46 this.resizeEl = this.el;
47 }
48 this.events = {
49 /**
50 * @event activate
51 * Fires when this panel is activated.
52 * @param {YAHOO.ext.ContentPanel} this
53 */
54 'activate' : new YAHOO.util.CustomEvent('activate'),
55 /**
56 * @event deactivate
57 * Fires when this panel is activated.
58 * @param {YAHOO.ext.ContentPanel} this
59 */
60 'deactivate' : new YAHOO.util.CustomEvent('deactivate')
61 };
62 if(this.autoScroll){
63 this.resizeEl.setStyle('overflow', 'auto');
64 }
65 if(content){
66 this.setContent(content);
67 }
68};
69
70YAHOO.extendX(YAHOO.ext.ContentPanel, YAHOO.ext.util.Observable, {
71 setRegion : function(region){
72 this.region = region;
73 if(region){
74 this.el.replaceClass('ylayout-inactive-content', 'ylayout-active-content');
75 }else{
76 this.el.replaceClass('ylayout-active-content', 'ylayout-inactive-content');
77 }
78 },
79
80 /**
81 * Returns the toolbar for this Panel if one was configured
82 * @return {YAHOO.ext.Toolbar}
83 */
84 getToolbar : function(){
85 return this.toolbar;
86 },
87
88 setActiveState : function(active){
89 this.active = active;
90 if(!active){
91 this.fireEvent('deactivate', this);
92 }else{
93 this.fireEvent('activate', this);
94 }
95 },
96 /**
97 * Updates this panel's element
98 * @param {String} content The new content
99 * @param {<i>Boolean</i>} loadScripts (optional) true to look for and process scripts
100 */
101 setContent : function(content, loadScripts){
102 this.el.update(content, loadScripts);
103 },
104
105 /**
106 * Get the {@link YAHOO.ext.UpdateManager} for this panel. Enables you to perform Ajax updates.
107 * @return {YAHOO.ext.UpdateManager} The UpdateManager
108 */
109 getUpdateManager : function(){
110 return this.el.getUpdateManager();
111 },
112
113 /**
114 * Set a URL to be used to load the content for this panel.
115 * @param {String/Function} url The url to load the content from or a function to call to get the url
116 * @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)
117 * @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)
118 * @return {YAHOO.ext.UpdateManager} The UpdateManager
119 */
120 setUrl : function(url, params, loadOnce){
121 if(this.refreshDelegate){
122 this.removeListener('activate', this.refreshDelegate);
123 }
124 this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
125 this.on('activate', this._handleRefresh.createDelegate(this, [url, params, loadOnce]));
126 return this.el.getUpdateManager();
127 },
128
129 _handleRefresh : function(url, params, loadOnce){
130 if(!loadOnce || !this.loaded){
131 var updater = this.el.getUpdateManager();
132 updater.update(url, params, this._setLoaded.createDelegate(this));
133 }
134 },
135
136 _setLoaded : function(){
137 this.loaded = true;
138 },
139
140 /**
141 * Returns this panel's id
142 * @return {String}
143 */
144 getId : function(){
145 return this.el.id;
146 },
147
148 /**
149 * Returns this panel's element
150 * @return {YAHOO.ext.Element}
151 */
152 getEl : function(){
153 return this.el;
154 },
155
156 adjustForComponents : function(width, height){
157 if(this.toolbar){
158 var te = this.toolbar.getEl();
159 height -= te.getHeight();
160 te.setWidth(width);
161 }
162 if(this.adjustments){
163 width += this.adjustments[0];
164 height += this.adjustments[1];
165 }
166 return {'width': width, 'height': height};
167 },
168
169 setSize : function(width, height){
170 if(this.fitToFrame){
171 var size = this.adjustForComponents(width, height);
172 this.resizeEl.setSize(this.autoWidth ? 'auto' : size.width, size.height);
173 }
174 },
175
176 /**
177 * Returns this panel's title
178 * @return {String}
179 */
180 getTitle : function(){
181 return this.title;
182 },
183
184 /**
185 * Set this panel's title
186 * @param {String} title
187 */
188 setTitle : function(title){
189 this.title = title;
190 if(this.region){
191 this.region.updatePanelTitle(this, title);
192 }
193 },
194
195 /**
196 * Returns true is this panel was configured to be closable
197 * @return {Boolean}
198 */
199 isClosable : function(){
200 return this.closable;
201 },
202
203 beforeSlide : function(){
204 this.el.clip();
205 this.resizeEl.clip();
206 },
207
208 afterSlide : function(){
209 this.el.unclip();
210 this.resizeEl.unclip();
211 },
212
213 /**
214 * Force a content refresh from the URL specified in the setUrl() method.
215 * Will fail silently if the setUrl method has not been called.
216 * This does not activate the panel, just updates its content.
217 */
218 refresh : function(){
219 if(this.refreshDelegate){
220 this.loaded = false;
221 this.refreshDelegate();
222 }
223 },
224
225 /**
226 * Destroys this panel
227 */
228 destroy : function(){
229 this.el.removeAllListeners();
230 var tempEl = document.createElement('span');
231 tempEl.appendChild(this.el.dom);
232 tempEl.innerHTML = '';
233 this.el = null;
234 }
235});
236
237/**
238 * @class YAHOO.ext.GridPanel
239 * @extends YAHOO.ext.ContentPanel
240 * @constructor
241 * Create a new GridPanel.
242 * @param {YAHOO.ext.grid.Grid} grid The grid for this panel
243 * @param {String/Object} config A string to set only the title or a config object
244 */
245YAHOO.ext.GridPanel = function(grid, config){
246 this.wrapper = YAHOO.ext.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
247 {tag: 'div', cls: 'ylayout-grid-wrapper ylayout-inactive-content'}, true);
248 this.wrapper.dom.appendChild(grid.container.dom);
249 YAHOO.ext.GridPanel.superclass.constructor.call(this, this.wrapper, config);
250 if(this.toolbar){
251 this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
252 }
253 grid.monitorWindowResize = false; // turn off autosizing
254 grid.autoHeight = false;
255 grid.autoWidth = false;
256 this.grid = grid;
257 this.grid.container.replaceClass('ylayout-inactive-content', 'ylayout-component-panel');
258};
259
260YAHOO.extendX(YAHOO.ext.GridPanel, YAHOO.ext.ContentPanel, {
261 getId : function(){
262 return this.grid.id;
263 },
264
265 /**
266 * Returns the grid for this panel
267 * @return {YAHOO.ext.grid.Grid}
268 */
269 getGrid : function(){
270 return this.grid;
271 },
272
273 setSize : function(width, height){
274 var grid = this.grid;
275 var size = this.adjustForComponents(width, height);
276 grid.container.setSize(size.width, size.height);
277 grid.autoSize();
278 },
279
280 beforeSlide : function(){
281 this.grid.getView().wrapEl.clip();
282 },
283
284 afterSlide : function(){
285 this.grid.getView().wrapEl.unclip();
286 },
287
288 destroy : function(){
289 this.grid.getView().unplugDataModel(this.grid.getDataModel());
290 this.grid.container.removeAllListeners();
291 YAHOO.ext.GridPanel.superclass.destroy.call(this);
292 }
293});
294
295
296/**
297 * @class YAHOO.ext.NestedLayoutPanel
298 * @extends YAHOO.ext.ContentPanel
299 * @constructor
300 * Create a new NestedLayoutPanel.
301 * @param {YAHOO.ext.BorderLayout} layout The layout for this panel
302 * @param {String/Object} config A string to set only the title or a config object
303 */
304YAHOO.ext.NestedLayoutPanel = function(layout, config){
305 YAHOO.ext.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
306 layout.monitorWindowResize = false; // turn off autosizing
307 this.layout = layout;
308 this.layout.getEl().addClass('ylayout-nested-layout');
309};
310
311YAHOO.extendX(YAHOO.ext.NestedLayoutPanel, YAHOO.ext.ContentPanel, {
312 setSize : function(width, height){
313 var size = this.adjustForComponents(width, height);
314 this.layout.getEl().setSize(size.width, size.height);
315 this.layout.layout();
316 },
317
318 /**
319 * Returns the nested BorderLayout for this panel
320 * @return {YAHOO.ext.BorderLayout}
321 */
322 getLayout : function(){
323 return this.layout;
324 }
325});
diff --git a/frontend/beta/js/YUI-extensions/layout/LayoutManager.js b/frontend/beta/js/YUI-extensions/layout/LayoutManager.js
new file mode 100644
index 0000000..c59bf0e
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/LayoutManager.js
@@ -0,0 +1,135 @@
1/**
2 * @class YAHOO.ext.LayoutManager
3 * @extends YAHOO.ext.util.Observable
4 * Base class for layout managers.
5 */
6YAHOO.ext.LayoutManager = function(container){
7 YAHOO.ext.LayoutManager.superclass.constructor.call(this);
8 this.el = getEl(container, true);
9 // ie scrollbar fix
10 if(this.el.dom == document.body && YAHOO.ext.util.Browser.isIE){
11 document.body.scroll = 'no';
12 }
13 this.id = this.el.id;
14 this.el.addClass('ylayout-container');
15 /** false to disable window resize monitoring @type Boolean */
16 this.monitorWindowResize = true;
17 this.regions = {};
18 this.events = {
19 /**
20 * @event layout
21 * Fires when a layout is performed.
22 * @param {YAHOO.ext.LayoutManager} this
23 */
24 'layout' : new YAHOO.util.CustomEvent(),
25 /**
26 * @event regionresized
27 * Fires when the user resizes a region.
28 * @param {YAHOO.ext.LayoutRegion} region
29 * @param {Number} newSize The new size (width for east/west, height for north/south)
30 */
31 'regionresized' : new YAHOO.util.CustomEvent(),
32 /**
33 * @event regioncollapsed
34 * Fires when a region is collapsed.
35 * @param {YAHOO.ext.LayoutRegion} region
36 */
37 'regioncollapsed' : new YAHOO.util.CustomEvent(),
38 /**
39 * @event regionexpanded
40 * Fires when a region is expanded.
41 * @param {YAHOO.ext.LayoutRegion} region
42 */
43 'regionexpanded' : new YAHOO.util.CustomEvent()
44 };
45 this.updating = false;
46 YAHOO.ext.EventManager.onWindowResize(this.onWindowResize, this, true);
47};
48
49YAHOO.extendX(YAHOO.ext.LayoutManager, YAHOO.ext.util.Observable, {
50 /**
51 * Returns true if this layout is currently being updated
52 * @return {Boolean}
53 */
54 isUpdating : function(){
55 return this.updating;
56 },
57
58 /**
59 * Suspend the LayoutManager from doing auto-layouts while
60 * making multiple add or remove calls
61 */
62 beginUpdate : function(){
63 this.updating = true;
64 },
65
66 /**
67 * Restore auto-layouts and optionally disable the manager from performing a layout
68 * @param {Boolean} noLayout true to disable a layout update
69 */
70 endUpdate : function(noLayout){
71 this.updating = false;
72 if(!noLayout){
73 this.layout();
74 }
75 },
76
77 layout: function(){
78
79 },
80
81 onRegionResized : function(region, newSize){
82 this.fireEvent('regionresized', region, newSize);
83 this.layout();
84 },
85
86 onRegionCollapsed : function(region){
87 this.fireEvent('regioncollapsed', region);
88 },
89
90 onRegionExpanded : function(region){
91 this.fireEvent('regionexpanded', region);
92 },
93
94 /**
95 * Returns the size of the current view, This method normalizes document.body and element embedded layouts and
96 * performs box-model adjustments.
97 * @return {Object} The size as an object {width: (the width), height: (the height)}
98 */
99 getViewSize : function(){
100 var size;
101 if(this.el.dom != document.body){
102 this.el.beginMeasure();
103 size = this.el.getSize();
104 this.el.endMeasure();
105 }else{
106 size = {width: YAHOO.util.Dom.getViewportWidth(), height: YAHOO.util.Dom.getViewportHeight()};
107 }
108 size.width -= this.el.getBorderWidth('lr')-this.el.getPadding('lr');
109 size.height -= this.el.getBorderWidth('tb')-this.el.getPadding('tb');
110 return size;
111 },
112
113 /**
114 * Returns the element this layout is bound to.
115 * @return {YAHOO.ext.Element}
116 */
117 getEl : function(){
118 return this.el;
119 },
120
121 /**
122 * Returns the specified region.
123 * @param {String} target The region key
124 * @return {YAHOO.ext.LayoutRegion}
125 */
126 getRegion : function(target){
127 return this.regions[target.toLowerCase()];
128 },
129
130 onWindowResize : function(){
131 if(this.monitorWindowResize){
132 this.layout();
133 }
134 }
135});
diff --git a/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
new file mode 100644
index 0000000..fa8a1b6
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/LayoutRegion.js
@@ -0,0 +1,496 @@
1/**
2 * @class YAHOO.ext.LayoutRegion
3 * @extends YAHOO.ext.util.Observable
4 * This class represents a region in a layout manager.
5 * @cfg {Boolean} collapsible False to disable collapsing (defaults to true)
6 * @cfg {Boolean} floatable False to disable floating (defaults to true)
7 * @cfg {Object} margins Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
8 * @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})
9 * @cfg {String} tabPosition 'top' or 'bottom' (defaults to 'bottom')
10 * @cfg {Boolean} alwaysShowTabs True to always display tabs even when only 1 panel (defaults to false)
11 * @cfg {Boolean} autoScroll True to enable overflow scrolling (defaults to false)
12 * @cfg {Boolean} titlebar True to display a title bar (defaults to true)
13 * @cfg {String} title The title for the region (overrides panel titles)
14 * @cfg {Boolean} animate True to animate expand/collapse (defaults to false)
15 * @cfg {Float} duration The duration of the expand/collapse animation in seconds
16 * @cfg {Float} slideDuration The duration of the slide out/in when collapsed in seconds
17 * @cfg {Boolean} autoHide False to disable disable autoHide when the mouse leaves the "floated" region (defaults to true)
18 * @cfg {Boolean} preservePanels True to preserve removed panels so they can be readded later (defaults to false)
19 * @cfg {Boolean} closeOnTabs True to place the close icon on the tabs instead of the region titlebar (defaults to false)
20 * @cfg {Boolean} hideTabs True to hide the tab strip (defaults to false)
21 * @cfg {Boolean} resizeTabs True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
22 * the space available, similar to FireFox 1.5 tabs (defaults to false)
23 * @cfg {Number} minTabWidth The minimum tab width (defaults to 40)
24 * @cfg {Number} preferredTabWidth The preferred tab width (defaults to 150)
25 */
26YAHOO.ext.LayoutRegion = function(mgr, config, pos){
27 YAHOO.ext.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
28 var dh = YAHOO.ext.DomHelper;
29 /** This regions container element @type YAHOO.ext.Element */
30 this.el = dh.append(mgr.el.dom, {tag: 'div', cls: 'ylayout-panel ylayout-panel-' + this.position}, true);
31 /** This regions title element @type YAHOO.ext.Element */
32 this.titleEl = dh.append(this.el.dom, {tag: 'div', unselectable: 'on', cls: 'yunselectable ylayout-panel-hd ylayout-title-'+this.position, children:[
33 {tag: 'span', cls: 'yunselectable ylayout-panel-hd-text', unselectable: 'on', html: '&#160;'},
34 {tag: 'div', cls: 'yunselectable ylayout-panel-hd-tools', unselectable: 'on'}
35 ]}, true);
36 this.titleEl.enableDisplayMode();
37 /** This regions title text element @type HTMLElement */
38 this.titleTextEl = this.titleEl.dom.firstChild;
39 this.tools = getEl(this.titleEl.dom.childNodes[1], true);
40 this.closeBtn = this.createTool(this.tools.dom, 'ylayout-close');
41 this.closeBtn.enableDisplayMode();
42 this.closeBtn.on('click', this.closeClicked, this, true);
43 this.closeBtn.hide();
44 /** This regions body element @type YAHOO.ext.Element */
45 this.bodyEl = dh.append(this.el.dom, {tag: 'div', cls: 'ylayout-panel-body'}, true);
46 this.visible = false;
47 this.collapsed = false;
48 this.hide();
49 this.on('paneladded', this.validateVisibility, this, true);
50 this.on('panelremoved', this.validateVisibility, this, true);
51
52 this.applyConfig(config);
53};
54
55YAHOO.extendX(YAHOO.ext.LayoutRegion, YAHOO.ext.BasicLayoutRegion, {
56 applyConfig : function(config){
57 if(config.collapsible && this.position != 'center' && !this.collapsedEl){
58 var dh = YAHOO.ext.DomHelper;
59 this.collapseBtn = this.createTool(this.tools.dom, 'ylayout-collapse-'+this.position);
60 this.collapseBtn.mon('click', this.collapse, this, true);
61 /** This regions collapsed element @type YAHOO.ext.Element */
62 this.collapsedEl = dh.append(this.mgr.el.dom, {tag: 'div', cls: 'ylayout-collapsed ylayout-collapsed-'+this.position, children:[
63 {tag: 'div', cls: 'ylayout-collapsed-tools'}
64 ]}, true);
65 if(config.floatable !== false){
66 this.collapsedEl.addClassOnOver('ylayout-collapsed-over');
67 this.collapsedEl.mon('click', this.collapseClick, this, true);
68 }
69 this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild, 'ylayout-expand-'+this.position);
70 this.expandBtn.mon('click', this.expand, this, true);
71 }
72 if(this.collapseBtn){
73 this.collapseBtn.setVisible(config.collapsible == true);
74 }
75 this.cmargins = config.cmargins || this.cmargins ||
76 (this.position == 'west' || this.position == 'east' ?
77 {top: 0, left: 2, right:2, bottom: 0} :
78 {top: 2, left: 0, right:0, bottom: 2});
79 this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
80 this.bottomTabs = config.tabPosition != 'top';
81 this.autoScroll = config.autoScroll || false;
82 if(this.autoScroll){
83 this.bodyEl.setStyle('overflow', 'auto');
84 }else{
85 this.bodyEl.setStyle('overflow', 'hidden');
86 }
87 if((!config.titlebar && !config.title) || config.titlebar === false){
88 this.titleEl.hide();
89 }else{
90 this.titleEl.show();
91 if(config.title){
92 this.titleTextEl.innerHTML = config.title;
93 }
94 }
95 this.duration = config.duration || .30;
96 this.slideDuration = config.slideDuration || .45;
97 this.config = config;
98 if(config.collapsed){
99 this.collapse(true);
100 }
101 },
102 /**
103 * Returns true if this region is currently visible.
104 * @return {Boolean}
105 */
106 isVisible : function(){
107 return this.visible;
108 },
109
110 getBox : function(){
111 var b;
112 if(!this.collapsed){
113 b = this.el.getBox(false, true);
114 }else{
115 b = this.collapsedEl.getBox(false, true);
116 }
117 return b;
118 },
119
120 getMargins : function(){
121 return this.collapsed ? this.cmargins : this.margins;
122 },
123
124 highlight : function(){
125 this.el.addClass('ylayout-panel-dragover');
126 },
127
128 unhighlight : function(){
129 this.el.removeClass('ylayout-panel-dragover');
130 },
131
132 updateBox : function(box){
133 this.box = box;
134 if(!this.collapsed){
135 this.el.dom.style.left = box.x + 'px';
136 this.el.dom.style.top = box.y + 'px';
137 this.el.setSize(box.width, box.height);
138 var bodyHeight = this.titleEl.isVisible() ? box.height - (this.titleEl.getHeight()||0) : box.height;
139 bodyHeight -= this.el.getBorderWidth('tb');
140 bodyWidth = box.width - this.el.getBorderWidth('rl');
141 this.bodyEl.setHeight(bodyHeight);
142 this.bodyEl.setWidth(bodyWidth);
143 var tabHeight = bodyHeight;
144 if(this.tabs){
145 tabHeight = this.tabs.syncHeight(bodyHeight);
146 if(YAHOO.ext.util.Browser.isIE) this.tabs.el.repaint();
147 }
148 this.panelSize = {width: bodyWidth, height: tabHeight};
149 if(this.activePanel){
150 this.activePanel.setSize(bodyWidth, tabHeight);
151 }
152 }else{
153 this.collapsedEl.dom.style.left = box.x + 'px';
154 this.collapsedEl.dom.style.top = box.y + 'px';
155 this.collapsedEl.setSize(box.width, box.height);
156 }
157 if(this.tabs){
158 this.tabs.autoSizeTabs();
159 }
160 },
161
162 /**
163 * Returns the container element for this region.
164 * @return {YAHOO.ext.Element}
165 */
166 getEl : function(){
167 return this.el;
168 },
169
170 /**
171 * Hides this region.
172 */
173 hide : function(){
174 if(!this.collapsed){
175 this.el.dom.style.left = '-2000px';
176 this.el.hide();
177 }else{
178 this.collapsedEl.dom.style.left = '-2000px';
179 this.collapsedEl.hide();
180 }
181 this.visible = false;
182 this.fireEvent('visibilitychange', this, false);
183 },
184
185 /**
186 * Shows this region if it was previously hidden.
187 */
188 show : function(){
189 if(!this.collapsed){
190 this.el.show();
191 }else{
192 this.collapsedEl.show();
193 }
194 this.visible = true;
195 this.fireEvent('visibilitychange', this, true);
196 },
197
198 closeClicked : function(){
199 if(this.activePanel){
200 this.remove(this.activePanel);
201 }
202 },
203
204 collapseClick : function(e){
205 if(this.isSlid){
206 e.stopPropagation();
207 this.slideIn();
208 }else{
209 e.stopPropagation();
210 this.slideOut();
211 }
212 },
213
214 /**
215 * Collapses this region.
216 * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
217 */
218 collapse : function(skipAnim){
219 if(this.collapsed) return;
220 this.collapsed = true;
221 if(this.split){
222 this.split.el.hide();
223 }
224 if(this.config.animate && skipAnim !== true){
225 this.fireEvent('invalidated', this);
226 this.animateCollapse();
227 }else{
228 this.el.setLocation(-20000,-20000);
229 this.el.hide();
230 this.collapsedEl.show();
231 this.fireEvent('collapsed', this);
232 this.fireEvent('invalidated', this);
233 }
234 },
235
236 animateCollapse : function(){
237 // overridden
238 },
239
240 /**
241 * Expand this region if it was previously collapsed.
242 * @param {YAHOO.ext.EventObject} e The event that triggered the expand (or null if calling manually)
243 * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
244 */
245 expand : function(e, skipAnim){
246 if(e) e.stopPropagation();
247 if(!this.collapsed) return;
248 if(this.isSlid){
249 this.slideIn(this.expand.createDelegate(this));
250 return;
251 }
252 this.collapsed = false;
253 this.el.show();
254 if(this.config.animate && skipAnim !== true){
255 this.animateExpand();
256 }else{
257 if(this.split){
258 this.split.el.show();
259 }
260 this.collapsedEl.setLocation(-2000,-2000);
261 this.collapsedEl.hide();
262 this.fireEvent('invalidated', this);
263 this.fireEvent('expanded', this);
264 }
265 },
266
267 animateExpand : function(){
268 // overridden
269 },
270
271 initTabs : function(){
272 this.bodyEl.setStyle('overflow', 'hidden');
273 var ts = new YAHOO.ext.TabPanel(this.bodyEl.dom, this.bottomTabs);
274 if(this.config.hideTabs){
275 ts.stripWrap.setDisplayed(false);
276 }
277 this.tabs = ts;
278 ts.resizeTabs = this.config.resizeTabs === true;
279 ts.minTabWidth = this.config.minTabWidth || 40;
280 ts.maxTabWidth = this.config.maxTabWidth || 250;
281 ts.preferredTabWidth = this.config.preferredTabWidth || 150;
282 ts.monitorResize = false;
283 ts.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
284 this.panels.each(this.initPanelAsTab, this);
285 },
286
287 initPanelAsTab : function(panel){
288 var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
289 this.config.closeOnTab && panel.isClosable());
290 ti.on('activate', function(){
291 this.setActivePanel(panel);
292 }, this, true);
293 if(this.config.closeOnTab){
294 ti.on('beforeclose', function(t, e){
295 e.cancel = true;
296 this.remove(panel);
297 }, this, true);
298 }
299 return ti;
300 },
301
302 updatePanelTitle : function(panel, title){
303 if(this.activePanel == panel){
304 this.updateTitle(title);
305 }
306 if(this.tabs){
307 this.tabs.getTab(panel.getEl().id).setText(title);
308 }
309 },
310
311 updateTitle : function(title){
312 if(this.titleTextEl && !this.config.title){
313 this.titleTextEl.innerHTML = (typeof title != 'undefined' && title.length > 0 ? title : "&#160;");
314 }
315 },
316
317 setActivePanel : function(panel){
318 panel = this.getPanel(panel);
319 if(this.activePanel && this.activePanel != panel){
320 this.activePanel.setActiveState(false);
321 }
322 this.activePanel = panel;
323 panel.setActiveState(true);
324 if(this.panelSize){
325 panel.setSize(this.panelSize.width, this.panelSize.height);
326 }
327 this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
328 this.updateTitle(panel.getTitle());
329 this.fireEvent('panelactivated', this, panel);
330 },
331
332 /**
333 * Show the specified panel.
334 * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
335 * @return {YAHOO.ext.ContentPanel} The shown panel or null
336 */
337 showPanel : function(panel){
338 if(panel = this.getPanel(panel)){
339 if(this.tabs){
340 this.tabs.activate(panel.getEl().id);
341 }else{
342 this.setActivePanel(panel);
343 }
344 }
345 return panel;
346 },
347
348 /**
349 * Get the active panel for this region.
350 * @return {YAHOO.ext.ContentPanel} The active panel or null
351 */
352 getActivePanel : function(){
353 return this.activePanel;
354 },
355
356 validateVisibility : function(){
357 if(this.panels.getCount() < 1){
358 this.updateTitle('&#160;');
359 this.closeBtn.hide();
360 this.hide();
361 }else{
362 if(!this.isVisible()){
363 this.show();
364 }
365 }
366 },
367
368 /**
369 * Add the passed ContentPanel(s)
370 * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
371 * @return {YAHOO.ext.ContentPanel} The panel added (if only one was added)
372 */
373 add : function(panel){
374 if(arguments.length > 1){
375 for(var i = 0, len = arguments.length; i < len; i++) {
376 this.add(arguments[i]);
377 }
378 return null;
379 }
380 if(this.hasPanel(panel)){
381 this.showPanel(panel);
382 return panel;
383 }
384 panel.setRegion(this);
385 this.panels.add(panel);
386 if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
387 this.bodyEl.dom.appendChild(panel.getEl().dom);
388 if(panel.background !== true){
389 this.setActivePanel(panel);
390 }
391 this.fireEvent('paneladded', this, panel);
392 return panel;
393 }
394 if(!this.tabs){
395 this.initTabs();
396 }else{
397 this.initPanelAsTab(panel);
398 }
399 if(panel.background !== true){
400 this.tabs.activate(panel.getEl().id);
401 }
402 this.fireEvent('paneladded', this, panel);
403 return panel;
404 },
405
406 /**
407 * Hides the tab for the specified panel.
408 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
409 */
410 hidePanel : function(panel){
411 if(this.tabs && (panel = this.getPanel(panel))){
412 this.tabs.hideTab(panel.getEl().id);
413 }
414 },
415
416 /**
417 * Unhides the tab for a previously hidden panel.
418 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
419 */
420 unhidePanel : function(panel){
421 if(this.tabs && (panel = this.getPanel(panel))){
422 this.tabs.unhideTab(panel.getEl().id);
423 }
424 },
425
426 clearPanels : function(){
427 while(this.panels.getCount() > 0){
428 this.remove(this.panels.first());
429 }
430 },
431
432 /**
433 * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
434 * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
435 * @param {Boolean} preservePanel Overrides the config preservePanel option
436 * @return {YAHOO.ext.ContentPanel} The panel that was removed
437 */
438 remove : function(panel, preservePanel){
439 panel = this.getPanel(panel);
440 if(!panel){
441 return null;
442 }
443 var e = {};
444 this.fireEvent('beforeremove', this, panel, e);
445 if(e.cancel === true){
446 return null;
447 }
448 preservePanel = (typeof preservePanel != 'undefined' ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
449 var panelId = panel.getId();
450 this.panels.removeKey(panelId);
451 if(preservePanel){
452 document.body.appendChild(panel.getEl().dom);
453 }
454 if(this.tabs){
455 this.tabs.removeTab(panel.getEl().id);
456 }else if (!preservePanel){
457 this.bodyEl.dom.removeChild(panel.getEl().dom);
458 }
459 if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
460 var p = this.panels.first();
461 var tempEl = document.createElement('span'); // temp holder to keep IE from deleting the node
462 tempEl.appendChild(p.getEl().dom);
463 this.bodyEl.update('');
464 this.bodyEl.dom.appendChild(p.getEl().dom);
465 tempEl = null;
466 this.updateTitle(p.getTitle());
467 this.tabs = null;
468 this.bodyEl.setStyle('overflow', this.config.autoScroll ? 'auto' : 'hidden');
469 this.setActivePanel(p);
470 }
471 panel.setRegion(null);
472 if(this.activePanel == panel){
473 this.activePanel = null;
474 }
475 if(this.config.autoDestroy !== false && preservePanel !== true){
476 try{panel.destroy();}catch(e){}
477 }
478 this.fireEvent('panelremoved', this, panel);
479 return panel;
480 },
481
482 /**
483 * Returns the TabPanel component used by this region
484 * @return {YAHOO.ext.TabPanel}
485 */
486 getTabs : function(){
487 return this.tabs;
488 },
489
490 createTool : function(parentEl, className){
491 var btn = YAHOO.ext.DomHelper.append(parentEl, {tag: 'div', cls: 'ylayout-tools-button',
492 children: [{tag: 'div', cls: 'ylayout-tools-button-inner ' + className, html: '&#160;'}]}, true);
493 btn.addClassOnOver('ylayout-tools-button-over');
494 return btn;
495 }
496});
diff --git a/frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js b/frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js
new file mode 100644
index 0000000..ea22235
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/LayoutStateManager.js
@@ -0,0 +1,68 @@
1/*
2 * Private internal class for reading and applying state
3 */
4YAHOO.ext.LayoutStateManager = function(layout){
5 // default empty state
6 this.state = {
7 north: {},
8 south: {},
9 east: {},
10 west: {}
11 };
12};
13
14YAHOO.ext.LayoutStateManager.prototype = {
15 init : function(layout, provider){
16 this.provider = provider;
17 var state = provider.get(layout.id+'-layout-state');
18 if(state){
19 var wasUpdating = layout.isUpdating();
20 if(!wasUpdating){
21 layout.beginUpdate();
22 }
23 for(var key in state){
24 if(typeof state[key] != 'function'){
25 var rstate = state[key];
26 var r = layout.getRegion(key);
27 if(r && rstate){
28 if(rstate.size){
29 r.resizeTo(rstate.size);
30 }
31 if(rstate.collapsed == true){
32 r.collapse(true);
33 }else{
34 r.expand(null, true);
35 }
36 }
37 }
38 }
39 if(!wasUpdating){
40 layout.endUpdate();
41 }
42 this.state = state;
43 }
44 this.layout = layout;
45 layout.on('regionresized', this.onRegionResized, this, true);
46 layout.on('regioncollapsed', this.onRegionCollapsed, this, true);
47 layout.on('regionexpanded', this.onRegionExpanded, this, true);
48 },
49
50 storeState : function(){
51 this.provider.set(this.layout.id+'-layout-state', this.state);
52 },
53
54 onRegionResized : function(region, newSize){
55 this.state[region.getPosition()].size = newSize;
56 this.storeState();
57 },
58
59 onRegionCollapsed : function(region){
60 this.state[region.getPosition()].collapsed = true;
61 this.storeState();
62 },
63
64 onRegionExpanded : function(region){
65 this.state[region.getPosition()].collapsed = false;
66 this.storeState();
67 }
68};
diff --git a/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js b/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js
new file mode 100644
index 0000000..6b8ce9e
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js
@@ -0,0 +1,282 @@
1/**
2 * @class YAHOO.ext.SplitLayoutRegion
3 * @extends YAHOO.ext.LayoutRegion
4 * Adds a splitbar and other (private) useful functionality to a LayoutRegion
5 */
6YAHOO.ext.SplitLayoutRegion = function(mgr, config, pos, cursor){
7 this.cursor = cursor;
8 YAHOO.ext.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
9 if(config.split){
10 this.hide();
11 }
12};
13
14YAHOO.extendX(YAHOO.ext.SplitLayoutRegion, YAHOO.ext.LayoutRegion, {
15 applyConfig : function(config){
16 YAHOO.ext.SplitLayoutRegion.superclass.applyConfig.call(this, config);
17 if(config.split){
18 if(!this.split){
19 var splitEl = YAHOO.ext.DomHelper.append(this.mgr.el.dom,
20 {tag: 'div', id: this.el.id + '-split', cls: 'ylayout-split ylayout-split-'+this.position, html: '&#160;'});
21 /** The SplitBar for this region @type YAHOO.ext.SplitBar */
22 this.split = new YAHOO.ext.SplitBar(splitEl, this.el);
23 this.split.onMoved.subscribe(this.onSplitMove, this, true);
24 this.split.useShim = config.useShim === true;
25 YAHOO.util.Dom.setStyle([this.split.el.dom, this.split.proxy], 'cursor', this.cursor);
26 this.split.getMaximumSize = this.getMaxSize.createDelegate(this);
27 }
28 if(typeof config.minSize != 'undefined'){
29 this.split.minSize = config.minSize;
30 }
31 if(typeof config.maxSize != 'undefined'){
32 this.split.maxSize = config.maxSize;
33 }
34 }
35 },
36
37 getMaxSize : function(){
38 var cmax = this.config.maxSize || 10000;
39 var center = this.mgr.getRegion('center');
40 return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
41 },
42
43 onSplitMove : function(split, newSize){
44 this.fireEvent('resized', this, newSize);
45 },
46
47 /**
48 * Returns the SplitBar for this region.
49 * @return {YAHOO.ext.SplitBar}
50 */
51 getSplitBar : function(){
52 return this.split;
53 },
54
55 hide : function(){
56 if(this.split){
57 this.split.el.setLocation(-2000,-2000);
58 this.split.el.hide();
59 }
60 YAHOO.ext.SplitLayoutRegion.superclass.hide.call(this);
61 },
62
63 show : function(){
64 if(this.split){
65 this.split.el.show();
66 }
67 YAHOO.ext.SplitLayoutRegion.superclass.show.call(this);
68 },
69
70 beforeSlide: function(){
71 if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
72 this.bodyEl.clip();
73 if(this.tabs) this.tabs.bodyEl.clip();
74 if(this.activePanel){
75 this.activePanel.getEl().clip();
76
77 if(this.activePanel.beforeSlide){
78 this.activePanel.beforeSlide();
79 }
80 }
81 }
82 },
83
84 afterSlide : function(){
85 if(YAHOO.ext.util.Browser.isGecko){// firefox overflow auto bug workaround
86 this.bodyEl.unclip();
87 if(this.tabs) this.tabs.bodyEl.unclip();
88 if(this.activePanel){
89 this.activePanel.getEl().unclip();
90 if(this.activePanel.afterSlide){
91 this.activePanel.afterSlide();
92 }
93 }
94 }
95 },
96
97 slideOut : function(){
98 if(!this.slideEl){
99 this.slideEl = new YAHOO.ext.Actor(
100 YAHOO.ext.DomHelper.append(this.mgr.el.dom, {tag: 'div', cls:'ylayout-slider'}));
101 if(this.config.autoHide !== false){
102 var slideInTask = new YAHOO.ext.util.DelayedTask(this.slideIn, this);
103 this.slideEl.mon('mouseout', function(e){
104 var to = e.getRelatedTarget();
105 if(to && to != this.slideEl.dom && !YAHOO.util.Dom.isAncestor(this.slideEl.dom, to)){
106 slideInTask.delay(500);
107 }
108 }, this, true);
109 this.slideEl.mon('mouseover', function(e){
110 slideInTask.cancel();
111 }, this, true);
112 }
113 }
114 var sl = this.slideEl, c = this.collapsedEl, cm = this.cmargins;
115 this.isSlid = true;
116 this.snapshot = {
117 'left': this.el.getLeft(true),
118 'top': this.el.getTop(true),
119 'colbtn': this.collapseBtn.isVisible(),
120 'closebtn': this.closeBtn.isVisible()
121 };
122 this.collapseBtn.hide();
123 this.closeBtn.hide();
124 this.el.show();
125 this.el.setLeftTop(0,0);
126 sl.startCapture(true);
127 var size;
128 switch(this.position){
129 case 'west':
130 sl.setLeft(c.getRight(true));
131 sl.setTop(c.getTop(true));
132 size = this.el.getWidth();
133 break;
134 case 'east':
135 sl.setRight(this.mgr.getViewSize().width-c.getLeft(true));
136 sl.setTop(c.getTop(true));
137 size = this.el.getWidth();
138 break;
139 case 'north':
140 sl.setLeft(c.getLeft(true));
141 sl.setTop(c.getBottom(true));
142 size = this.el.getHeight();
143 break;
144 case 'south':
145 sl.setLeft(c.getLeft(true));
146 sl.setBottom(this.mgr.getViewSize().height-c.getTop(true));
147 size = this.el.getHeight();
148 break;
149 }
150 sl.dom.appendChild(this.el.dom);
151 YAHOO.util.Event.on(document.body, 'click', this.slideInIf, this, true);
152 sl.setSize(this.el.getWidth(), this.el.getHeight());
153 this.beforeSlide();
154 if(this.activePanel){
155 this.activePanel.setSize(this.bodyEl.getWidth(), this.bodyEl.getHeight());
156 }
157 sl.slideShow(this.getAnchor(), size, this.slideDuration, null, false);
158 sl.play(function(){
159 this.afterSlide();
160 }.createDelegate(this));
161 },
162
163 slideInIf : function(e){
164 var t = YAHOO.util.Event.getTarget(e);
165 if(!YAHOO.util.Dom.isAncestor(this.el.dom, t)){
166 this.slideIn();
167 }
168 },
169
170 slideIn : function(callback){
171 if(this.isSlid && !this.slideEl.playlist.isPlaying()){
172 YAHOO.util.Event.removeListener(document.body, 'click', this.slideInIf, this, true);
173 this.slideEl.startCapture(true);
174 this.slideEl.slideHide(this.getAnchor(), this.slideDuration, null);
175 this.beforeSlide();
176 this.slideEl.play(function(){
177 this.isSlid = false;
178 this.el.setPositioning(this.snapshot);
179 this.collapseBtn.setVisible(this.snapshot.colbtn);
180 this.closeBtn.setVisible(this.snapshot.closebtn);
181 this.afterSlide();
182 this.mgr.el.dom.appendChild(this.el.dom);
183 if(typeof callback == 'function'){
184 callback();
185 }
186 }.createDelegate(this));
187 }
188 },
189
190 animateExpand : function(){
191 var em = this.margins, cm = this.cmargins;
192 var c = this.collapsedEl, el = this.el;
193 var direction, distance;
194 switch(this.position){
195 case 'west':
196 direction = 'right';
197 el.setLeft(-(el.getWidth() + (em.right+em.left)));
198 el.setTop(c.getTop(true)-cm.top+em.top);
199 distance = el.getWidth() + (em.right+em.left);
200 break;
201 case 'east':
202 direction = 'left';
203 el.setLeft(this.mgr.getViewSize().width + em.left);
204 el.setTop(c.getTop(true)-cm.top+em.top);
205 distance = el.getWidth() + (em.right+em.left);
206 break;
207 case 'north':
208 direction = 'down';
209 el.setLeft(em.left);
210 el.setTop(-(el.getHeight() + (em.top+em.bottom)));
211 distance = el.getHeight() + (em.top+em.bottom);
212 break;
213 case 'south':
214 direction = 'up';
215 el.setLeft(em.left);
216 el.setTop(this.mgr.getViewSize().height + em.top);
217 distance = el.getHeight() + (em.top+em.bottom);
218 break;
219 }
220 this.beforeSlide();
221 el.setStyle('z-index', '100');
222 el.show();
223 c.setLocation(-2000,-2000);
224 c.hide();
225 el.move(direction, distance, true, this.duration, function(){
226 this.afterSlide();
227 el.setStyle('z-index', '');
228 if(this.split){
229 this.split.el.show();
230 }
231 this.fireEvent('invalidated', this);
232 this.fireEvent('expanded', this);
233 }.createDelegate(this), this.config.easing || YAHOO.util.Easing.easeOut);
234 },
235
236 animateCollapse : function(){
237 var em = this.margins, cm = this.cmargins;
238 var c = this.collapsedEl, el = this.el;
239 var direction, distance;
240 switch(this.position){
241 case 'west':
242 direction = 'left';
243 distance = el.getWidth() + (em.right+em.left);
244 break;
245 case 'east':
246 direction = 'right';
247 distance = el.getWidth() + (em.right+em.left);
248 break;
249 case 'north':
250 direction = 'up';
251 distance = el.getHeight() + (em.top+em.bottom);
252 break;
253 case 'south':
254 direction = 'down';
255 distance = el.getHeight() + (em.top+em.bottom);
256 break;
257 }
258 this.el.setStyle('z-index', '100');
259 this.beforeSlide();
260 this.el.move(direction, distance, true, this.duration, function(){
261 this.afterSlide();
262 this.el.setStyle('z-index', '');
263 this.el.setLocation(-20000,-20000);
264 this.el.hide();
265 this.collapsedEl.show();
266 this.fireEvent('collapsed', this);
267 }.createDelegate(this), YAHOO.util.Easing.easeIn);
268 },
269
270 getAnchor : function(){
271 switch(this.position){
272 case 'west':
273 return 'left';
274 case 'east':
275 return 'right';
276 case 'north':
277 return 'top';
278 case 'south':
279 return 'bottom';
280 }
281 }
282});