author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
commit | ef68436ac04da078ffdcacd7e1f785473a303d45 (patch) (unidiff) | |
tree | c403752d66a2c4775f00affd4fa8431b29c5b68c /frontend/beta/js/YUI-extensions/layout/ContentPanels.js | |
parent | 597ecfbc0249d83e1b856cbd558340c01237a360 (diff) | |
download | clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.zip clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.gz clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.bz2 |
First version of the newly restructured repository
Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout/ContentPanels.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/layout/ContentPanels.js | 325 |
1 files changed, 325 insertions, 0 deletions
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 | }); | ||