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