Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1265 jp_milcent 1
/** $Id: fadomatic.js,v 1.1 2007-03-16 12:39:35 jp_milcent Exp $ */
2
// Title: Fadomatic
3
// Version: 1.2
4
// Homepage: http://chimpen.com/fadomatic
5
// Author: Philip McCarthy <fadomatic@chimpen.com>
6
 
7
// Fade interval in milliseconds
8
// Make this larger if you experience performance issues
9
Fadomatic.INTERVAL_MILLIS = 50;
10
 
11
// Creates a fader
12
// element - The element to fade
13
// speed - The speed to fade at, from 0.0 to 100.0
14
// initialOpacity (optional, default 100) - element's starting opacity, 0 to 100
15
// minOpacity (optional, default 0) - element's minimum opacity, 0 to 100
16
// maxOpacity (optional, default 0) - element's minimum opacity, 0 to 100
17
function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity) {
18
  this._element = element;
19
  this._intervalId = null;
20
  this._rate = rate;
21
  this._isFadeOut = true;
22
 
23
  // Set initial opacity and bounds
24
  // NB use 99 instead of 100 to avoid flicker at start of fade
25
  this._minOpacity = 0;
26
  this._maxOpacity = 99;
27
  this._opacity = 99;
28
 
29
  if (typeof minOpacity != 'undefined') {
30
    if (minOpacity < 0) {
31
      this._minOpacity = 0;
32
    } else if (minOpacity > 99) {
33
      this._minOpacity = 99;
34
    } else {
35
      this._minOpacity = minOpacity;
36
    }
37
  }
38
 
39
  if (typeof maxOpacity != 'undefined') {
40
    if (maxOpacity < 0) {
41
      this._maxOpacity = 0;
42
    } else if (maxOpacity > 99) {
43
      this._maxOpacity = 99;
44
    } else {
45
      this._maxOpacity = maxOpacity;
46
    }
47
 
48
    if (this._maxOpacity < this._minOpacity) {
49
      this._maxOpacity = this._minOpacity;
50
    }
51
  }
52
 
53
  if (typeof initialOpacity != 'undefined') {
54
    if (initialOpacity > this._maxOpacity) {
55
      this._opacity = this._maxOpacity;
56
    } else if (initialOpacity < this._minOpacity) {
57
      this._opacity = this._minOpacity;
58
    } else {
59
      this._opacity = initialOpacity;
60
    }
61
  }
62
 
63
  // See if we're using W3C opacity, MSIE filter, or just
64
  // toggling visiblity
65
  if(typeof element.style.opacity != 'undefined') {
66
 
67
    this._updateOpacity = this._updateOpacityW3c;
68
 
69
  } else if(typeof element.style.filter != 'undefined') {
70
 
71
    // If there's not an alpha filter on the element already,
72
    // add one
73
    if (element.style.filter.indexOf("alpha") == -1) {
74
 
75
      // Attempt to preserve existing filters
76
      var existingFilters="";
77
      if (element.style.filter) {
78
        existingFilters = element.style.filter+" ";
79
      }
80
      element.style.filter = existingFilters+"alpha(opacity="+this._opacity+")";
81
    }
82
 
83
    this._updateOpacity = this._updateOpacityMSIE;
84
 
85
  } else {
86
 
87
    this._updateOpacity = this._updateVisibility;
88
  }
89
 
90
  this._updateOpacity();
91
}
92
 
93
// Initiates a fade out
94
Fadomatic.prototype.fadeOut = function () {
95
  this._isFadeOut = true;
96
  this._beginFade();
97
}
98
 
99
// Initiates a fade in
100
Fadomatic.prototype.fadeIn = function () {
101
  this._isFadeOut = false;
102
  this._beginFade();
103
}
104
 
105
// Makes the element completely opaque, stops any fade in progress
106
Fadomatic.prototype.show = function () {
107
  this.haltFade();
108
  this._opacity = this._maxOpacity;
109
  this._updateOpacity();
110
}
111
 
112
// Makes the element completely transparent, stops any fade in progress
113
Fadomatic.prototype.hide = function () {
114
  this.haltFade();
115
  this._opacity = 0;
116
  this._updateOpacity();
117
}
118
 
119
// Halts any fade in progress
120
Fadomatic.prototype.haltFade = function () {
121
 
122
  clearInterval(this._intervalId);
123
}
124
 
125
// Resumes a fade where it was halted
126
Fadomatic.prototype.resumeFade = function () {
127
 
128
  this._beginFade();
129
}
130
 
131
// Pseudo-private members
132
 
133
Fadomatic.prototype._beginFade = function () {
134
 
135
  this.haltFade();
136
  var objref = this;
137
  this._intervalId = setInterval(function() { objref._tickFade(); },Fadomatic.INTERVAL_MILLIS);
138
}
139
 
140
Fadomatic.prototype._tickFade = function () {
141
 
142
  if (this._isFadeOut) {
143
    this._opacity -= this._rate;
144
    if (this._opacity < this._minOpacity) {
145
      this._opacity = this._minOpacity;
146
      this.haltFade();
147
    }
148
  } else {
149
    this._opacity += this._rate;
150
    if (this._opacity > this._maxOpacity ) {
151
      this._opacity = this._maxOpacity;
152
      this.haltFade();
153
    }
154
  }
155
 
156
  this._updateOpacity();
157
}
158
 
159
Fadomatic.prototype._updateVisibility = function () {
160
 
161
  if (this._opacity > 0) {
162
    this._element.style.visibility = 'visible';
163
  } else {
164
    this._element.style.visibility = 'hidden';
165
  }
166
}
167
 
168
Fadomatic.prototype._updateOpacityW3c = function () {
169
 
170
  this._element.style.opacity = this._opacity/100;
171
  this._updateVisibility();
172
}
173
 
174
Fadomatic.prototype._updateOpacityMSIE = function () {
175
 
176
  this._element.filters.alpha.opacity = this._opacity;
177
  this._updateVisibility();
178
}
179
 
180
Fadomatic.prototype._updateOpacity = null;