|
sholt@2682
|
1 |
<script type="text/javascript"> |
|
sholt@2682
|
2 |
isDebug = false; |
|
sholt@2682
|
3 |
|
|
sholt@2682
|
4 |
// Fade interval in milliseconds |
|
sholt@2682
|
5 |
// Make this larger if you experience performance issues |
|
sholt@2682
|
6 |
Fadomatic.INTERVAL_MILLIS = 50; |
|
sholt@2682
|
7 |
|
|
sholt@2682
|
8 |
// Creates a fader |
|
sholt@2682
|
9 |
// element - The element to fade |
|
sholt@2682
|
10 |
// speed - The speed to fade at, from 0.0 to 100.0 |
|
sholt@2682
|
11 |
// initialOpacity (optional, default 100) - element's starting opacity, 0 to 100 |
|
sholt@2682
|
12 |
// minOpacity (optional, default 0) - element's minimum opacity, 0 to 100 |
|
sholt@2682
|
13 |
// maxOpacity (optional, default 0) - element's minimum opacity, 0 to 100 |
|
sholt@2682
|
14 |
function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity) { |
|
sholt@2682
|
15 |
this._element = element; |
|
sholt@2682
|
16 |
this._intervalId = null; |
|
sholt@2682
|
17 |
this._rate = rate; |
|
sholt@2682
|
18 |
this._isFadeOut = true; |
|
sholt@2682
|
19 |
|
|
sholt@2682
|
20 |
// Set initial opacity and bounds |
|
sholt@2682
|
21 |
// NB use 99 instead of 100 to avoid flicker at start of fade |
|
sholt@2682
|
22 |
this._minOpacity = 0; |
|
sholt@2682
|
23 |
this._maxOpacity = 99; |
|
sholt@2682
|
24 |
this._opacity = 99; |
|
sholt@2682
|
25 |
|
|
sholt@2682
|
26 |
if (typeof minOpacity != 'undefined') { |
|
sholt@2682
|
27 |
if (minOpacity < 0) { |
|
sholt@2682
|
28 |
this._minOpacity = 0; |
|
sholt@2682
|
29 |
} else if (minOpacity > 99) { |
|
sholt@2682
|
30 |
this._minOpacity = 99; |
|
sholt@2682
|
31 |
} else { |
|
sholt@2682
|
32 |
this._minOpacity = minOpacity; |
|
sholt@2682
|
33 |
} |
|
sholt@2682
|
34 |
} |
|
sholt@2682
|
35 |
|
|
sholt@2682
|
36 |
if (typeof maxOpacity != 'undefined') { |
|
sholt@2682
|
37 |
if (maxOpacity < 0) { |
|
sholt@2682
|
38 |
this._maxOpacity = 0; |
|
sholt@2682
|
39 |
} else if (maxOpacity > 99) { |
|
sholt@2682
|
40 |
this._maxOpacity = 99; |
|
sholt@2682
|
41 |
} else { |
|
sholt@2682
|
42 |
this._maxOpacity = maxOpacity; |
|
sholt@2682
|
43 |
} |
|
sholt@2682
|
44 |
|
|
sholt@2682
|
45 |
if (this._maxOpacity < this._minOpacity) { |
|
sholt@2682
|
46 |
this._maxOpacity = this._minOpacity; |
|
sholt@2682
|
47 |
} |
|
sholt@2682
|
48 |
} |
|
sholt@2682
|
49 |
|
|
sholt@2682
|
50 |
if (typeof initialOpacity != 'undefined') { |
|
sholt@2682
|
51 |
if (initialOpacity > this._maxOpacity) { |
|
sholt@2682
|
52 |
this._opacity = this._maxOpacity; |
|
sholt@2682
|
53 |
} else if (initialOpacity < this._minOpacity) { |
|
sholt@2682
|
54 |
this._opacity = this._minOpacity; |
|
sholt@2682
|
55 |
} else { |
|
sholt@2682
|
56 |
this._opacity = initialOpacity; |
|
sholt@2682
|
57 |
} |
|
sholt@2682
|
58 |
} |
|
sholt@2682
|
59 |
|
|
sholt@2682
|
60 |
// See if we're using W3C opacity, MSIE filter, or just |
|
sholt@2682
|
61 |
// toggling visiblity |
|
sholt@2682
|
62 |
if(typeof element.style.opacity != 'undefined') { |
|
sholt@2682
|
63 |
|
|
sholt@2682
|
64 |
this._updateOpacity = this._updateOpacityW3c; |
|
sholt@2682
|
65 |
|
|
sholt@2682
|
66 |
} else if(typeof element.style.filter != 'undefined') { |
|
sholt@2682
|
67 |
|
|
sholt@2682
|
68 |
// If there's not an alpha filter on the element already, |
|
sholt@2682
|
69 |
// add one |
|
sholt@2682
|
70 |
if (element.style.filter.indexOf("alpha") == -1) { |
|
sholt@2682
|
71 |
|
|
sholt@2682
|
72 |
// Attempt to preserve existing filters |
|
sholt@2682
|
73 |
var existingFilters=""; |
|
sholt@2682
|
74 |
if (element.style.filter) { |
|
sholt@2682
|
75 |
existingFilters = element.style.filter+" "; |
|
sholt@2682
|
76 |
} |
|
sholt@2682
|
77 |
element.style.filter = existingFilters+"alpha(opacity="+this._opacity+")"; |
|
sholt@2682
|
78 |
} |
|
sholt@2682
|
79 |
|
|
sholt@2682
|
80 |
this._updateOpacity = this._updateOpacityMSIE; |
|
sholt@2682
|
81 |
|
|
sholt@2682
|
82 |
} else { |
|
sholt@2682
|
83 |
|
|
sholt@2682
|
84 |
this._updateOpacity = this._updateVisibility; |
|
sholt@2682
|
85 |
} |
|
sholt@2682
|
86 |
|
|
sholt@2682
|
87 |
this._updateOpacity(); |
|
sholt@2682
|
88 |
} |
|
sholt@2682
|
89 |
|
|
sholt@2682
|
90 |
// Initiates a fade out |
|
sholt@2682
|
91 |
Fadomatic.prototype.fadeOut = function () { |
|
sholt@2682
|
92 |
this._isFadeOut = true; |
|
sholt@2682
|
93 |
this._beginFade(); |
|
sholt@2682
|
94 |
} |
|
sholt@2682
|
95 |
|
|
sholt@2682
|
96 |
// Initiates a fade in |
|
sholt@2682
|
97 |
Fadomatic.prototype.fadeIn = function () { |
|
sholt@2682
|
98 |
this._isFadeOut = false; |
|
sholt@2682
|
99 |
this._beginFade(); |
|
sholt@2682
|
100 |
} |
|
sholt@2682
|
101 |
|
|
sholt@2682
|
102 |
// Makes the element completely opaque, stops any fade in progress |
|
sholt@2682
|
103 |
Fadomatic.prototype.show = function () { |
|
sholt@2682
|
104 |
this.haltFade(); |
|
sholt@2682
|
105 |
this._opacity = this._maxOpacity; |
|
sholt@2682
|
106 |
this._updateOpacity(); |
|
sholt@2682
|
107 |
} |
|
sholt@2682
|
108 |
|
|
sholt@2682
|
109 |
// Makes the element completely transparent, stops any fade in progress |
|
sholt@2682
|
110 |
Fadomatic.prototype.hide = function () { |
|
sholt@2682
|
111 |
this.haltFade(); |
|
sholt@2682
|
112 |
this._opacity = 0; |
|
sholt@2682
|
113 |
this._updateOpacity(); |
|
sholt@2682
|
114 |
} |
|
sholt@2682
|
115 |
|
|
sholt@2682
|
116 |
// Halts any fade in progress |
|
sholt@2682
|
117 |
Fadomatic.prototype.haltFade = function () { |
|
sholt@2682
|
118 |
|
|
sholt@2682
|
119 |
clearInterval(this._intervalId); |
|
sholt@2682
|
120 |
} |
|
sholt@2682
|
121 |
|
|
sholt@2682
|
122 |
// Resumes a fade where it was halted |
|
sholt@2682
|
123 |
Fadomatic.prototype.resumeFade = function () { |
|
sholt@2682
|
124 |
|
|
sholt@2682
|
125 |
this._beginFade(); |
|
sholt@2682
|
126 |
} |
|
sholt@2682
|
127 |
|
|
sholt@2682
|
128 |
// Pseudo-private members |
|
sholt@2682
|
129 |
|
|
sholt@2682
|
130 |
Fadomatic.prototype._beginFade = function () { |
|
sholt@2682
|
131 |
|
|
sholt@2682
|
132 |
this.haltFade(); |
|
sholt@2682
|
133 |
var objref = this; |
|
sholt@2682
|
134 |
this._intervalId = setInterval(function() { objref._tickFade(); },Fadomatic.INTERVAL_MILLIS); |
|
sholt@2682
|
135 |
} |
|
sholt@2682
|
136 |
|
|
sholt@2682
|
137 |
Fadomatic.prototype._tickFade = function () { |
|
sholt@2682
|
138 |
|
|
sholt@2682
|
139 |
if (this._isFadeOut) { |
|
sholt@2682
|
140 |
this._opacity -= this._rate; |
|
sholt@2682
|
141 |
if (this._opacity < this._minOpacity) { |
|
sholt@2682
|
142 |
this._opacity = this._minOpacity; |
|
sholt@2682
|
143 |
this.haltFade(); |
|
sholt@2682
|
144 |
} |
|
sholt@2682
|
145 |
} else { |
|
sholt@2682
|
146 |
this._opacity += this._rate; |
|
sholt@2682
|
147 |
if (this._opacity > this._maxOpacity ) { |
|
sholt@2682
|
148 |
this._opacity = this._maxOpacity; |
|
sholt@2682
|
149 |
this.haltFade(); |
|
sholt@2682
|
150 |
} |
|
sholt@2682
|
151 |
} |
|
sholt@2682
|
152 |
|
|
sholt@2682
|
153 |
this._updateOpacity(); |
|
sholt@2682
|
154 |
} |
|
sholt@2682
|
155 |
|
|
sholt@2682
|
156 |
Fadomatic.prototype._updateVisibility = function () { |
|
sholt@2682
|
157 |
|
|
sholt@2682
|
158 |
if (this._opacity > 0) { |
|
sholt@2682
|
159 |
this._element.style.visibility = 'visible'; |
|
sholt@2682
|
160 |
} else { |
|
sholt@2682
|
161 |
this._element.style.visibility = 'hidden'; |
|
sholt@2682
|
162 |
} |
|
sholt@2682
|
163 |
} |
|
sholt@2682
|
164 |
|
|
sholt@2682
|
165 |
Fadomatic.prototype._updateOpacityW3c = function () { |
|
sholt@2682
|
166 |
|
|
sholt@2682
|
167 |
this._element.style.opacity = this._opacity/100; |
|
sholt@2682
|
168 |
this._updateVisibility(); |
|
sholt@2682
|
169 |
} |
|
sholt@2682
|
170 |
|
|
sholt@2682
|
171 |
Fadomatic.prototype._updateOpacityMSIE = function () { |
|
sholt@2682
|
172 |
|
|
sholt@2682
|
173 |
this._element.filters.alpha.opacity = this._opacity; |
|
sholt@2682
|
174 |
this._updateVisibility(); |
|
sholt@2682
|
175 |
} |
|
sholt@2682
|
176 |
|
|
sholt@2682
|
177 |
Fadomatic.prototype._updateOpacity = null; |
|
sholt@2682
|
178 |
|
|
sholt@2682
|
179 |
|
|
sholt@2682
|
180 |
// Override CoalescedHTML methods |
|
sholt@2682
|
181 |
function outputHTML() { |
|
sholt@2682
|
182 |
var insert = document.getElementById("insert"); |
|
sholt@2682
|
183 |
if(!!insert && coalescedHTML.isConsecutive) { |
|
sholt@2682
|
184 |
insert.parentNode.replaceChild(coalescedHTML.fragment, insert); |
|
sholt@2682
|
185 |
} else { |
|
sholt@2682
|
186 |
if(insert) |
|
sholt@2682
|
187 |
insert.parentNode.removeChild(insert); |
|
sholt@2682
|
188 |
// insert the documentFragment into the live DOM |
|
sholt@2682
|
189 |
try { |
|
sholt@2682
|
190 |
var fader = new Fadomatic(coalescedHTML.fragment, 9, 0, 0, 95); |
|
sholt@2682
|
191 |
} catch(e) { |
|
sholt@2682
|
192 |
trace(e); |
|
sholt@2682
|
193 |
} |
|
sholt@2682
|
194 |
fader.fadeIn(); |
|
sholt@2682
|
195 |
} |
|
sholt@2682
|
196 |
|
|
sholt@2682
|
197 |
alignChat(coalescedHTML.shouldScroll); |
|
sholt@2682
|
198 |
|
|
sholt@2682
|
199 |
// reset state to empty/non-coalescing |
|
sholt@2682
|
200 |
coalescedHTML.shouldScroll = undefined; |
|
sholt@2682
|
201 |
coalescedHTML.isConsecutive = undefined; |
|
sholt@2682
|
202 |
coalescedHTML.isCoalescing = false; |
|
sholt@2682
|
203 |
coalescedHTML.coalesceRounds = 0; |
|
sholt@2682
|
204 |
} |
|
sholt@2682
|
205 |
|
|
sholt@2682
|
206 |
CoalescedHTML.prototype.coalesce = function() { |
|
sholt@2682
|
207 |
window.clearTimeout(this.timeoutID); |
|
sholt@2682
|
208 |
this.timeoutID = window.setTimeout(outputHTML, 25); |
|
sholt@2682
|
209 |
this.isCoalescing = true; |
|
sholt@2682
|
210 |
this.coalesceRounds += 1; |
|
sholt@2682
|
211 |
if(400 < self.coalesceRounds) |
|
sholt@2682
|
212 |
this.cancel(); |
|
sholt@2682
|
213 |
} |
|
sholt@2682
|
214 |
|
|
sholt@2682
|
215 |
|
|
sholt@2682
|
216 |
|
|
sholt@2682
|
217 |
</script> |