1 | define(["dojo/_base/kernel", |
---|
2 | "dojo/_base/declare", |
---|
3 | "dojo/_base/array", |
---|
4 | "dojo/_base/event", |
---|
5 | "dojo/_base/sniff", |
---|
6 | "dojo/dom", |
---|
7 | "dojo/dom-attr", |
---|
8 | "dojo/dom-construct", |
---|
9 | "dojo/dom-geometry", |
---|
10 | "dojo/dom-style", |
---|
11 | "dojo/window", |
---|
12 | "dojo/_base/window", |
---|
13 | "dojo/_base/fx", |
---|
14 | "dojo/fx", |
---|
15 | "dijit/_Widget", |
---|
16 | "dijit/_TemplatedMixin", |
---|
17 | "dijit/registry"], |
---|
18 | |
---|
19 | function(kernel, |
---|
20 | declare, |
---|
21 | array, |
---|
22 | event, |
---|
23 | has, |
---|
24 | dom, |
---|
25 | attr, |
---|
26 | construct, |
---|
27 | geometry, |
---|
28 | domStyle, |
---|
29 | window, |
---|
30 | baseWindow, |
---|
31 | baseFx, |
---|
32 | fx, |
---|
33 | _Widget, |
---|
34 | _TemplatedMixin, |
---|
35 | registry) { |
---|
36 | |
---|
37 | kernel.experimental("dojox.widget.Standby"); |
---|
38 | |
---|
39 | return declare("dojox.widget.Standby", [_Widget, _TemplatedMixin],{ |
---|
40 | // summary: |
---|
41 | // A widget designed to act as a Standby/Busy/Disable/Blocking widget to indicate a |
---|
42 | // particular DOM node is processing and cannot be clicked on at this time. |
---|
43 | // This widget uses absolute positioning to apply the overlay and image. |
---|
44 | |
---|
45 | // image: String |
---|
46 | // A URL to an image to center within the blocking overlay. |
---|
47 | // The default is a basic spinner. |
---|
48 | image: require.toUrl("dojox/widget/Standby/images/loading.gif").toString(), |
---|
49 | |
---|
50 | // imageText: String |
---|
51 | // Text to set on the ALT tag of the image. |
---|
52 | // The default is 'Please wait...' |
---|
53 | imageText: "Please Wait...", // TODO: i18n |
---|
54 | |
---|
55 | // text: String |
---|
56 | // Text/HTML to display in the center of the overlay |
---|
57 | // This is used if image center is disabled. |
---|
58 | // Defaults to 'Please Wait...' |
---|
59 | text: "Please wait...", |
---|
60 | |
---|
61 | // centerIndicator: String |
---|
62 | // Property to define if the image and its alt text should be used, or |
---|
63 | // a simple Text/HTML node should be used. Allowable values are 'image' |
---|
64 | // and 'text'. |
---|
65 | // Default is 'image'. |
---|
66 | centerIndicator: "image", |
---|
67 | |
---|
68 | // target: DOMNode||DOMID(String)||WidgetID(String) |
---|
69 | // The target to overlay when active. Can be a widget id, a |
---|
70 | // dom id, or a direct node reference. |
---|
71 | target: "", |
---|
72 | |
---|
73 | // color: String |
---|
74 | // The color to set the overlay. Should be in #XXXXXX form. |
---|
75 | // Default color for the translucent overlay is light gray. |
---|
76 | color: "#C0C0C0", |
---|
77 | |
---|
78 | // duration: Integer |
---|
79 | // Integer defining how long the show and hide effects should take in milliseconds. |
---|
80 | // Defaults to 500 |
---|
81 | duration: 500, |
---|
82 | |
---|
83 | // zIndex: String |
---|
84 | // Control that lets you specify if the zIndex for the overlay |
---|
85 | // should be auto-computed based off parent zIndex, or should be set |
---|
86 | // to a particular value. This is useful when you want to overlay |
---|
87 | // things in digit.Dialogs, you can specify a base zIndex to append from. |
---|
88 | zIndex: "auto", |
---|
89 | |
---|
90 | // opacity: float |
---|
91 | // The opacity to make the overlay when it is displayed/faded in. |
---|
92 | // The default is 0.75. This does not affect the image opacity, only the |
---|
93 | // overlay. |
---|
94 | opacity: 0.75, |
---|
95 | |
---|
96 | // templateString: [protected] String |
---|
97 | // The template string defining out the basics of the widget. No need for an external |
---|
98 | // file. |
---|
99 | templateString: |
---|
100 | "<div>" + |
---|
101 | "<div style=\"display: none; opacity: 0; z-index: 9999; " + |
---|
102 | "position: absolute; cursor:wait;\" dojoAttachPoint=\"_underlayNode\"></div>" + |
---|
103 | "<img src=\"${image}\" style=\"opacity: 0; display: none; z-index: -10000; " + |
---|
104 | "position: absolute; top: 0px; left: 0px; cursor:wait;\" "+ |
---|
105 | "dojoAttachPoint=\"_imageNode\">" + |
---|
106 | "<div style=\"opacity: 0; display: none; z-index: -10000; position: absolute; " + |
---|
107 | "top: 0px;\" dojoAttachPoint=\"_textNode\"></div>" + |
---|
108 | "</div>", |
---|
109 | |
---|
110 | // _underlayNode: [private] DOMNode |
---|
111 | // The node that is the translucent underlay for the |
---|
112 | // image that blocks access to the target. |
---|
113 | _underlayNode: null, |
---|
114 | |
---|
115 | // _imageNode: [private] DOMNode |
---|
116 | // The image node where we attach and define the image to display. |
---|
117 | _imageNode: null, |
---|
118 | |
---|
119 | // _textNode: [private] DOMNode |
---|
120 | // The div to attach text/HTML in the overlay center item. |
---|
121 | _textNode: null, |
---|
122 | |
---|
123 | // _centerNode: [private] DOMNode |
---|
124 | // Which node to use as the center node, the image or the text node. |
---|
125 | _centerNode: null, |
---|
126 | |
---|
127 | // _displayed: [private] Boolean |
---|
128 | // Flag to indicate if the overlay is displayed or not. |
---|
129 | _displayed: false, |
---|
130 | |
---|
131 | // _resizeCheck: [private] Object |
---|
132 | // Handle to interval function that checks the target for changes. |
---|
133 | _resizeCheck: null, |
---|
134 | |
---|
135 | // _started: [private] Boolean |
---|
136 | // Trap flag to ensure startup only processes once. |
---|
137 | _started: false, |
---|
138 | |
---|
139 | // _parent: [private] DOMNode |
---|
140 | // Wrapping div for the widget, also used for IE 7 in dealing with the |
---|
141 | // zoom issue. |
---|
142 | _parent: null, |
---|
143 | |
---|
144 | startup: function(args){ |
---|
145 | // summary: |
---|
146 | // Over-ride of the basic widget startup function. |
---|
147 | // Configures the target node and sets the image to use. |
---|
148 | if(!this._started){ |
---|
149 | if(typeof this.target === "string"){ |
---|
150 | var w = registry.byId(this.target); |
---|
151 | this.target = w ? w.domNode : dom.byId(this.target); |
---|
152 | } |
---|
153 | |
---|
154 | if(this.text){ |
---|
155 | this._textNode.innerHTML = this.text; |
---|
156 | } |
---|
157 | if(this.centerIndicator === "image"){ |
---|
158 | this._centerNode = this._imageNode; |
---|
159 | attr.set(this._imageNode, "src", this.image); |
---|
160 | attr.set(this._imageNode, "alt", this.imageText); |
---|
161 | }else{ |
---|
162 | this._centerNode = this._textNode; |
---|
163 | } |
---|
164 | domStyle.set(this._underlayNode, { |
---|
165 | display: "none", |
---|
166 | backgroundColor: this.color |
---|
167 | }); |
---|
168 | domStyle.set(this._centerNode, "display", "none"); |
---|
169 | this.connect(this._underlayNode, "onclick", "_ignore"); |
---|
170 | |
---|
171 | //Last thing to do is move the widgets parent, if any, to the current document body. |
---|
172 | //Avoids having to deal with parent relative/absolute mess. Otherwise positioning |
---|
173 | //tends to go goofy. |
---|
174 | if(this.domNode.parentNode && this.domNode.parentNode != baseWindow.body()){ |
---|
175 | baseWindow.body().appendChild(this.domNode); |
---|
176 | } |
---|
177 | |
---|
178 | //IE 7 has a horrible bug with zoom, so we have to create this node |
---|
179 | //to cross-check later. Sigh. |
---|
180 | if(has("ie") == 7){ |
---|
181 | this._ieFixNode = construct.create("div"); |
---|
182 | domStyle.set(this._ieFixNode, { |
---|
183 | opacity: "0", |
---|
184 | zIndex: "-1000", |
---|
185 | position: "absolute", |
---|
186 | top: "-1000px" |
---|
187 | }); |
---|
188 | baseWindow.body().appendChild(this._ieFixNode); |
---|
189 | } |
---|
190 | this.inherited(arguments); |
---|
191 | } |
---|
192 | }, |
---|
193 | |
---|
194 | show: function(){ |
---|
195 | // summary: |
---|
196 | // Function to display the blocking overlay and busy/status icon or text. |
---|
197 | if(!this._displayed){ |
---|
198 | if(this._anim){ |
---|
199 | this._anim.stop(); |
---|
200 | delete this._anim; |
---|
201 | } |
---|
202 | this._displayed = true; |
---|
203 | this._size(); |
---|
204 | this._disableOverflow(); |
---|
205 | this._fadeIn(); |
---|
206 | } |
---|
207 | }, |
---|
208 | |
---|
209 | hide: function(){ |
---|
210 | // summary: |
---|
211 | // Function to hide the blocking overlay and status icon or text. |
---|
212 | if(this._displayed){ |
---|
213 | if(this._anim){ |
---|
214 | this._anim.stop(); |
---|
215 | delete this._anim; |
---|
216 | } |
---|
217 | this._size(); |
---|
218 | this._fadeOut(); |
---|
219 | this._displayed = false; |
---|
220 | if(this._resizeCheck !== null){ |
---|
221 | clearInterval(this._resizeCheck); |
---|
222 | this._resizeCheck = null; |
---|
223 | } |
---|
224 | } |
---|
225 | }, |
---|
226 | |
---|
227 | isVisible: function(){ |
---|
228 | // summary: |
---|
229 | // Helper function so you can test if the widget is already visible or not. |
---|
230 | // returns: |
---|
231 | // boolean indicating if the widget is in 'show' state or not. |
---|
232 | return this._displayed; // boolean |
---|
233 | }, |
---|
234 | |
---|
235 | onShow: function(){ |
---|
236 | // summary: |
---|
237 | // Event that fires when the display of the Standby completes. |
---|
238 | }, |
---|
239 | |
---|
240 | onHide: function(){ |
---|
241 | // summary: |
---|
242 | // Event that fires when the display of the Standby completes. |
---|
243 | }, |
---|
244 | |
---|
245 | uninitialize: function(){ |
---|
246 | // summary: |
---|
247 | // Over-ride to hide the widget, which clears intervals, before cleanup. |
---|
248 | this._displayed = false; |
---|
249 | if(this._resizeCheck){ |
---|
250 | clearInterval(this._resizeCheck); |
---|
251 | } |
---|
252 | domStyle.set(this._centerNode, "display", "none"); |
---|
253 | domStyle.set(this._underlayNode, "display", "none"); |
---|
254 | if(has("ie") == 7 && this._ieFixNode){ |
---|
255 | baseWindow.body().removeChild(this._ieFixNode); |
---|
256 | delete this._ieFixNode; |
---|
257 | } |
---|
258 | if(this._anim){ |
---|
259 | this._anim.stop(); |
---|
260 | delete this._anim; |
---|
261 | } |
---|
262 | this.target = null; |
---|
263 | this._imageNode = null; |
---|
264 | this._textNode = null; |
---|
265 | this._centerNode = null; |
---|
266 | this.inherited(arguments); |
---|
267 | }, |
---|
268 | |
---|
269 | _size: function(){ |
---|
270 | // summary: |
---|
271 | // Internal function that handles resizing the overlay and |
---|
272 | // centering of the image on window resizing. |
---|
273 | // tags: |
---|
274 | // private |
---|
275 | if(this._displayed){ |
---|
276 | var dir = attr.get(baseWindow.body(), "dir"); |
---|
277 | if(dir){dir = dir.toLowerCase();} |
---|
278 | var _ie7zoom; |
---|
279 | var scrollers = this._scrollerWidths(); |
---|
280 | |
---|
281 | var target = this.target; |
---|
282 | |
---|
283 | //Show the image and make sure the zIndex is set high. |
---|
284 | var curStyle = domStyle.get(this._centerNode, "display"); |
---|
285 | domStyle.set(this._centerNode, "display", "block"); |
---|
286 | var box = geometry.position(target, true); |
---|
287 | if(target === baseWindow.body() || target === baseWindow.doc){ |
---|
288 | // Target is the whole doc, so scale to viewport. |
---|
289 | box = window.getBox(); |
---|
290 | box.x = box.l; |
---|
291 | box.y = box.t; |
---|
292 | } |
---|
293 | |
---|
294 | var cntrIndicator = geometry.getMarginBox(this._centerNode); |
---|
295 | domStyle.set(this._centerNode, "display", curStyle); |
---|
296 | |
---|
297 | //IE has a horrible zoom bug. So, we have to try and account for |
---|
298 | //it and fix up the scaling. |
---|
299 | if(this._ieFixNode){ |
---|
300 | _ie7zoom = -this._ieFixNode.offsetTop / 1000; |
---|
301 | box.x = Math.floor((box.x + 0.9) / _ie7zoom); |
---|
302 | box.y = Math.floor((box.y + 0.9) / _ie7zoom); |
---|
303 | box.w = Math.floor((box.w + 0.9) / _ie7zoom); |
---|
304 | box.h = Math.floor((box.h + 0.9) / _ie7zoom); |
---|
305 | } |
---|
306 | |
---|
307 | //Figure out how to zIndex this thing over the target. |
---|
308 | var zi = domStyle.get(target, "zIndex"); |
---|
309 | var ziUl = zi; |
---|
310 | var ziIn = zi; |
---|
311 | |
---|
312 | if(this.zIndex === "auto"){ |
---|
313 | if(zi != "auto"){ |
---|
314 | ziUl = parseInt(ziUl, 10) + 1; |
---|
315 | ziIn = parseInt(ziIn, 10) + 2; |
---|
316 | }else{ |
---|
317 | //We need to search up the chain to see if there |
---|
318 | //are any parent zIndexs to overlay. |
---|
319 | var cNode = target.parentNode; |
---|
320 | var oldZi = -100000; |
---|
321 | while(cNode && cNode !== baseWindow.body()){ |
---|
322 | zi = domStyle.get(cNode, "zIndex"); |
---|
323 | if(!zi || zi === "auto"){ |
---|
324 | cNode = cNode.parentNode; |
---|
325 | }else{ |
---|
326 | var newZi = parseInt(zi, 10); |
---|
327 | if(oldZi < newZi){ |
---|
328 | oldZi = newZi; |
---|
329 | ziUl = newZi + 1; |
---|
330 | ziIn = newZi + 2; |
---|
331 | } |
---|
332 | // Keep looking until we run out, we want the highest zIndex. |
---|
333 | cNode = cNode.parentNode; |
---|
334 | } |
---|
335 | } |
---|
336 | } |
---|
337 | }else{ |
---|
338 | ziUl = parseInt(this.zIndex, 10) + 1; |
---|
339 | ziIn = parseInt(this.zIndex, 10) + 2; |
---|
340 | } |
---|
341 | |
---|
342 | domStyle.set(this._centerNode, "zIndex", ziIn); |
---|
343 | domStyle.set(this._underlayNode, "zIndex", ziUl); |
---|
344 | |
---|
345 | |
---|
346 | var pn = target.parentNode; |
---|
347 | if(pn && pn !== baseWindow.body() && |
---|
348 | target !== baseWindow.body() && |
---|
349 | target !== baseWindow.doc){ |
---|
350 | |
---|
351 | // If the parent is the body tag itself, |
---|
352 | // we can avoid all this, the body takes |
---|
353 | // care of overflow for me. Besides, browser |
---|
354 | // weirdness with height and width on body causes |
---|
355 | // problems with this sort of intersect testing |
---|
356 | // anyway. |
---|
357 | var obh = box.h; |
---|
358 | var obw = box.w; |
---|
359 | var pnBox = geometry.position(pn, true); |
---|
360 | |
---|
361 | //More IE zoom corrections. Grr. |
---|
362 | if(this._ieFixNode){ |
---|
363 | _ie7zoom = -this._ieFixNode.offsetTop / 1000; |
---|
364 | pnBox.x = Math.floor((pnBox.x + 0.9) / _ie7zoom); |
---|
365 | pnBox.y = Math.floor((pnBox.y + 0.9) / _ie7zoom); |
---|
366 | pnBox.w = Math.floor((pnBox.w + 0.9) / _ie7zoom); |
---|
367 | pnBox.h = Math.floor((pnBox.h + 0.9) / _ie7zoom); |
---|
368 | } |
---|
369 | |
---|
370 | //Shift the parent width/height a bit if scollers are present. |
---|
371 | pnBox.w -= pn.scrollHeight > pn.clientHeight && |
---|
372 | pn.clientHeight > 0 ? scrollers.v: 0; |
---|
373 | pnBox.h -= pn.scrollWidth > pn.clientWidth && |
---|
374 | pn.clientWidth > 0 ? scrollers.h: 0; |
---|
375 | |
---|
376 | //RTL requires a bit of massaging in some cases |
---|
377 | //(and differently depending on browser, ugh!) |
---|
378 | //WebKit and others still need work. |
---|
379 | if(dir === "rtl"){ |
---|
380 | if(has("opera")){ |
---|
381 | box.x += pn.scrollHeight > pn.clientHeight && |
---|
382 | pn.clientHeight > 0 ? scrollers.v: 0; |
---|
383 | pnBox.x += pn.scrollHeight > pn.clientHeight && |
---|
384 | pn.clientHeight > 0 ? scrollers.v: 0; |
---|
385 | }else if(has("ie")){ |
---|
386 | pnBox.x += pn.scrollHeight > pn.clientHeight && |
---|
387 | pn.clientHeight > 0 ? scrollers.v: 0; |
---|
388 | }else if(has("webkit")){ |
---|
389 | //TODO: FIX THIS! |
---|
390 | } |
---|
391 | } |
---|
392 | |
---|
393 | //Figure out if we need to adjust the overlay to fit a viewable |
---|
394 | //area, then resize it, we saved the original height/width above. |
---|
395 | //This is causing issues on IE. Argh! |
---|
396 | if(pnBox.w < box.w){ |
---|
397 | //Scale down the width if necessary. |
---|
398 | box.w = box.w - pnBox.w; |
---|
399 | } |
---|
400 | if(pnBox.h < box.h){ |
---|
401 | //Scale down the width if necessary. |
---|
402 | box.h = box.h - pnBox.h; |
---|
403 | } |
---|
404 | |
---|
405 | //Look at the y positions and see if we intersect with the |
---|
406 | //viewport borders. Will have to do computations off it. |
---|
407 | var vpTop = pnBox.y; |
---|
408 | var vpBottom = pnBox.y + pnBox.h; |
---|
409 | var bTop = box.y; |
---|
410 | var bBottom = box.y + obh; |
---|
411 | var vpLeft = pnBox.x; |
---|
412 | var vpRight = pnBox.x + pnBox.w; |
---|
413 | var bLeft = box.x; |
---|
414 | var bRight = box.x + obw; |
---|
415 | var delta; |
---|
416 | //Adjust the height now |
---|
417 | if(bBottom > vpTop && |
---|
418 | bTop < vpTop){ |
---|
419 | box.y = pnBox.y; |
---|
420 | //intersecting top, need to do some shifting. |
---|
421 | delta = vpTop - bTop; |
---|
422 | var visHeight = obh - delta; |
---|
423 | //If the visible height < viewport height, |
---|
424 | //We need to shift it. |
---|
425 | if(visHeight < pnBox.h){ |
---|
426 | box.h = visHeight; |
---|
427 | }else{ |
---|
428 | //Deal with horizontal scrollbars if necessary. |
---|
429 | box.h -= 2*(pn.scrollWidth > pn.clientWidth && |
---|
430 | pn.clientWidth > 0? scrollers.h: 0); |
---|
431 | } |
---|
432 | }else if(bTop < vpBottom && bBottom > vpBottom){ |
---|
433 | //Intersecting bottom, just figure out how much |
---|
434 | //overlay to show. |
---|
435 | box.h = vpBottom - bTop; |
---|
436 | }else if(bBottom <= vpTop || bTop >= vpBottom){ |
---|
437 | //Outside view, hide it. |
---|
438 | box.h = 0; |
---|
439 | } |
---|
440 | |
---|
441 | //adjust width |
---|
442 | if(bRight > vpLeft && bLeft < vpLeft){ |
---|
443 | box.x = pnBox.x; |
---|
444 | //intersecting left, need to do some shifting. |
---|
445 | delta = vpLeft - bLeft; |
---|
446 | var visWidth = obw - delta; |
---|
447 | //If the visible width < viewport width, |
---|
448 | //We need to shift it. |
---|
449 | if(visWidth < pnBox.w){ |
---|
450 | box.w = visWidth; |
---|
451 | }else{ |
---|
452 | //Deal with horizontal scrollbars if necessary. |
---|
453 | box.w -= 2*(pn.scrollHeight > pn.clientHeight && |
---|
454 | pn.clientHeight > 0? scrollers.w:0); |
---|
455 | } |
---|
456 | }else if(bLeft < vpRight && bRight > vpRight){ |
---|
457 | //Intersecting right, just figure out how much |
---|
458 | //overlay to show. |
---|
459 | box.w = vpRight - bLeft; |
---|
460 | }else if(bRight <= vpLeft || bLeft >= vpRight){ |
---|
461 | //Outside view, hide it. |
---|
462 | box.w = 0; |
---|
463 | } |
---|
464 | } |
---|
465 | |
---|
466 | if(box.h > 0 && box.w > 0){ |
---|
467 | //Set position and size of the blocking div overlay. |
---|
468 | domStyle.set(this._underlayNode, { |
---|
469 | display: "block", |
---|
470 | width: box.w + "px", |
---|
471 | height: box.h + "px", |
---|
472 | top: box.y + "px", |
---|
473 | left: box.x + "px" |
---|
474 | }); |
---|
475 | |
---|
476 | var styles = ["borderRadius", "borderTopLeftRadius", |
---|
477 | "borderTopRightRadius","borderBottomLeftRadius", |
---|
478 | "borderBottomRightRadius"]; |
---|
479 | this._cloneStyles(styles); |
---|
480 | if(!has("ie")){ |
---|
481 | //Browser specific styles to try and clone if non-IE. |
---|
482 | styles = ["MozBorderRadius", "MozBorderRadiusTopleft", |
---|
483 | "MozBorderRadiusTopright","MozBorderRadiusBottomleft", |
---|
484 | "MozBorderRadiusBottomright","WebkitBorderRadius", |
---|
485 | "WebkitBorderTopLeftRadius", "WebkitBorderTopRightRadius", |
---|
486 | "WebkitBorderBottomLeftRadius","WebkitBorderBottomRightRadius" |
---|
487 | ]; |
---|
488 | this._cloneStyles(styles, this); |
---|
489 | } |
---|
490 | var cntrIndicatorTop = (box.h/2) - (cntrIndicator.h/2); |
---|
491 | var cntrIndicatorLeft = (box.w/2) - (cntrIndicator.w/2); |
---|
492 | //Only show the image if there is height and width room. |
---|
493 | if(box.h >= cntrIndicator.h && box.w >= cntrIndicator.w){ |
---|
494 | domStyle.set(this._centerNode, { |
---|
495 | top: (cntrIndicatorTop + box.y) + "px", |
---|
496 | left: (cntrIndicatorLeft + box.x) + "px", |
---|
497 | display: "block" |
---|
498 | }); |
---|
499 | }else{ |
---|
500 | domStyle.set(this._centerNode, "display", "none"); |
---|
501 | } |
---|
502 | }else{ |
---|
503 | //Target has no size, display nothing on it! |
---|
504 | domStyle.set(this._underlayNode, "display", "none"); |
---|
505 | domStyle.set(this._centerNode, "display", "none"); |
---|
506 | } |
---|
507 | if(this._resizeCheck === null){ |
---|
508 | //Set an interval timer that checks the target size and scales as needed. |
---|
509 | //Checking every 10th of a second seems to generate a fairly smooth update. |
---|
510 | var self = this; |
---|
511 | this._resizeCheck = setInterval(function(){self._size();}, 100); |
---|
512 | } |
---|
513 | } |
---|
514 | }, |
---|
515 | |
---|
516 | _cloneStyles: function(list){ |
---|
517 | // summary: |
---|
518 | // Internal function to clone a set of styles from the target to |
---|
519 | // the underlay. |
---|
520 | // list: Array |
---|
521 | // An array of style names to clone. |
---|
522 | // |
---|
523 | // tags: |
---|
524 | // private |
---|
525 | array.forEach(list, function(s){ |
---|
526 | domStyle.set(this._underlayNode, s, domStyle.get(this.target, s)); |
---|
527 | }, this); |
---|
528 | }, |
---|
529 | |
---|
530 | _fadeIn: function(){ |
---|
531 | // summary: |
---|
532 | // Internal function that does the opacity style fade in animation. |
---|
533 | // tags: |
---|
534 | // private |
---|
535 | var self = this; |
---|
536 | var underlayNodeAnim = baseFx.animateProperty({ |
---|
537 | duration: self.duration, |
---|
538 | node: self._underlayNode, |
---|
539 | properties: {opacity: {start: 0, end: self.opacity}} |
---|
540 | }); |
---|
541 | var imageAnim = baseFx.animateProperty({ |
---|
542 | duration: self.duration, |
---|
543 | node: self._centerNode, |
---|
544 | properties: {opacity: {start: 0, end: 1}}, |
---|
545 | onEnd: function(){ |
---|
546 | self.onShow(); |
---|
547 | delete self._anim; |
---|
548 | } |
---|
549 | }); |
---|
550 | this._anim = fx.combine([underlayNodeAnim,imageAnim]); |
---|
551 | this._anim.play(); |
---|
552 | }, |
---|
553 | |
---|
554 | _fadeOut: function(){ |
---|
555 | // summary: |
---|
556 | // Internal function that does the opacity style fade out animation. |
---|
557 | // tags: |
---|
558 | // private |
---|
559 | var self = this; |
---|
560 | var underlayNodeAnim = baseFx.animateProperty({ |
---|
561 | duration: self.duration, |
---|
562 | node: self._underlayNode, |
---|
563 | properties: {opacity: {start: self.opacity, end: 0}}, |
---|
564 | onEnd: function(){ |
---|
565 | domStyle.set(this.node,{"display":"none", "zIndex": "-1000"}); |
---|
566 | } |
---|
567 | }); |
---|
568 | var imageAnim = baseFx.animateProperty({ |
---|
569 | duration: self.duration, |
---|
570 | node: self._centerNode, |
---|
571 | properties: {opacity: {start: 1, end: 0}}, |
---|
572 | onEnd: function(){ |
---|
573 | domStyle.set(this.node,{"display":"none", "zIndex": "-1000"}); |
---|
574 | self.onHide(); |
---|
575 | self._enableOverflow(); |
---|
576 | delete self._anim; |
---|
577 | } |
---|
578 | }); |
---|
579 | this._anim = fx.combine([underlayNodeAnim,imageAnim]); |
---|
580 | this._anim.play(); |
---|
581 | }, |
---|
582 | |
---|
583 | _ignore: function(e){ |
---|
584 | // summary: |
---|
585 | // Function to ignore events that occur on the overlay. |
---|
586 | // event: Event |
---|
587 | // The event to halt |
---|
588 | // tags: |
---|
589 | // private |
---|
590 | if(e){ |
---|
591 | event.stop(e); |
---|
592 | } |
---|
593 | }, |
---|
594 | |
---|
595 | _scrollerWidths: function(){ |
---|
596 | // summary: |
---|
597 | // This function will calculate the size of the vertical and |
---|
598 | // horizontaol scrollbars. |
---|
599 | // returns: |
---|
600 | // Object of form: {v: Number, h: Number} where v is vertical scrollbar width |
---|
601 | // and h is horizontal scrollbar width. |
---|
602 | // tags: |
---|
603 | // private |
---|
604 | var div = construct.create("div"); |
---|
605 | domStyle.set(div, { |
---|
606 | position: "absolute", |
---|
607 | opacity: 0, |
---|
608 | overflow: "hidden", |
---|
609 | width: "50px", |
---|
610 | height: "50px", |
---|
611 | zIndex: "-100", |
---|
612 | top: "-200px", |
---|
613 | padding: "0px", |
---|
614 | margin: "0px" |
---|
615 | }); |
---|
616 | var iDiv = construct.create("div"); |
---|
617 | domStyle.set(iDiv, { |
---|
618 | width: "200px", |
---|
619 | height: "10px" |
---|
620 | }); |
---|
621 | div.appendChild(iDiv); |
---|
622 | baseWindow.body().appendChild(div); |
---|
623 | |
---|
624 | //Figure out content size before and after |
---|
625 | //scrollbars are there, then just subtract to |
---|
626 | //get width. |
---|
627 | var b = geometry.getContentBox(div); |
---|
628 | domStyle.set(div, "overflow", "scroll"); |
---|
629 | var a = geometry.getContentBox(div); |
---|
630 | baseWindow.body().removeChild(div); |
---|
631 | return { v: b.w - a.w, h: b.h - a.h }; |
---|
632 | }, |
---|
633 | |
---|
634 | /* The following are functions that tie into _Widget.attr() */ |
---|
635 | |
---|
636 | _setTextAttr: function(text){ |
---|
637 | // summary: |
---|
638 | // Function to allow widget.attr to set the text displayed in center |
---|
639 | // if using text display. |
---|
640 | // text: String |
---|
641 | // The text to set. |
---|
642 | this._textNode.innerHTML = text; |
---|
643 | this.text = text; |
---|
644 | }, |
---|
645 | |
---|
646 | _setColorAttr: function(c){ |
---|
647 | // summary: |
---|
648 | // Function to allow widget.attr to set the color used for the translucent |
---|
649 | // div overlay. |
---|
650 | // c: String |
---|
651 | // The color to set the background underlay to in #XXXXXX format.. |
---|
652 | domStyle.set(this._underlayNode, "backgroundColor", c); |
---|
653 | this.color = c; |
---|
654 | }, |
---|
655 | |
---|
656 | _setImageTextAttr: function(text){ |
---|
657 | // summary: |
---|
658 | // Function to allow widget.attr to set the ALT text text displayed for |
---|
659 | // the image (if using image center display). |
---|
660 | // text: String |
---|
661 | // The text to set. |
---|
662 | attr.set(this._imageNode, "alt", text); |
---|
663 | this.imageText = text; |
---|
664 | }, |
---|
665 | |
---|
666 | _setImageAttr: function(url){ |
---|
667 | // summary: |
---|
668 | // Function to allow widget.attr to set the url source for the center image |
---|
669 | // text: String |
---|
670 | // The url to set for the image. |
---|
671 | attr.set(this._imageNode, "src", url); |
---|
672 | this.image = url; |
---|
673 | }, |
---|
674 | |
---|
675 | _setCenterIndicatorAttr: function(indicator){ |
---|
676 | // summary: |
---|
677 | // Function to allow widget.attr to set the node used for the center indicator, |
---|
678 | // either the image or the text. |
---|
679 | // indicator: String |
---|
680 | // The indicator to use, either 'image' or 'text'. |
---|
681 | this.centerIndicator = indicator; |
---|
682 | if(indicator === "image"){ |
---|
683 | this._centerNode = this._imageNode; |
---|
684 | domStyle.set(this._textNode, "display", "none"); |
---|
685 | }else{ |
---|
686 | this._centerNode = this._textNode; |
---|
687 | domStyle.set(this._imageNode, "display", "none"); |
---|
688 | } |
---|
689 | }, |
---|
690 | |
---|
691 | _disableOverflow: function(){ |
---|
692 | // summary: |
---|
693 | // Function to disable scrollbars on the body. Only used if the overlay |
---|
694 | // targets the body or the document. |
---|
695 | if(this.target === baseWindow.body() || this.target === baseWindow.doc){ |
---|
696 | // Store the overflow state we have to restore later. |
---|
697 | // IE had issues, so have to check that it's defined. Ugh. |
---|
698 | this._overflowDisabled = true; |
---|
699 | var body = baseWindow.body(); |
---|
700 | if(body.style && body.style.overflow){ |
---|
701 | this._oldOverflow = domStyle.get(body, "overflow"); |
---|
702 | }else{ |
---|
703 | this._oldOverflow = ""; |
---|
704 | } |
---|
705 | if(has("ie") && !has("quirks")){ |
---|
706 | // IE will put scrollbars in anyway, html (parent of body) |
---|
707 | // also controls them in standards mode, so we have to |
---|
708 | // remove them, argh. |
---|
709 | if(body.parentNode && |
---|
710 | body.parentNode.style && |
---|
711 | body.parentNode.style.overflow){ |
---|
712 | this._oldBodyParentOverflow = body.parentNode.style.overflow; |
---|
713 | }else{ |
---|
714 | try{ |
---|
715 | this._oldBodyParentOverflow = domStyle.get(body.parentNode, "overflow"); |
---|
716 | }catch(e){ |
---|
717 | this._oldBodyParentOverflow = "scroll"; |
---|
718 | } |
---|
719 | } |
---|
720 | domStyle.set(body.parentNode, "overflow", "hidden"); |
---|
721 | } |
---|
722 | domStyle.set(body, "overflow", "hidden"); |
---|
723 | } |
---|
724 | }, |
---|
725 | |
---|
726 | _enableOverflow: function(){ |
---|
727 | // summary: |
---|
728 | // Function to restore scrollbars on the body. Only used if the overlay |
---|
729 | // targets the body or the document. |
---|
730 | if(this._overflowDisabled){ |
---|
731 | delete this._overflowDisabled; |
---|
732 | var body = baseWindow.body(); |
---|
733 | // Restore all the overflow. |
---|
734 | if(has("ie") && !has("quirks")){ |
---|
735 | body.parentNode.style.overflow = this._oldBodyParentOverflow; |
---|
736 | delete this._oldBodyParentOverflow; |
---|
737 | } |
---|
738 | domStyle.set(body, "overflow", this._oldOverflow); |
---|
739 | if(has("webkit")){ |
---|
740 | //Gotta poke WebKit, or scrollers don't come back. :-( |
---|
741 | var div = construct.create("div", { style: { |
---|
742 | height: "2px" |
---|
743 | } |
---|
744 | }); |
---|
745 | body.appendChild(div); |
---|
746 | setTimeout(function(){ |
---|
747 | body.removeChild(div); |
---|
748 | }, 0); |
---|
749 | } |
---|
750 | delete this._oldOverflow; |
---|
751 | } |
---|
752 | } |
---|
753 | }); |
---|
754 | |
---|
755 | }); |
---|