fader.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. function smf_NewsFader(oOptions)
  2. {
  3. this.opt = oOptions;
  4. this.oFaderHandle = document.getElementById(this.opt.sFaderControlId);
  5. // Fade from... what text color? Default to black.
  6. this.oFadeFrom = 'oFadeFrom' in this.opt ? this.opt.oFadeFrom : {
  7. r: 0,
  8. g: 0,
  9. b: 0
  10. };
  11. // To which background color? Default to white.
  12. this.oFadeTo = 'oFadeTo' in this.opt ? this.opt.oFadeTo : {
  13. r: 255,
  14. g: 255,
  15. b: 255
  16. };
  17. // Surround each item with... anything special?
  18. this.sItemTemplate = 'sItemTemplate' in this.opt ? this.opt.sItemTemplate : '%1$s';
  19. // Fade delay (in milliseconds).
  20. this.iFadeDelay = 'iFadeDelay' in this.opt ? this.opt.iFadeDelay : 5000;
  21. // The array that contains all the lines of the news for display.
  22. this.aFaderItems = 'aFaderItems' in this.opt ? this.opt.aFaderItems : [];
  23. // Should we look for fader data, still?
  24. this.bReceivedItemsOnConstruction = 'aFaderItems' in this.opt;
  25. // The current item in smfFadeContent.
  26. this.iFadeIndex = -1;
  27. // Percent of fade (-64 to 510).
  28. this.iFadePercent = 510
  29. // Direction (in or out).
  30. this.bFadeSwitch = false;
  31. // Just make sure the page is loaded before calling the init.
  32. setTimeout(this.opt.sSelf + '.init();', 1);
  33. }
  34. smf_NewsFader.prototype.init = function init()
  35. {
  36. var oForeEl, oForeColor, oBackEl, oBackColor;
  37. // Try to find the fore- and background colors.
  38. if ('currentStyle' in this.oFaderHandle)
  39. {
  40. oForeColor = this.oFaderHandle.currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
  41. this.oFadeFrom = {
  42. r: parseInt(oForeColor[1]),
  43. g: parseInt(oForeColor[2]),
  44. b: parseInt(oForeColor[3])
  45. };
  46. oBackEl = this.oFaderHandle;
  47. while (oBackEl.currentStyle.backgroundColor == 'transparent' && 'parentNode' in oBackEl)
  48. oBackEl = oBackEl.parentNode;
  49. oBackColor = oBackEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
  50. this.oFadeTo = {
  51. r: eval('0x' + oBackColor[1]),
  52. g: eval('0x' + oBackColor[2]),
  53. b: eval('0x' + oBackColor[3])
  54. };
  55. }
  56. else if (!('opera' in window) && 'defaultView' in document)
  57. {
  58. oForeEl = this.oFaderHandle;
  59. while (document.defaultView.getComputedStyle(oForeEl, null).getPropertyCSSValue('color') == null && 'parentNode' in oForeEl && 'tagName' in oForeEl.parentNode)
  60. oForeEl = oForeEl.parentNode;
  61. oForeColor = document.defaultView.getComputedStyle(oForeEl, null).getPropertyValue('color').match(/rgb\((\d+), (\d+), (\d+)\)/);
  62. this.oFadeFrom = {
  63. r: parseInt(oForeColor[1]),
  64. g: parseInt(oForeColor[2]),
  65. b: parseInt(oForeColor[3])
  66. };
  67. oBackEl = this.oFaderHandle;
  68. while (document.defaultView.getComputedStyle(oBackEl, null).getPropertyCSSValue('background-color') == null && 'parentNode' in oBackEl && 'tagName' in oBackEl.parentNode)
  69. oBackEl = oBackEl.parentNode;
  70. oBackColor = document.defaultView.getComputedStyle(oBackEl, null).getPropertyValue('background-color');
  71. this.oFadeTo = {
  72. r: parseInt(oBackColor[1]),
  73. g: parseInt(oBackColor[2]),
  74. b: parseInt(oBackColor[3])
  75. };
  76. }
  77. // Did we get our fader items on construction, or should we be gathering them instead?
  78. if (!this.bReceivedItemsOnConstruction)
  79. {
  80. // Get the news from the list in boardindex
  81. var oNewsItems = this.oFaderHandle.getElementsByTagName('li');
  82. // Fill the array that has previously been created
  83. for (var i = 0, n = oNewsItems.length; i < n; i ++)
  84. this.aFaderItems[i] = oNewsItems[i].innerHTML;
  85. }
  86. // The ranges to fade from for R, G, and B. (how far apart they are.)
  87. this.oFadeRange = {
  88. 'r': this.oFadeFrom.r - this.oFadeTo.r,
  89. 'g': this.oFadeFrom.g - this.oFadeTo.g,
  90. 'b': this.oFadeFrom.b - this.oFadeTo.b
  91. };
  92. // Divide by 20 because we are doing it 20 times per one ms.
  93. this.iFadeDelay /= 20;
  94. // Start the fader!
  95. window.setTimeout(this.opt.sSelf + '.fade();', 20);
  96. }
  97. // Main fading function... called 50 times every second.
  98. smf_NewsFader.prototype.fade = function fade()
  99. {
  100. if (this.aFaderItems.length <= 1)
  101. return;
  102. // A fix for Internet Explorer 4: wait until the document is loaded so we can use setInnerHTML().
  103. if ('readyState' in document && document.readyState != 'complete')
  104. {
  105. window.setTimeout(this.opt.sSelf + '.fade();', 20);
  106. return;
  107. }
  108. // Starting out? Set up the first item.
  109. if (this.iFadeIndex == -1)
  110. {
  111. setInnerHTML(this.oFaderHandle, this.sItemTemplate.replace('%1$s', this.aFaderItems[0]));
  112. this.iFadeIndex = 1;
  113. // In Mozilla, text jumps around from this when 1 or 0.5, etc...
  114. if ('MozOpacity' in this.oFaderHandle.style)
  115. this.oFaderHandle.style.MozOpacity = '0.90';
  116. else if ('opacity' in this.oFaderHandle.style)
  117. this.oFaderHandle.style.opacity = '0.90';
  118. // In Internet Explorer, we have to define this to use it.
  119. else if ('filter' in this.oFaderHandle.style)
  120. this.oFaderHandle.style.filter = 'alpha(opacity=100)';
  121. }
  122. // Are we already done fading in? If so, fade out.
  123. if (this.iFadePercent >= 510)
  124. this.bFadeSwitch = !this.bFadeSwitch;
  125. // All the way faded out?
  126. else if (this.iFadePercent <= -64)
  127. {
  128. this.bFadeSwitch = !this.bFadeSwitch;
  129. // Go to the next item, or first if we're out of items.
  130. setInnerHTML(this.oFaderHandle, this.sItemTemplate.replace('%1$s', this.aFaderItems[this.iFadeIndex ++]));
  131. if (this.iFadeIndex >= this.aFaderItems.length)
  132. this.iFadeIndex = 0;
  133. }
  134. // Increment or decrement the fade percentage.
  135. if (this.bFadeSwitch)
  136. this.iFadePercent -= 255 / this.iFadeDelay * 2;
  137. else
  138. this.iFadePercent += 255 / this.iFadeDelay * 2;
  139. // If it's not outside 0 and 256... (otherwise it's just delay time.)
  140. if (this.iFadePercent < 256 && this.iFadePercent > 0)
  141. {
  142. // Easier... also faster...
  143. var tempPercent = this.iFadePercent / 255, rounded;
  144. if ('MozOpacity' in this.oFaderHandle.style)
  145. {
  146. rounded = Math.round(tempPercent * 100) / 100;
  147. this.oFaderHandle.style.MozOpacity = rounded == 1 ? '0.99' : rounded;
  148. }
  149. else if ('opacity' in this.oFaderHandle.style)
  150. {
  151. rounded = Math.round(tempPercent * 100) / 100;
  152. this.oFaderHandle.style.opacity = rounded == 1 ? '0.99' : rounded;
  153. }
  154. else
  155. {
  156. var done = false;
  157. if ('alpha' in this.oFaderHandle.filters)
  158. {
  159. try
  160. {
  161. this.oFaderHandle.filters.alpha.opacity = Math.round(tempPercent * 100);
  162. done = true;
  163. }
  164. catch (err)
  165. {
  166. }
  167. }
  168. if (!done)
  169. {
  170. // Get the new R, G, and B. (it should be bottom + (range of color * percent)...)
  171. var r = Math.ceil(this.oFadeTo.r + this.oFadeRange.r * tempPercent);
  172. var g = Math.ceil(this.oFadeTo.g + this.oFadeRange.g * tempPercent);
  173. var b = Math.ceil(this.oFadeTo.b + this.oFadeRange.b * tempPercent);
  174. // Set the color in the style, thereby fading it.
  175. this.oFaderHandle.style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
  176. }
  177. }
  178. }
  179. // Keep going.
  180. window.setTimeout(this.opt.sSelf + '.fade();', 20);
  181. }