Diffstat (limited to 'frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/layout/SplitLayoutRegion.js | 282 |
1 files changed, 282 insertions, 0 deletions
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 | }); | ||