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.js | 281 |
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 | ||
49 | var CP = YAHOO.ext.ContentPanel; | ||
50 | |||
51 | layout.beginUpdate(); | ||
52 | layout.add('north', new CP('north', 'North')); | ||
53 | layout.add('south', new CP('south', {title: 'South', closable: true})); | ||
54 | layout.add('west', new CP('west', {title: 'West'})); | ||
55 | layout.add('east', new CP('autoTabs', {title: 'Auto Tabs', closable: true})); | ||
56 | layout.add('center', new CP('center1', {title: 'Close Me', closable: true})); | ||
57 | layout.add('center', new CP('center2', {title: 'Center Panel', closable: false})); | ||
58 | layout.getRegion('center').showPanel('center1'); | ||
59 | layout.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 | */ | ||
66 | YAHOO.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 | |||
85 | YAHOO.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 | |||
261 | YAHOO.ext.BorderLayout.RegionFactory = {}; | ||
262 | YAHOO.ext.BorderLayout.RegionFactory.validRegions = ['north','south','east','west','center']; | ||
263 | YAHOO.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 | }; | ||