author | Giulio Cesare Solaroli <giulio.cesare@solaroli.it> | 2011-10-03 16:04:12 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@solaroli.it> | 2011-10-03 16:04:12 (UTC) |
commit | 541bb378ddece2eab135a8066a16994e94436dea (patch) (unidiff) | |
tree | ff160ea3e26f7fe07fcfd401387c5a0232ca715e /frontend/beta/js/YUI-extensions/layout | |
parent | 1bf431fd3d45cbdf4afa3e12afefe5d24f4d3bc7 (diff) | |
parent | ecad5e895831337216544e81f1a467e0c68c4a6a (diff) | |
download | clipperz-541bb378ddece2eab135a8066a16994e94436dea.zip clipperz-541bb378ddece2eab135a8066a16994e94436dea.tar.gz clipperz-541bb378ddece2eab135a8066a16994e94436dea.tar.bz2 |
Merge pull request #1 from gcsolaroli/master
First version of the restructured repository
Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout') (more/less context) (ignore whitespace changes)
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 | */ | ||
8 | YAHOO.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 | |||
84 | YAHOO.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 | ||
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 | }; | ||
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 | */ | ||
4 | YAHOO.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 | |||
11 | YAHOO.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 | |||
30 | YAHOO.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 | }; | ||
41 | YAHOO.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 | |||
72 | YAHOO.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 | }; | ||
83 | YAHOO.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 | |||
118 | YAHOO.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 | }; | ||
129 | YAHOO.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 | |||
165 | YAHOO.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 | }; | ||
176 | YAHOO.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 | */ | ||
20 | YAHOO.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 | |||
70 | YAHOO.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 | */ | ||
245 | YAHOO.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 | |||
260 | YAHOO.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 | */ | ||
304 | YAHOO.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 | |||
311 | YAHOO.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 | */ | ||
6 | YAHOO.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 | |||
49 | YAHOO.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 | */ | ||
26 | YAHOO.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: ' '}, | ||
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 | |||
55 | YAHOO.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 : " "); | ||
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(' '); | ||
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: ' '}]}, 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 | */ | ||
4 | YAHOO.ext.LayoutStateManager = function(layout){ | ||
5 | // default empty state | ||
6 | this.state = { | ||
7 | north: {}, | ||
8 | south: {}, | ||
9 | east: {}, | ||
10 | west: {} | ||
11 | }; | ||
12 | }; | ||
13 | |||
14 | YAHOO.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 | */ | ||
6 | YAHOO.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 | |||
14 | YAHOO.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: ' '}); | ||
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 | }); | ||