Subversion Repositories Applications.papyrus

Rev

Rev 1371 | Details | Compare with Previous | 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;