Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js') (more/less context) (show whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/layout/BasicLayoutRegion.js | 265 |
1 files changed, 265 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 | }); | ||