summaryrefslogtreecommitdiff
path: root/frontend/beta/js/YUI-extensions/layout/BorderLayout.js
Unidiff
Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout/BorderLayout.js') (more/less context) (ignore whitespace changes)
-rw-r--r--frontend/beta/js/YUI-extensions/layout/BorderLayout.js281
1 files changed, 281 insertions, 0 deletions
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};