diff options
Diffstat (limited to 'docroot/classes/overlay.class.js')
-rwxr-xr-x | docroot/classes/overlay.class.js | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/docroot/classes/overlay.class.js b/docroot/classes/overlay.class.js new file mode 100755 index 0000000..9a6e110 --- /dev/null +++ b/docroot/classes/overlay.class.js | |||
@@ -0,0 +1,118 @@ | |||
1 | /* | ||
2 | * Material Experience - Document Overlay Class | ||
3 | * | ||
4 | * EYEMG - Interactive Media Group | ||
5 | * Created by Mike Crute (mcrute@eyemg.com) | ||
6 | * Updated by Mike Crute (mcrute@eyemg.com) on 9/26/07 | ||
7 | */ | ||
8 | |||
9 | var Overlay = Class.create(); | ||
10 | Object.extend(Overlay.prototype, | ||
11 | { | ||
12 | /* | ||
13 | * Initializes the overlay class | ||
14 | */ | ||
15 | initialize: function() | ||
16 | { | ||
17 | this.options = Object.extend( | ||
18 | { | ||
19 | zIndex: 9000, // z-index of the overlay | ||
20 | background: 'white', // Overlay color | ||
21 | opacity: 0.5, // Overlay opacity | ||
22 | fadeInSpeed: 0.2, // Fade in speed | ||
23 | fadeOutSpeed: 1, // Fade out speed | ||
24 | onClick: this.hide, // Callback for overlay click | ||
25 | onShow: Prototype.emptyFunction, // Callback when the overlay is shown | ||
26 | onHide: Prototype.emptyFunction // Callback when the overlay is hidden | ||
27 | }, $H(arguments[0]) || {}); | ||
28 | |||
29 | this._createOverlay(); | ||
30 | }, | ||
31 | |||
32 | /* | ||
33 | * Creates the actual DOM elements of the overlay. | ||
34 | */ | ||
35 | _createOverlay: function() | ||
36 | { | ||
37 | this.overlay = Element.extend(document.createElement('div')); | ||
38 | document.body.appendChild(this.overlay); | ||
39 | |||
40 | Event.observe(this.overlay, 'click', this.options.onClick.bindAsEventListener(this)); | ||
41 | |||
42 | this.overlay.setStyle( | ||
43 | { | ||
44 | backgroundColor: this.options.background, | ||
45 | zIndex: this.options.zIndex, | ||
46 | height: '100%', | ||
47 | width: '100%', | ||
48 | position: 'absolute', | ||
49 | display: 'none', | ||
50 | top: 0, | ||
51 | left: 0 | ||
52 | }); | ||
53 | }, | ||
54 | |||
55 | /* | ||
56 | * Displays the overlay. | ||
57 | */ | ||
58 | show: function() | ||
59 | { | ||
60 | this._fixBody(); | ||
61 | |||
62 | this.options.onShow(this); | ||
63 | |||
64 | new Effect.Appear(this.overlay, | ||
65 | { | ||
66 | to: this.options.opacity, | ||
67 | duration: this.options.fadeInSpeed, | ||
68 | limit: 1 | ||
69 | }); | ||
70 | }, | ||
71 | |||
72 | /* | ||
73 | * Hides the overlay. | ||
74 | */ | ||
75 | hide: function() | ||
76 | { | ||
77 | this.options.onHide(this); | ||
78 | |||
79 | new Effect.Fade(this.overlay, | ||
80 | { | ||
81 | duration: this.options.fadeOutSpeed, | ||
82 | limit: 1, | ||
83 | |||
84 | afterFinish: function() | ||
85 | { | ||
86 | this._fixBody(true); | ||
87 | }.bind(this) | ||
88 | }); | ||
89 | }, | ||
90 | |||
91 | /* | ||
92 | * Removes the overlay from the DOM | ||
93 | */ | ||
94 | destroy: function() | ||
95 | { | ||
96 | document.body.removeChild(this.overlay); | ||
97 | }, | ||
98 | |||
99 | /* | ||
100 | * Fix for IE 6, sets the body height and overflow so people can not | ||
101 | * scroll beyond the overlay. Disable overflow on the body and html | ||
102 | * so you can see the whole overlay. | ||
103 | */ | ||
104 | _fixBody: function(reset) | ||
105 | { | ||
106 | var myHeight = reset ? '' : '100%'; | ||
107 | var myOverflow = reset ? '' : 'hidden'; | ||
108 | |||
109 | $A([document.body,document.getElementsByTagName('html')[0]]).each(function(t) | ||
110 | { | ||
111 | Element.extend(t).setStyle( | ||
112 | { | ||
113 | height: myHeight, | ||
114 | overflow: myOverflow | ||
115 | }); | ||
116 | }); | ||
117 | } | ||
118 | }); \ No newline at end of file | ||