Chris@76: function smf_NewsFader(oOptions) Chris@76: { Chris@76: this.opt = oOptions; Chris@76: Chris@76: this.oFaderHandle = document.getElementById(this.opt.sFaderControlId); Chris@76: Chris@76: // Fade from... what text color? Default to black. Chris@76: this.oFadeFrom = 'oFadeFrom' in this.opt ? this.opt.oFadeFrom : { Chris@76: r: 0, Chris@76: g: 0, Chris@76: b: 0 Chris@76: }; Chris@76: Chris@76: // To which background color? Default to white. Chris@76: this.oFadeTo = 'oFadeTo' in this.opt ? this.opt.oFadeTo : { Chris@76: r: 255, Chris@76: g: 255, Chris@76: b: 255 Chris@76: }; Chris@76: Chris@76: // Surround each item with... anything special? Chris@76: this.sItemTemplate = 'sItemTemplate' in this.opt ? this.opt.sItemTemplate : '%1$s'; Chris@76: Chris@76: // Fade delay (in milliseconds). Chris@76: this.iFadeDelay = 'iFadeDelay' in this.opt ? this.opt.iFadeDelay : 5000; Chris@76: Chris@76: // The array that contains all the lines of the news for display. Chris@76: this.aFaderItems = 'aFaderItems' in this.opt ? this.opt.aFaderItems : []; Chris@76: Chris@76: // Should we look for fader data, still? Chris@76: this.bReceivedItemsOnConstruction = 'aFaderItems' in this.opt; Chris@76: Chris@76: // The current item in smfFadeContent. Chris@76: this.iFadeIndex = -1; Chris@76: Chris@76: // Percent of fade (-64 to 510). Chris@76: this.iFadePercent = 510 Chris@76: Chris@76: // Direction (in or out). Chris@76: this.bFadeSwitch = false; Chris@76: Chris@76: // Just make sure the page is loaded before calling the init. Chris@76: setTimeout(this.opt.sSelf + '.init();', 1); Chris@76: } Chris@76: Chris@76: smf_NewsFader.prototype.init = function init() Chris@76: { Chris@76: var oForeEl, oForeColor, oBackEl, oBackColor; Chris@76: Chris@76: // Try to find the fore- and background colors. Chris@76: if ('currentStyle' in this.oFaderHandle) Chris@76: { Chris@76: oForeColor = this.oFaderHandle.currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/); Chris@76: this.oFadeFrom = { Chris@76: r: parseInt(oForeColor[1]), Chris@76: g: parseInt(oForeColor[2]), Chris@76: b: parseInt(oForeColor[3]) Chris@76: }; Chris@76: Chris@76: oBackEl = this.oFaderHandle; Chris@76: while (oBackEl.currentStyle.backgroundColor == 'transparent' && 'parentNode' in oBackEl) Chris@76: oBackEl = oBackEl.parentNode; Chris@76: Chris@76: oBackColor = oBackEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/); Chris@76: this.oFadeTo = { Chris@76: r: eval('0x' + oBackColor[1]), Chris@76: g: eval('0x' + oBackColor[2]), Chris@76: b: eval('0x' + oBackColor[3]) Chris@76: }; Chris@76: } Chris@76: else if (!('opera' in window) && 'defaultView' in document) Chris@76: { Chris@76: oForeEl = this.oFaderHandle; Chris@76: while (document.defaultView.getComputedStyle(oForeEl, null).getPropertyCSSValue('color') == null && 'parentNode' in oForeEl && 'tagName' in oForeEl.parentNode) Chris@76: oForeEl = oForeEl.parentNode; Chris@76: Chris@76: oForeColor = document.defaultView.getComputedStyle(oForeEl, null).getPropertyValue('color').match(/rgb\((\d+), (\d+), (\d+)\)/); Chris@76: this.oFadeFrom = { Chris@76: r: parseInt(oForeColor[1]), Chris@76: g: parseInt(oForeColor[2]), Chris@76: b: parseInt(oForeColor[3]) Chris@76: }; Chris@76: Chris@76: oBackEl = this.oFaderHandle; Chris@76: while (document.defaultView.getComputedStyle(oBackEl, null).getPropertyCSSValue('background-color') == null && 'parentNode' in oBackEl && 'tagName' in oBackEl.parentNode) Chris@76: oBackEl = oBackEl.parentNode; Chris@76: Chris@76: oBackColor = document.defaultView.getComputedStyle(oBackEl, null).getPropertyValue('background-color'); Chris@76: this.oFadeTo = { Chris@76: r: parseInt(oBackColor[1]), Chris@76: g: parseInt(oBackColor[2]), Chris@76: b: parseInt(oBackColor[3]) Chris@76: }; Chris@76: } Chris@76: Chris@76: // Did we get our fader items on construction, or should we be gathering them instead? Chris@76: if (!this.bReceivedItemsOnConstruction) Chris@76: { Chris@76: // Get the news from the list in boardindex Chris@76: var oNewsItems = this.oFaderHandle.getElementsByTagName('li'); Chris@76: Chris@76: // Fill the array that has previously been created Chris@76: for (var i = 0, n = oNewsItems.length; i < n; i ++) Chris@76: this.aFaderItems[i] = oNewsItems[i].innerHTML; Chris@76: } Chris@76: Chris@76: // The ranges to fade from for R, G, and B. (how far apart they are.) Chris@76: this.oFadeRange = { Chris@76: 'r': this.oFadeFrom.r - this.oFadeTo.r, Chris@76: 'g': this.oFadeFrom.g - this.oFadeTo.g, Chris@76: 'b': this.oFadeFrom.b - this.oFadeTo.b Chris@76: }; Chris@76: Chris@76: // Divide by 20 because we are doing it 20 times per one ms. Chris@76: this.iFadeDelay /= 20; Chris@76: Chris@76: // Start the fader! Chris@76: window.setTimeout(this.opt.sSelf + '.fade();', 20); Chris@76: } Chris@76: Chris@76: // Main fading function... called 50 times every second. Chris@76: smf_NewsFader.prototype.fade = function fade() Chris@76: { Chris@76: if (this.aFaderItems.length <= 1) Chris@76: return; Chris@76: Chris@76: // A fix for Internet Explorer 4: wait until the document is loaded so we can use setInnerHTML(). Chris@76: if ('readyState' in document && document.readyState != 'complete') Chris@76: { Chris@76: window.setTimeout(this.opt.sSelf + '.fade();', 20); Chris@76: return; Chris@76: } Chris@76: Chris@76: // Starting out? Set up the first item. Chris@76: if (this.iFadeIndex == -1) Chris@76: { Chris@76: setInnerHTML(this.oFaderHandle, this.sItemTemplate.replace('%1$s', this.aFaderItems[0])); Chris@76: this.iFadeIndex = 1; Chris@76: Chris@76: // In Mozilla, text jumps around from this when 1 or 0.5, etc... Chris@76: if ('MozOpacity' in this.oFaderHandle.style) Chris@76: this.oFaderHandle.style.MozOpacity = '0.90'; Chris@76: else if ('opacity' in this.oFaderHandle.style) Chris@76: this.oFaderHandle.style.opacity = '0.90'; Chris@76: // In Internet Explorer, we have to define this to use it. Chris@76: else if ('filter' in this.oFaderHandle.style) Chris@76: this.oFaderHandle.style.filter = 'alpha(opacity=100)'; Chris@76: } Chris@76: Chris@76: // Are we already done fading in? If so, fade out. Chris@76: if (this.iFadePercent >= 510) Chris@76: this.bFadeSwitch = !this.bFadeSwitch; Chris@76: Chris@76: // All the way faded out? Chris@76: else if (this.iFadePercent <= -64) Chris@76: { Chris@76: this.bFadeSwitch = !this.bFadeSwitch; Chris@76: Chris@76: // Go to the next item, or first if we're out of items. Chris@76: setInnerHTML(this.oFaderHandle, this.sItemTemplate.replace('%1$s', this.aFaderItems[this.iFadeIndex ++])); Chris@76: if (this.iFadeIndex >= this.aFaderItems.length) Chris@76: this.iFadeIndex = 0; Chris@76: } Chris@76: Chris@76: // Increment or decrement the fade percentage. Chris@76: if (this.bFadeSwitch) Chris@76: this.iFadePercent -= 255 / this.iFadeDelay * 2; Chris@76: else Chris@76: this.iFadePercent += 255 / this.iFadeDelay * 2; Chris@76: Chris@76: // If it's not outside 0 and 256... (otherwise it's just delay time.) Chris@76: if (this.iFadePercent < 256 && this.iFadePercent > 0) Chris@76: { Chris@76: // Easier... also faster... Chris@76: var tempPercent = this.iFadePercent / 255, rounded; Chris@76: Chris@76: if ('MozOpacity' in this.oFaderHandle.style) Chris@76: { Chris@76: rounded = Math.round(tempPercent * 100) / 100; Chris@76: this.oFaderHandle.style.MozOpacity = rounded == 1 ? '0.99' : rounded; Chris@76: } Chris@76: else if ('opacity' in this.oFaderHandle.style) Chris@76: { Chris@76: rounded = Math.round(tempPercent * 100) / 100; Chris@76: this.oFaderHandle.style.opacity = rounded == 1 ? '0.99' : rounded; Chris@76: } Chris@76: else Chris@76: { Chris@76: var done = false; Chris@76: if ('alpha' in this.oFaderHandle.filters) Chris@76: { Chris@76: try Chris@76: { Chris@76: this.oFaderHandle.filters.alpha.opacity = Math.round(tempPercent * 100); Chris@76: done = true; Chris@76: } Chris@76: catch (err) Chris@76: { Chris@76: } Chris@76: } Chris@76: Chris@76: if (!done) Chris@76: { Chris@76: // Get the new R, G, and B. (it should be bottom + (range of color * percent)...) Chris@76: var r = Math.ceil(this.oFadeTo.r + this.oFadeRange.r * tempPercent); Chris@76: var g = Math.ceil(this.oFadeTo.g + this.oFadeRange.g * tempPercent); Chris@76: var b = Math.ceil(this.oFadeTo.b + this.oFadeRange.b * tempPercent); Chris@76: Chris@76: // Set the color in the style, thereby fading it. Chris@76: this.oFaderHandle.style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')'; Chris@76: } Chris@76: } Chris@76: } Chris@76: Chris@76: // Keep going. Chris@76: window.setTimeout(this.opt.sSelf + '.fade();', 20); Chris@76: }